Hexo-Browsersync

發表於 | 分類於 | 0 comments

實現撰寫文章時，可自動刷新頁面預覽，不用再手動F5了。

前言

實現刷新功能，需要完成的事情有：

  1. 安裝套件 Hexo-Browsersync
  2. 解決文章太長-渲染失敗Bug
  3. 執行 hexo server，即可。

操作步骤

1.安裝套件

1
$ npm install hexo-browsersync --save

2.修正Bug

  1. 安裝 hexo-renderer-jade 插件

    1
    $ npm install hexo-renderer-jade --save

  2. 在你的 node_modules 文件夾裡找到 hexo-renderer-pug 的文件夾，然後將裡面 lib/renderer.js 的其中一行代碼 註解 掉：

    1
    //pugRenderer.compile = pugCompile;

  3. 新增 _config.yml 的設定。 參考：issue

    新增路徑：~/blog/_config.yml
    1
    2
    server: 
        compress:  true  #開啟壓縮

3.執行

1
$ hexo s

啟動 hexo server 後，你會看到下列的訊息

1
2
3
4
5
6
7
8
INFO  Start processing
[Browsersync] Access URLs:
 --------------------------------------
          UI: http://localhost:3001
 --------------------------------------
 UI External: http://192.168.1.135:3001
 --------------------------------------
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

port:3001 可修改 browsersync 相關設定。
port:4000 Blog的預覽畫面。

參考文章

Hexo 实现实时预览编辑
Hexo不重新生成也可预览

修正渲染不全問題