[Day33] Hexo x NexT - 显示最新文章、导入Google Analytics 的坑

先前使用 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 官方文件

最後也分享一下成果网站，欢迎大家不吝指教，谢谢！