1、【对线面试官】今天来聊聊Java注解

什么是注解？

• 注解在我的理解下，就是代码中的特殊标记，这些标记可以在编译、类加载、运行时被读取，并执行相对应的处理。

开发中用到的注

1. 注解其实在开发中是非常常见的，比如我们在使用各种框架时（像我们Java程序员接触最多的还是Spring框架一套） ，就会用到非常多的注解，@Controller I@Param / @Select等等
2. 一些项目也用到lombok的注解，@SIf4j/@Data等等
3. 除了框架实现的注解，Java原生也有@ Overried、 @Deprecated、 @Functional Interface等基本注解
4. 不过Java原生的基本注解大多数用于「标记」和「检查」
   • 原生Java除了这些提供基本注解之外，还有一种叫做元Annotation（元注解），所谓的元Annotation就是用来修饰注解的
   • 常用的元Annotation有@Retention和@Target
   • @Retention注解可以简单理解为设置注解的生命周期，而@Target表示这个注解可以修饰哪些地方（比如方法、还是成员变量、还是包等等）

自己定义过的注解，在项目里边用的

1. 嗯，写过的。背景是这样的：我司有个监控告警系统，对外提供了客户端供我们自己使用。监控一般的指标就是QPS、RT和错误嘛。
2. 原生的客户端需要在代码里指定上报这会导致这种监控的代码会跟业务代码混合，比较恶心。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

public void send(String userName) {
  try {
    // qps 上报
    qps(params);
    long startTime = System.currentTimeMillis();

    // 构建上下文(模拟业务代码）
    ProcessContext processContext = new ProcessContext();
    UserModel userModel = new UserModel();
    userModel.setAge("22");
    userModel.setName(userName);
    //...

    // rt 上报
    long endTime = System.currentTimeMillis();
    rt(endTime - startTime);
  } catch (Exception e) {
    
    // 出错上报
    error(params);
  }
}

1. 其实这种基础的监控信息，显然都可以通过AOP切面的方式去处理掉（可以看到都是方法级的）。而再用注解这个载体配置相关的信息，配合AOP解析就会比较优雅

2. 要写自定义的注解，首先考虑我们是在什么时候解析这个注解。这就需要用到前面所说的@Retention注解，这个注解会修饰我们自定义注解生命周期。

3. @Retention注解传入的是RetentionPolic y枚举，该枚举有三个常量，分别是SOU RCE、 CLASS和RUNTIME

4. 理解这块就得了解从.java文件到class文件再到class被jvm加载的过程了。下面的图描述着从.java文件到编译为class文件的过程

   

5. 从上面的图可以发现有个「注解抽象语法树」，这里其实就会去解析注解，然后做处理的逻辑。

6. 所以重点来了，如果你想要在编译期间处理注解相关的逻辑，你需要继承AbstractProcessor并实现process方法。比如可以看到lombok就用AnnotationProcessor继承了AbstractProcessor。

7. 一般来说，只要自定义的注解中@Retention注解设置为SOURCE和CLASS这俩个级别，那么就需要继承并实现

8. 因为SOURCE和CLASS这俩个级别等加载到jvm的时候，注解就被抹除了

9. 从这里又引申出：lombok的实现原理就是在这（为什么使用了个@Data这样的注解就能有set/get等方法了，就是在这里加上去的）

自定义注解的级别

1. 一般来说，我们自己定义的注解都是RUNTIME级别的，因为大多数情况我们是根据运行时环境去做一些处理。
2. 我们现实在开发的过程中写自定义注解需要配合反射来使用
3. 因为反射是Java获取运行时的信息的重要手段
4. 所以，我当时就用了自定义注解，在SpringAOP的逻辑处理中，判断是否带有自定义注解，如果有则将监控的逻辑写在方法的前后
5. 这样，只要在方法上加上我的注解，那就可以有对方法监控的效果（RT、QPS、ERROR)

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

@Around("@annotation(com.sanwai.service.openapi.monitor.Monitor)")
public Object antispan(ProceedingJoinPoint pjp) throws Throwable {

    String functionName = pjp.getSignature().getName();
    Map<String, String> tags = new HashMap<>();

    logger.info(functionName);

    tags.put("functionName", functionName);
    tags.put("flag", "done");

    monitor.sum(functionName, "start", 1);

    //方法执行开始时间
    long startTime = System.currentTimeMillis();

    Object o = null;
    try {
        o = pjp.proceed();
    } catch (Exception e) {
        //方法执行结束时间
        long endTime = System.currentTimeMillis();

        tags.put("flag", "fail");
        monitor.avg("rt", tags, endTime - startTime);

        monitor.sum(functionName, "fail", 1);
        throw e;
    }

    //方法执行结束时间
    long endTime = System.currentTimeMillis();

    monitor.avg("rt", tags, endTime - startTime);

    if (null != o) {
        monitor.sum(functionName, "done", 1);
    }
    return o;
}

总结

1. 注解是代码的特殊标记，可以在编译、类加载、运行时被读取
2. 其实对应的就是RetentionPolicy枚举三种级别
3. SOURCE和CLASS级别需要继承AbstractProcessor，实现process方法去处理我们自定义的注解
4. 而RUNTIME级别是我们日常开发用得最多了，配合Java反射机制可以在很多场景优化我们的代码

展示态度（嗯，总体来看，你对注解这块基础还是扎实的。）

• 主要是在工作中遇到注解的时候就多看看原理是怎么实现的，然后遇到业务机会，还是会写写，优化优化下代码

Hexo博客文章加密

前言

平时开发过程中遇到的一些问题，我都会整理到文档中。有些感觉不错的，会二次整理成文章发布到我的博客中。但是有些文章如果存在隐私内容，或者不打算公开的话，就不能放在博客中了。

我的博客是使用 Hexo 来搭建的，并不能设置某些文章不可见。但如果不在电脑旁或者出门没有带电脑又想要查看一下之前记录的内容，就很不方便了。

我也尝试在 github 上去找一些可以设置账户的开源的博客框架，但测试过一些后发现并没有符合自己需求的，而自己开发却没有时间。

思来想去，就想看看有没有插件能够实现 Hexo 博客的加密操作。最终让我找到了一款名为 Hexo-Blog-Encrypt 的插件。

为了防止以下的修改可能出现版本差异，这里我先声明我使用的 Hexo 版本信息：

1
2
3
4

hexo: 4.2.1
hexo-cli: 3.1.0
next theme version: 7.8.0+a7a948a
hexo-blog-encrypt: "^3.1.6"

插件安装

1

npm install --save hexo-blog-encrypt

快速使用

该插件的使用也很方便，这里我仅作简单介绍，详细的可以查看官方文档。 D0n9X1n/hexo-blog-encrypt: Yet, just another hexo plugin for security.

要为一篇文章添加密码查看功能，只需要在文章信息头部添加 password 字段即可：

1
2
3
4
5

---
title: hello world
date: 2021-04-13 21:18:02
password: hello
---

全局加密配置

分别为每篇文章设置密码，虽然很灵活，但是配置或者修改起来非常麻烦。为此，可以通过设置统一配置来实现全局加密。

通过添加指定 tag 的方式，可以为所有需要加密的文章添加统一加密操作。只需要在需要加密的文章中，添加设置的 tag值 即可。

在Hexo主配置文件 _config.yml 中添加如下配置：

1
2
3
4
5
6
7
8
9

# Security
encrypt: # hexo-blog-encrypt
  silent: true
  abstract: 这是一篇加密文章，需要密码才能继续阅读。
  message: 当前文章暂不对外可见，请输入密码后查看！
  tags:
  - {name: private, password: hello}
  wrong_pass_message: 抱歉，您输入的密码错误，请检查后重新输入。
  wrong_hash_message: 抱歉, 当前文章不能被校验, 不过您还是可以看看解密后的内容。

之后，需要清除缓存后重新生成 hexo clean && hexo s -g。

其中的 tag 部分：

1
2

tags:
- {name: private, password: hello}

表示当在文章中指定了 private 这个 tag 后，该文章就会自动加密并使用对应的值 hello 作为密码，输入密码后才可查看。

相应的文章头部设置：

1
2
3
4
5
6

---
title: Password Test
date: 2019-12-21 11:54:07
tags:
    - private
---

在全局加密配置下禁用某些文章的加密

可能有这样的情况，属于 private 标签下的某篇文章在一段时间内想要开放访问。如果在描述中加上密码提示： 当前文章密码为xxx，请输入密码后查看 ，来让用户每次查看时都要先输入密码后再查看，这样的操作又会给访客带来不便。

这时可以单独设置允许某篇文章不设置密码。

只需要在使用 加密tag 的前提下，结合 password 来实现即可。在博客文章的头部添加 password 并设置为 "" 就能取消当前文章的 Tag 加密。

相应的设置示例如下：

1
2
3
4
5
6
7

---
title: No Password Test
date: 2019-12-21 11:54:07
tags:
    - private
password: ""
---

在全局加密配置下设置非全局密码

在全局加密配置下，我们可以通过设置多个 加密tag 来为多篇不同类型的文章设置相同的查看密码：

1
2
3
4

tags:
- {name: private, password: hello}
- {name: jiami, password: world}
- {name: 加密, password: jiesuo}

那么可能有这样的场景：

属于 private 标签下的某篇文章想要设置成不一样的密码，防止用户恶意通过一个密码来查看同标签下的所有文章。此时，仍可以通过 password 参数来实现：

1
2
3
4
5
6
7

---
title: Password Test
date: 2019-12-21 11:54:07
tags:
    - private
password: "buyiyang"
---

说明：

该文章通过tag值 private 做了加密，按说密码应该为 hello ，但是又在信息头中设置了 password ，因为配置的优先级是 文章信息头 > 按标签加密，所以最后的密码为 buyiyang 。

解密后目录不显示

在为某些文章设置了 加密后查看 之后，不经意间发现这些文章的目录在解密后却不显示了。

探究原因

从插件的 github issues 中我找到了相关的讨论：

• 解密后目录不会更新 · Issue #16 · D0n9X1n/hexo-blog-encrypt

原因：

加密的时候，post.content 会变成加密后的串，所以原来的 TOC 生成逻辑就会针对加密后的内容。
所以这边我只能把原来的内容存进 post.origin 字段。

找到文件 themes/next/layout/_macro/sidebar.swig ，编辑如下部分：

20210418165143

插件 hexo-blog-encrypt 对文章内容进行加密后，会将原始文章内容保存到字段 origin 中，当生成 TOC 时，我们可以通过 page.origin 来得到原始内容，生成文章目录。

相应的代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<aside class="sidebar">
  <div class="sidebar-inner">

    {%- set display_toc = page.toc.enable and display_toc %}
    {%- if display_toc %}

      {%- if (page.encrypt) %}
        {%- set toc = toc(page.origin, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
      {%- else %}
        {%- set toc = toc(page.content, { class: "nav", list_number: page.toc.number, max_depth: page.toc.max_depth }) %}
      {%- endif %}

      {%- set display_toc = toc.length > 1 and display_toc %}
    {%- endif %}

    <ul class="sidebar-nav motion-element">

修改完成后，执行 hexo clean && hexo s -g 并重新预览。

效果如下：

20210418165529

不过，这样的效果貌似不是我想要的。我理想中的效果应该是：

• 当文章加密后，访客只能看到侧边栏中的 站点概览 部分，不需要看到 文章目录 部分。
• 当文章解密后，访客则可以看到 站点概览 和 文章目录 两部分。

而现在加密后的文章未解密之前也可以看到 文章目录 ，虽然该目录不可点击。

当然，如果你不是很介意，那么到这里就可以结束了。如果你和我一样有一些 追求完美的强迫症 的话，我们继续。

如何优化

查看了 hexo-blog-encrypt 相关的 issues ，我找到了一种 折中 的解决方法。

从 issue Archer主题解密后TOC依旧不显示（已按手册修改） 中我们可以知道：

我们可以在文章加密的前提下，通过将目录部分加入到一个 不可见的div 中来实现 隐藏目录 的效果。在源码中的 hexo-blog-encrypt/lib/hbe.js 部分我们也可以看到，解密后通过设置 id 值为 toc-div 的元素为 display:inline 来控制显示隐藏。

1
2
3
4
5
6
7
8
9

{%- if (page.encrypt) %}
  <div id="toc-div" style="display:none">
{%- else %}
  <div id="toc-div">
{%- endif %}

xxx这里是目录部分xxx

</div>

对文件 themes/next/layout/_macro/sidebar.swig 修改后的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
  {%- if (page.encrypt) %}
    <div id="toc-div" style="display:none">
  {%- else %}
    <div id="toc-div">
  {%- endif %}

    {%- if display_toc %}
    <div class="post-toc motion-element">{{ toc }}</div>
    {%- endif %}
  
  </div>
</div>
<!--/noindex-->

但这种方法并不是完全的加密，而是采用 障眼法 的方式，通过查看html源文件还是可以看到目录内容的，只是不显示罢了。

对于这个问题，hexo-blog-encrypt 插件的作者也作了说明：next 主题内没有 article.ejs 文件【TOC 相关】 · Issue #162 · D0n9X1n/hexo-blog-encrypt

只好妥协

因为该插件中目前只有一个参数 page.encrypt 可以用来判断当前的文章是否进行了 加密处理 ，而不能获知该文章当前是处于 加密后的锁定 状态，还是处于 加密后的解锁 状态。如果再有一个参数结合起来一起处理就好了。

所以，目前只能在解锁前隐藏目录，解锁后再显示目录。但在解锁前目录区域还是会展开，只是没有内容显示罢了。

让加密文章显示加密提示

类似于我的博客文章列表中的 文章置顶 的提示效果，考虑在文章列表中对加密的文章增加类似的 加密 提示信息。

上面对于文章的加密处理，一方面是在 配置文件 中添加的 tag 全局配置，另一方面是在单个 md源文件 中添加的 password 参数。所以我们需要对这两种情况分别做处理。

对于password参数的情况

针对于 password 字段，参考获取其他字段的方法，比如获取标题用 post.title ，获取置顶用 post.top ，那么获取 password 就是 post.password 了。

可以参考我之前添加置顶提示信息的操作，对文件 themes/next/layout/_macro/post.swig 的修改如下：

1
2
3
4
5
6
7
8
9
10
11

{# 加密文章添加提示信息-for password #}
{%- if post.password %}
  <span class="post-meta-item">
      <span class="post-meta-item-icon">
          <i class="fas fa-lock"></i>
      </span>
      <span class="post-meta-item-text">
          <font color='#FD7E13'>[加密]</font>
      </span>
  </span>
{%- endif %}

对于tag标签的情况

针对于 tag 标签的获取，可以从文件 themes/next/layout/_macro/post.swig 中找到类似的处理方法：

1
2
3

{%- for tag in post.tags.toArray() %}
    <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
{%- endfor %}

即可以用最简单的 遍历法 来处理：

我们获取到配置文件中设置的所有 加密tag值 ，再找到文章中的 tag标签 。二者一对比，有匹配的项则说明该文章设置了 tag值 加密。

swig文件

要在 .swig 文件中实现相应的对比逻辑，就需要了解其使用的语法格式。而对于 swig 文件，使用的是 Swig 语法。

Swig 是一个非常棒的、类似 Django/jinja 的 node.js 模板引擎。

不过看到这个代码库 paularmstrong/swig: Take a swig of the best template engine for JavaScript. 已经 归档 了。

但因为 Swig 是类似于 jinja 的模板引擎，那么我们直接去参考 jinja 的语法就可以了。

• 模板设计者文档 — Jinja2 2.7 documentation

最终实现

获取全局配置中 encrypt.tags 的值：

1
2
3
4
5

{%- if (config.encrypt) and (config.encrypt.tags) %}
  {%- for ctag in config.encrypt.tags %}
    <span>{{ ctag.name }}</span>
  {%- endfor %}
{%- endif %}

在文章列表中获取当前文章包含的 tags 列表：

1
2
3
4
5

{%- if post.tags %}
  {%- for ptag in post.tags.toArray() %}
    <span>{{ ptag.name }}</span>
  {%- endfor %}
{%- endif %}

对于其中展示的文本格式，可以参考已有的 发表于 更新于 这些副标题的格式来实现。

例如：

1
2
3
4
5
6
7
8
9

<span class="post-meta-item">
    <span class="post-meta-item-icon">
    <i class="far fa-calendar"></i>
    </span>
    <span class="post-meta-item-text">发表于</span>
    

    <time title="创建时间：2021-02-28 11:18:43 / 修改时间：11:41:19" itemprop="dateCreated datePublished" datetime="2021-02-28T11:18:43+08:00">2021-02-28</time>
</span>

对其进行优化，我们只需要显示提示文字，不需要后面的带下划线部分，最终得到的就是：

1
2
3
4
5
6
7
8

<span class="post-meta-item">
    <span class="post-meta-item-icon">
        <i class="fas fa-lock"></i>
    </span>
    <span class="post-meta-item-text">
        <font color='#FD7E13'>[加密]</font>
    </span>
</span>

整合上面的代码，对于文章中包含 password 的文档，通过如下方式来显示：

20210418170147

相应代码：

1
2
3
4
5
6
7
8
9
10
11

{# 加密文章添加提示信息-for password #}
{%- if post.password %}
  <span class="post-meta-item">
      <span class="post-meta-item-icon">
          <i class="fas fa-lock"></i>
      </span>
      <span class="post-meta-item-text">
          <font color='#FD7E13'>[加密]</font>
      </span>
  </span>
{%- endif %}

对于文章中包含指定加密 tags 的文档，通过如下方式来显示：

20210418170209

相应代码：

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

{# 加密文章添加提示信息-for config tags #}
    // 获取全局配置中的加密tag
    {%- if (config.encrypt) and (config.encrypt.tags) %}
      {%- for ctag in config.encrypt.tags %}
        // 判断当前文章中是否包含tags
        {%- if post.tags %}
          {%- for ptag in post.tags.toArray() %}
            // 如果有相同的tag值
            {%- if (ctag.name == ptag.name) %}
              // 显示加密提示信息
              <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                      <i class="fas fa-lock"></i>
                  </span>
                  <span class="post-meta-item-text">
                      <font color='#FD7E13'>[加密]</font>
                  </span>
              </span>

            {%- endif %}

          {%- endfor %}
        {%- endif %}

      {%- endfor %}
    {%- endif %}

对于两种都有的文档，我们只需要通过一个 判断 来处理就好了：优先判断文档中的 password 字段。当文档中包含 password 时，就说明是加密文章；否则就去判断配置文件看是否为加密文章。

20210418170330

最后的代码为：

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

{# 加密文章添加提示信息-for password #}
{%- if post.password %}
  <span class="post-meta-item">
      <span class="post-meta-item-icon">
          <i class="fas fa-lock"></i>
      </span>
      <span class="post-meta-item-text">
          <font color='#FD7E13'>[加密]</font>
      </span>
  </span>
{%- else %}
  {# 加密文章添加提示信息-for config tags #}
  {%- if (config.encrypt) and (config.encrypt.tags) %}
    {%- for ctag in config.encrypt.tags %}
      
      {%- if post.tags %}
        {%- for ptag in post.tags.toArray() %}
          {%- if (ctag.name == ptag.name) %}
            <span class="post-meta-item">
                <span class="post-meta-item-icon">
                    <i class="fas fa-lock"></i>
                </span>
                <span class="post-meta-item-text">
                    <font color='#FD7E13'>[加密]</font>
                </span>
            </span>
          {%- endif %}
        {%- endfor %}
      {%- endif %}

    {%- endfor %}
  {%- endif %}
{%- endif %}

稍微不好的一点就是，上面的操作是通过 两个for循环 来处理的，会导致一些性能问题。不过这个操作是在编译过程 hexo g 的时候来处理的，不影响博客浏览，也就可以忽略了。

更换图标

对于需要显示的图标，可以从网站 Icons | Font Awesome 中获取。

例如，我这里选择的是 锁 的icon图标，得到的代码如下：

1

<i class="fas fa-lock"></i>

Hexo博客进阶：为 Next 主题添加 Waline 评论系统

发表于 2022-01-20 分类于 Hexo博客 阅读次数： 44 Waline： 本文字数： 2.2k 阅读时长 ≈ 4 分钟

文章发出之后，往往我们想要得到读者更多地反馈，那么拥有一个评论系统是至关重要的。

本篇带大家通过一些简单的配置，在 Hexo Next 主题下添加 Waline 评论系统。

前言

在之前的 Hexo博客进阶：为Next主题添加Valine评论系统 | 谢同学的博客 (qianfanguojin.top) 文章中，我叙述了如何 在 Next主题下配置 Valine 评论系统。

但是，根据读者反馈，Valine 评论系统在 Next 主题高版本 (7.+) 以上已没有支持，且 Valine 已经很久没有更新维护了。不过，有大佬在 Valine 的基础之上开发了 Waline 。
这次，我们就来描述如何快速上手安装配置更加人性化且带后端的 Waline 评论系统。

1. 第一步，配置评论数据库

Waline 和 Valine 一样，也是支持基于 LeanCloud 作为数据存储的，但是 Waline 支持的部署方式更多：

为了方便，这里我只讲述最简单，零成本的数据库建立方法。

我们需要注册一个 Leancloud 国际版 的账号，注意，一定要是 国际版，国内版需要绑定备案的域名，比较麻烦。具体可以在注册时的左上角看到：

注册完成后，登录，然后我们找到创建应用

在这里填写你的应用名称,名称可以自己定义，然后，下面选择开发版 点击创建。

然后点击应用进入设置。

点击应用凭证，取得我们 AppKey 、App id 、以及 MasterKey ：

数据库配置完毕，接下来安装服务端。

2. 安装服务端

由上面的表格可以看到，Waline 支持多种服务端，为了最简便上手，我们使用第一种方式，即在 Vercl 上安装服务端。首先，点击下面的按钮，一键部署：

应该需要注册一个账号，支持使用 Github 账号直接登录：

登录后重新点进来，点击 Create：

然后等待下面 Deploy 构建完成，点击 Go to Dashboard

找到 Settings => Environment Variables，配置环境变量：

我们需要配置三个环境变量，对应如下表：

提示

如果你使用 LeanCloud 国内版，请额外配置 LEAN_SERVER 环境变量，值为你绑定好的域名。

为了使环境变量生效，我们需要重新构建一次。在上方找到 Deployments ，选择第一个右边的三个点，点击 Redeploy 。

等待其构建结束，然后记住 DOMAINS 中的域名地址：

好了，服务端部署到此结束，下面我们开始在 Hexo Next 主题中配置客户端。

3. 在Hexo Next主题中配置

由于 Next 主题中并不自带 Waline 的评论配置，我们需要安装官方提供的插件。在 Hexo 根目录执行：

1

npm install @waline/hexo-next

找到 Next 的主题配置文件，在最后加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Waline
# For more information: https://waline.js.org, https://github.com/walinejs/waline
waline:
  enable: true #是否开启
  serverURL: waline-server-pearl.vercel.app # Waline #服务端地址，我们这里就是上面部署的 Vercel 地址
  placeholder: 请文明评论呀 # #评论框的默认文字
  avatar: mm # 头像风格
  meta: [nick, mail, link] # 自定义评论框上面的三个输入框的内容
  pageSize: 10 # 评论数量多少时显示分页
  lang: zh-cn # 语言, 可选值: en, zh-cn
  # Warning: 不要同时启用 `waline.visitor` 以及 `leancloud_visitors`.
  visitor: false # 文章阅读统计
  comment_count: true # 如果为 false , 评论数量只会在当前评论页面显示, 主页则不显示
  requiredFields: [] # 设置用户评论时必填的信息，[nick,mail]: [nick] | [nick, mail]
  libUrl: # Set custom library cdn url

重新部署 Hexo ，就可以看到结果了。

据反馈，Hexo 似乎在 8.x 的版本使用 waline 比较稳定，如果出现 hexo g 出错，可尝试升级 hexo 版本。

4. 登录服务端

由于 Waline 有服务端，支持评论管理。我们需要注册一个账号作为管理员。

找到评论框，点击 登录 按钮，会弹出一个窗口，找到用户注册，默认第一个注册的用户为管理员，所以部署好一定要记得及时注册。

注册好，登录之后即可进入评论管理的后台，可以对评论进行管理。

hexo同步

以下操作在你的第二个平台上进行，并确定已安装 node.js & npm。

在你想要同步博客的文件夹下执行

1
2
3
4
5
6
7
8
9
10

git clone <远端博客仓库地址>
cd # 进入到主题文件夹
git clone <远端主题仓库地址>
cd # 进入到第三方主题文件夹
git checkout customize #切换到customize分支
# 回到 hexo 根目录，安装依赖
npm install hexo
npm install hexo-deployer-git
npm install hexo-cli -g
npm install

执行hexo指令

1

hexo clean && proxy4 hexo d -g

Hexo-Next 主题博客个性化配置(2022年更行版本)

网页预览：

swimminghao.netlify.app

因为本人比较喜欢简介风格的，所以整个界面都是简约风格的，一个好的博客，应该让人一眼就能看清楚技术分类,文章也应该就是文章，让人能够最好的阅读你的博客 这才是我们应该做的，所以没有太多花里胡哨的东西。

使用工具：

Git
Github
visual studio code
Chrome

Hexo简易安装

前置条件

软件版本

HEXO: 6.0.6
Hero-theme-next: 8.10.0

安装hexo

1

npm install -g hexo-cli

主题下载安装

进入命令行，下载 NexT 主题，输入：

1

git clone https://github.com/next-theme/hexo-theme-next/ themes/next

修改站点配置文件_config.yml，找到如下代码：

1
2

## Themes: https://hexo.io/themes/
theme: landscape => next

将 landscape 修改为 next 即可。

配置文件

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的站点配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为 **站点配置文件**， 后者称为 **主题配置文件**。

1
2

/hexo/_config.yml
/hexo/themes/next/_config.yml

修改语言

打开站点配置文件，搜索 language，找到如下代码：

1
2
3

author: authorName
language: zh-CN
timezone: Asia/Shanghai

新建标签及分类界面

打开 主题配置文件，搜索 menu，找到如下代码：

1
2
3
4
5
6
7
8
9

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

把 tags 和 categories 前面的 # 删除，

切换主题

next 主题自带四种样式。

在主题配置文件/next/_config.yml中查找：scheme，找到如下代码：

1
2
3
4
5
6

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
选择你喜欢的一种样式，去掉前面的 #，其他主题前加上 # 即可。

隐藏网页底部 powered By Hexo / 强力驱动

打开 themes/next/layout/_partials/footer.njk

找到：

1
2
3
4
5
6

{\%- if theme.footer.powered %}
  <div class="powered-by">
    {\%- set next_site = 'https://theme-next.js.org' if theme.scheme === 'Gemini' else 'https://theme-next.js.org/' + theme.scheme | lower + '/' %}
    {{- __('footer.powered', next_url('https://hexo.io', 'Hexo') + ' & ' + next_url(next_site, 'NexT.' + theme.scheme)) }}
  </div>
{\%- endif %}

把这段代码首尾分别加上：<!-- 和-->，或者直接删除。

主页文章添加阴影

参考： Hexo NexT 主题美化记录
打开themes\next\source\css\_common\components\post\index.styl文件，将post-block更改为如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

if (hexo-config('motion.transition.post_block')) {
    .post-block{
        margin-top: 60px;
        margin-bottom: 60px;
        padding: 25px;
        background:rgba(255,255,255,0.9) none repeat scroll !important; //添加透明效果
        -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
        -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
    }
    .pagination, .comments {
      opacity: 0;
    }
  }

页脚增加网站运行时间统计

1. 打开themes/next/layout/_partials/footer.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

{\%- if config.symbols_count_time.total_symbols or config.symbols_count_time.total_time %}
<div class="wordcount">
  {\%- if config.symbols_count_time.total_symbols %}
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-line"></i>
    </span>
    {\%- if theme.symbols_count_time.item_text_total %}
      <span>{{ __('symbols_count_time.count_total') + __('symbol.colon') }}</span>
    {\%- endif %}
    <span title="{{ __('symbols_count_time.count_total') }}">{{ symbolsCountTotal(site) }}</span>
  </span>
  {\%- endif %}

  {\%- if config.symbols_count_time.total_time %}
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    {\%- if theme.symbols_count_time.item_text_total %}
      <span>{{ __('symbols_count_time.time_total') }} &asymp;</span>
    {\%- endif %}
    <span title="{{ __('symbols_count_time.time_total') }}">{{ symbolsTimeTotal(site, config.symbols_count_time.awl, config.symbols_count_time.wpm, __('symbols_count_time.time_minutes')) }}</span>
  </span>
  {\%- endif %}
</div>
{\%- endif %}

//此位置插入代码

{\%- if theme.busuanzi_count.enable %}
<div class="busuanzi-count">

倒计时代码：

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

<span id="sitetime"></span>
<script language=javascript>
    function siteTime(){
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth()+1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */
        var t1 = Date.UTC(2022,01,04,00,00,00); //你的建站时间
        var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
        var diff = t2-t1;
        var diffYears = Math.floor(diff/years);
        var diffDays = Math.floor((diff/days)-diffYears*365);
        var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
        var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
        var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
        document.getElementById("sitetime").innerHTML=" Run for "+diffYears+" Year "+diffDays+" Days "+diffHours+" Hours "+diffMinutes+" m "+diffSeconds+" s";
    }
    siteTime();
</script>

1. 在themes\next\source\css\main.styl文件中给倒计时添加样式

不生效

1
2
3
4
5

#sitetime {
  background-image: -webkit-linear-gradient(left, #aa4b6b, #6b6b83, #3b8d99);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

浏览页面显示当前浏览进度

打开 themes/next/_config.yml，搜索关键字 scrollpercent，把 false 改为 true。

效果图：

Local Search本地搜索

安装插件hexo-generator-searchdb,执行以下命令:

1

npm install hexo-generator-searchdb --save	

修改hexo/_config.yml站点配置文件，新增以下内容到任意位置：

1
2
3
4
5

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑 主题配置文件，启用本地搜索功能：

1
2
3

# Local search
local_search:
	enable: true

效果图：

设置网站图标

在 EasyIcon 中找一张（32 * 32）的 ico 图标，或者去别的网站下载或者制作，并将图标名称改为 favicon.ico，然后把图标放在 /themes/next/source/images 里，并且修改主题配置文件：

1
2

Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

修改文章底部的#号的标签，改为图标

修改模板/themes/next/layout/_macro/post.swig

搜索 rel="tag">{{ tag_indicate }}，将 {{ tag_indicate }} 换成<i class="fa fa-tag"></i>

效果图：

文章分享功能

打开themes/next/_config.yml 搜索关键字needmoreshare2 修改为下面设置

用npm卸载掉hexo-next-share，搜索所有hexo-next-share文件夹删除干净，然后切换到网站文件夹下，运行npm install theme-next/hexo-next-share --save,将以下代码都复制进主题配置文件里

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

# NeedMoreShare2
# Dependencies: https://github.com/theme-next/theme-next-needmoreshare2
# For more information: https://github.com/revir/need-more-share2
# iconStyle: default | box
# boxForm: horizontal | vertical
# position: top / middle / bottom + Left / Center / Right
# networks:
# Weibo | Wechat | Douban | QQZone | Twitter | Facebook | Linkedin | Mailto | Reddit | Delicious | StumbleUpon | Pinterest
# GooglePlus | Tumblr | GoogleBookmarks | Newsvine | Evernote | Friendfeed | Vkontakte | Odnoklassniki | Mailru
needmoreshare:
  enable: true
  cdn:
    js: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.js
    css: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1/needsharebutton.min.css
  postbottom:
    enable: true
    options:
      iconStyle: default
      boxForm: horizontal
      position: middleCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: default
      boxForm: horizontal
      position: middleCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook


# Likely Share
# See: https://ilyabirman.net/projects/likely/, https://github.com/ilyabirman/Likely
# Likely supports four looks, nine social networks, any button text.
# You are free to modify the text value and order of any network.
likely:
  enable: false
  cdn:
    js: //cdn.jsdelivr.net/npm/ilyabirman-likely@2/release/likely.min.js
    css: //cdn.jsdelivr.net/npm/ilyabirman-likely@2/release/likely.min.css
  look: light # available values: normal, light, small, big
  networks:
    twitter: Tweet
    facebook: Share
    linkedin: Link
    gplus: Plus
    vkontakte: Share
    odnoklassniki: Class
    telegram: Send
    whatsapp: Send
    pinterest: Pin

# share.js
# See: https://github.com/overtrue/share.js
# networks: weibo,qq,wechat,tencent,douban,qzone,linkedin,diandian,facebook,twitter,google
sharejs:
  enable: false
  cdn:
    js: //cdn.jsdelivr.net/npm/social-share.js@1/dist/js/social-share.min.js
    css: //cdn.jsdelivr.net/npm/social-share.js@1/dist/js/social-share.min.css
  networks: weibo,qq,wechat,tencent,douban,qzone,linkedin,diandian,facebook,twitter,google
  wechat_qrcode:
    title: share.title
    prompt: share.prompt

效果图：
postbottom为文章末尾分享 float则是在页面侧端分享

文章加密访问

参考链接： hexo文章加密访问

增加文章字数统计及阅读时常功能

安装字数统计插件 npm i hexo-symbols-count-time
在hexo的_config.yml下找到# Extensions在下面配置插件配置如下

1
2
3
4
5
6
7

# 字数统计插件 npm i hexo-symbols-count-time
symbols_count_time:
  symbols: true # 文章字数统计
  time: true # 文章时长统计
  total_symbols: true # 全局字数统计
  total_time: true # 全局时长统计
  exclude_codeblock: false  # 排除代码字数统计

文章置顶功能

移除默认安装的插件：

npm uninstall hexo-generator-index --save
安装新插件:

npm install hexo-generator-index-pin-top --save
最后编辑有这需求的相关文章时，在Front-matter（文件最上方以—分隔的区域）加上一行：

1

top: true

如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：

1
2
3
4
5
6
7
8

# Post a.md
title: a
top: 1

# Post b.md
title: b
top: 10
1234567

文章 b 便会显示在文章 a 的前面

设置置顶图标
打开/themes/next/layout/_macro/post.swig文件，在<div class="post-meta-container">下方，插入如下代码：

1
2
3
4
5

{\% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>置顶</font>
    <span class="post-meta-divider">|</span>
{\% endif %}

修改[Read More]按钮样式

修改themes/next/source/css/_common/components/post/index.styl文件，加入自定义样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// [Read More]按钮样式
.post-button .btn {
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border: none !important;
    transition-property: unset;
    padding: 0px 15px;
}

.post-button .btn:hover {
    color: rgb(255, 255, 255) !important;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}

效果图：

修改 阅读全文 前显示文字数量即位置

打开 themes/next/_config.yml，搜索关键字 auto_excerpt， 修改length即可修改阅读全文前显示文字数量

1
2
3

auto_excerpt:
  enable: true
  length: 150

或者在文章中任意位置添加<!-- more -->

建议在文章中加入 <!-- more -->
自定义 [Read More] 按钮之前要显示的内容！

修改链接文字样式

打开themes/next/source/css/_common/components/post/index.styl添加以下代码:

1
2
3
4
5
6
7
8

.post-body p a{
 color: #0593d3;
 border-bottom: none;
 &:hover {
   color: #ff106c;
   text-decoration: underline;
 }
}

效果图：

头像设置圆形,停留旋转效果

修改next主题配置文件,修改成以下代码:

1
2
3
4
5
6
7
8
9

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/lion.png
  # lion.png放置在next/source/images文件夹下
  # If true, the avatar will be displayed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

效果图：

增加近期文章

hexo主站source 目录下创建 _data/sidebar.njk 文件，加入如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

{# recent posts #}
{\% if theme.recent_posts %}
  <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
    <div class="links-of-blogroll-title">
      <!-- modify icon to fire by szw -->
      <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></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') %}
        <li class="recent_posts_li">
          <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
        </li>
      {\% endfor %}
    </ul>
  </div>
{\% endif %}

并修改theme主题配置文件，取消sidebar的注释:

1
2
3
4
5
6
7
8
9
10
11
12

custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

编辑themes/next/source/css/_common/outline/sidebar/sidebar-blogroll.styl文件，标题溢出隐藏

1
2
3
4
5
6
7
8
9
10
11

.links-of-blogroll-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: cengter;
  display: block;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在 themes/next/_config.yml中修改成下方代码

1
2
3
4

# 近期文章设置
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

效果图：

文章末尾添加”本文结束”标记

• 在目录themes/next/layout/_macro/下添加passage-end-tag.swig，内容如下：

  1 2 3 4 5

  <div> {\% if not is_index %} <div style="text-align:center;color: #ccc;font-size:20px;">------------- 本 文 结 束&nbsp&nbsp&nbsp&nbsp&nbsp感 谢 您 的 阅 读 -------------</div> {\% endif %} </div>

• 打开themes/next/layout/_macro/post.swig文件，新增内容如下:

• ```HTML
  
  //以下为新增代码

  {\% if not is_index %} {\% include 'passage-end-tag.swig' %} {\% endif %}

  1 2 3 4 5 6

  - 打开`主题配置文件`，添加代码如下： - ```js # 文章末尾添加“本文结束”标记 passage_end_tag: enabled: true

为博客加上妹子

live2d与busuanzi组件有bug冲突，安装了live2d，busuanzi就失效，所以我没有使用。

npm install -save hexo-helper-live2d
然后在在 hexo 的 _config.yml中添加参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-<你喜欢的模型名字>s
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

12345678910111213141516

可供选择模型：

• live2d-widget-model-chitose
• live2d-widget-model-epsilon2_1
• live2d-widget-model-gf
• live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
• live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
• live2d-widget-model-haruto
• live2d-widget-model-hibiki
• live2d-widget-model-hijiki
• live2d-widget-model-izumi
• live2d-widget-model-koharu
• live2d-widget-model-miku
• live2d-widget-model-ni-j
• live2d-widget-model-nico
• live2d-widget-model-nietzsche
• live2d-widget-model-nipsilon
• live2d-widget-model-nito
• live2d-widget-model-shizuku
• live2d-widget-model-tororo
• live2d-widget-model-tsumiki
• live2d-widget-model-unitychan
• live2d-widget-model-wanko
• live2d-widget-model-z16

在站点目录下建文件夹live2d_models，

再在live2d_models下建文件夹<你喜欢的模型名字>,

再在<你喜欢的模型名字>下建json文件：<你喜欢的模型名字>.model.json

安装模型。在命令行（即Git Bash）运行以下命令即可：

1

npm install --save live2d-widget-model-<你喜欢的模型名字>

复制你喜欢的模型名字：

代码块复制选项

Next6 中自带了复制代码按钮，Next5 需要自己手动配置。

搜索 codeblock，找到如下配置：

1
2
3
4
5

codeblock:
border_radius: 8   # 按钮圆滑度
copy_button:  # 设置是否开启代码块复制按钮
	enable: true
	show_result: true  # 是否显示复制成功信息

修改加载特效

由于网页不可能一直都秒进，总会等待一段时间的，所以可以设置顶部加载条。Next 已经集成了很多加载特效，可以在下面选项中在线调试测试一下。

next主题配置文件搜索pace，找到如下代码：

1
2
3
4
5
6
7
8
9
10
11

# Progress bar in the top during page loading.
G# For more information: https://github.com/CodeByZach/pace
pace:
  enable: true
  # All available colors:
  # black | blue | green | orange | pink | purple | red | silver | white | yellow
  color: blue
  # All available themes:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: loading-bar

修改文章链接

在做次优化之前，hexo-next文章链接默认的生成规则是：:year/:month/:day/:title，是按照年、月、日、标题来生成的。
比如：https://zxiaoxuan.github.io/2019/08/12/hello-world/ 这样，如果文章标题是中文的话，URL链接是也会是中文，

那么要生存简洁且唯一的URL，怎么办呢

安装插件

1

npm install hexo-abbrlink --save

执行此命令可能会不成功，提示你缺少相应的依赖，比如babel-eslint、mini-css-extract-plugin、webpack-cli…
使用npm命令安装即可，比如npm install eslint@4.x babel-eslint@8 –save-dev

修改根目录站点配置文件config.yml，改为：

1
2
3
4

permalink: posts/:abbrlink/
abbrlink:
	alg: crc32   #算法： crc16(default) and crc32
	rep: hex     #进制： dec(default) and hex

生成的链接将会是这样的(官方样例)：
四种可供选择

1
2
3
4
5
6
7
8
9
10
11

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html
12345678910

生成完后，原md文件的Front-matter 内会增加abbrlink 字段，值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址。

评论 Waline 增强版

参考链接Hexo NexT Waline评论

各版块透明度修改

内容板块透明
博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl文件 .content-wrap 标签下 background: white修改为：

1

background: rgba(255,255,255,0.7); //0.7是透明度

菜单栏背景
博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl文件.header-inner标签下 background: white修改为：

1

background: rgba(255,255,255,0.7); //0.7是透明度

站点概况背景
博客根目录themes\next\source\css\_schemes\Pisces\_sidebar.styl 文件.sidebar-inner 标签下 background: white修改为：

1

background: rgba(255,255,255,0.7); //0.7是透明度

然后修改博客根目录themes\next\source\css\_schemes\Pisces\_layout.styl文件.sidebar 标签下 background: $body-bg-color修改为：

1

background: rgba(255,255,255,0.7); //0.7是透明度

按钮背景
博客根目录themes\next\source\css\_common\components\post\post-button.styl 同上修改对应位置为 background: transparent;

标签修改

打开themes/next/layout/page.swig

修改这里可以修改标签页的标签显示

在这里添加东西会在标签页面上显示

彩色标签云

在/themes/next/layout/目录下，新增tag-color.swig文件，加入下方代码：

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

<script type="text/javascript">
     var alltags = document.getElementsByClassName('tag-cloud-tags');
     var tags = alltags[0].getElementsByTagName('a');
     for (var i = tags.length - 1; i >= 0; i--) {
       var r=Math.floor(Math.random()*75+130);
       var g=Math.floor(Math.random()*75+100);
       var b=Math.floor(Math.random()*75+80);
       tags[i].style.background = "rgb("+r+","+g+","+b+")";
     }
</script>

<style>
  .tag-cloud-tags{
    /*font-family: Helvetica, Tahoma, Arial;*/
    /*font-weight: 100;*/
    text-align: center;
    counter-reset: tags;
  }
  .tag-cloud-tags a{
    border-radius: 6px;
    padding-right: 5px;
    padding-left: 5px;
    margin: 8px 5px 0px 0px;
  }
  .tag-cloud-tags a:before{
    content: "?";
  }

  .tag-cloud-tags a:hover{
     box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
     transform: scale(1.1);
     /*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/
     transition-duration: 0.15s;
  }
</style>

在/themes/next/layout/page.swig/中引入tag-color.swig：

在下方加上 {\% include 'tag-color.swig' %} 代码

1
2
3
4
5
6
7
8
9

 <div class="tag-cloud">
          <!--    <div class="tag-cloud-title">
                {{ _p('counter.tag_cloud', site.tags.length) }}
            </div>  -->
             <div class="tag-cloud-tags" id="tags">
			  {{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#FFF', end_color: '#FFF'}) }}            
		  </div>
		</div>
+     {\% include 'tag-color.swig' %}

或者将上方代码直接添加到下方

将标签云放到首页

在路径：/themes/next/layout/index.swig 中

{\% block content %}下面添加下方代码

1
2
3
4
5
6
7
8
9
10

{\% block content %}

	<div class="tag-cloud">
	  <div class="tag-cloud-tags" id="tags">
		{{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
	  </div>
	</div>
	<br>
	
	{\% include 'tag-color.swig' %}

归档页美化

修改/themes/next/layout/_macro/post-collapse.swig后的代码如下：

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

{\% macro render(post) %}

  <article class="post post-type-{{ post.type | default('normal') }}" itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      <{\% if theme.seo %}h3{\% else %}h2{\% endif %} class="post-title">
        {\% if post.link %}{# Link posts #}
          <a class="post-title-link post-title-link-external" target="_blank" href="{{ url_for(post.link) }}" itemprop="url">
            {{ post.title or post.link }}
            <i class="fa fa-external-link"></i>
          </a>
        {\% else %}
            <a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
              {\% if post.type === 'picture' %}
                {{ post.content }}
              {\% else %}
                <span itemprop="name">{{ post.title | default(__('post.untitled')) }}</span>
              {\% endif %}
            </a>
        {\% endif %}
      </{\% if theme.seo %}h3{\% else %}h2{\% endif %}>

      <div class="post-meta">
        <time class="post-time" itemprop="dateCreated"
              datetime="{{ moment(post.date).format() }}"
              content="{{ date(post.date, config.date_format) }}" >
          {{ date(post.date, 'MM-DD') }}
        </time>
      </div>

    </header>
  </article>

{\% endmacro %}

版本：1.6

使用 Docker 部署 Halo 和 MySQL

简介

该章节我们将分三种情况为您说明该如何同时使用 Docker + MySQL 来部署 Halo

前提条件： 我们默认您的机器上已经安装好 Docker

• 如果你想完全通过 Docker 运行 MySQL 和 Halo 请参考小节《统一使用 Docker 安装》
• 如果你已经有 Docker部署的 MySQL，想安装 Halo 请参考小节《MySQL 部署在 Docker 如何使用 Docker 安装 Halo》
• 如果你已有 MySQL 但部署在宿主机，想通过 Docker 安装 Halo 请参考小节《MySQL 在宿主机如何通过 Docker 安装 Halo》

统一使用 Docker 安装

如果你的机器上没有现成的 MySQL 可供使用，那么您可以选择使用 Docker 来运行 MySQL 和 Halo

1. 创建 Docker 自定义桥接网络

1

docker network create halo-net

提示

如果你之前有 Docker 使用经验，你可能已经习惯了使用 --link 参数来使容器互联。

但随着 Docker 网络的完善，强烈建议大家将容器加入自定义的 Docker 网络来连接多个容器，而不是使用 –link 参数。 Docker 官方文档中称：该–link 标志是 Docker 的遗留功能。它可能最终会被删除。除非您确定需要继续使用它，否则我们建议您使用用户定义的网络来促进两个容器之间的通信，而不是使用 –link。

1. 拉取 MySQL 镜像

1

docker pull mysql:8.0.27

1. 创建 MySQL 数据目录

1

mkdir -p ~/.halo/mysql

1. 启动 MySQL 实例

1

docker run --name some-mysql -v ~/.halo/mysql:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=my-secret-pw --net halo-net --restart=unless-stopped -d mysql:8.0.27

注意: 请将 my-secret-pw 修改为自己需要的密码后再执行，密码尽量包含小写字母、大写字母、数字和特殊字符且长度超过 8 位。

释意

1

-e MYSQL_ROOT_PASSWORD=my-secret-pw`: 指定`MySQL`的登录密码为 `my-secret-pw

-v ~/.halo/mysql:/var/lib/mysql 命令: 将宿主机的目录 ~/.halo/mysql 挂载到容器内部的目录 /var/lib/mysql，默认情况下 MySQL 将向 ~/.halo/mysql 写入其数据文件。

--net halo-net: 将该容器加入到 halo-net 网络,连接到 halo-net 网络的任何其他容器都可以访问 some-mysql容器上的所有端口。

1. 进入 MySQL 容器中登录 MySQL 并创建 Halo 需要的数据库

• (1) some-mysql 为 MySQL 实例的容器名称

  1	docker exec -it some-mysql /bin/bash

• (2) 登录 MySQL

  1	mysql -u root -p

• (3) 输入 MySQL 数据库密码

• (4) 创建数据库

  1	create database halodb character set utf8mb4 collate utf8mb4_bin;

• (5) 使用 exit退出MySQL 并退出容器

1. 创建 Halo 工作目录

1

mkdir ~/.halo && cd ~/.halo

1. 下载示例配置文件到工作目录

1

wget https://dl.halo.run/config/application-template.yaml -O ./application.yaml

1. 编辑配置文件，配置数据库，其他配置请参考参考配置

1

vim application.yaml

你需要做如下几个步骤：

• 注释 H2 database configuration.部分
• 启用 MySQL database configuration.部分
• 修改 datasource 下的 url 中的 ip 地址部分为容器名称并修改密码为您设定的 MySQL 密码

修改后的内容如下:

1
2
3
4
5
6

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://some-mysql:3306/halodb?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true
    username: root
    password: my-secret-pw

1. 创建 Halo 容器实例

1

docker run -it -d --name halo -p 8090:8090 -v ~/.halo:/root/.halo --net halo-net --restart=unless-stopped halohub/halo:1.6.0

1. 打开 http://ip:端口号 即可看到安装引导界面。

MySQL 部署在 Docker 如何使用 Docker 安装 Halo

如果您已有 Docker 部署的 MySQL 实例，那么为了保证 Halo 和 MySQL 两个容器的网络可以互通，和上文同样的思路可以创建一个网络让 MySQL 和 Halo 都加入进来。

1. 使用 docker ps 来查看的你 MySQL 容器实例的名称或 container id， 例如 some-mysql
2. 创建一个桥接网络，让 MySQL 加入，首先使用 docker network ls 来查看一下都有哪些网络名称，起一个不会冲突的网络名称，例如 halo-net，其次让已经存在的 MySQL 容器实例加入到该网络中

1

docker network connect halo-net some-mysql

1. 同之前一样创建 Halo 工作目录

1

mkdir ~/.halo && cd ~/.halo

1. 下载示例配置文件到工作目录

1

wget https://dl.halo.run/config/application-template.yaml -O ./application.yaml

1. 编辑配置文件，修改 MySQL 的数据库连接和密码

1

vim application.yaml

你需要做如下几个步骤：

• 注释 H2 database configuration.部分
• 启用 MySQL database configuration.部分
• 修改 datasource 下的 url 中的 ip 地址部分为容器名称并修改密码为您设定的 MySQL 密码

修改后的内容如下:

1
2
3
4
5
6

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://some-mysql:3306/halodb?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true
    username: root
    password: my-secret-pw

1. 创建 Halo 容器实例,并使用 --net 指定网络为刚才创建的halo-net

1

docker run -it -d --name halo -p 8090:8090 -v ~/.halo:/root/.halo --net halo-net --restart=unless-stopped halohub/halo:1.6.0

MySQL 在宿主机如何通过 Docker 安装 Halo

如果你已有 MySQL 但安装在宿主机，你想使用 Docker 安装 Halo 那么此时为了保证 MySQL 和 Halo 能网络互通，可以使用 host 网络模式即 --net host。

1. 创建 Halo 的工作目录

1

mkdir ~/.halo && cd ~/.halo

1. 拉取配置

1

wget https://dl.halo.run/config/application-template.yaml -O ./application.yaml

1. 使用 Docker 启动 Halo 实例并指定网络模式为 host

1

docker run -it -d --name halo -p 8090:8090 -v ~/.halo:/root/.halo --net host --restart=unless-stopped halohub/halo:1.6.0

编辑此页