Hexo Configuration


Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。本文为Hexo相关的东西,大部分与特性配置有关。

1. Hexo在不同电脑间的迁移

  1. 安装node.js
  2. 安装hexo npm install -g hexo-cli
  3. git安装
  4. 拷贝原来的文件 包括:
    _config.yml: 站点配置文件
    /theme: 主题及其配置
    source: 文章源文件及404页面
    scaffolds: Hexo所提供的模板文件
    package.json: 说明站点使用了哪些包
    gitignore: 放置在git端时忽略的文件
    需要删除:
    .git, public, .deploy_
    git, db_json
    git:git的配置,关联文件夹等,由于我们已经换了电脑,所以之前的配置应该被舍弃掉;
    node_modules/: 注意这个并不需要删除,上面1-3安装完成后npm install命令即可加载所有的文件
    public/:在用hexo generate时会重新生成;
    .deploy_git/:在用hexo deploy时会重新生成;
    db.json:站点的一些数据文件;
  5. git init
  6. npm install
  7. 重新配置全局默认邮箱和用户名

2. 特性配置

2.1. 添加邮箱链接控制

安装插件hexo-email-obfuscate,参考这里

npm install hexo-email-obfuscate --save

在站点配置文件_config.yml中加入:

plugins:
  - hexo-email-obfuscate

使用语法:
Markdown

[Contact Me](mailto:[email protected])

2.2. 文章中添加居中模块

文章Markdown中填写如下:

<blockquote class="blockquote-center">优秀的人,不是不合群,而是他们合群的人里面没有你</blockquote>

2.3. 隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用””隐藏之间的代码即可,或者直接删除。

2.4. 友情链接设置

编辑站点的 _config.yml 添加:

# title, chinese available
links_title: Links
# links
links:
  MacTalk: http://macshuo.com/

2.5. 代码高亮问题

Hexo自带的highlight.js代码高亮并不好用,当在博客配置中将highlight的选项auto_detect设为true时,hexo g生成博客时报错
但是如果你不去设置这一项,代码高亮永远是normal主题。解决这个问题很简单,就是手动设置auto_detect = false:

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

2.6. 代码高亮prism

wayou开发,代替hexo原生代码高亮。

2.6.1. Install:

npm i -S hexo-prism-plugin

2.6.2. Usage:

编辑站点配置文件_config.yml,加入

### prism_plugin
prism_plugin:
  mode: 'preprocess'    # realtime or preprocess
  theme: 'default'
  #theme: 'coy'
  #theme: 'dark'
  #theme: 'funky'
  #theme: 'okaidia'
  #theme: 'solarizedlight'
  #theme: 'tomorrow'
  #theme: 'twilight'
  line_number: true   # default false
  auto_import_assets: true   # default true

2.6.3. 代码高亮主题测试

default:

coy:

dark:

funky:

okaidia:

solarizedlight:

tomorrow:

twilight:

note:感觉有些主题怪怪的~~~

2.7. 文章内插入图片

在文章中写入:

![](/upload_image/1.jpg)

然后进入themes-主题名-source-upload_image目录下(自己创建),将图片放到这个目录下,就可以了。

说明:当执行hexo g命令时,会自动把图片复制到 public文件的upload_image目录下。

2.8. 鼠标点击小红心的设置

love.js 文件添加到 \themes\next\source\js\src 文件目录下。
找到 \themes\next\layout_layout.swing 文件, 在文件的后面, 标签之前 添加以下代码:

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

2.9. 修改文章内链接文本样式

将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线。
找到文件 themes\next\source\css_custom\custom.styl ,添加如下 css 样式:

.post-body p a {
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}

2.10. 设置字体

note: 此特性在版本 5.0.1 中引入,要使用此功能请确保所使用的 NexT 版本在此之后

为了解决 Google Fonts API 不稳定的问题,NexT 在 5.0.1 中引入此特性。 通过此特性,你可以指定所使用的字体库外链地址;与此同时,NexT 开放了 5 个特定范围的字体设定,他们是:

  • 全局字体:定义的字体将在全站范围使用
  • 标题字体:文章内标题的字体(h1, h2, h3, h4, h5, h6)
  • 文章字体:文章所使用的字体
  • Logo字体:Logo 所使用的字体
  • 代码字体: 代码块所使用的字体

注意,各项所指定的字体将作为首选字体,当他们不可用时会自动 Fallback 到 NexT 设定的基础字体组:
非代码类字体:Fallback 到 “PingFang SC”, “Microsoft YaHei”, sans-serif
代码类字体: Fallback 到 consolas, Menlo, “PingFang SC”, “Microsoft YaHei”, monospace
另外,每一项都有一个额外的 external 属性,此属性用来控制是否使用外链字体库。 开放此属性方便你设定那些已经安装在系统中的字体,减少不必要的请求(请求大小)。

font:
  enable: true

  # 外链字体库地址,例如 //fonts.googleapis.com (默认值)
  host: //fonts.googleapis.com

  # 全局字体,应用在 body 元素上
  global:
    external: true
    family: Lato

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Playball
    size: 30

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family: Playball
    size: 40

  # 代码字体,应用于 code 以及代码块
  codes:
    external: true
    family: Droid Sans Mono
    size: 25

2.11. 设置菜单

菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大的多数的场景。参考官方设置菜单配置
如添加一个新的页面“链接”:

hexo new page Links

即在hexo/source/目录下新建了Links目录,目录中包含index.md文件,文件内容:

---
title: Links
date: 2017-07-20 10:34:38
---

然后再NexT主题配置文件中的menu项和menu_ico项中加入 Links

menu:
  home: /
  categories: /categories/
  archives: /archives/
  tags: /tags/
  about: /about/
  links: /Links/ # note: links尝试用过Links: /Links发现会有问题——即使hexo g产生的/hexo/public目录中确实有/links,但是在推送到VPS的时候莫名其妙变成/Links,造成无法访问。
menu_icons:
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  schedule: calendar
  tags: heart
  archives: archive
  links: heart

最后要修改/themes/next/languages/中对应的语言文件zh-Hans.yml的中links项

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404
  links: 链接

2.12. 添加并美化本地搜索

NexT 主题内置了本地站内搜索,很方便添加。

  1. 首先安装hexo-generator-search插件,用于生成博客索引数据
    在站点的根目录下执行以下命令进行安装:
    npm install hexo-generator-search --save
    
  2. 编辑 站点配置文件_config.yml,新增以下内容到任意位置:
search:
  path: search.xml
  field: post
  1. 编辑NexT主题配置文件_config.yml,解注释local search:
    # Local search
    local_search:
    enable: true
    # if auto, trigger search by changing input
    # if manual, trigger search by pressing enter key or search button
    path: search.xml
    fielf: post
    format: html
    limit: 10000
    trigger: auto
    # 注意把trigger: auto打开,可以在输入的同时即时显示搜索结果
    # show top n results per article, show all results by setting to -1
    #top_n_per_article: 1
    

2.13. 侧边栏头像修饰

把侧边栏头像变成圆形,并且鼠标停留在上面发生旋转效果,参考这里,具体修改文件的位置是hexo\themes\next\source\css\_common\components\sidebar\sidebar-author.styl中的内容如下:

.site-author-image {
  display: block;
  margin: 0 auto;
  max-width: 96px;
  height: auto;
  border: 2px solid #333;
  padding: 2px;
  /* start*/
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */
}
/* start */
.site-author-image:hover {
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

2.14. Cloudinary 在线图片服务

除了在本地存储图片,还可以将图片上传到一些免费的CDN服务中。比如Cloudinary提供的图片CDN服务,在Cloudinary中上传图片后,会生成对应的url地址,将地址直接拿来引用即可。
Cloudinary申请账号,上传图片(注意把upload选项中的unsigned signature选上)

2.15. 设置文章置顶

note: 参考解决文章置顶

  1. 安装 hexo-generator-index

    npm i --save hexo-generator-index
    
  2. 将如下的代码加入node_modules/hexo-generator-index/lib/generator.js

posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 两篇文章top都有定义
        if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
        else return b.top - a.top; // 否则按照top值降序排
    }
    else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date; // 都没定义按照文章日期降序排
});

最终的 node_modules/hexo-generator-index/lib/generator.js 代码:

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals) {
    var config = this.config;
    var posts = locals.posts.sort(config.index_generator.order_by);
    var paginationDir = config.pagination_dir || 'page';
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
    return pagination('', posts, {
        perPage: config.index_generator.per_page,
        layout: ['index', 'archive'],
        format: paginationDir + '/%d/',
        data: {
          __index: true
        }
    });
};

在文章 Front-matter 中添加 top 值,数值越大文章越靠前,如:

title: Hexo
date: 2017-07-21
tags: vps
categories: vps
top: 3

2.16. next主题宽度调整

编辑 themes/next/source/css/_variables/custom.styl 文件,新增变量:

// 修改成你期望的宽度
$content-desktop = 700px
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

以上方法不适用与next.Picses scheme
Pisces Scheme 编辑themes/next/source/css/_schemes/Picses/_layout.styl文件,更改以下 css 选项定义值:

.header{ width: 1150px; }
.container .main-inner { width: 1150px; }
.content-wrap { width: calc(100% - 260px); }

2.17. 设置disqus

note: “多说”评论功能应用广泛,但是据其公司的声明,多说网已经关闭。

hexo已经内置了对disqus的支持,配置也很简单

  1. 首先注册disques账号
    https://disqus.com 获取shortname
  2. next主题内置了对disqus的支持,在next主题的_config_xml中搜索disqus,并做如下配置:
    # disqus
    disqus:
     enable: True
     shortname: jiaxm-me
     count: true
    

2.18. 给github添加README

hexo会把md文件都解析成html,但是github的readme只支持MD格式,最简单的方法是让hexo不对README.md做转换。
站点配置文件_config_xml中的skip_render:改为skip_render: README.md
note: README.md放在 hexo/source/目录中即可

2.19. MarkDown里 table 的语法

MD的写法

| I | am | table |
|:-----|:---:|----------:|
|文本内容| **`是`** |table|
|文本内容| **`是`** |table|
|文本内容| **`是`** |table|
  1. 表格与上面的文本内容之间空一行。否则解析不出来
  2. 最上面一行是表格第一列的值。第二行的冒号位置决定表格内文本的对齐方式。有水平居中、水平靠左对齐、水平靠右对齐三种
  3. 每列的宽度是根据对应列里最长的文本来决定的

输出结果:

展示表格
文本内容 table
文本内容 table
文本内容 table

2.20. 去除b2t sidebar

找到Hexo/themes/next/layout/_macro/sidebar.swig文件,去掉其中关于b2t的部分:

{% if theme.sidebar.b2t %}
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    {% if theme.sidebar.scrollpercent %}
      <span id="scrollpercent"><span>0</span>%</span>
    {% endif %}
  </div>
{% endif %}
</div>

2.21. 调整b2t样式

back-to-top的控制文件为/home/jxm/Hexo/themes/next/source/css/_common/components/back-to-top.styl
在文件中可以修改b2t bar的格式,如颜色,位置,大小等。

.back-to-top {
  box-sizing: border-box;
  position: fixed;
  bottom: $b2t-position-bottom;
  right: $b2t-position-right;
  z-index: $zindex-5;
  padding: 0 6px;
  width: hexo-config('sidebar.scrollpercent') ? initial : 24px;
  background: white;
  font-size: $b2t-font-size;
  opacity: $b2t-opacity;
  color: green
  cursor: pointer;
  text-align: center;
  -webkit-transform: translateZ(0);
  transition-property: bottom;
  the-transition();

  +mobile() {
    display: none;
  }
  +tablet() {
    display: none;
  }

  &.back-to-top-on {
    bottom: $b2t-position-bottom-on;
  }
}
  1. 通过网站favicon在线制作制作favicon图片,logo最好设置32*32。
  2. next主题:将图片放在next主题source/images目录下
  3. 在next主题配置文件中添加:favicon: images/favicon.ico;或者直接把favicon.ico放到站点source文件夹

2.23. 设置emoji

to test this plugin! :simple_smile:

2.24. 版权声明

主题默认的版权声明配置在themes\next_config.yml文件中。

# Declare license on posts
post_copyright:
  enable: false
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

将’enable’ 改为’true’即可
或者自己魔改,配置如下(参考Crocutax’s Blog

定位到themes\next\layout_macro\post.swig文件,找到

节点,该节点包括了每篇文章底部的tag、span分割线等标签,可以根据自己的需要放置【版权声明】的位置。

 <footer class="post-footer">


     <div>    
      {% if not is_index %}
      <ul class="post-copyright">
         <li class="post-copyright-link">
          <strong>本文作者:</strong>
          <a href="/" title="欢迎访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a>
        </li>

        <li class="post-copyright-link">
          <strong>本文标题:</strong>
          <a href="{{ url_for(post.permalink) }}" title="{{ post.title }}">{{ post.title }}</a>
        </li>

        <li class="post-copyright-link">
          <strong>本文链接:</strong>
          <a href="{{ url_for(post.permalink) }}" title="{{ post.title }}">{{ post.permalink }}</a>
        </li>

        <li class="post-copyright-date">
            <strong>发布时间:</strong>{{ post.date.format("YYYY年M月D日 - HH时MM分") }}
        </li>  

        <li class="post-copyright-license">
          <strong>版权声明: </strong>
          本文由 {{theme.author}} 原创,采用 <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh" rel="license" target="_blank">保留署名-非商业性使用-禁止演绎 4.0-国际许可协议</a> <br>转载请保留以上声明信息!
        </li>
      </ul>
    {% endif %}
  </div>
...

里面都是基础的HTML代码,使用了一个无序列表用于展示版权声明的各项信息,这里可以随意diy。
当然里面涉及一些属性,比如:

  • theme.author : 作者名
  • post.title :文章标题
  • post.path :文章相对路径
  • post.permalink : 文章绝对路径
  • post.date : 日期
    • 这里用pagepost效果一样,比如page.title , page.path
    • 这里基本都做成了超链接形式,也可以做成文本形式

然后,定位到themes\next\source\css\_custom\custom.styl 文件,通过类选择器添加CSS样式

 // Custom styles.

 .post-copyright {
    margin: 2em 0 0;
    padding: 0.5em 1em;
    border-left: 3px solid #FF1700;
    background-color: #F9F9F9;
    list-style: none;
 }

3. 主题配置参考

  1. markdown table