緣起

這個專案是在 2016 年 5 月開始進行的,原本是希望將資工系上學長姐平時發表的技術可以寫成一個高品質的文章,並且儲存在自己系上,所以邀請幾個學長姐參與這個部落格的開發。

像是 Medium、Wordpress...etc 類的現成部落格框架或寫作平台並不符合我們希望自幹的個性,當然製作這個系統也只有自幹這一條路。

因此考慮後使用 Node.js ,並使用 Express, MongoDB 來打造系統。

如果你對這份專案有興趣,歡迎到 Github 參考: https://github.com/hpcslag/newspaper

開發的構想

開發時的 Roadmap 定義:

  • 基本的文章瀏覽
    • 文章的評價、推薦、留言與評價
    • hashtag 標籤來定義文章的分類
  • 首頁文章搜尋
    • 熱門文章掛在第一頁
    • 受到其他作者推薦可以排在第一位
    • 不同技術分類
  • 作者寫作後台
  • Email 使用者訂閱
    • Email 取消訂閱連結
  • RSS

在構想時,考慮了其實一進來瀏覽網頁的人,一開始應該就是正在尋找答案,而比較少人會沒事閒閒上這個網站找到教學文章來看。 因此考慮瀏覽網站時可以把搜尋搜尋擺在前面,讓瀏覽者先來找到他們所想要的步驟教學。

第一次開發

MongoDB ObjectId

這個網站的文章 id 是使用 MongoDB 產生的 objectId,在使用上會稍微有點差別,差別在於使用 MongoJS 的時候,要用這個方式來查找單一文章:

db.article.findOne(  
    { _id: mongojs.ObjectId("xxxxxxxxxxx") },
    function(err,doc){
        //execute code here.
});

WYSIWYG 編輯器

由於作者需要編寫文章,這時則需要為他們弄來一個線上豐富文字編輯器,一開始沒有特別考慮 Markdown ,以後有機會在加進去。

安裝 Code View

這類技術文章在編寫時,肯定會用到外來的 Code Highlight 框架,因此嵌入時,需要利用 Code View 模式來貼上程式碼,這裡就需要安裝 Code View 外掛,結果我一直以為 code view 是要安裝 <script type="text/javascript" src="./js/plugins/code_view.min.js"></script> 後來看了官方說明才發現也要同時安裝 codemirror.js

圖片上傳

便捷上傳圖片也是編輯器重要的功能之一,安裝這個外掛只要在 js 執行加入 imageUploadURL 這個參數:

$(function() {
    $('div#froala-editor').froalaEditor({
        language: 'zh_tw',
        imageUploadURL: '/upload_image'
    });
});

然後這個上傳路由之後,要回傳這段 JSON 給前端:

{link: 'path/to/image.jpg'}

這樣前端編輯器就可以成功嵌入 Image Upload 功能到上面。

建構軟體執行結構

隔一年後的想法

這個系統在第一次並沒有設計到可以推出一個 Release,直到一年後,也就是這個文章寫作的不久前,推出了可以使用的版本。

繼之前所設計的資料結構,像是換頁設計(頁碼)、hashtag、like 實在設計得太爛了,就連 REST API 到最後其實也不需要這些過多的設計,看了當初的 TODO List 就會覺得,一年前的自己追求的只是開發一堆的 REST API 然後再到前端利用 Auth 去做撈取的動作,後來這才發現其實根本不需要做到那麼複雜的設計,利用純渲染模板的方式,其實也可以搞定一切。

第二次開發

首先,在首頁設計部份,長這樣: 首頁文字原本不是斜斜的,是因為後來越看越覺得文字有死板的感覺,所以特別做了隨機選擇文字顏色,順便把文字弄斜斜的。

一開始首頁就要以最新文章為主,這樣一進來就算要查資料,也可以順便留意到新文章的資訊。

接著就是下方的文章總覽,原本圖片是擺在左側,而且才沒有切邊的感覺,就是因為看起來太正式又死板,所以乾脆把預覽圖丟在右側,然後切斜片,讓他看起來有層疊的感覺。 (還沒加上陰影)

說到這裡,我使用的是 CSS 的黑科技 clip,這裡有個產生器可以依照比例來切你的圖片,還蠻好用的: http://bennettfeely.com/clippy/

以上以下,這個網站的全部 CSS 框架是使用 Semantic UI,搭配一些修改就會很好看,不過我也只有在前臺設計比較細心一點,管理員後台則不是這麼的好:

有點粗糙的設計,然後我還在網頁做了很特別的彩蛋,只要進網頁敲鍵盤 asdf 就會打開最高管理員開關,可以編輯所有作者的文章,雖然這樣做有點腦殘,太偷懶了。

新增文章這邊,就看到了把線上內文編輯器搬上來的感覺,我還加上了 Tagging.js 來讓作者輸入 Hashtag:

使用方法

要安裝這個框架之前,需要先設定好 MongoDB,並且打開,確定是 localhost:27017。

接著就從 npm 上面安裝 nwsp:

npm install -g nwsp  

然後輸入 nwsp init 來開啟初始化協助工具,再問到 MongoDB 的時候,要注意 IP 位置要加上 Port 號碼:

localhost:27017  

如果是本機的 MongoDB,可以選擇不需要驗證,就可以訪問資料庫。

設定好之後,單純輸入這個指令就可以啟動了:

nwsp  

結論

這個網站發出第一個 Release 時,目前不管是 Config Command 還是 init command 都還有進步的空間,等待之後會繼續實現更多的功能,在軟體架構部分,雖然切的還是沒有那麼細,但是至少達到理想的效果,這點讓自己十分高興。

結果因為測試的關係,不小心把一堆 public 的 images 一併放到 commit 上傳,GG。