个人主页与 Hexo NexT 博客搭建记录

【持续更新】 更新日期:20190406,本文基于 macOS 10.14 Mojave 系统。

最近把 个人学术主页博客 都重新设计了,所以就打算写个总结,自己记录一下一些细节。虽然自认为不会有几个访客,但还是进行了相应的区别定位。个人主页主要是展现个人的简历、研究项目等内容,主要是个人展示目的;博客偏向于个性化一些,主要想进行一些生活日常或者研究过程等记录,也可以展现一些自己的兴趣爱好之类的东西。

1. 域名与解析

1.1 DNS 解析

域名最开始是在 Godaddy 上买的,后来因为 Godaddy 没有免费的域名隐私保护功能,域名一购买就会收到大量的垃圾广告邮件,所以就转到了 NameSilo 上。购买到合适的域名之后,就需要把网站通过 DNS 解析到对应的域名上,我的网站 DNS 解析由腾讯云提供。

因为目前的个人主页与博客都放在了 Netlify 上面,由 Netlify 获取 GitHub 对应的项目仓库内容自动进行网站页面生成与部署。所以直接在 Netlify 对应的项目中添加好域名,再根据提示去腾讯云解析设置 CNAME。

上图中主机记录就是我们希望网站访问时的域名,如果我们的域名是 example.com,那么设置好主机记录后我们的访问域名也即 主机记录.example.com。当主机记录为 @ 时,对应就是直接访问我们的根域名。记录值填写的是 Netlify 上对应项目的二级域名地址。

设置好 DNS 解析后,还需要在域名注册商处把域名指向腾讯云提供的两个 NameServer 解析服务器才可以正常访问。正确设置好以后,最长需要 24 小时实现全球解析生效,因此可能要耐心等待(实际解析更新速度还是很快的)。

1.2 开启强制 HTTPS

现在越来越多网站开始采用 HTTPS,特别是在用 Chrome 访问时可以在地址栏看到一把小锁,看起来就显得高大上;而且采用 HTTPS 可以使得浏览数据更加安全,并防止网络运营商对网页进行劫持和插入广告。Netlify 提供由 Let’s Encrypt 颁发的免费证书来开启强制 HTTPS,直接在管理界面就可以点击开启。

对于部署在 GitHub Pages上的情况,由于 GitHub Pages 已经于 2018 年 5 月开始支持为自定义域名开启强制 HTTPS,所以在设置上也十分简单。只需要在 repository 的页面点击 Settings,在 GitHub Pages 下面把 Enforce HTTPS 打勾即可。如果提示 DNS 配置有误而无法开启,可能需要回去检查上述设置是否正确;如果提示因为证书正在颁发还未能开启,可能需要等待至多 24 小时的时间。如果在处理完毕上述的几种情况后依然出现无法给 Enforce HTTPS 打勾的情况,可以 写信联络 GitHub

2. 旧版学术主页

提示: 这部分介绍的是 旧版学术主页 的内容,目前学术主页 已采用基于 Hugo 的 Academic 主题。

旧版学术主页基于 Bootstrap Freelancer。结构是首页(landing page)与 404 页放置于根目录,其他三个子页面(about、research、misc)以及其中的文件等均分别放置于二级目录中,各个网页之间的链接均是相对路径的形式。图片、css、js 等文件均分别放置于根目录下的 imagescssjs 三个文件夹中。

2.1 中文字体的优化

原始的主题没有加入中文字体,一开始我在 macOS 上修改的时候并没有发现问题(大概因为都自动显示为默认苹方字体了),但是在 Windows 系统上就很容易发现所有的中文汉字都变成了宋体,这对于一个强迫症而言是绝对不能忍的。于是,我把 freelancer.css 里面所有的 font-family 都添加上了微软雅黑等字体,这样就变成了:

1
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif;

2.2 设置 favicon

在浏览网页时候可以关注到在标签栏、地址栏或者网页收藏夹可以看到网页的 logo 图标,要让自己的网站也能显示这样的效果,就需要进行相关的配置,而且要根据不同的设备进行不同的设置。

只需要使用 RealFaviconGenerator 网页,把自己的图标图片上传,根据提示对不同的设备进行设置,就可以自动生成一个 favicon 图标压缩包和配置代码。下载并解压图标压缩包放到网站相应图片目录,然后把下载图标页面中提供的代码放在每个 .html 文件的 </head> 之前(注意链接路径要与实际图标路径一致)。如果要加入安卓或者微软设备的图标配置,需要调整下载获得的 site.webmanifestbrowserconfig.xml 文件中的图标路径。

1
2
3
4
5
6
7
8
9
10
<!-- Favicon Set -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
<link rel="manifest" href="/img/icons/site.webmanifest">
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4272c5">
<link rel="shortcut icon" href="/img/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-config" content="/img/icons/browserconfig.xml">
<meta name="theme-color" content="#4272c5">

2.3 移动端的简易适配

虽然网站模板已经为移动端浏览就行了适配,但是有些网页内容依然需要进一步的适配,使得手机用户也能够浏览排版合适的网页。举一个例子,在设置首页(landing page)的背景图片时候注意到,图片无法在小屏幕上适应性缩小,看起来不是很好看。这里采用一个判断语句,使得网页在移动端和非移动端显示不一样的排版布局。其中 if 的条件如果成立,表示设备不是移动端,执行后面的语句,否则执行 else 后面的语句以适配移动端的浏览环境。

1
2
3
4
5
6
7
8
<script type="text/javascript">
if (!(navigator.userAgent.match(/(iPhone|iPad|iPod|Android|BlackBerry|Windows Phone|webOS)/i))) {
document.write('<style>body {background: url("/img/background.jpg") no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;background-position: 0px -5px;-o-background-size: cover;}</style>');
}
else{
document.write('<style>body {background: no-repeat center center fixed;background-color: #000;}</style><img src="/img/background.jpg" alt="background" align="center" style="width: 100%; height: 100%" vspace="50">');
}
</script>

2.4 本地调试

在修改调整的网页过程中,不可能每次都更新到 GitHub 上面,然后查看实际效果。所以,这里利用 macOS 自带的 Apache 服务器,就可以在本地预览修改效果。

在终端 Terminal 中输入以下的第一行命令,然后输入系统密码(输入时不会显示输入状态)按下回车键 return,就可以启动 Apache 服务器。在浏览器中输入 localhost 即可看到 “It works!” 的提示。恭喜,Apache 启动成功了,这样把网站文件放到放到 /Library/WebServer/Documents/ 下就行。如果需要停止 Apache 服务器,只需要输入以下的第二行命令即可。

1
2
sudo apachectl start  #start Apache
sudo apachectl stop #stop Apache

但是有时候觉得把文件放到上述目录不是很方便,那么就需要修改默认部署路径。打开 Finder > Go > Go to Folder...(或者按下组合键 shift + cmd + G),然后输入 /etc/apache2/,在该目录下找到 httpd.conf,使用编辑器打开。找到以下两条命令:

1
2
3
DocumentRoot "/Library/WebServer/Documents"

<Directory "/Library/WebServer/Documents">

在两句命令前面均加上 # 将其注释掉,然后加入两条相似的命令,命令中将路径改为自定义的目录并保存。保存后需要重新启动 Apache 服务器,在终端 Terminal 中输入以下命令:

1
sudo apachectl restart  #restart Apache

如果修改部署路径后,发现浏览器提示没有权限获取,可以检查一下自定义部署路径文件夹及其上级文件夹对于 everyone 用户是否是 No Access 的权限(右键文件夹,点击 Get Info 查看),只需改成 Read Only 的权限后再次尝试即可。

3. 环境配置与 Hexo 初始化

提示: 接下来主要介绍博客的搭建与个性化修改。博客的搭建与配置均基于 Hexo 3.8.0 和 NexT 7.1.0。macOS 在编译时候可能会提示没有缺少 Command Line Tools,需要在终端输入 xcode-select --install,然后根据提示安装。

要使用 Hexo NexT 主题的博客,需要先配置好环境,安装下列应用程序,只需要下载相应安装程序安装即可。

安装完成后,在 Terminal 中输入以下命令、用户密码,再回车。

1
sudo npm install -g hexo-cli

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
hexo init <folder-path>  #在指定文件夹中初始化 Hexo
cd <folder-path> #定位到 Hexo 博客目录
npm install

新建完成后,指定文件夹的目录中:

  • _config.yml 包含了网站的配置信息(后续称之为「站点配置文件」,具体配置的说明可以查看相关 文档
  • themes 是主题文件夹,Hexo 会根据主题来生成静态页面。
  • source 文件夹是存放用户资源的地方,除 _posts 文件夹之外,开头命名为 _(下划线)的文件 / 文件夹和隐藏的文件将会被忽略;Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被复制过去(如 CNAME 文件)。

4. Hexo 基本命令

基本的命令也可以参考官方 中文文档,这里介绍几条常用的命令。需要提醒的是,使用以下命令需要在终端中先将路径定位到 Hexo 博客目录:

1
cd <blog-path>  #定位到 Hexo 博客目录

4.1 新建文章与页面

使用以下的第一句可以在 source/_post/ 文件夹下新建一篇 Markdown 文章;使用以下的第二句可以在 source 下新建以 <page-title> 为名称的文件夹,文件夹内的 index.md 可以在编译后生成一个新的页面。

1
2
hexo new "<post-title>"  #新建文章
hexo new page "<page-title>" #新建页面

因为原始的都是 Markdown 文件,要让浏览器可以显示美观的网页,需要根据 Markdown 文件生成 HTML 静态文件。执行以下命令:

1
2
3
4
5
#生成静态文件
hexo generate #或者 hexo g

#如果报错,可以先执行尝试解决
npm install hexo --save

在某些情况(尤其是更换主题后),如果发现对站点的更改无论如何也不生效,可能需要运行该命令,清除缓存文件 db.json 和已生成的静态文件 public

1
hexo clean

4.2 本地预览调试与部署网站

要在本地预览调试生成的博客网页效果,可以执行以下命令。访问网址为:http://localhost:4000/

1
hexo serve

如果是要部署在 GitHub 或者 Coding,则可以按照下述的命令配置「站点配置文件」_config.yml(注意缩进保持一致):

1
2
3
4
5
6
7
8
# Deployment
deploy:
- type: git
repo: https://github.com/<github-username>/<github-repo-name>.git
branch: <github-repo-branch>
- type: git
repo: https://username: git.coding.net/<coding-username>/<coding-repo-name>.git
branch: <coding-repo-branch>

设置完成后,执行以下命令。第一次执行过程中会提示输入相应用户名和密码,正确输入后既可以正常部署。

1
2
3
4
#首次部署要先执行以下命令安装插件
npm install hexo-deployer-git --save
#部署网站
hexo deploy

在两条命令直接采用 && 进行连接即可同时执行两条命令。另外,使用以下的命令可以简化命令的使用:

1
2
hexo s -g  #启动服务器之前预先生成静态文件,等价于 hexo g && hexo s
hexo g -d #静态文件生成后立即部署网站,等价于 hexo g && hexo d

4.3 添加文章命令后自动打开编辑器

参考:Hexo添加文章时自动打开编辑器 - Doublemine

站点文件夹根目录新建文件夹 scripts,然后在文件夹内新建文件 openeditor.js,写入以下内容:

1
2
3
4
5
6
7
8
9
10
11
//Windows
var spawn = require('child_process').exec;
hexo.on('new', function(data){
spawn('start "markdown编辑器绝对路径.exe" ' + data.path);
});

//macOS
var exec = require('child_process').exec;
hexo.on('new', function(data){
exec('open -a "markdown编辑器绝对路径.app" ' + data.path);
});

4.4 Shell 脚本执行命令

这里提供几个脚本文件,方便一次执行多个命令。要制作可以直接双击打开执行的脚本文件,首先执行以下命令:

1
2
3
cd <file-path>  #定位到指定文件目录
touch <script>.sh #生成脚本文件
chmod +x <script>.sh #设置脚本文件可以直接双击打开执行

编辑脚本文件内容(见我的 hexo-shell-admin 项目页面),保存关闭。然后在 Finder 中右键脚本文件,并选择 Get Info。在 Open with: 里选择 Other...。在弹出对话框中,从 Enable 下拉菜单中选择 All Applications,找到并选择 Terminal ,点击 Open。这样就成功设置了该脚步文件的默认打开程序是 Terminal ,当然也可以点击 Change All...,一劳永逸地解决默认程序打开问题。

5. 博客主题样式自定义

5.1 修改主题

默认的主题似乎不是很好看,所以需要更换主题。我的博客采用的是被大家广泛使用的 NexT 主题。要更换主题,可以执行以下命令下载主题文件。当然也可以从 GitHub 直接下载 最新版本压缩包,解压后将文件放在 /themes/next 目录下面。

1
2
cd <blog-path>  #定位到 Hexo 博客目录
git clone https://github.com/theme-next/hexo-theme-next /themes/next

下载好主题文件后,使用文本编辑器打开博客根目录下的「站点配置文件」_config.yml,找到 theme 键值,将值修改为 next 即可。

注意: 修改主题使用的是博客根目录下的站点配置文件 _config.yml不是主题文件夹 /themes/next 中的主题配置文件 _config.yml。同时,配置文件中所有的配置项冒号与值之间都要有一个半角空格,不然配置不会生效。

NexT 主题的配置可以在 NexT 使用文档 中找到,或者按照配置文件中的注释介绍一步一步进行修改。以下着重提一些需要注意的问题,或者一些无法提供修改配置文件达到的效果。接下的介绍,使用的是主题配置文件。在 /themes/next/source/css/_custom/custom.styl 文件中添加代码可以自定义样式,我的设置可以看 这里

注意: 图片图标文件可以放到 /themes/next/source/images/(默认图标放在这里)或者 /source/ 目录下。如果图标文件放至在 /themes/next/source/images/ 目录下,务必注意不要和目录下的默认图标文件名一样,否则在生成静态文件的时候,默认图标文件会覆盖这些图标文件。

5.2 站点地图

生成 Google 站点地图然后提交给 Google Webmaster,可以加快 Google 对网站的收录,百度搜索也是如此。要自动生成站点地图,可以执行以下命令,这样以后每次执行 hexo g,都会生成新的站点地图文件 sitemap.xmlbaidusitemap.xml

1
2
3
cd <blog-path>  #定位到 Hexo 博客目录
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save #百度站点地图

同时还要在站点配置文件里加入如下内容:

1
2
3
4
5
# Sitemap Setting
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

5.3 评论插件

我这里采用了 Valine,启用方法可以直接参考 官方文档介绍。如果要开启邮件通知,可以参考 赵俊的博客中的介绍。对于不需要开启评论的文章,只需要在 Markdown 文件开头处增加:

1
comments: false

对于 Disqus,很遗憾中国大陆无法访问。对此的一种替代方案是浏览文章时默认不加载评论,以方便无法访问 Disqus 的用户加快文章加载速度,当用户需要查看评论时候点击一个按钮加载评论。这里参考了 Chalkit 的做法,首先需要修改 /themes/next/layout/_partials/comments.swig 文件,定位到以下位置:

1
<div id="disqus_thread">

在上述代码之前,加入以下这段加载评论按钮的代码:

1
2
3
4
5
<div style="text-align:center;">
<button class="btncomment" id="load-disqus" onclick="disqus.load();">
Load Disqus comments
</button>
</div>

提示: 因为我自己修改了默认的 btn 按钮样式,就没有用默认的 btn 按钮。你也可以直接把 btncomment 改成 btn,这样就不用设置这里自定义设置 btncomment 按钮的样式了,具体 btncomment 设置见我的 自定义 CSS 文件

接下来要修改 /themes/next/layout/_scripts/third-party/comments/ 目录下的 disqus.swig 文件,定位到以下位置,并插入下面注释中说明的五行代码,设置添加的按钮功能:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script type="text/javascript">
var disqus = { //插入这一行代码 (1/5)
load : function disqus(){ //插入这一行代码 (2/5)
var disqus_config = function () {
this.page.url = '{{ page.permalink }}';
this.page.identifier = '{{ page.path }}';
this.page.title = '{{ page.title| addslashes }}';
{% if __('disqus') !== 'disqus' -%}
this.language = '{{ __('disqus') }}';
{% endif -%}
};
function loadComments () {
var d = document, s = d.createElement('script');
s.src = 'https://{{theme.disqus.shortname}}.disqus.com/embed.js';
s.setAttribute('data-timestamp', '' + +new Date());
(d.head || d.body).appendChild(s);
}

{% if theme.disqus.lazyload %}
$(function () {
var offsetTop = $('#comments').offset().top - $(window).height();
if (offsetTop <= 0) {
// load directly when there's no a scrollbar
loadComments();
} else {
$(window).on('scroll.disqus_scroll', function () {
var scrollTop = document.documentElement.scrollTop;
if (scrollTop >= offsetTop) {
$(window).off('.disqus_scroll');
loadComments();
}
});
}
});
{% else %}
loadComments();
{% endif %}
$('#load-disqus').remove(); //插入这一行代码 (3/5)
} //插入这一行代码 (4/5)
} //插入这一行代码 (5/5)
</script>

5.4 文章页前后篇

文章页底部的时间较前的文章位置在左,时间较后的文章位置在右;这个不同于我习惯上的时间较前的文章位置在右,时间较后的文章位置在左。所以需要在 themes/next/layout/_macro/post.swig 中进行修改。找到 <div class="post-nav-next post-nav-item">, 将该行下面三行改为如下内容:

1
2
3
4
<div class="post-nav-next post-nav-item">
{% if post.prev %}
<a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
<i class="fa fa-chevron-left"></i> {{ post.prev.title }}

找到 <div class="post-nav-prev post-nav-item">, 将该行下面三行改为如下内容:

1
2
3
4
<div class="post-nav-prev post-nav-item">
{% if post.next %}
<a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
{{ post.next.title }} <i class="fa fa-chevron-right"></i>

5.5 文章底部标签图标

参考:Hexo博客之主题美化 - Fengdi’s Blog

在每一篇文章的结尾会显示本文的标签,默认的显示效果是在每一个标签名字前面加 #。如果希望将其改为 ,那么只需要在 /themes/next/layout/_macro/post.swig 中定位到

1
<a href="{{ url_for(tag.path) }}" rel="tag"># {{ tag.name }}</a>

将其改为以下内容就会有下图这样的效果了:

1
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-fw fa-tag"></i> {{ tag.name }}&nbsp;</a>

5.7 自定义标题中文字体

/themes/next/source/css/_variables/custom.styl 中加入以下内容:

1
$font-family-headings = "PT Serif", "Songti SC", STZhongsong, "PingFang SC", "Microsoft YaHei", Georgia, sans

其中,PT Serif 是从 Google Fonts 引入的西文标题字体,Songti SC 可以为预装了该字体的 macOS 用户提供最佳体验,STZhongsong 则是服务于 Windows 用户,如果上述两个系统的用户没有预先按照这两款字体,则转为分别使用 PingFang SCMicrosoft YaHei 这两款字体。

5.8 与主题样式一致的 404 页面

参考:在 Hexo 中创建匹配主题的404页面 - MOxFIVE’s Blog

要生成一个和主题样式一致的 404 页面,首先需要新建一个页面:

1
2
cd <blog-path>  #定位到 Hexo 博客目录
hexo new page "404"

然后编辑该页面的 Markdown 文件开头为以下内容,正文部分可以自行编辑内容。其中 permalink: /404 表示将该文件解析生成的 HTML 文件永久链接设置为 /404,这样就可以让访客访问错误链接时看到这个页面了。可以点击查看本博客站点的 404 页面

1
2
3
4
5
---
title: 404 Not Found
comments: false
permalink: /404
---

6. 扩展功能

6.1 永久性链接

参考:Hexo之URL持久化 - DongSheng’s Blog

Hexo 默认生成的文章地址路径是 :year/:month/:day/:title/。这种链接对搜索爬虫很不友好,因为它的url结构超过了三层,太深了;而且,如果修改了文章的文件名,就相应会修改其路径,无法保证链接的永久性,所以需要进行修改。

这里使用插件 hexo-abbrlink 来生成博客文章的永久链接,可以查看该插件的 GitHub 项目页面。首先需要进行安装:

1
2
cd <blog-path>  #定位到 Hexo 博客目录
npm install hexo-abbrlink --save

然后在站点配置文件中修改 permalink: :year/:month/:day/:title/ 为以下内容,这样执行 hexo clean && hexo g 后就可以更新永久链接了。

1
2
3
4
permalink: posts/:abbrlink/
abbrlink:
alg: crc32 #support crc16(default) and crc32
rep: hex #support dec(default) and hex

6.2 选择性关闭侧边栏目录

参考:在Hexo NexT主题中关闭指定文章的Table of Contents - Codebiz

侧边栏目录对于阅读长篇的文章特别有帮助,但是如果某些页面不想要出现这个目录(比如我的 关于页面),就需要做一些修改了。在 /themes/next/layout/_macro/sidebar.swig 中定位到

1
{% set display_toc = is_post and theme.toc.enable or is_page and theme.toc.enable %}

将该行修改为

1
{% set display_toc = is_post and theme.toc.enable and page.toc or is_page and theme.toc.enable and page.toc %}

这样,对于不想出现侧边栏目录的页面,只需要在其 Markdown 文件开头加入以下选项就可以隐藏侧边栏目录了。

1
toc: false

6.3 文章置顶

首先替换给文章排序索引的原有插件 hexo-generator-index,执行以下命令

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的开头加上 top: true 即可。如果需要给置顶的文章设置一个置顶标志,就可以在 /themes/next/layout/_macro/post.swig<div class="post-meta"> 标签下,插入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="post-meta">

{# Pin post top index #}
{% if post.top %}
<span class="post-meta-item-icon">
<i class="fa fa-thumb-tack"></i>
</span>
<span class="post-meta-item-text">
<font color=#649ab6><b>置顶</b></font>
</span>
<span class="post-meta-divider">|</span>
{% endif %}

这样,就会有下图这样的效果了:

6.4 豆瓣读书电影游戏展示

如果想在博客中展示自己在豆瓣上的读书、电影、游戏等的信息,可以安装插件 hexo-douban,具体方法可以参考该插件的 GitHub 页面。而要增加知乎、豆瓣图标支持,具体方法请阅读我的另一篇文章 Hexo NexT 博客增加知乎豆瓣图标支持

但是,hexo-douban 插件存在 Safari 浏览器(包括 macOS 和 iOS 系统)下无法显示豆瓣读书中书籍封面图片的问题。联系了插件作者,也看了一下 GitHub 上面 Issues 中大家的讨论,基本上确认是因为 Safari 无法向豆瓣读书给出空 referrer 信息,而被豆瓣防盗链机制阻挡获取书籍封面图片。在此之前,插件作者给出了一个解决方案是为豆瓣页面加入:

1
<meta name="referrer" content="never" />

这样声明了空 referrer 信息后,确实可以让生成的豆瓣读书页面在 Safari 下显示书籍封面图片。但是存在一个问题就是在生成的三个豆瓣页面无法兼容 busuanzi 的访客统计数据(无法显示数据),所以作者后来就取消了这个修正。

现在使用中还是发现完善的博客内容显示其实高于无谓的访客统计数据,而且 busuanzi 的访客统计其实在 Safari 下并不准确,总访客数每次刷新都会增加而 Chrome 就不会这样,所以就考虑自己加回刚才提及的修正功能,然后放弃 busuanzi 的访客统计(反正文章阅读数有 LeanCloud,访客分析有百度统计)。由于我的豆瓣插件是在 Netlify 上构建时根据插件依赖列表自动下载安装的,所以在本地修改 hexo-douban 的文件并不能解决这个问题。

但是如果直接在 themes/next/layout/_custom/head.swig 中加入上述语句,就会让所有页面都设置了空 referrer 信息。而我在腾讯云对象存储防盗链设置里拒绝空 referer 的 http 请求,也就是说我在腾讯云对象存储里的图片即使在白名单链接里也是无法显示的。但是如果允许,直接用图片链接就可以获取对象存储里的图片,而且所有空 referer 的请求(无论链接是不是在白名单里)都可以查看图片里,这样就有了对象存储产生大量读取流量和读取请求的风险(一不小心把我的免费额度用完就不好了)。

因此,需要做的就是让页面自动判断是不是豆瓣读书页面,如果是就加载上述 meta 信息,否则就不加载。这样就需要把以下这段代码加入到 themes/next/layout/_custom/head.swig 之中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
function GetUrlRelativePath() {
var url = document.location.toString(); //获取当前链接
var arrUrl = url.split("//");
var start = arrUrl[1].indexOf("/");
var relUrl = arrUrl[1].substring(start); //截取从start开始到结尾的所有字符
if(relUrl.indexOf("?") != -1){
relUrl = relUrl.split("?")[0];
}
return relUrl;
}
var relUrl = GetUrlRelativePath()
if (relUrl.indexOf('/books/')>=0) { //判断是否为豆瓣读书页面
document.write('<meta name="referrer" content="never" />');
}
</script>

6.5 Travis CI 持续集成

具体方法可以查看 Hexo遇上Travis-CI:可能是最通俗易懂的自动发布博客图文教程。需要提醒的是目前 Travis CI 已经计划逐渐把 travis-ci.org 的项目迁移到 travis-ci.com ,所以只需要用后者即可。

可以让 Travis CI 监视 GitHub 上博客源文件分支和学术主页源文件分支的变动,自动生成博客静态网页文件并部署到 GitHub Pages 和 Coding Pages,并将学术主页的源文件同步推送至腾讯云开发者平台的仓库。同时也可以设置来自百度搜索的流量解析到 Coding Pages,这样可以保证百度搜索的收录。

6.6 其他:归档页与相册

归档页如果喜欢 persilee’s Blog 这样的样式,具体可以修改 /themes/next/layout/archive.swig,这样可以把标签页和分类页整合到归档页中。

关于创建瀑布流的相册,请查看我的另一篇文章:Hexo NexT 博客增加瀑布流相册页面。文章图片的存储如果放至在博客项目下,会极大地增加项目的空间。所以可以将图片上传到图床,然后在需要图片的地方引用该图片外部链接即可。公开的公共图床个人比较推荐的是采用微博相册或者 GitHub Issues 作为图床。不过我现在选择了腾讯云的 COS 对象存储,提供每个月 10 GB 的免费外网下行流量,以及每个月 50 GB 的免费存储空间,个人感觉足够使用了(毕竟博客也没很大的访问量)。另外介绍一个 macOS 上十分实用的批量打水印免费软件「XnConvert」,可以查阅这一份 使用说明

赞赏一下吧~ 还可以关注公众号订阅最新内容