升级NexT主题（由NexT.Mist v7.7.1 升级至 v7.7.2）

NexT v7.7.2

🌟 New Features

Native Dark Mode support 白天不懂夜的黑

1	+ darkmode: true

⭐ Features

Support MathJax v3.0 妙啊，支持新增的 braket、physics 宏包了

1	hexo clean && hexo g -d && hexo s -o

升级前的准备

NexT 提供了两种方案，这里我选的是第2种：NexT 方式，然后自己手动更新，而不是用 git pull

建议先去阅读Hexo 数据文件

首先去 https://github.com/theme-next/hexo-theme-next/releases 下载主题的源码，解压重新命名为 next，然后复制到博客主题目录下并覆盖之前 next 目录下的相同文件，接着对下面这些地方做修改：

点击侧边栏头像返回首页

找到主题侧边栏配置文件 next/layout/_partials/sidebar/site-overview.swig；
找到头像配置位置 class="site-author-image"；

设置点击头像跳转，需将对应头像配置修改如下：

site-overview.swig

+ <a href="/">
  <img class="site-author-image" itemprop="image" alt="{{ author }}"
    src="{{ url_for(theme.avatar.url) }}">
+ </a>

博客页脚内容居中（Mist主题默认左对齐）

在 ./themes/next/source/css/_schemes/Mist 目录下打开 _layout.styl，定位到 .footer-inner，做如下修改:

_layout.styl

.footer-inner {
- text-align: left;
+ text-align: center;

  +mobile() {
    text-align: center;
    width: auto;
  }
}

设置置顶图标

在 ./themes/next/layout/_macro/post.swig 找到 <div class="post-meta">,在其后添加下列代码：

post.swig

        <div class="post-meta">
          
+          {% if post.top %}
+            <span style="color: Tomato;">
+            <i class="fa fa-thumb-tack fa-fw"></i></span>|
+          {% endif %}

          {%- set date_diff = date(post.date) != date(post.updated) %}

字体设置

./source/_data/next.yml

font:
  enable: true

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

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Merriweather
    size: 1.1

  # Font settings for site title (.site-title).
  title:
    external: true
    family: Roboto Slab
    size:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Ubuntu Mono

1	./themes/next/source/css/_variables/base.styl

./source/_data/next.yml

custom_file_path:
  # head: source/_data/head.swig
         ....

- #variable: /source/_data/variables.styl
+ variable: /source/_data/variables.styl
        ...
- #style: source/_data/styles.styl
+ style: source/_data/styles.styl

./source/_data/variables.styl

// Font families.
+ $font-family-chinese      = "Noto Serif SC", "PingFang SC", "Microsoft YaHei"; // 增加思源宋体
+ $table-font-size          = $font-size-medium; // 增大代码字体
+ $line-height-code-block   = 1.5; // Can't be less than 1.3;

./source/_data/head.swig

<!-- 思源宋体国内cdn加速 -->
+ <link href="https://fonts.loli.net/css?family=Noto+Serif+SC:400,500,700&display=swap&subset=chinese-simplified" rel="stylesheet">
<!-- Ma+Shan+Zheng字体（用于每日诗词）国内cdn加速 -->
+ <link href="https://fonts.loli.net/css?family=Ma+Shan+Zheng&display=swap&subset=chinese-simplified" rel="stylesheet">

这里指的是代码块，它的用法如下：

1	```[language] [title] [url] [link-text]

参考：主题自带样式-代码块高亮

./source/_data/styles.stylNexT添加今日诗词


// 今日诗词

#jrsc {
  font-family: 'Ma Shan Zheng', cursive;
  // font-style: italic;
  font-style: normal;
  font-size: 21px;
  color: #fc6423;
}

// 稍微加粗 post 当中的中文字体
.post-body {
  color: #111;
}

在侧栏添加背景音乐

前提去 https://github.com/MoePlayer/APlayer 下载 dist 目录并将其放到主题下的 source 文件夹中，这里我将其重命名成了 musicdist，然后在其目录下配置自己的歌单，我的为 music.js，具体配置参数见前面的Github 链接。

在上面同样的文件最后面添加下面代码

site-overview.swig

+ <link rel="stylesheet" href="/musicdist/APlayer.min.css">
+ <div id="aplayer"></div>
+ <script type="text/javascript" src="/musicdist/APlayer.min.js"></script>
+ <script type="text/javascript" src="/musicdist/music.js"></script>

图片居中

在 next/source/css/_schemes/Mist/_posts-expanded.styl 中找到 .posts-expand 中的下列内容：

1
2
3

.post-body img {
    margin-left: 0;
  }

将其修改为：

1
2
3

.post-body img {
    margin: 0 auto;
  }