Hexo搭建个人博客（三）主题美化篇

这篇文章主要介绍本人做的一些美化，大部分教程收集自互联网。

1. 配置文件介绍

在执行hexo init指令后，博客目录下会生成相应的配置文件。

下面对经常操作的文件进行介绍：

_config.yml 是Hexo的网站配置文件，可以修改网站的图标，标题，副标题，个人介绍等相关信息。

source 文件夹下主要存放个人博客文章内容，最新版本的主题自定义css样式需要在source文件夹下新建_data目录创建.yml的配置信息。具体内容还要参考不同的主题修改信息。

themes文件夹下是安装的主题信息，关于主题的修改在不同的主题文件夹中操作。

2.相关配置说明

2.1 网站信息配置

打开框架配置文件_config.yml,按照需进行修改。

title 网站的名称，会在标签页面显示。论一个骚气名字的重要性

subtitle 网站的副标题，不同的主题会有不同的显示位置

description 网站的描述，具体显示位置视主题情况而定

author 名称

language 网站语言设置

2.2 主题样式设置

不同于网站配置文件，在/themes/next目录下也存在一个_config.yml文件，在这个文件中可以修改网站主题页面的信息。

2.2.1 主题风格设置

Next主题一共提供了4中不同样式的风格Muse、Mist、Pisces、Gemini。

输入vi _config.yml编辑配置信息，按下:进入命令行模式，输入 /Schemes查找主题样式修改位置， n查找下一处， N查找上一处。

Muse

Mist

Pisces

Gemini

2.2.2 网站图标设置

打开themes路径下的配置文件，找到favicon输入网站图标路径。

对应的图标上传路径为：/themes/next/source/images可以使用Xftp将本地喜欢的文件上传至服务器端，注意此处的图标大小为8$\times$8或者16$\times$16。

关于网站的图标，这里可以在线自定义图标样式和大小。

2.2.3 备案号设置

如果在国内注册了域名，一定要去ICP进行备案

备案通过后，ICP会给你发邮件告诉你的备案号，你需要将其添加在页面底部。

备案号设置十分简单，只要将备案号填入相应的部分就行了。

如果同时有公安备案号也在这里进行设置即可。

2.2.4 评论系统

在next主题中，可供配置的第三方评论系统有许多。

本人使用的是Valine评论系统，配置起来十分方便。

第一步注册LeanCloud作为评论数据库

登录LeanCloud平台注册账号并创建应用。

第二步创建Comment和Counter类

这一步是整个步骤中的坑点，一定要检查创建的应用中是否存在Comment和Counter类，这两个类的权限设置为所有用户。

同时打开设置，只将数据存储功能打开，并输入自己的网站域名。

第二步获取密匙

修改配置文件的相应位置

第三步修改评论框样式

通过修改css样式可以修改评论框样式，自定义的css样式在新版的hexo中要在source目录下新建_data/styles.styl。打开文件输入一下代码，即可修改评论框样式。

/*valine 评论系统样式*/

div#comments.comments.v{
  margin-top: 0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

div.vheader.item2{
  border-bottom: 1px solid #5f5f5f;
  height: 35px !important;
}

.v .vwrap .vheader.item2 .vinput{
  height: 30px !important;
  border: 0px !important;
  width: 25% !important;
  margin: 0px !important;
}

input.vnick.vinput{
  border-right: 2px solid #a4d8fa !important;
}

div.vcontrol{
  padding-top: 0px !important;
}

div#comments.comments.v{
  border: 0px;
}

.v .vwrap{
  border: 2px solid black !important;
  overflow: visible !important;
  counter-reset: avater;
}

.v .vwrap .vedit .vemojis{
  width: 600px !important;
  background-color: #fff !important;
  border-radius: 5px !important;
}

.v .vwrap .vedit .vpreview {
  width: 600px !important;
  background-color: #fff !important;
  border-radius: 5px !important;
}

.v .vbtn{
  background-color: #5f5f5f !important;
  color: #fff !important;
}

.v .vwrap .vedit .vctrl{
  text-align: left !important;
}

.v .vwrap .vedit .vctrl span{
  background-color: #7f7f7f !important;
  color: #fff !important;
  border-radius: 3px !important;
  padding: 3px !important;
}

.v .vwrap .vedit .vctrl{
  padding: 0px !important;
  margin: 0px !important;
}


.v .veditor{
  min-height: 70px !important;
  height: 70px !important;
}

.v .vlist .vquote .vcard{
    border-left:1px solid #E4E6F1;
    margin-top:5px;
}


.v .vlist .vcard .vhead .vsys{
  display: none !important;
  background-color: #fff !important;
}

.v .vlist .vcard .vh .vmeta .vat{
  background-color: #7f7f7f !important;
  color: #fff !important;
  border-radius: 3px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}



.v .vlist .vcard .vh .vquote .vmeta{
    margin-right:50px;
}

.v .vlist .vcard .vquote{
  counter-reset: avaters;
}



.v .vlist .vcard  p{
  margin-bottom: 0px !important;
  color: #666;
  text-align: left;
  letter-spacing: 3px; 
  line-height: 25.59375px;
}
.v .vlist .vcard .vquote a.at{
  float: left;
  margin-right: 13px; 
  color: #567843;
  text-decoration: none;
}

.v .vlist .vcard .vquote .vcontent{
  font-size: 15px;
  font-weight: 200;
}

.v .vlist .vcard .vcontent{
  margin-top: 58px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding-top: 0px !important;
}


.v .vlist .vcard{
  padding-top: 8px !important;
}

.v .vlist .vcard .vhead{
  float: left !important;
}

.v .vlist .vcard .vh .vmeta{
  float: right !important;
}

.v .vlist .vcard .vcontent.expand:after{
  content: "点击查看全部" !important;
  font-weight: 400 !important;
}
.power{
    display:none;
} 
.v .vwrap .vedit .vctrl{
    display:none !important;
}

代码转自网络

2.2.5 添加数学公式

写作过程中难免会出现数学公式的编辑，因此，在hexo中提供了数学公式的渲染工具Mathjax。

Mathjax的配置步骤如下：

一、安装Kramed

npm uninstall hexo-renderer-marked --save npm install hexo-renderer-kramed --save

二、更改文件配置

打开/node_modules/hexo-renderer-kramed/lib/renderer.js，更改为直接返回text。

三、停止使用 hexo-math，并安装mathjax包

卸载hexo-mathnpm uninstall hexo-math --save

安装 hexo-renderer-mathjax 包npm install hexo-renderer-mathjax --save

四、更新 Mathjax 的 配置文件

打开/node_modules/hexo-renderer-mathjax/mathjax.html

复制以下代码到对应位置

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

五、更改默认转义规则

为了避免出现不同语法编辑器中转义字符的规则冲突，对配置文件进行修改。

打开/node_modules\kramed\lib\rules\inline.js

更改规则

escape: /^\\([`*\[\]()# +\-.!_>])/,

em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

六、开启mathjax

打开/themes/next/_config.yml

添加engine: mathjax并开启mathjax公式渲染。

在新建的文章中添加：mathjax: true

2.2.6 添加页面宠物

我才没有在我的博客页面养猫！

安装模块npm install --save hexo-helper-live2d

领养宠物npm install {packagename} 你可以在这里样式预览找到你的宠物。将{packagename}替换成你喜欢的宠物名即可。如npm install live2d-widget-model-shizuku。

打开网站配置/blog/_config.yml
输入一下配置即可完成领养：

# 宠物设置
live2d:
  enable: true   #开启宠物
  scriptFrom: local
  model:
    use: live2d-widget-model-hijiki
  display:
    position: right   #指定宠物显示的位置
    width: 100   #指定宠物显示的宽度
    height: 170   #指定宠物显示的高度
  mobile:
    show: true  #是否在手机上显示

    folder: css

2.2.7 文章部分

文章字体设置

爬上梯子，在谷歌字体找到你喜欢的字体

填入配置文件中就可以了。

文末提示

在目录 themes/next/layout/_macro/ 下新建 passage-end-tag.swig ，内容如下

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------我到底啦 <i class="fa fa-paw"></i> 感谢大佬-------------</div>
    {% endif %}
</div>

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

  <div>
       {% if not is_index %}
         {% include 'passage-end-tag.swig' %}
       {% endif %}
  </div>

打开主题配置文件 ，添加代码如下：

# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

文章结尾标签样式更改

修改主题配置文件中

首页显示阅读更多

文章在首页展示时，显示摘要信息和阅读全文按钮。在新版本的hexo中，只要在编辑文章时添加<!-- more -->
就可以在首页显示摘要和阅读更多的按钮。

文章阴影设置

打开/themes/next/source/css/_custom/custom.styl添加

.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  

2.2.8 图片设置

七牛云图床

一、注册七牛云账户
在七牛邀请注册链接注册账号，并创建权限为公有。

。

建立注册实名，如果未实名使用默认分配的随机地址在30天后会被回收，特别不方便。

二、配置域名的 CNAME

CNAME 即指别名记录，也被称为规范名字。一般用来把域名解析到别的域名上，当需要将域名指向另一个域名，再由另一个域名提供 ip 地址，就需要添加 CNAME 记录。

点击左侧CDN，点击域名管理–>添加域名

设置你的图片外部引用url，分为两部分，红色部分自定义，蓝色部分为你的已备案域名。

复制CNAME信息

到服务器厂商，以阿里云为例，找到云解析

添加记录，分别填入刚刚自定义的域名和复制的CNAME值

等3-5分钟后，如果刚刚自定义的域名可以ping通，则配置正确。

三、安装图床管理软件

使用MPic作为图片的上传和外部url链接的复制。操作十分简单，下载安装完成后。设置MPic的账号，拖动图片，复制链接到博客文档即可。

图片点击放大

下载插件git clone https://github.com/theme-next/theme-next-fancybox3 fancybox
修改配置文件

2.3 Hexo admin文章管理

hexo admin是一个在线博客管理，和书写的地方，同时支持Markdown语法。十分好用

安装插件npm install --save hexo-admin

输入hexo s打开域名:4000/admin

输入用户名和密码后，将下面的代码片段复制到网站页面配置_config.yml文件中

在Post处可以新建文件，点击Deploy进行发布。

如果在linux服务器端，还需要在_config.yml路径下生成脚本文件

touch hexo-generate.sh;
vim hexo-generate.sh;

输入

hexo clean
hexo g
hexo d

保存退出，并输入

chmod +x hexo-generate.sh

2.4 其他

其他的美化设置，根据个人喜好可以在网络上进行搜寻。

如果针对某些细节的修改可以在Chorme右键想要修改的地方，让后点击检查。

找到当前页面的标签属性，在配置文件中进行修改。

3. 参考链接

Hexo博客Valine评论样式美化

Hexo博客的Next主题 7.5版本给首页文章添加阴影

Hexo文章中图片点击实现全屏查看

Hexo博客NexT主题美化之文末统一添加“本文结束”标记

Hexo博客NexT主题美化之新增看板娘(能说话、能换装)

返回主页ZhangXiao’s Blog

如何配置域名的 CNAME

使用LaTex添加公式到Hexo博客里

如何优雅地发布Hexo博客

4. 资源地址

在线自定义图标

配色方案

高清素材图片

谷歌字体

页面宠物样式