NexT主题配置

发表于 更新于 分类于 阅读次数： 本文字数： 2.9k 阅读时长 ≈ 3 分钟

本文基于hexo-theme-next主题插件配置的扫盲分享，节省你走弯路的时间。

链接站内文章

1
{% post_link 文章对应的文件名 %}

指定站点设置的年份

配置_config.next.yml

1
2
3
footer:
  # Specify the year when the site was setup. If not defined, current year will be used.
  since: 2021

添加本地搜索服务

安装npm包

1
yarn add hexo-generator-searchdb

配置_config.next.yml

1
2
local_search:
  enable: true

配置_config.yml

1
2
3
4
5
6
7
# Local Search
search:
  path: search.xml
  field: post
  content: true
  format: html
  limit: 10000

开启不蒜子统计

1
2
busuanzi_count:
  enable: true

主题自定义样式

配置_config.next.yml

1
2
custom_file_path:
 style: source/_data/styles.styl

source/_data/styles.styl为样式文件路径

添加评论系统gitalk

详见

站点页脚备案信息

1
2
3
4
footer:  
 beian:
    enable: true
    icp: 蜀ICP备2022016364号-1

配置最近文章

source/_data路径下新建sidebar.njk文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{# RecentPosts #}
{% if theme.recent_posts %}
  <div class="links-of-recent-posts site-overview-item animated">
    <div class="links-of-recent-posts-title">
      {% if theme.recent_posts.icon %}
      <i class="{{ theme.recent_posts.icon }} fa-fw"></i>
      {% endif %}
      {{ theme.recent_posts.title }}
    </div>
    <ul class="links-of-recent-posts-list">
      {% set posts = site.posts.sort('date', 'desc').toArray() %}
      {% for post in posts.slice('0', theme.recent_posts.max_count) %}
        <li class="links-of-recent-posts-item">
          {{ next_url(post.path, post.title, {title: post.path}) }}
        </li>
      {% endfor %}
    </ul>
  </div>
{% endif %}

source/_data/styles.styl增加样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 近期文章
.links-of-recent-posts {
  font-size: 0.8125em;
}

.links-of-recent-posts-title {
  font-size: 1.03em;
  font-weight: 600;
  margin-top: 0;
}

.links-of-recent-posts-list {
  list-style: none;
  margin: 0;
  padding: 0;  
}

配置_config.next.yml

1
2
custom_file_path:
 sidebar: source/_data/sidebar.njk
1
2
3
4
5
6
7
8
# 最近文章
recent_posts:
# 块标题
  title: 最近文章
# 图标
  icon: fa fa-history
# 最多多少文章链接
  max_count: 5

以更新时间倒叙排序，修改source/_data/sidebar.njk文件内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{# RecentPosts #}
{% if theme.recent_posts %}
  <div class="links-of-recent-posts site-overview-item animated">
    <div class="links-of-recent-posts-title">
      {% if theme.recent_posts.icon %}
      <i class="{{ theme.recent_posts.icon }} fa-fw"></i>
      {% endif %}
      {{ theme.recent_posts.title }}
    </div>
    <ul class="links-of-recent-posts-list">
      {% set posts = site.posts.sort('updated', 'desc').toArray() %}
      {% for post in posts.slice('0', theme.recent_posts.max_count) %}
        <li class="links-of-recent-posts-item">
          {{ next_url(post.path, post.title, {title: post.path}) }}
        </li>
      {% endfor %}
    </ul>
  </div>
{% endif %}

相关链接

[1] NexT 官方文档

[2] NexT Theme for Hexo Docs

[3] 请问博主，next或者hexo，链接站内文章的方法？

[4] GITALK - 一个基于 Github Issue 和 Preact 开发的评论插件

[5] Nunjucks