写在前面

本来很早就打算打整一下Github Pages，一来没有发现自己中意的主题，二来也怪自己太懒，所以计划一直搁浅。

其实，这次算是二次折腾，以前折腾过一次，但是不是很满意，这几天突然发现了自己满意的主题，于是便推翻重来！好了，话不多说，开整~。

Hexo

本次框架采用的是Hexo，一开始的时候用过jekyll，但最终采用了Hexo，Hexo官方说：快速、简洁且高效的博客框架，果断入坑。本文也不打算从安装说起，快速入门可参考官方文档，传送门。

主题

嗯~，感觉说到正事上来了，本次主要折腾的是主题。找过一段时间的主题，但是也没发现自己满意的主题（感觉自己的时间都浪费在了找主题上面- . -），最后还是找了几款不错的主题，可参考文末链接。本文主要采用的主题是Tranquilpeak，最开始采用的是Themia，而Themia最开始也是基于Tranquilpeak进行的二次开发，但我最近发现原作者对Tranquilpeak进行了修改，于是使用了Tranquilpeak并在上面进行了修改，而修改的样式参照了https://blog.codeest.moe/。另外本文所采用的主题版本为v3.0.0，如果采用不同的版本可能会出现不同的问题，建议采用和本文同步的版本。

一些坑

在主题的配置过程中也遇到了一些坑：

  • 本地的favicon无法显示。
  • coverImage和thumbnailImage无法显示。
  • 一些icon无法显示。
  • 修改主题的坑。

本地的favicon无法显示

hexo根目录下的_config.yml文件中的url属性会影响favicon的加载：
http://127.0.0.1:4000/assets/images/favicon.ico其中的http://127.0.0.1:4000就是在根目录下的_config.ymlurl属性，此时如果将其改为https://yanghsanlin.cn最终生成的url为https://yanghsanlin.cn/assets/images/favicon.ico从而显示不出favicon。

解决方法一

修改themes/tranquilpeak/layout/_partial/head.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%
	//...
	
	//定义favicon变量
	var favicon = null;

    // 如果是远程链接则直接返回
    if (is_remote_url(theme.favicon)) {
        favicon = theme.favicon;
    } else {
    	//是本地的相对地址则使用相对地址生成图片地址
        favicon = url_for(theme.image_dir + '/' + theme.favicon);
    }

%>
<head>

 <% if (theme.favicon) { %>
 <!--在此处使用 favicon变量-->
        <link rel="icon" href="<%= favicon %>">
    <% } %>
</head>

解决方法二

新建relative_url.js，其对应的地址如下。
themes/tranquilpeak/scripts/helpers/relative_url.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'use strict';

/**
 * Resolve asset relativeurl
 * @param url
 * @param from
 * @returns {String}
 */
hexo.extend.helper.register('relative_url', function (from, url) {
    // check if url is remote
    if (this.is_remote_url(url)) {
        return url;
    }
    // generate an URL from the one given
    return this.url_for(from + "/" + url);
});

修改themes/tranquilpeak/layout/_partial/head.ejs

1
2
3
4
5
6
7
<head>

 <% if (theme.favicon) { %>
 		<!--在此处使用 favicon变量-->
        link rel="icon" href="<%= relative_url(theme.image_dir, theme.favicon) %>">
    <% } %>
</head>

hexo的某些主题样式修改需要进行编译过后才能生效，此时的资源文件需要新放入sources/_images/目录下，此时在主题目录下运行npm run prod会将新的主题样式和资源文件拷贝到sources/assets/目录下。

coverImage和thumbnailImage无法显示

这个其实和上面的favicon显示问题一样。也只是对路径引用进行了修改。具体可参考源码。

一些icon无法显示

这个其实不算很坑，原作者已经在其升级日这里面进行了说明。而我们只需要到Font Awesome v5 - icons用最新的icon替换即可。但是注意themes/tranquilpeak/layout/_partial/post/actions.ejs文件中对icon的遍历时添加了统一前缀fa，导致配置的icon无法显示。

1
2
3
4
5
6
7
8
9
<% for(var option in theme.sharing_options)  {%>
            <% var icon = theme.sharing_options[option].icon %>
            <% var url = generate_sharing_link(post, theme.sharing_options[option].url) %>
            <li class="post-action hide-xs">
                <a class="post-action-btn btn btn--default" target="new" href="<%= url %>" title="<%= __('global.share_on_' + option) %>">
                    <i class="fa <%= icon %>" aria-hidden="true"></i>
                </a>
            </li>
<% } %>

修改后如下：

1
2
3
4
5
6
7
8
9
 <% for(var option in theme.sharing_options)  {%>
            <% var icon = theme.sharing_options[option].icon %>
            <% var url = generate_sharing_link(post, theme.sharing_options[option].url) %>
            <li class="post-action hide-xs">
                <a class="post-action-btn btn btn--default" target="new" href="<%= url %>" title="<%= __('global.share_on_' + option) %>">
                    <i class="<%= icon %>" aria-hidden="true"></i>
                </a>
            </li>
<% } %>

此时基本上及达到了我想要的效果。

修改主题的坑

其实这个不算是坑，关键是自己对前端技术的不熟悉导致的，就是主题修改后必须重新编译运行才能生效，如果是直接下载的release版需要对主题进行修改的话就需要执行npm install命令安装全部的依赖。最后就是修改的主题后需要执行npm run prod（是在主题目录下）命令，整个过程如下：

  • 修改主题样式
  • 执行npm run prod使修改的主题生效
  • 最后在项目根目录依次执行hexo clean，hexo g，hexo s

最后

本次其实是简单的主题配置问题，后续会继续完善主题的美化工作。

附

  • Tranquilpeak本文所采用的主题。
  • Themia这个是基于Tranquilpeak的一个定制主题，还有一个采用Themia作为主题的博客Est の小窝，本文所采用的主题参考了Themia和Est の小窝的优点（好看）。
  • NexT，说实话NexT还是挺不错的，完善的文档，漂亮的UI，已考虑将其作为Plan B。
  • Material，讲道理这个主题也很漂亮，完全基于Material Design理念来进行设计的，由于本人是一枚Android程序员，对这个Material Design还是比较了解的，但是在使用的过程中发现：如果是只有一条博客记录的话，会出现页面不停的上下滑动的情况，折腾了一段时间便放弃了（强迫症233~）。当然博客肯定不止一条记录的，完全可以忽视。
  • One，这个和Material类似，hexo单页面炫酷主题.
  • Indigo这个也是基于Material Design 理念的主题。