导语

所有问题均按照问题，详细问题，问题分析，结局方案给出等样式进行分析与解答

问题一：如何使用段落首行缩进

详细问题：新版的Next主题 怎么设置首行缩进，

问题分析：旧版可以通过修改有custom.styl文件来修改文件的内容，而官方文档中里面写道有下面的话，但是我还是无法设置缩进

注意，在修改配置选项时，不要更改配置的缩进；

目前，NexT 的所有配置都采用2 空格的缩进；

解决方式：

在配置文件中，取消 custom_file_path.postBodyEnd 前的注释：

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

在 Hexo 根目录下，进入（若不存在则创建）source/_data 目录，在该目录下创建 styles.styl 文件。

在此文件中，写入如下内容：

1
.post-body p { text-indent: 2em; }

问题二：如何在next中设置深色模式：

详细问题：如何设置深色模式？

问题分析：

解决方式：7.7.2 版本中，NexT主题加入了新功能 Dark Mode。在配置文件中设置darkmode: true，并在支持深色模式的操作系统中，使用支持prefers-color-scheme属性的浏览器，于夜间浏览即可体验

问题三：如何在Next中使用阅读全文

详细问题：略

问题分析：略

解决方式：三种方式

  1. 在每篇文章如title: Next6.0以上主题配置的那些坑的标题下面增加一个description: 本文所要描述的事情
  2. 在文章的你选定的任何部分用<!--more--> 便会从这里开始断开 实现阅读全文

问题四：如何渲染图片以及实现滑动切换图片

详细问题：图片实现上一张和下一种的滑动切换

问题分析：实现该功能的基础是在文章中插入图片。该项功能的效果是：点击文中插图，图片能够放大，有幻灯片的效果。目前 NexT 提供了两款插件 fancybox 和 mediumzoom，两款插件开启一个即可。两款插件的效果不同，各有各的特点，我推荐使用 fancybox

解决方式：

在主题配置文件中找到以下代码

1
2
3
4
5
6
7
8
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: false

# A JavaScript library for zooming images like Medium.
# Do not enable both `fancybox` and `mediumzoom`.
# For more information: https://github.com/francoischalifour/medium-zoom
mediumzoom: false

修改任意一个如fancybox:true

问题五：开启标签云功能

详细问题：开启标签功能之后显示标签动起来

问题分析:

解决方式:目前有一个标签云插件可以提供这样的效果：hexo-tag-cloud。执行 npm install hexo-tag-cloud --save 进行安装。插件安装完成后，你可以自定义标签云的位置，比如显示在侧栏，或者显示在标签页面。比如选择显示在侧边栏页面，则在 ~/themes/next/layout/_macro/sidebar.swig 中，添加如下所示代码

1
2
3
4
5
6
7
8
9
10
11
12
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
<div class="widget-wrap">
    <h3 class="widget-title">标签云</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
        <canvas width="250" height="250" id="resCanvas" style="width=100%">
            {{ list_tags() }}
        </canvas>
    </div>
</div>
{%- endif %}

注意添加的位置如下所示

image-20200630162733082

问题六：多张相片并排显示

详细问题： 使用Next 自带的标签功能，完成多张图片的并排显示

问题分析:

解决方式:

其中6表示表示共有多少张图片，2表示一行排布多少张

1
2
3
{% gp 6-2 %}
中间是图片
{% endgp %}

问题七：修改底部标签样式

详细问题： 文章底部标签样式太丑

问题分析:

解决方式:打开模板文件 /themes/next/layout/_macro/post.swig，找到 for tag in post.tags 部分，将 # 换成 ``，如下:

1
2
3
{%- for tag in post.tags.toArray() %}
              <a href="{{ url_for(tag.path) }}" rel="tag"> <i class="fa fa-tag"></i> {{ tag.name }}</a>
            {%- endfor %}

问题八：添加站点运行时间

详细问题：

问题分析:

解决方式:

问题九：文章加密访问

详细问题： 给特定的文章加密

问题分析:

解决方式:打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码：

插入位置

1
2
3
4
5
6
7
8
9
10
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

在文章中写成这样

另外 这是解决Typora 上传图片时所可能遇见的问题

参考连接：https://zhuanlan.zhihu.com/p/114175770

问题10：文字增加背景色块

详细问题：类似官网中给需要选定的文字 增加背景色块，明白文字的内容对应什么

问题分析:

需要完成的效果 如图所示：配置文件背景色块结果

解决方式: 打开themes\next\source\_data\styles.styl ，如果没有就创建。在尾部加入以下代码

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// 颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}
span#inline-red {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #d81b1b;
}

在你需要编辑的文章地方。放置如下代码：

站点配置文件

站点配置文件 

1
2
3
4
5
<span id="inline-blue"> 站点配置文件 </span>
<span id="inline-purple"> 主题配置文件 </span>
<span id="inline-yellow"> 站点配置文件 </redspan>
<span id="inline-green"> 主题配置文件 </span>
<span id="inline-red"> 例子 </span>

问题11：编辑 index.md 组织专题目录

详细问题：

问题分析:

解决方式:像文章一样编辑 index.md 即可，引用站内文章可以用如下 hexo 语法：

1
{% post_link post-name post-title %}

post_link：为站内文章引用的关键字，照抄就行。

post-name：为你的 md 文件的名字，不带日期。

post-title：给该文章起的链接标题，为空的话就会从文章中提取。

问题12 ：修改Next里面的字体

详细问题:如何修改Next主题中各个部分中的字体，包括标题，站点，段落等等

问题分析: 修改字体无非就是两种方式。第一种用本地的字体，英文还好，就是26个字母，而中文成千上万个字，如果使用本地字体就是导入大量的文件，打开速度会过慢。第二种方式就是利用网络上提供的字体的API，可以达到这个水平。但是这个问题需要访问谷歌，没有科学上网的同志就算了，别乱改了。下面只给出利用Google Font 给出的链接进行操作

解决方式：

第一步：打开next\_config.xml 按Ctrl + F 进行查找 font: enable: true 定位到下面的代码：（我已做出修改）

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
font:
  enable: true

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host: https://fonts.googleapis.com

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Noto Serif SC
    size:

  # Font settings for site title (.site-title).
  title:
    external: true
    family: Liu Jian Mao Cao
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family:
    size:

  # Font settings for posts (.post-body).
  posts:
    external: true
    family:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Source Code Pro

第二步：对比自己的那部分代码。修改全局变量的global中的family 为 Noto Serif SC，或者是自己去到Google Font去寻找合适的汉字字体。至于其他的变量需要自己去看英文对照修改字体就好。

参考链接:修改字体/

问题13：添加音乐

详细问题：

问题分析:

解决方式：

这里推荐 hexo-tag-aplayer，APlayer 播放器的 Hexo 标签插件。安装命令：

1
npm install hexo-tag-aplayer --save

添加文件如下

1
{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

显示结果：


        

        




问题14：文章阴影和分割线
详细问题：主页的文章与文章之间的间隔不符合自己心意，没有分割表明这是不同的文章，不易于区分不同的文章


问题分析


解决方式：打开themes\next\source\_data\styles.styl ，如果没有就创建。在尾部加入以下代码。


这一步是设置文章间距和分割线的


1
2
3
4
5
6
7
8
9
10
.posts-expand {
  .post-eof {
    display: block;
    margin: 70px auto 50px; //文章间距
    width: 40%;  //分割线长度
    height: 2px;
    background: $grey-light;
    text-align: center;
  }
}



问题15：设定文章在首页隐藏
详细问题：设定一种方式，生成文章不能在首页被看到，却可以在通过特定的连接访问到：


问题分析：


解决方式：


第一步：安装 hexo-hide-posts 插件 npm install hexo-hide-posts --save


第二步：修改站点文件_config.yml：


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



第三步，在font-matter处制定文章的基本内容，例子如下


1
2
3
4
5
6
7
8
9
---
title:  岛屿数量
date: 2020-4-20 18点30分
tags:
- leetcode
categories:
- 幻想世界系列
hidden: true
---



第四步：可以通过标签的方式进行访问，具体操作看此文章的问题11


参考连接：Hexo-hide-post 插件


问题16：添加文件夹在首页
问题解释：想要在hexo 中添加如下效果，也就在首页添加一些选项


解决方法：


第一步：


在source文件夹下创建如下的文件夹，注意看包含了什么文件夹，按照这样的标准来

image-20200630160207555
第二步：然后在next主题配置文件下搜索menu，也就是菜单，添加类似如下内容，即可


1
life: /life/ || angllist


image-20200630160100778


第三步：打开next/languages文件夹，修改zh-CN 内容，如下所示

image-20200630163333117


第四步：最终结果

image-20200630160705346


问题17：针对问题4进行的优化
问题解释：使用的fancybox插件，发现在使用过程中，使用![image-20200702152914542](https://gitee.com/Ldity/image/raw/master/img/20200702152952.png)的语法进行载入图片的情况，会显示 底部文字与图片显示过近，因为其中的line-height = 1 所以，不太美观。所以更进一步进行优化，使其行高变宽，更加事宜观看。

image-20200702152914542


解决方式：


在 Hexo 根目录下，进入（若不存在则创建）source/_data 目录，在该目录下创建 styles.styl 文件，


然后在其中输入


1
2
3
4
5
6
7
8
9
.post-body .image-caption,
.post-body .figure .caption {
  color: #999;
  font-size: 0.875em;
  font-weight: bold;
  line-height: 3;
  margin: -20px auto 15px;
  text-align: center;
}