Hexo + Fluid 美化

注意

本文中的 “博客配置” 指的 Hexo 博客目录下的 _config.yml。

“主题配置” 指的是 theme/fluid/_config.yml 或者 _config.fluid.yml 。

注意区别

添加网站运行时间

页脚添加网站运行时间，只需要在主题配置中的 footer: content >添加：

footer:
  content: '
    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script src="/js/duration.js"></script>
    </div>
  '

之后在主题目录下创建 source/js/duration.js，内容如下：

var now = new Date();
function createtime() {
    var grt= new Date("03/03/2021 12:00:00");//在此处修改你的建站时间，格式：月/日/年 时:分:秒
    now.setTime(now.getTime()+250);
    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
    if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
    document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);

将建站时间修改为你自己的建站时间，即可在页脚加入网站运行时间

添加一言

在主题配置 _config.yml 中找到 custom_head ，修改如下：

custom_head: '
    <!-- 一言 -->
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
    '

修改完成之后，在任意地方添加如下代码即可获取一言

<p id="hitokoto">:D 获取中...</p>

添加音乐插件

1.安装aplayer

#npm安装
npm install --save hexo-tag-aplayer

可以看到在node_module文件夹中多出来一个aplayer文件夹即可

为了方便，将这个dist文件夹复制一份到主题目录下的source文件夹中。

2.设置博客配置文件

aplayer:
  meting: true

3.设置音乐

接着找到一个歌单、歌曲或专辑的链接，复制这个链接的id，这里以QQ音乐举例： https://y.qq.com/n/yqq/playlist/7868042847.html ，这个歌单的id就是7868042847；

最后将以下示例代码插入到你想要呈现播放器的地方即可：

<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css"> 
<scriptsrc="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script> 
<scriptsrc="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>

插入播放器

{% meting "7868005687" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:1000px" "preload:auto" %}

其中的tencent为公司名，也就是音乐平台，如: netease, tencent, kugou, xiami, baidu；有关选项列表如下:

4.进阶-为博客添加音乐页面

4.1使用命令新建名为music的page

hexo new page music

2.打开博客根目录/source/music/index.md文件，写入以下代码即可

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css"> 
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script> 
{% meting "7868005687" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:1000px" "preload:auto" %}

其他详见：APlayer官方文档

添加新页面（类似about页面）

1.使用命令创建新页面

hexo new page 页面名称

在根目录下的source 文件夹中找到 databases 文件夹，并打开里面的index.md文件。

2.第二步

在根目录下的source 文件夹中找到 databases 文件夹，并打开里面的index.md文件。
在头部里面添加以下代码：

layout: databases 
//此databases可以任取，但为方便管理，推荐这样取名。并且需要记住此名称，因为后面还需要用到。

3.第三步

找到主题配置文件，注意，不是根目录的配置文件，是themes文件夹里面的配置文件，即你下载的主题里面的配置文件。

再在配置文件里面，找到类似的代码的地方。不一定和这个一模一样的，找到类似的代码的地方即可。如：友链页、自定义页、关于页、标签页、分类页、归档页等写配置的地方。

#---------------------------
# 404页
# 404 Page
#---------------------------
page404:
  enable: true
  banner_img: avter.png
  banner_img_height: 85
  banner_mask_alpha: 0.3
  subtitle: "Page not found"

4.第四步

添加页面配置代码。根据以下代码可以自行修改，或者是根据关于（about）的配置代码进行修改。
注意：这里的databases就是在index.md里面写的那个名称。

#---------------------------
# 资料库
# databases Page
#---------------------------
databases:
  enable: true
  banner_img: avter.png
  banner_img_height: 60
  banner_mask_alpha: 0.3
  subtitle: 资料库 # 打字机内容,即页面显示的内容



#---------------------------
# 关于页
# About Page
#---------------------------
about:
  enable: true
  banner_img: avter.png
  banner_img_height: 60
  banner_mask_alpha: 0.3
  subtitle: 关于写者 # 打字机内容
  avatar: avter.png # 头像图片
  name: "铁蛋"
  introduce: "青春是用来奋斗的。如果有理想，就努力去实现T。"
  icons:
    - { class: "iconfont icon-qq-fill", link: "", tip: "顽强" }
    - { class: "iconfont icon-wechat-fill", link: "", tip: "拼搏" }
    - { class: "iconfont icon-alipay-fill", link: "", tip: "奋斗" }
    - { class: "iconfont icon-map", link: "", tip: "坚持" }


5.第五步

这也是最重要的一步。添加文件。在主题目录（themes文件夹）下，打开自己的主题文件夹，找到 layout 文件夹，再在里面找到 about.ejs 文件（根据自行的配置，找对应的文件）。复制一份，并将其命名为 databases.ejs （名称即在第四步中的那个名称）

6.第六步

修改刚复制好的文件里面的代码。

首先，这是被复制的文件的代码（根据自行的配置，所选的文件不同，代码可能不同），即 about.ejs 文件的代码

<%
page.layout = "about"
page.title = theme.about.title || __('about.title')
page.subtitle = theme.about.subtitle || __('about.subtitle')
page.banner_img = theme.about.banner_img
page.banner_img_height = theme.about.banner_img_height
page.banner_mask_alpha = theme.about.banner_mask_alpha
%>

<div class="text-center">
  <div class="about-info">
    <div class="about-name"><%- theme.about.name %></div>
    <div class="about-intro"><%- theme.about.introduce %></div>
    <div class="about-icons">
      <% for(const each of theme.about.icons || []) { %>
        <% if (!each.class) continue; %>
        <% var cls = each.class %>
        <% var isQr = each.qrcode %>
        <a href="<%= isQr ? 'javascript:;' : url_for(each.link) %>" class="<%= isQr ? 'qr-trigger' : '' %>
           <%= !isQr && each.tip ? 'hint--bottom hint--rounded' : '' %>"
           <%= !isQr && each.tip ? 'aria-label=' + each.tip : '' %>
        >
          <i class="<%= cls %>" aria-hidden="true"></i>
          <% if (isQr) { %>
            <img class="qr-img" src="<%= url_for(each.qrcode) %>" alt="qrcode" />
          <% } %>
        </a>
      <% } %>
    </div>
  </div>
</div>

<article class="about-content mt-5">
  <div class="markdown-body">
    <%- page.content %>
  </div>

  <% if(page.comments) { %>
    <!-- Comments -->
    <article class="comments" id="comments">
      <% var type %>
      <% if (typeof page.comment === 'string' && page.comment !== '') { %>
        <% type = '_partial/comments/' + page.comment %>
      <% } else { %>
        <% type = '_partial/comments/' + theme.post.comments.type %>
      <% } %>
      <%- partial(type) %>
    </article>
  <% } %>
</article>

然后修改，其实就只是修改了第三行的代码，其他的都没有改变。将第三行代码原来的 about 改为了 databases 而已。这个名称就是第四步里面的名称。

<%
page.layout = "about"
page.title = theme.about.title || __('about.title')
page.subtitle = theme.databases.subtitle || __('databases.subtitle')
page.banner_img = theme.about.banner_img
page.banner_img_height = theme.about.banner_img_height
page.banner_mask_alpha = theme.about.banner_mask_alpha
%>

<div class="text-center">
  <div class="about-info">
    <div class="about-name"><%- theme.about.name %></div>
    <div class="about-intro"><%- theme.about.introduce %></div>
    <div class="about-icons">
      <% for(const each of theme.about.icons || []) { %>
        <% if (!each.class) continue; %>
        <% var cls = each.class %>
        <% var isQr = each.qrcode %>
        <a href="<%= isQr ? 'javascript:;' : url_for(each.link) %>" class="<%= isQr ? 'qr-trigger' : '' %>
           <%= !isQr && each.tip ? 'hint--bottom hint--rounded' : '' %>"
           <%= !isQr && each.tip ? 'aria-label=' + each.tip : '' %>
        >
          <i class="<%= cls %>" aria-hidden="true"></i>
          <% if (isQr) { %>
            <img class="qr-img" src="<%= url_for(each.qrcode) %>" alt="qrcode" />
          <% } %>
        </a>
      <% } %>
    </div>
  </div>
</div>

<article class="about-content mt-5">
  <div class="markdown-body">
    <%- page.content %>
  </div>

  <% if(page.comments) { %>
    <!-- Comments -->
    <article class="comments" id="comments">
      <% var type %>
      <% if (typeof page.comment === 'string' && page.comment !== '') { %>
        <% type = '_partial/comments/' + page.comment %>
      <% } else { %>
        <% type = '_partial/comments/' + theme.post.comments.type %>
      <% } %>
      <%- partial(type) %>
    </article>
  <% } %>
</article>

7.添加导航栏

在主题配置文件中添加新建的页面的导航栏

文章加密

1.使用命令下载hexo-blog-encrypt

npm install --save hexo-blog-encrypt

2.在文章开头设置密码

---
title: Hello World
date: 2020-12-18 20:44:18
password: (填写你想设置的密码)
---

3.在博客根目录下的_config.xml中添加:

encrypt: # hexo-blog-encrypt
  abstract: 这里有东西被加密了，需要输入密码查看哦。
  message: 您好, 这里需要密码.
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

其他美化后续添加

Hexo文件压缩

** 为什么要压缩页面静态资源 **

对于个人博客来说，优化页面的访问速度是很有必要的，如果打开你的个人站点，加载个首页就要十几秒，页面长时间处于空白状态，想必没什么人能够忍受得了吧。我个人觉得，如果能把页面的加载时间控制在三四秒内，就很不错了。

那么怎么提高hexo这个静态博客的页面加载速度呢？可以从以下的几个方面去入手：

  1. 将js文件尽可能放置到body的闭合标签之前，因为在加载或者引入js文件时是阻塞式的，如果我们在页面的最开始就引入这些js文件，而这些文件又比较大，会造成页面在渲染时长时间处于白屏状态。
  2. 尽量避免去引用访问速度非常低下的cdn或者图片，可以改用访问速度更快的cdn，或者将难以迅速加载的图片保存到自己的站点目录下，以免在加载图片时耗费了大量的时间，最后还加载不出来。
  3. 对页面的静态资源进行压缩，包括css、js和html等文件。我们自己添加的css和js文件为了可读性，往往会有很多换行和空格，这些对于浏览器来说并没什么卵用，甚至还会降低渲染页面的速度。至于html文件，由于Markdown转成html的bug，会导致页面存在大量的空白，如果你查看下页面的源代码，就会发现这些大量的空白符，十分难看。这也会造成页面渲染的性能问题。

在站点根目录下安装hexo-neat

npm install hexo-neat --save

为站点配置文件添加相关配置

# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'

就可以正常发布部署了

hexo clean
hexo g
hexo d
hexo s