HEXO × 样式实践笔记

Hexo是一个基于Node.js的静态博客框架，由@tommy351创建，按其对自己的描述就是：

A fast, simple & powerful blog framework

本文只会介绍Hexo一些个性化设置的方法，至于如何使用Hexo搭建独立博客可以参考这篇文章。同时，在开始使用Hexo之前，强烈推荐先阅读一下Hexo Docs，该文档可以让你对怎样使用Hexo有一个比较全面清晰的概念。

[注意] 以下内容基于NexT Theme & Github演绎 😉

✔︎ README.md

首次使用hexo d -g发布到Github之后，会发现项目的首页出了文件列表，下面的介绍说明还是空白的。按照Github的规则，我们在项目根目录下添加README.md就好了。但是，如果在Github页面上使用Create new file创建README.md的话，在你下一次Hexo发布时会发现README.md会被删除掉。

正确的方法就是在source目录下创建README.md，这样就没有问题啦。

✔ Favicon.ico

接下来，选择一个自己喜欢的图片作为博客的Favicon吧，参考这里。

✔ 404.html

当访问博客不存在的地址时，默认会显示Github的404页面，如果你觉得这样不符合心意，也可以设置自己的404，过程非常简单。我们只需在source目录下新建一个404.html文件就可以了，内容可以自定义，也可以使用腾讯公益404页面。

需要注意，自定义404页面只能用于顶级域名(如techoffee.me)，而对于GitHub的二级域名(如hengliang.github.io)是不起作用的。另外，在使用hexo server本机调试时也没有作用，此时访问不存在的页面只会显示找不到指定路径。

Cannot GET /nothing/

✔ 使用`HTML`标签

因为Markdown本身理念就是简洁，所以对于繁杂的细节排版并不合适。例如，调整某个字体的大小或者颜色。但是在Hexo中使用Markdown写作时，如果有特殊的排版需求，我们则可以通过HTML标签来实现。例如上面“注意”二字，正是使用了以下的HTML标签。

<style>
    span.notice {
        color: #FE007F;
    }
</style>

<span class="notice">[**注意**]</span>

所以，如果想在文章中插入自己的视频，除了使用Hexo插件，也可以使用<video>标签。

✔ 使用KeyStroke样式

参考正上方技巧，填加HTML元素kbd的样式，参考自StackExchange。

<style>
kbd {
    display: inline-block;
    margin: 0 .1em;
    padding: .1em .6em;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #242729;
    text-shadow: 0 1px 0 #FFF;
    background-color: #e1e3e5;
    border: 1px solid #adb3b9;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
    white-space: nowrap;
}
</style>

然后在文章中输入

1 2	<kbd>K</kbd><kbd>E</kbd><kbd>Y</kbd> <kbd>S</kbd><kbd>T</kbd><kbd>R</kbd><kbd>O</kbd><kbd>K</kbd><kbd>E</kbd>

效果如下：

KEY
STROKE

✔ 使用页内跳转

在阅读文章时，我们会引用一些资料，通常我们会在引用的内容后放置页面内引用标记来关联实际的资料地址，在Hexo中可以按以下方式使用页面内引用。

效果：点击页面内标记跳转至文章底部原始资料地址

// 文章内引用标记
// - `<sup>`: 上标`HTML`元素标记
// - `[1](#1)`: 页面内标记
图片收纳应用<sup>[1](#1)</sup>

// 文章底部原始资料地址(注意`id`要与对应的页面内标记相同)
更多Mac工具可以查看：<span id="1">[Mac奇妙工具清单](/mac/tools)</span>

✔ 使用第三方服务

作为一个博客的管理者，当然不是只写写文章就什么都不管啦。例如，我们需要关注每篇文章大家的反应，需要知道每天博客的访问量是多少，需要让自己的文章能够被更多分享。幸运的是，NexT Theme已经集成了一部分这些服务，具体可以参考NexT第三方服务集成。

✔ `Hexo`资源列表

最后，善用以下的资源，会让你遇见更好的Hexo 😋

Hexo Docs: Hexo官方文档，介绍了Hexo的使用方式与内部细节。
Hexo Plugins: Hexo官方插件库
Hexo Themes: Hexo官方主题库
图灵社区Hexo文章合集
NexT FAQ