0%

Hexo 折腾记

发表于 更新于 分类于

本博客以 Hexo 3.2.2 为静态博客框架，以 material 1.3.0 为主题搭建而成。 参阅这两个的官方文档便可以初步搭建一个美美哒的博客了。

本文主要记录一下所折腾的东西。 

个性化配置&优化

这里 是官方收录的 Hexo 插件。

这里列一下博客用到的插件，大部分都可以看其对应官方文档就能正确配置。

链接

固定链接插件：hexo-abbrlink
之前的 permalink 格式是：

1
2
permalink: post/:year/:month/:day/:title/
# 例如  http://tianma.space/2018/02/08/Hello-World

使用 hexo-abbrlink 插件格式是:

1
2
3
4
5
6
7
8
permalink: post/:abbrlink/

# abbrlink config
abbrlink:
  alg: crc32  #算法 support crc16(default) and crc32
  rep: dec    #进制 support dec(default) and hex

# 例如： http://tianma.space/post/3678283086/

部署

当访问博客网站 Tianma

这样一定程度上能加快网站加载速度。

达到以上效果，大致来说，需要以下步骤：

  1. 将博客部署到 GitHub 和 Coding, 具体参阅 hexo干货系列：（四）将hexo博客同时托管到github和coding 和 git多网站ssh部署方案
  2. 注册域名,国内有 万网，国外有 GoDaddy , 然后进行域名绑定，即国内走 Coding 国外走 GitHub ，相关教程很多就不赘述了。

静态资源压缩优化

使用 gulp 压缩 Hexo 静态资源

gulp 的官方定义非常简洁：基于文件流的构建系统。

说人话系列：gulp 是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。

更多详细配置请参考 使用 gulp 压缩 hexo 静态资源

CDN服务

CDN 存储服务商使用的是 七牛云，配合 hexo-qiniu-sync 食用。

使用 CDN 存储服务的主要目的就是把 图片、视频、音乐等其他较大的静态资源 上传到七牛云，加速博客网站静态资源加载。

详细请参考 使用七牛为Hexo存储图片等资源。

更新：由于七牛云现行规定是，使用了内容存储服务的必须要绑定在中国大陆已备案的域名，而我目前的域名是在 GoDaddy 上注册的，没法备案，所以已将 CDN 从七牛云迁移至 阿里云OSS。

音乐播放

音乐播放器采用的是 DIYGod 的 APlayer, 以 MetingJS 为辅助配合食用。

详情参考: Hexo 折腾：音乐播放

图片

  1. 图片描述(description)：因为 material 主题本身没有对图片做过多处理，当使用:

    1
    ![description](xxx.jpg)

    插入图片时，最后的 description 是没有显示的。这里采用 hexo-image-caption 插件将上述 markdown 生成如下元素：

    1
    2
    <img src="xxx.jpg" alt="description"/>
    <span class="image-caption">description</span>

    从而展示 description，当然了，出于美观，需要对 .image-caption 元素指定相应的 css 样式。

    更多配置参考其文档。

  2. 图片放大查看： 由于 material 主题没有该功能，这里便采用 FancyBox 库实现该功能，详情参考 Hexo 折腾：利用 Fancybox 添加图片放大预览查看功能

看板娘

看板娘采用的以 live2d 技术为核心，以 hexo-helper-live2d 为插件，配合 live2d 模型制作而成。

详情参考：

分页

由于 material 主题本身没有分页功能，而 hexo-theme-next 提供了分页功能，在 next 主题启发下，其实 hexo 本身就提供了 paginator 这一 Helpers(辅助函数) 实现分页。
具体步骤为：

  1. 在 material/layout/index.ejs 中的 index nav 模块中插入：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <% if (page.total > 1) { %>
      <!-- Index nav -->
      <nav class="material-nav mdl-cell mdl-cell--12-col">
        <%- paginator({
          prev_text: __('<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><i class="material-icons" role="presentation">arrow_back</i></button>'),
          next_text: __('<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"><i class="material-icons" role="presentation">arrow_forward</i></button>'),
          space: '&hellip;',
          mid_size: 1
        }) %>
      </nav>
    <% } %>

    在生成 html 文件的时候，会自动生成相应的页码，其中，当前页面是 .page-number.current 元素， 非当前页面是 .page-number 元素，还会根据 paginator 的 space 配置生成 .space 元素。

  2. 在 material/source/css/style.min.css 中加入相应的 css 样式，考虑到目前 material 主题的 scheme 是 Paradox, 所以只贴出了 Paradox 相关的 css 样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    #scheme-Paradox .page-number {
        padding: 0em 0.8em;
        font-size: 1.3em;
        margin: 0em 0.2em;
    }

    @media screen and (max-width:480px) {
        #scheme-Paradox .page-number {
            padding: 0em 0.4em;
            font-size: 1.2em;
            margin: 0em 0.2em;
        }
    }

    #scheme-Paradox .space {
        color: #666;
    }

    #scheme-Paradox .material-nav .page-number.current {
        color: #FF4081;
        text-align: center;
        font-weight: bold;
    }

版权声明

现在已经是大版权时代，对文章进行版权声明也是有必要的。文章类的版权声明主要通过 知识共享许可协议来进行，故声明之前有必要了解 知识共享许可协议(Wiki) 和 关于许可协议。
考虑到有些网站会爬取他人博客，其实主要是针对 body 体内的内容，所以需要把版权声明部分写入 body 体中：

  1. 自定义字段：考虑到有些博文可能是不需要版权声明的，比如转载、翻译之类的，所以自定义 post_license 作为开关：

    • 主题配置文件 _config.yml 中添加字段，作为总开关：

      1
      2
      post_license:
        enable: true # or false

    • 文章的 Front-matter 中添加字段，作为独立开关：

      1
      post_license: true # or false

  2. 创建 material/layout/_partial/post_license.ejs:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div>
        <br/>
        <ul id="post-license" class="post-license">
            <li class="post-license-author">
                <strong>本文作者：</strong>
                <a href="<%= config.url %>"><%= theme.author %></a>
            </li>

            <li class="post-license-link">
                <strong>本文链接：</strong>
                <a href="<%= page.permalink %>"><%= page.title %></a>
            </li>

            <li class="post-license-statement">
                <strong>版权声明： </strong>
                本文由 <%= config.author %> 原创，采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="license" target="_blank">署名-非商业性使用-相同方式共享（CC BY-NC-SA）4.0 国际许可协议</a> </br>转载请保留以上声明信息！
            </li>
        </ul>
    </div>

  3. 在 material/layout/_partial/post-content.ejs 引入 post_license.ejs:

    1
    2
    3
    <% if(theme.post_license.enable && page.post_license !== false){%>
        <%- partial('_partial/post_license') %>
    <% } %>

  4. 在 material/source/css/style.min.css 中添加 版权声明 样式：

    1
    2
    3
    4
    5
    6
    7
    #post-license {
        margin: 2em 0 0;
        padding: 0.5em 1em;
        border-left: 3px solid #ff4081;
        background-color: #f9f9f9;
        list-style: none;
    }

工具推荐