先前使用 Hueman 的主題，但是有些 plugin 還需要花時間研究才能加進去，後來決定用許多人推薦的 NexT，因為已經整合許多 plugin，只要修改設定檔就可以使用，但想像很美好，實際做起來也是不少問題...

Themes 架構變更

過去 NexT 主題和其他多數主題一樣會安裝在 themes 的資料夾底下，現在則是放到 node_modules 裡面，如果需要修改樣式設定，直接在網站的根目錄建立 _config.主題名稱.yml 檔案，再去調整設定值。

設定檔內容可以到 node_modules/hexo-theme-next 資料夾底下找他的 config.yml ，複製回網站根目錄來改（記得要改檔名，不然會跟原本 hexo 的 config 衝突），這種作法主要是讓主題的原始碼不要被更動，後續更新主題版本的時候比較不會出問題吧！

本篇文章使用版本
Hexo: 5.4.0
NexT: 8.8.2

左側選單顯示最新文章

NexT 已經有 hexo-related-popular-posts 套件來顯示最新文章列表的功能，但是這個套件似乎沒辦法正常運作，網路上有不少教學文章，但是 NexT 的架構檔案格式從 swig 改成 njk，照著舊的文章貼上不會成功，設定步驟如下：

1. 修改 _config.next.js，設定自定樣式檔案和近期文章的設定

   // 套用自定樣式檔案
   custom_file_path:
     sidebar: source/_data/sidebar.njk
   
   ...
   
   // 加入近期文章設定
   recent_posts_title: 近期文章
   recent_posts_layout: block
   recent_posts: true
   

2. 在網站根目錄的 source 資料夾新增 _data 資料夾，再建立 sidebar.njk 檔案。

3. 在 sidebar.njk 檔案裡面加入下段程式碼（跟 swig 版本就只差了一個 .toArray() ）

   {%- if theme.recent_posts %}
     <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
     <div class="links-of-blogroll-title">
         <!-- 設定你要的fa fa icon-->
         <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true" style="margin: 1rem 0.25rem 0.5rem 0"></i>
         {{ theme.recent_posts_title }}
     </div>
     <ul class="links-of-blogroll-list">
         {%- set posts = site.posts.sort('-date') %}
         {%- for post in posts.slice('0', '5').toArray() %}
         <li>
             <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
         </li>
         {%- endfor %}
     </ul>
     </div>
     {%- endif %}
   

4. 重新生成頁面，完成。

參考文章：大魔術熊貓工程師

導入Google Analytics

1. NexT 已經有做好相關配置，只要在 _config.next.js 設定就好：

   google_analytics:
     tracking_id: 自己的id
   

2. 有關這個追蹤 ID 在 NexT 的文件中有說明需要 UA 開頭，但是許多網路教學照著做只會拿到 G 開頭的追蹤碼，參考下個步驟的連結，乖乖申請 UA 開頭追蹤碼就沒問題了。

3. Google Analytics 取得『UA-』追蹤ID 官方文件

最後也分享一下成果網站，歡迎大家不吝指教，謝謝！