Hexo Next主题 Rss 侧边栏

Posted on In

无意间发现 Hexo 的 Next 主题也很好看，之前的 Yelee 主题使用了好久，决定换成 Next。在配置过程中遇到不少问题，主要有两点值得分享：

  • 不要直接在主题配置文件上进行修改
  • 修改RSS显示位置使其在首页显示

配置主题文件

根据 Hexo 官方的推荐，不要直接修改主题的配置文件

The file should be placed in your site folder, both yml and json are supported. theme inside _config.yml must be configured for Hexo to read _config.[theme].yml

根据推荐执行以下操作:

  1. 配置主题为 Next 主题
# _config.yml
theme: "next"

  1. 在 site 根目录新建 _config.next.yml文件

    touch _config.next.yml

  2. 打开 theme/next/_config.yml把需要修改的选项 copy 到 _config.next.yml中

    # _config.next.yml
# 设置网站图标
favicon:
  small: /favicon.ico
  medium: /favicon.ico
  apple_touch_icon: /apple-touch-icon.png
  safari_pinned_tab: /apple-touch-icon.png

  3. hexo启动时，会自动合并 _config.next.yml 与theme/next/_config.yml 的设置内容，从而达到配置主题的作用。

不直接修改theme/next/_config.yml的好处是，当拉取新的更新时，不会因修改了_config.yml而发生冲突。（每个主题都是一个独立的 git项目）

修改RSS显示位置

看到网上说Rss的显示位置由首页侧边栏的位置移动到了每篇文章的最底部，这显然是不适合的，因为订阅不是按文章订阅，而是直接在首页中订阅。

自定义RSS到侧边栏：请先确认已经安装 hexo-generator-feed插件

  1. 删除文章底部的Rss(整个 follow me 设置都删除)
# theme/next/layout/_macro/post.njk

# 删除以下代码
{%- if theme.follow_me %}
  {{ partial('_partials/post/post-followme.njk', {}, {cache: theme.cache.enable}) }}
{%- endif %}

  1. 修改 Rss 样式

    # theme/next/layout/_partials/post/post-followme.njk

<div class="followme"> # 修改为 <div class="">
  <span>{{ __('follow_me.welcome') }}</span> # 删除这一行
  <div class="social-list"> # #修改为 <div class="">
  # 省略部分源码

  2. 添加 Rss 到侧边栏(其实就是整个的 follwe me)

    # theme/next/layout/_partials/sidebar/site-overview.njk
{%- if theme.follow_me %}
  {{ partial('_partials/post/post-followme.njk', {}, {cache: theme.cache.enable}) }}
{%- endif %}

  3. 在站点配置文件中打开 Rss 设置

    # _config.yml
follow_me:
  RSS: /rss2.xml || fa fa-rss

  4. 重启站点即可，就可以看到 Rss 显示在侧边栏了