Next主题优化

发表于

本文基于Next.Mist v8.1.0版本，更新主题后做了几点修改。

本地搜索设置

  • 安装hexo-generator-searchdb，在博客根目录执行
1
npm install hexo-generator-searchdb --save
  • 编辑博客配置文件
1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  • 编辑主题配置文件
1
2
3
# Local search
local_search:
  enable: true

隐藏部分文章

hexo-hide-posts插件

在博客根目录安装插件

1
npm install hexo-hide-posts --save

在博客配置文件_config.yml中添加如下配置，设置filter

1
2
3
4
5
6
7
8
9
# hexo-hide-posts
hide_posts:
  # 可以改成其他你喜欢的名字
  filter: hidden
  # 指定你想要传递隐藏文章的 generator，比如让所有隐藏文章在存档页面可见
  # 常见的 generators 有：index, tag, category, archive, sitemap, feed, etc.
  public_generators: []
  # 为隐藏的文章添加 noindex meta 标签，阻止搜索引擎收录
  noindex: true

在文章的 front-matter 中添加 hidden: true 即可隐藏文章。虽然文章在首页被隐藏了，但仍可以用链接访问。你可以在命令行运行 hexo hidden:list 来获取当前所有的已隐藏文章列表。插件也在 Local Variables 中添加了 all_posts 和 hidden_posts 变量，供自定义主题使用。

传递隐藏文章（可选）

Hexo页面的渲染需要使用模板，直接使用next中模板无法查看到隐藏文章，当然你也可以在站点_config.yml中设置public_generators中添加。例如：

1
2
3
# 指定你想要传递隐藏文章的 generator，比如让所有隐藏文章在存档页面可见
# 常见的 generators 有：index, tag, category, archive, sitemap, feed, etc.
public_generators: [archive]

此时，在你的归档archive页面，可查看到隐藏文章。但是这种隐藏不是我想要的，因为访问网站的人还是可以看到。

创建导航界面模板

进入博客目录/themes/next/layout，创建archive.njk的副本，重命名为hidden.njk(此处也可改为你喜欢的名字)，打开该文件，修改其中参数如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
{% extends '_layout.njk' %}
{% import '_macro/post-collapse.njk' as post_template with context %}
{% import '_macro/sidebar.njk' as sidebar_template with context %}

{% block title %}{{ __('title.archive') }} | {{ title }}{% endblock %}

{% block class %}archive posts-collapse{% endblock %}

{% block content %}

  {#####################}
  {### ARCHIVE BLOCK ###}
  {#####################}
  <div class="post-block">
    <div class="post-content">
      <div class="collection-title">
        {%- set posts_length = site.hidden_posts.length %} 
        # 修改为hidden_posts
        {%- if posts_length > 210 %}
          {%- set cheers = 'excellent' %}
        {% elif posts_length > 130 %}
          {%- set cheers = 'great' %}
        {% elif posts_length > 80 %}
          {%- set cheers = 'good' %}
        {% elif posts_length > 50 %}
          {%- set cheers = 'nice' %}
        {% elif posts_length > 30 %}
          {%- set cheers = 'ok' %}
        {% else %}
          {%- set cheers = 'um' %}
        {%- endif %}
        <span class="collection-header">{{ __('cheers.' + cheers) }}! {{ _p('counter.archive_posts', site.hidden_posts.length) }} {{ __('keep_on') }}</span>
        # 修改为hidden_posts
      </div>

      {{ post_template.render(site.hidden_posts) }}
      # 修改为hidden_posts

    </div>
  </div>
  {#########################}
  {### END ARCHIVE BLOCK ###}
  {#########################}

  {%- include '_partials/pagination.njk' -%}

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

创建导航页面

进入个人博客文件根目录

1
$ hexo new page hidden-posts

此处hidden-posts可改为喜欢的名字，之后可使用 https://yourblogsite/hidden-posts 访问

这时hexo会在soure文件下创建一个hidden-posts的文件夹，进入该文件夹，打开index.md文件，在front-matter设置layout为导航界面模板

1
2
3
4
5
---
title: 隐藏文章
date: '2020/10/04 11:45:14'
layout: hidden
---

博客添加reference

安装hexo-reference

1
npm install hexo-reference --save

编辑md文件时使用方法如下（使用时^后面不需要空格）

1
2
博客脚注[^ 1]。
[^ 1]: 我的博客。

保持footer在最底端

采用flexbox布局模型，我们将body的display属性设置为 flex，然后将方向属性设置为列；同时，将html和body元素的高度设置为100%，使其充满整个屏幕。

修改_layout.njk，在main和footer外围添加如下两行

1
2
3
4
5
<div id="container">
  <main class="main">
    ……
  </footer>
</div>

我们需要调整各个区域占用的页面空间，我们将通过flex 属性来达到这一目的，该属性实际包含了三个属性，分别是：

  • flex-grow：元素在同一容器中对可分配空间的分配比率，及扩展比率；
  • flex-shrink：如果空间不足，元素的收缩比率；
  • flex-basis：元素的伸缩基准值；

修改自定义样式文件source/_data/styles.styl，添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
#container{
    display: flex;
    flex-direction: column;
    height: 100%;
}
main{
    background: orange;
    flex: 1 0 auto;
}
footer{
    background: #333;
    flex: 0 0 auto;
}

Reference