2020-02-11 Hexo-Next-Github博客优化

前言

我的博客已经重新搭建，使用Hexo框架，并部署Next-Mist V7.7.0主题，依旧使用GitHub Page方式，博客为林深时见璐，目前持续更新中，欢迎访问。
这篇博文也发布在我的博客中，访问博客优化原文，写这篇博文在于新版本的Next主题与旧版本存在差异，且自定义内容支持比较丰富，可作为参考。

优化主题

我的个人博客是林深时见璐，本文优化的效果可以访问博客进行观看。

阅读全文设置

由于初始博客并没有设置摘要的形式，因此博客首页会展示每篇博文的全文，显得十分冗长，为此设置阅读全文能简化博客首页，且让博文能以简短的摘要进行展示。^[1]

设置方法采用的是在博文中选择适当位置进行内容截断，填写以下内容：

 <!-- more -->

这样首页便只会展示在截断位置前的内容。

`分类板块`二级目录显示

在类别模块，往往只显示一种类别，但有时候博客之间归属一大类却各有差异，因此设计二级分类目录，使得类别简洁的同时又能将具体博文区别。因为Hexo原生支持父子分类，在博文撰写的md文件首部categories下原先的类别A下再写一个类别B，即可得到父子类的效果，A为父类，B为子类，示例如下^[2]：

 categories:
 - 技术
 - 博客搭建

评论系统使用`utteranc`

原先使用的是主题自带的gitalk作为博客评论系统，而更改为utteranc的原因有两个：
1）gitalk存在原始配置泄露及访问授权等问题，utteranc具备细粒度的权限控制，且接受隐私项目授权；
2）二者都是基于GitHub的issue系统进行评论，很好转换。

转换评论系统首先将gitalk在../next/_config.yml中设置为false，将GitHub中授权的应用删除。安装utteranc步骤如下^[3]：
1）在GitHub APP中安装utterances，链接为https://github.com/apps/utterances，安装后如图：
[图片上传失败...(image-b0aafc-1581396886730)]
2）安装插件，在hexo文件目录下打开git bash，安装如下：

 npm install theme-next/hexo-next-utteranc

3）在../next/layout/_third-party/comments/中新建文件utterances.swig，写入以下内容：

{% if theme.utteranc.enable %}
  <script src="https://utteranc.es/client.js"
    repo="{{ theme.utteranc.repo }}"
    issue-term="{{ theme.utteranc.issue_term }}"
    theme="{{ theme.utteranc.theme }}"
    crossorigin="anonymous"
    async>
  </script>
{% endif %}

4）在../next/layout/_partials/comments.swig中找到最后一句elseif并在其中的<div></div>后面增添以下内容：

{% elseif theme.utteranc.enable %}
      <div class="comments" id="comments">
        {% include '../_third-party/comments/utterances.swig' %}
      </div>

5）在../next/_config.yml添加下面的配置内容：

# Demo: https://utteranc.es/  http://trumandu.github.io/about/
utteranc:
  enable: true
  repo: linwhitehat/linwhitehat.github.io
  pathname: pathname
  # theme: github-light,github-dark,github-dark-orange
  theme: github-light
  cdn: https://utteranc.es/client.js
  # If you want to modify priority, please config in **hexo**
  #priority:

更新完博客配置后，便能看到之前使用gitalk留下的评论，同时也能发表新评论。

图片设置

图片放大查看的功能，这是默认功能，可以选择使用的插件fancybox或mediumzoom，我使用后者，在../next/_config.yml中搜索mediumzoom，将false改为true。
图片标题说明，当前的配置情况下，即使使用下面展示的markdown语法中的图片说明也无法正常显示在博客中，其中Optional title是图片的title属性，若使用Next主题中的fancybox插件则自动会显示，其他的配置则需要更改Hexo渲染组件。

![Alt text](../img.jpg "Optional title")

修改渲染配置步骤如下：
1）在../hexo/node_modules/marked/lib/marked.js中进行下述修改，其中-表示删除+表示增加：

Renderer.prototype.image = function(href, title, text) {
- href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
- if (href === null) {
-   return text;
-}
+ if (this.options.baseUrl && !originIndependentUrl.test(href)) {
+   href = resolveUrl(this.options.baseUrl, href);
+ }
+ var out = '<img src="' + href + '" alt="' + text + '"';
  if (title) {
-   out += ' title="' + title + '"';
+   out += '>' + '<i class="img-caption">' + '◎ ' + title + '</i';
  }
  out += this.options.xhtml ? '/>' : '>';
  return out;
};

2）增加自定义CSS样式，在../source/_data/styles.styl中增加以下内容：

.img-caption {
    font-style: normal;
    margin: 0 0 .7em;
    font-size: 90%;
    color: #555;
    display: block;
    text-align: center;
    text-indent: 0;
    font-family: STKaiti, serif;
}

图片居中^[4]

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

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

将其修改为：

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

博文脚注

脚注也可以叫注脚，Hexo自带的默认markdown编辑器渲染效果不支持脚注的显示，因此安装插件进行渲染支持，我使用的是hexo-reference，整体效果更可观，安装如下^[5]^[6]：

 npm install hexo-reference --save

在博客撰写的md文件中使用如下（^和数字之间不需要空格）：

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

修改篇尾的标签符号

默认的标签符号是#，可以使用自带的标签图案，修改方式即在../next/_config.yml中将tag_icon更改为true。
[图片上传失败...(image-afa835-1581396886730)]
[图片上传失败...(image-a59243-1581396886730)]

修改分割线

原先的默认分割线是虚线，将其修改为实线，在../next/source/css/_common/scaffolding/base.styl中将下属配置删除^[7]：

background-image: repeating-linear-gradient(-45deg, white, white 4px, transparent 4px, transparent 8px);

页脚显示博客运行时间

在博客页脚显示博客运行时间^[8]，这个在默认主题配置中并没有，因此需要自己添加，修改配置文件是../next/layout/_partials/footer.swig，在配置文件中找到你想显示在博客页脚的位置，比如我配置在主题版本信息下，显示效果如图：

博客运行时间

不同配置位置可以自行尝试修改，具体添加代码如下：
<details>
<summary>点击查看具体代码</summary>

<div id="days"></div>
<script>
function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("01/10/2019 00:13:14");//修改为自己的blog建站时间
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML="本站已安全运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
    if (i<10)
    {i="0" + i};
    return i;
}
show_date_time();
</script>

</details>

显示博客阅读数量

已经有许多教程，在博客主题配置中也有多种选择，根据网上教程的介绍，busuanzi插件只能在博文显示阅读数，因此我选择部署LeanCloud插件来显示阅读数，但是在部署过程中遇到不少问题，而且没有在任何教程中找到完整的说明，尽管网上也有可行的教程^[9]，我还是记录下来。

注册

在LeanCloud官网中进行注册并登录。

应用配置

进入控制台之后，点击创建应用，填写应用名称，计价方案选择开发版，创建成功之后，在对应应用右上角点击齿轮状的设置，如图：
[图片上传失败...(image-9b204e-1581396886730)]
在设置界面，选择存储，选择创建Class，Class名称输入Counter，因为这个类名与Next主题兼容，默认ACL权限设置为无限制即所有用户可读可写。
在设置界面，选择设置，选择应用Keys，将界面显示的AppID和AppKey复制，在主题配置文件修改时需要使用。
在上述的设置选项下选择安全中心，在Web安全域名的填写框中输入博客的完整域名，保证统计数据只在记录的域名中有效。

博客配置

在博客的../next/_config.yml配置文件中，找到leancloud_visitors，设置配置信息如下：

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: 
  app_key: 
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in lc counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set the `security` to `false`.
  security: false
  betterPerformance: true

app_id处填写应用配置时复制的AppID，app_key填写应用配置时复制的AppKey。

安全插件安装及部署

如果上述配置完成后，更新部署博客，能够正常显示阅读数量，后续的内容可以选择跳过。
如果上述配置不能正常显示阅读数量，且存在Counter not initialized! See more at console err msg.的问题，此时在博客页面打开控制台（Chrome下按F12或右键选择检查），点击Console查看是否存在下图显示内容：
[图片上传失败...(image-4529db-1581396886730)]
这是因为LeanCloud插件存在安全问题，需要安装另一个插件hexo-leancloud-counter-security进行完善。
首先在../next/_config.yml主题配置文件中的leancloud_visitors找到security选项，将其改为true，同时确认同一配置文件下的valine部分的enable和visitor是false，因为这两者会产生冲突，如果使用valine作为评论系统，可以参照网上教程进行冲突解决。
然后在博客根目录下打开git bash或CMD，安装插件：

npm install hexo-leancloud-counter-security --save

由于插件存在依赖性，出现Error: Cannot find module 'babel-runtime/regenerator'错误时需要再安装模块babel-runtime：

npm install babel-runtime --save

安装完成之后，注册用户，其中用户名和密码替换为你要设置的用户名和密码内容（不需要和LeanCloud的登陆名和登陆密码一样）：

hexo lc-counter r 用户名 密码

之后修改博客配置文件../hexo/_config.yml，添加以下内容（所有选项都必须填写，此处的username和password即刚刚注册的用户名和密码，网上有教程认为此处空白可等部署时输入，但我部署时会因为配置缺少导致出错，所以建议配置中直接写入），否则部署时会报错TypeError: Cannot read property ‘enable_sync’ of undefined：

leancloud_counter_security:
  enable_sync: true
  app_id: <<your app id>>
  app_key: <<your app key>
  username: <<your username>>
  password: <<your password>>

之后在同一配置文件下的deploy部分，做以下修改：

deploy:
-
  type: git
  repo: https://github.com/username/username.github.io
  branch: master
-
  type: leancloud_counter_security_sync

由于搭建博客时已经部署到GitHub，要同时部署git和leancloud需要在配置文件中写清楚，其中git部分的username是对应博客的GitHub用户名，可参照我的博客搭建个人博客(hexo+next+github）中的说明。
完成插件安装和配置修改后，到LeanCloud的应用中查看存储下的_User项，是否已经添加刚刚注册的用户，如图：
[图片上传失败...(image-376e33-1581396886730)]
存在用户后，查看Counter项，对表权限进行修改，点击Counter，选择权限，点击修改，分别修改add_fields、create和delete。

Counter权限修改

add_fields和create两项的修改步骤一致：
1）选择指定用户
2）输入已注册的用户名，添加
[图片上传失败...(image-9b321d-1581396886730)]
3）查看已添加用户正常显示
[图片上传失败...(image-72632f-1581396886730)]
对于delete项，只保留上述第一个步骤即可，不需要添加用户。
如果希望保护访问数据不被篡改，可以选择云引擎，选择部署，选择在线编辑，点击创建函数，选项依次选择Hook、beforeUpdate和Counter，在函数中添加以下内容：

var query = new AV.Query("Counter");
if (request.object.updatedKeys.indexOf('time') !== -1) {
    return query.get(request.object.id).then(function (obj) {
        if (obj.get("time") + 1 !== request.object.get("time")) {
            throw new AV.Cloud.Error('Invalid update!');
        }
    })
}

[图片上传失败...(image-8b1d66-1581396886730)]
保存上述设置之后，可看到添加的函数，点击部署，等待部署完成即可。
[图片上传失败...(image-b9cc3e-1581396886730)]

修改lean-analytics.swig配置

如果上述配置完成后正常显示阅读数可跳过这部分，若出现阅读数不正常且显示为0，可参照此部分^[10]，原因可能是LeanCloud接口出现变化。对..\next\layout_third-party\statistics\lean-analytics.swig做以下修改：

# 修改第13行，-表示删除，+表示添加
- Counter('get', `/classes/Counter?where=${JSON.stringify({ url })}`)
+ Counter('get', `/classes/Counter?where=${encodeURIComponent(JSON.stringify({ url }))}&limit=1`)

# 修改第58行
- Counter('get', `/classes/Counter?where=${JSON.stringify({ url: { '$in': entries } })}`)
+ Counter('get', `?where=${encodeURIComponent(JSON.stringify({ url: { '$in': entries } }))}`)

设置中文缩进

中文撰写时习惯首行缩进，但是直接输入空格不能奏效，网上有教程可以设置自动缩进2 em，但是这样设置后还需要对不需要缩进的位置进行单独设置，同时自动缩进可能对排版不友好的文章不友好，可能在不该缩进的地方都给缩进了，所以我选择在写博文时手动在需要缩进的地方进行设置，即手动输入空格，此处将习惯的space即空格键输入换成&emsp;或 即可^[11]，输入两个即缩进两格，注意分号;不要漏掉，其他空格替换符如下：

半方大的空白：   `&ensp;` or `&#8194;`
全方大的空白：   `&emsp;` or `&#8195;`
不断行的空白格： `&nbsp;` or `&#160;`

静态代码压缩

为了让博客源码显得紧凑，也为了让网站加载速度变快，使用gulp对博客源码进行压缩。^[12]
1）安装gulp插件
安装gulp记得需要在全局环境下进行安装，不要只在博客根目录下的环境进行安装，否则会导致gulp无法正常执行。

npm install gulp --save  #安装gulp

2）安装功能模块
以下功能模块会在后续配置中使用，可以根据个人实际需要进行选择安装，一般建议html和css相关源码进行压缩，所以对应模块建议安装。

# 安装功能模块
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 额外的功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-env del --save

3）gulpfile.js配置
在博客根目录../hexo新建文件gulpfile.js，添加以下配置信息，可根据自身需要进行修改：
<details>
<summary>点击查看具体代码</summary>

var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象

// 清除public文件夹
gulp.task("clean", function() {
  return del(["public/**/*"]);
});

// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function() {
  return hexo.init().then(function() {
    return hexo
      .call("generate", {
        watch: false
      })
      .then(function() {
        return hexo.exit();
      })
      .catch(function(err) {
        return hexo.exit(err);
      });
  });
});

// 启动Hexo服务器
gulp.task("server", function() {
  return hexo
    .init()
    .then(function() {
      return hexo.call("server", {});
    })
    .catch(function(err) {
      console.log(err);
    });
});

// 部署到服务器
gulp.task("deploy", function() {
  return hexo.init().then(function() {
    return hexo
      .call("deploy", {
        watch: false
      })
      .then(function() {
        return hexo.exit();
      })
      .catch(function(err) {
        return hexo.exit(err);
      });
  });
});

// 压缩public目录下的js文件
gulp.task("compressJs", function() {
  return gulp
    .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
    .pipe(gulpif(!isScriptAll, changed("./public")))
    .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
    .pipe(plumber())
    .pipe(
      gulpBabel({
        presets: [es2015Preset] // es5检查机制
      })
    )
    .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
    .pipe(gulp.dest("./public")); //输出到目标目录
});

// 压缩public目录下的css文件
gulp.task("compressCss", function() {
  var option = {
    rebase: false,
    //advanced: true,               //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
    compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
    //keepBreaks: true,             //类型：Boolean 默认：false [是否保留换行]
    //keepSpecialComments: '*'      //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
  };
  return gulp
    .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
    .pipe(gulpif(!isScriptAll, changed("./public")))
    .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
    .pipe(plumber())
    .pipe(cleancss(option))
    .pipe(gulp.dest("./public"));
});

// 压缩public目录下的html文件
gulp.task("compressHtml", function() {
  var cleanOptions = {
    protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
    unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
  };
  var minOption = {
    collapseWhitespace: true, //压缩HTML
    collapseBooleanAttributes: true, //省略布尔属性的值  <input checked="true"/> ==> <input />
    removeEmptyAttributes: true, //删除所有空格作属性值    <input id="" /> ==> <input />
    removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
    removeComments: true, //清除HTML注释
    minifyJS: true, //压缩页面JS
    minifyCSS: true, //压缩页面CSS
    minifyURLs: true //替换页面URL
  };
  return gulp
    .src("./public/**/*.html")
    .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
    .pipe(plumber())
    .pipe(htmlclean(cleanOptions))
    .pipe(htmlmin(minOption))
    .pipe(gulp.dest("./public"));
});

// 压缩 public/uploads 目录内图片
gulp.task("compressImage", function() {
  var option = {
    optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
    progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
    interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
    multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化
  };
  return gulp
    .src("./public/medias/**/*.*")
    .pipe(gulpif(!isScriptAll, changed("./public/medias")))
    .pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
    .pipe(plumber())
    .pipe(imagemin(option))
    .pipe(gulp.dest("./public"));
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器
gulp.task(
  "build",
  gulp.series(
    "clean",
    "generate",
    "compressHtml",
    "compressCss",
    "compressJs",
    "compressImage",
    gulp.parallel("deploy")
  )
);

// 默认任务
gulp.task(
  "default",
  gulp.series(
    "clean",
    "generate",
    gulp.parallel("compressHtml", "compressCss", "compressImage", "compressJs")
  )
);

</details>
4）部署
完成配置修改后，在博客根目录下打开git bash，按照配置修改后更新部署即可。

友情链接

在Next.Mist主题下，友情链接默认显示在站点概览下方，在主题配置文件../next/_config.yml中找到Blog rolls设置块，其中links_settings是对友链的样式进行配置，links下按照以下格式添加即可添加友情链接：

林深时见璐: https://linwhitehat.github.io/

添加音乐

在分享博客时，一些文艺类型的博客可能适合添加背景音乐，既烘托文章意蕴，也让阅读者能欣赏雅乐。博客撰写是使用markdown，而markdown对html语法的支持是天然的，而为了在博客中样式更为美观，需要使用css进行一定设置，更多样式可参照此博客^[13]，博文中直接写入以下代码：

<iframe 
    frameborder="no" border="0" marginwidth="0" 
    marginheight="0" width=330 height=86 
    src="//music.163.com/outchain/player?type=2&id=461544312&auto=0&height=66">
</iframe>

效果如下：
<iframe
frameborder="no" border="0" marginwidth="0"
marginheight="0" width=330 height=86
src="//music.163.com/outchain/player?type=2&id=461544312&auto=0&height=66">
</iframe>

自定义设计思路

在../hexo/source/_data/目录下可以自建自定义样式文件，在../next/_config.yml主题配置文件中custom_file_path即对应自定义配置文件信息，而调试的过程可以在浏览器的开发者模式下进行调试^[14]。

自定义站点LOGO

默认的Hexo博客使用的是Hexo的Logo，在chrome浏览器访问博客时，标签页的图标即默认Logo，而Hexo博客本身支持使用自定义的图标，修改站点Logo步骤如下：

选取合适的图片，制作favicon图标，使用比特虫^[15]生成ico格式文件；
存储自定义的ico图片文件到../next/source/images目录下；
修改博客主题配置文件../next/_config.yml，找到favicon选项，修改如下：

- small: /images/favicon-16x16-next.png
- medium: /images/favicon-32x32-next.png
+ small: /images/new-favicon-16x16.ico
+ medium: /images/new-favicon-32x32.ico

自定义字体

字体默认配置

博客默认的字体可能看起来不美观，可以在博客主题配置相关文件../next/source/css/_variables/base.styl中查看默认的字体配置信息如下:

$font-family-chinese      = "PingFang SC", "Microsoft YaHei";

$font-family-base         = $font-family-chinese, sans-serif;
$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');

$font-family-logo         = $font-family-base;
$font-family-logo         = get_font_family('title'), $font-family-base if get_font_family('title');

$font-family-headings     = $font-family-base;
$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings');

$font-family-posts        = $font-family-base;
$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts');

$font-family-monospace    = consolas, Menlo, monospace, $font-family-chinese;
$font-family-monospace    = get_font_family('codes'), consolas, Menlo, monospace, $font-family-chinese if get_font_family('codes');

$font-family-icons        = 'FontAwesome';

使用Googlr Fonts字体

通过在线加载字体的方式实现博客字体自定义（也可以选择本地字体，可见网上教程），Google Fonts提供的英文字体质量很高，同时近几年也开始提供多种中文字体（也有其他语言字体），尽管样式有限，但是质量还是不错的。Next主题中带有字体修改配置，在主题配置文件../next/_config.yml中找到font，可看到默认设置：
<details>
<summary>点击查看具体代码</summary>

font:
  # Use custom fonts families or not.
  # Depended options: `external` and `family`.
  enable: false

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

  # 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: Lato
    size:

  # Font settings for site title (.site-title).
  title:
    external: true
    family:
    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:

</details>
修改配置步骤如下:

将enable选项修改为true，host可修改为国内镜像fonts.loli.net；
global、title、posts等选项是对具体项的字体设置，建议参考以下设置：

- global: 网站全局字体设置，建议填写英文字体
- 其他类型可根据个人喜好

设置博客中文字体

在../next/source/css/_variables/base.styl中修改默认中文字体，例如我选择中文字体为Noto Serif SC，修改如下：

// Font families.
-$font-family-chinese      = "PingFang SC", "Microsoft YaHei"
+$font-family-chinese      = "Noto Serif SC", "PingFang SC", "Microsoft YaHei"

加载字体设置

在博客中载入设置的字体，在自定义文件../hexo/source/_data/head.swig中加入以下内容：

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:400,500,700&display=swap&subset=chinese-simplified" rel="stylesheet">

加入的<link>标签内容在Google Fonts中生成，选中一款字体后，点+号选择，在底部会有一个选项框，点击一下会弹出字体设置框，点击CUSTOMIZE，对字体进行自定义设置，然后在EMBED中可以看到自动生成的<link>代码，将其添加到上述对应位置，其中域名fonts.googleapis.com可修改为国内镜像域名fonts.loli.net。

自定义超链接样式

在自定义样式文件../hexo/source/_data/styles.styl中添加以下内容，主要是颜色和下划线的设置，其他可以根据个人喜欢修改（颜色可参照RGB）^[16]：

// 超链接样式
.post-body a {
    color: rgb(32, 178, 170);
    border-bottom: none;
    &:hover {
      color: rgb(30, 144, 255);
      text-decoration: underline;
    }
}
.posts-expand .post-meta a, .post-copyright a {
    border-bottom: none;
    &:hover {
      color: rgb(30, 144, 255);
      text-decoration: underline;
    }
}
a {
    border-bottom-color: rgb(80, 115, 184);
}
a:hover {
    color: rgb(30, 144, 255);
    border-bottom-color: rgb(30, 144, 255);
}

<span id="Update">配置修改后更新部署</span>

输入以下命令完成每次更新：

 hexo clean
 hexo g
 gulp
 gulp build
 hexo d

结束

这篇博客基于hexo和next初始配置完成的情况对博客进行主题功能和外观的优化，撰写初衷是将自身搭建博客进行记录，因为Hexo主题更新频繁，不同版本之间的配置处理并不完全一致，根据已有的参考需要进行实际优化处理，同时也对Hexo结构了解更深刻，希望将来能更多的自定义实现渲染效果的设计，搭建更自主化的博客。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

2020-02-11 Hexo-Next-Github博客优化