READr 開放敘事元件原始碼

簡信昌
READr
Published in
Aug 13, 2022

最近由於我們持續在研究把整個 CMS 系統升級,並且整合成一個可以多用的系統。經過一連串的艱困跟測試,終於等到了六年前開始使用的 Keystonejs 有了大幅的改善,可以大幅節省開發的時間。於是前陣子在思考一些敘事套件怎麼可以重用時,就把接下來準備拿來當 CMS 的框架直接先拿來用。雖然對於大部分的團隊來說,要可以自己把這套系統架起來可能還有一些難度,未來我們也希望可以把某些元件開放讓其他編輯室可以一起來用(但必須先解決產生出來的 embed code 不會佔用我們自己的流量資源這個問題)。但在此之前,我們還是先把程式碼開放。

所以有興趣的話,可以先到這裡下載原始碼:

在這次釋出的原始碼中,有包含這些元件讓一般編輯室可以直接使用:

  1. Liveblog:這個其實有不少 News room 已經有自己開發的,但也還是講一下我們的作法。在我們的 editools 裡面,可以用

編輯 Liveblog 跟其中的每一則新聞的內容,編完之後,就會自動產生最新的 json,在我們自己的 use case,就會把 json 上傳到 google cloud 上,再由前端隨時去抓取最新的 json 在野面的呈現。就可以做成大家自己想要的樣子,我們的第一次使用則是這篇:

接下來,會有另一個元件是拿來做問卷、問題、小測驗等等的,我們第一次的範例就是隔離資訊查詢器的查詢器本身:

但其實這個編輯會有點複雜,他可能會包含其中幾個部分:Form 的本身

接下來會需要要去設計整個測驗/問卷的選項,例如這次的專題非常複雜的選項跟相對應的解答(政策內容):

完成之後,整個工具可以產生一組 embed code,讓大家直接嵌進上稿系統,成果就會像是下圖:

不過這次的確診追蹤器除了這個元件之外,還有另外的元件包含類似 FAQ 的問答元件,這個編輯比較單純,就只需要把問題、解答都填上,就可以產生出像這樣的元件嵌入碼:

當然,ˊ在整個專題的設計中,我們也希望可以獲得使用者的回饋,所以乾脆也一不做、二不休(?),也把這個回饋的表單做成元件:

所以大家如果把這整個編輯工具裝起來的話,這個也可以直接使用。只是未來我們開放,應該也沒辦法開放這個元件可以共用。畢竟這個完全會把資料存在我們的資料庫,大家可能也不想吧。

除了以上的一些套件之外,還有兩個在 source code 裡有的,但這裡就先打住,等待下次再來揭曉吧,當然有興趣的朋友裝起來試試就會知道了。

當然,在開放大家一起來使用之前,先開放原始碼,也是希望能有更多有興趣使用的編輯台,也有機會投資一些工程師的資源,繼續讓這些工具有更多改善跟擴充的機會。所以,patches welcome!

--

--

簡信昌
READr
Editor for

工程師 / 攝影師 / 資料新聞 各種興趣,目前擔任資料新聞媒體《READr》總編輯。對於新聞媒體未來想像充滿興趣,也希望透過技術改變新聞媒體的為來樣貌。同時也思考著如何以鏡頭與藝術創作面對自己的人生。