重寫Hexo豆瓣影評外掛

怪異收集者發表於2020-12-15

不知道從什麼時候開始,習慣於在豆瓣找電影看,到了後來,就偶爾寫個電影觀後感,隨著看電影看的越來越多,可比較的東西就越來愈多,所以現在看完一部新電影,寫寫自己的感想就成了固定環節了,作為一種“動態”,能夠搬到部落格上與他人共享那是再好不過的了,找了一圈Hexo的外掛,發現都不怎麼好用,那麼索性就魔改個自己用的版本!

基於HEXO豆瓣外掛 hexo-douban 的二次開發插,強烈建議先試用原外掛,如果您覺得以下特性更能滿足您的需要,那麼再使用本外掛。

原外掛 hexo-douban 的不足:

  • 書影音、大部分人就想放影評
  • 樣式不好看,字型大小的一致性即顏色
  • 渲染全部觀影記錄,幾百部電影會導致有幾十頁翻頁,臃腫
  • 單純的構造豆瓣原頁面,在“已看”列表中,只會出現短評內容,長影評是另外的部分
  • 構造的頁面目錄較深,和部落格其他部分關聯度不夠
  • 主題相容性問題,valine部分的缺失
  • 移動端介面不適配/合適

對應的應對措施:

  • 砍掉多餘部分
  • 適當的美化了CSS
  • 設定拉取列表的長度控制
  • 魔改原有xpath解析邏輯,拉取長影評頁面內容,補全到“已看”列表
  • 改動原模板中樣式的位置,以便於無差別的插入到其他同原頁面,提升關聯度
  • 插入資原始檔和valine構建程式碼
  • 簡單的重寫了移動端樣式

本外掛的主要特性:

  • 原專案固有特性;
  • 重構模板頁面,支援移動適配;
  • 補全列表影評內容,支援短評和長影評(核心);
  • 支援生成指定長度的列表(對於觀影數量較多的使用者);
  • 樣式inline化,允許直接嵌入同源其他頁面;
    <div id="dbcontent"></div>
    <script>$('#dbcontent').load('./movies/index.html .hexo-douban-item:nth-child(1)');</script>
    

注意:本外掛構建的頁面完全不保證相容IE等上古瀏覽器,推廣使用現代瀏覽器,人人有責。

第一步:安裝

# 如果您使用過原外掛請先解除安裝之
$ npm uninstall --save hexo-douban
$ npm install --save hexo-douban-list

第二步:配置

將下面的配置寫入站點的配置檔案 _config.yml 裡(不是主題的配置檔案).

douban:
  user: ID(數字或字幕|無需引號)
  builtin: true
  movie:
    title: '生成頁面的標題'
    quote: '生成頁面的內容的導語'
    length: 2
    valine_id: WbLE88qfAcz4hSI5
    valine_key: ycqjmtEfUxuxD
  timeout: 10000 

注意:以上內容中務必確定 USER ID 的正確性!

  • user: 你的豆瓣ID.開啟豆瓣,登入賬戶,然後在右上角點選 “個人主頁” ,這時候位址列的URL大概是這樣:“https://www.douban.com/people/xxxxxx/” ,其中的"xxxxxx"就是你的個人ID了。
  • builtin: 是否將生成頁面的功能嵌入hexo shexo g中,預設嵌入(TRUE)即npm安裝後無需任何操作按原命令部署部落格即可生效。
  • title: 該頁面的標題。
  • quote: 寫在頁面開頭的一段話,支援html語法。
  • length: 預設值為2,非頁數,可以自由嘗試(建議取值:2-4)。
  • timeout: 爬取資料的超時時間,預設是 10000ms ,如果在使用時發現報了超時的錯(ETIMEOUT)可以把這個資料設定的大一點。

對於 valine_idvaline_key,主要針對的是Volantis主題(以及其他預設渲染評論區域的主題),如果您在測試時頁面沒有評論區域,則可以忽略這兩項,如果出現以下顯示則需要填寫此兩項。(這兩項是什麼?請移步Valine官方介紹

使用

注意,通常大家都喜歡用hexo d來作為hexo deploy命令的簡化,但是當安裝了hexo douban之後,就不能用hexo d了,因為hexo doubanhexo deploy的字首都是hexo d

升級

使用 npm install hexo-douban-list --update --save 直接更新。

測試

執行 hexo clean && hexo generate && hexo server,之後訪問 localhost:4000/movies 即可訪問生成的影評頁面。

刪除(可補回來)的內容

相比較於原專案,取消或刪除了以下內容:

  • 去掉了書籍和音樂,單純針對電影
  • 去掉了影評頁跳轉的選單按鈕
  • 去掉了以上專案涉及的配置開關

異常

如果構建頁面為空或404,且日誌輸出為 INFO 0 movies have been loaded in xx ms,這時懷疑您的IP由於多次請求豆瓣的頁面而被豆瓣封禁了,一般第二天會解禁,使用代理或更改IP即可解決。

相關文章