Hexo Noise 主题的使用和优化

发表于 | 更新于 | 分类于

在 Hexo 的众多主题中，Noise 是我最喜欢的一个，而且别看 Noise 非常简洁，常用的功能缺都有。这也是让我颇为惊讶的，第 1 章中要讨论的读者评论功能、About 页面和访问量的查询，只要在 _config.yml 文件中简单配置一下即可。第 2 章主要讲述采用 Noise 主题后，网站访问速度的优化。

1. Noise 主题的使用

1.1 安装 Noise 主题

在安装 Noise 主题之前，由于默认的 NPM 源实在太慢，我们暂时将下载源替换为淘宝的镜像，在终端中执行如下命令：

1
npm config set registry "https://registry.npm.taobao.org"

根据 Noise 主页 上的文档，我们需要安装主题和渲染器，在终端中依次执行如下命令：

1
2
3
git clone https://github.com/lotabout/hexo-theme-noise themes/noise
npm install hexo-renderer-less --save
npm install hexo-renderer-jade --save

根据 Noise 主页 上的文档，将 your_name.github.io/_config.yml 中的 theme 的值由原来的值（默认为 landscape ）改为 noise 。至此，主题已经更换完成，依次运行hexo clean, hexo generate, hexo server 我们可以在 http://localhost:4000/ 上看到网站已经用上 Noise 主题了。

1.2 添加读者评论功能

我的榜样 L 叔 用的是 多说 ，作为脑残粉，自然也是选择多说啦。在我们登录好多说后，点击右上方的 创建新站点，填入站点地址 等信息。根据 Noise 主页 上的文档，我们只需要在 themes\noise\_config.yml 中的 duoshuo: 后面填入我们多说的帐号名即可。

诶？这么简单？在 多说 的 工具 里，不是说要在网页代码 <body> 与 </body > 间的任意位置贴入一大段代码吗？其实这件事，noise 主题已经在模板里替我们设置好了，在 \themes\noise\layout\_partial\comments.jade 中，可以看到如下 JADE 代码：

1
2
3
4
5
6
7
8
9
10
11
12
if theme.duoshuo
  .ds-thread(data-thread-key=page.path, data-title=page.title, data-url=page.permalink)
  script.
      var duoshuoQuery = {short_name:'#{theme.duoshuo}'};
      (function() {
          var ds = document.createElement('script');
          ds.type = 'text/javascript';ds.async = true;
          ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
          ds.charset = 'UTF-8';
          (document.getElementsByTagName('head')[0]
              || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();

将其转化成 HTML，就和在 多说 的 工具 里要我们添加的一样，其中 #{theme.duoshuo} 就是我们填入的多说用户名。一旦网站 Javascript 里提交的网址、用户名同 多说 后台里的网址、用户名匹配上，通过多说为网站添加评论功能便已完成。

1.3 添加 About 页面

按照 1.1 安装 Noise 主题 我们安装并启用 Noise 主题后，是不含有 About 页面的，但 About 页面又挺重要的，我希望有。 Noise 主页 上提供了 About 页面的启用方法，不过作者在表述上有一点点小问题，会有误导性。其实，添加 About 页面其实非常简单，只需在 source 文件夹下添加一个about.md ，写上自己要的内容。然后在 themes\noise\_config.yml 中将 menu: 设置为

1
2
menu: 
  About: about.html

依次运行hexo clean, hexo generate, hexo server 我们可以在 http://localhost:4000/ 上看到新添加的 About 页面了。

1.4 访问量的查询

借由 Google Analytics 我们可以知晓自己网站的访问量，而 Noise 正好支持 Google Analytics。第一步，在登录 Google Analytics 后，我们创建新媒体资源，输入网站地址等信息，最后我们会获得一个形如 UA-XXXXXXXX-X 这样的跟踪 ID，将这个 ID 添加到 themes\noise\_config.yml 中的 google_analytics: 后面即可。

较真的你可能会问，明明 google_analytics: #Google Analytics Tracking Code 说得是要填 Google Analytics Tracking Code，怎么会是填跟踪 ID 呢？其实跟 多说 一样，借助 FileLocator Pro 我们能在 \themes\noise\layout\base.jade 下找到如下代码：

1
2
3
4
5
6
7
8
if theme.google_analytics
script.
    (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
    e.src='//www.google-analytics.com/analytics.js';
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
    ga('create','#{theme.google_analytics}');ga('send','pageview');

这说明，noise 需要我们提供的只是跟踪 ID 而已，这一整段代码会自动转化成 Google 给我们的代码那样。

2. Noise 主题的优化

2.1 对 LaTeX 的支持

目前，LaTeX 的渲染引擎有 MathJax 和 KaTeX。关于 MathJax，相应的插件有 hexo-math，而且最新版的 hexo-math 已经支持 KaTeX 了。可惜我自己折腾了一下，却失败了。最后还是用的 hexo-katex 插件来支持 KaTeX，具体的内容可以看我的上一篇博文 Hexo 博客支持 KaTeX（回炉版）。

2.2 访问速度的优化

2.2.1 找出那个拖后腿的家伙

虽然很喜欢 Noise 主题，但用上后网站的访问速度却非常慢，我们可以采取某些措施来改进访问速度。点击 Noise 的 Demo，网站是不是打开很慢？在 Chrome 中，在网站页面上右击，点击 检查 -> Network ，再刷新一下网页，就能看倒

mark

天呐！整个网站加载用了 55.37 秒，这个字体的加载就花了 54.17 秒，原来是这个字体搞得鬼！点击这个字体，我们能看到更多的信息，Request URL: 是 http://fontstatic.useso.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2 ，也就是要从这个网址下载这个字体实在太慢了。一搜才发现，useso.com 是 360 的公共前端库，不过现在已经停止服务了！难怪会这么慢。但最后不是加载成功了么？说明这个字体可以下下来啊。那很自然的思路就是，把这个字体下下来，放到自己的七牛云上去；然后找出 noise 主题里含有 useso.com 代码，将其替换成自己的七牛云链接不就可以了。

2.2.2 下载那个拖后腿的字体

查看网站首页 http://lotabout.me/hexo-theme-noise/ 的源代码，搜索 useso.com ，可以看到 useso.com 只在下面这条代码中出现过一次

1
<link rel="stylesheet" type="text/css" href="//fonts.useso.com/css?family=Lato">

点开 http://fonts.useso.com/css?family=Lato ，可以发现内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://fontstatic.useso.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://fontstatic.useso.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

原来 Lato 是个字体啊，虽然我不是很懂 CSS，但也能猜出来这是提供了 http://fontstatic.useso.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2 和 http://fontstatic.useso.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2 两个不同字符范围的 Lato 字体的子集的链接，从这两个链接中能够把这两个子字体下下来，存放到 七牛云上去，得到各自的 URL。

2.2.3 替换成自己的 CSS

将上面的 CSS 内容复制，将 URL 替换成自己七牛云上对应的的 URL， 另存为成 Lato.css 文件，放到 \noise\source\css 文件夹下面。最后，利用 Filelocator Pro 在 noise 文件夹下搜索 useso ，只能够在 \noise\layout\base.jade 下找到如下这句代码：

1
link(rel='stylesheet', type='text/css', href='//fonts.useso.com/css?family=Lato')

将其替换成如下代码即可：

1
link(rel='stylesheet', type='text/css', href=root + '/css/Lato.css')

至此，拖累我们网站访问速度的问题已经解决了。依次运行hexo clean, hexo generate, hexo server 查看 http://localhost:4000/ ，可以看到已经可以非常快速的访问了。

2.3 About 页面样式丢失问题

Noise 主题的 About 页面的样式是丢失的，对我而言，表现在两处。一是列表没有前面的黑点，二是所有内容不像其他页面那样在中部，而是从屏幕最左端一直平铺到最右端，特别丑！

2.3.1 列表黑点

有趣的现象是，我在手机 Chrome 上浏览 About 页面时，列表黑点是有的，但到了 PC 的 Chrome 上就没有了，然后把窗口变到很窄，就会由出现列表黑点，这个现象表明列表黑点的出现与否是跟窗口宽度有关的。在 PC 上把 About 页面的窗口拉到很窄，然后右击 -> 检查 -> Elements，能看到下面这段代码：

1
2
3
4
@media only screen and (max-width: 425px)
  article ol, article ul {
    padding-left: 2em;
  }

这句话大致的意思是，当窗口最大宽度小于 425px 时才会出现黑点，那我们把这个限制取消掉不就行了么。从 Elements 里可以看到，这些内容都在 noise.css 里面。用 425px 作为关键词在 noise.css 里面搜索，可以搜到其是 break-level-2 的数值，再以 break-level-2 为关键词，搜到最符合的就是下面这段代码

1
2
3
@media only screen and (max-width: @break-level-2) {
    padding-left: 2em ;
}

把 padding-left: 2em ; 单独拿出来，然后把上面这段注释掉，如：

1
2
3
4
// @media only screen and (max-width: @break-level-2) {
//     padding-left: 2em ;
// }
padding-left: 2em ;

依次运行 hexo clean, hexo g, hexo server 即可在 http://localhost:4000/about.html 上看到宽窗口状态下也能出现列表黑点了。

2.3.2 About 页面宽度

同样还是借助 Chrome，右击 -> 检查 -> Elements，点开 body 标签，鼠标移到下面的 header 和 article 等标签时，会在原来页面上标记处对应的是那块内容，两者的 class 属性里，都共同拥有一个 wrapper。wrapper 的具体样式是在 noise.css 里面规定的，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper{
    max-width: 960px;
    margin: 0 auto;
    @media only screen and (max-width: @break-level-6) {
        max-width: 800px;
    }
    @media only screen and (max-width: @break-level-5) {
        max-width: 680px;
    }
    @media only screen and (max-width: @break-level-3) {
        max-width: auto;
    }
}

可以看到，其内容完全就是只规定了一个宽度，将里面的内容添加到 noise.less 一开头的 body 下面，如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {   
    max-width: 960px;
    margin: 0 auto;
    @media only screen and (max-width: @break-level-6) {
        max-width: 800px;
    }
    @media only screen and (max-width: @break-level-5) {
        max-width: 680px;
    }
    @media only screen and (max-width: @break-level-3) {
        max-width: auto;
    }     
    // 原来的内容太长不贴了
}

依次运行 hexo clean, hexo g, hexo server 即可在 http://localhost:4000/about.html 上看到其内容跑到中部了，看起来还行。margin: 0 auto; 一定要加，否则整个网站内容都会左移。

致谢

最后，感谢 L 叔 和 阿诺 在文章写作过程中提供的帮助，也感谢您一直阅读到这里，如果我的文章有错误或不足之处，请务必在评论中留言指出，千万不用客气，万分感谢~

如果您觉得我的文章对您有所帮助，不妨小额捐助一下，您的鼓励是我长期坚持的动力。

Alipay_Middle Wechat_Middle

​