Hexo搭建个人博客(四)

本文详细介绍如何博客进行细节性优化。

主页背景图

Hexo搭建个人博客(三)节中我们讲解图床时提到过将博客背景图替换为七牛服务器上的文件地址,Hexo默认的博客背景图片是themes\landscape\source\css\images目录下的banner.jpg,可以替换为你喜欢的图片。

favicon

首先到favicon制作网站制作你的favicon.ico文件,国内比较有名的有比特虫,将favicon.ico放到source目录下即可。

发布时间

Hexo默认发布时间是放在文章标题上方的,看起来比较别扭,可以修改将其置于文章标题下方。
找到文件themes\landscape\layout_partial\article.ejs第9行,修改为如下:

1
2
3
4
5
6
7
8
9
<header>
<% } %>
<!-- add by yurixu 2016/1/3 将文章时间放在标题下 start -->
<div class="article-meta">
<%- partial('post/date', {class_name: 'article-date', date_format: 'YYYY-M-D ddd HH:mm'}) %>
<%- partial('post/category') %>
</div>
<!-- add by yurixu 2016/1/3 将文章时间放在标题下 end -->
<div class="article-entry" itemprop="articleBody">

找到themes\landscape\source\css_partial\article.styl文件,修改.article-date.article-category为如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.article-date
@extend $block-caption
margin: 20px 15px 0px 15px
float: left
a&:hover
color: color-link
&:before
font-family: font-icon
color: #ccc
content: "\f073"

.article-category
margin: 20px 15px 0px 8px
float: left
line-height: 1em
color: #ccc
text-shadow: 0 1px #fff
&:before
font-family: font-icon
content: "\f0c6"

插件

Hexo可以随意安装插件,安装方法:

1
npm install <plugin-name> --save

启用插件:在整站配置文件_config.yml中添加:

1
2
plugins:
- <plugin-name> #插件名

升级插件:

1
npm update

卸载插件:

1
npm uninstall <plugin-name>

下面以安装RSS和sitemap插件为例进行讲解:

  • RSS
    安装RSS:
    1
    npm install hexo-generator-feed --save

安装完成后可以在主题配置文件_config.yml中配置头部RSS菜单:

1
2
3
4
5
6
7
8
# 头部菜单
menu:
Home: /
Archives: /archives
Reading: /read
GitHub: https://github.com/xuyuri
RSS: /atom.xml #RSS
About: /about

  • sitemap
    安装sitemap:
    1
    npm install hexo-generator-sitemap --save

此时会生成sitemap.xml

跨平台字体优化

找到文件themes\landscape\source\css_variables.styl第22行:

1
font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif

替换为:

1
font-sans = Tahoma, "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei Light", "Microsoft YaHei", "Source Han Sans CN", "WenQuanYi Micro Hei", sans-serif

其中 Helvetica、Verdana 是英文字体,前者一般存在于苹果电脑和移动设备上,后者一般存在于 Windows 系统中。冬青黑体(Hiragino Sans GB)、思源黑体(Source Han Sans CN)、文泉驿米黑(WenQuanYi Micro Hei)是中文字体,冬青黑体从 OS X 10.6 开始集成在苹果系统中,文泉驿米黑在Linux的各大发行版中均较为常见,而思源黑体是近期 Google 和 Adobe 合作推出的一款开源字体,很多电脑上也安装了这一字体。这样一来,在绝大部分操作系统中就可以显示美观的字体了。

代码块

找到文件themes\landscape\source\css\highlight.styl第17行:

1
margin: 0 article-padding * -1

修改为:

1
margin: auto

这样代码块就不会左右顶格了,而是与两侧保持一定间距。
在第22行添加:

1
border-radius: 8px

使代码块呈现圆角效果。

版权信息

找到文件themes\landscape\layout_partial\footer.ejs,其中的:

1
2
3
4
5
6
7
8
9
10
11
<footer id="footer">
<% if (theme.sidebar === 'bottom'){ %>
<%- partial('_partial/sidebar') %>
<% } %>
<div class="outer">
<div id="footer-info" class="inner">
&copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>

是Hexo原始的版权信息。

1
2
3
<footer id="footer">
...
</footer>

替换为:

1
2
3
4
5
6
7
<footer id="footer">
<% if (theme.sidebar === 'bottom'){ %>
<%- partial('_partial/sidebar') %>
<% } %>
<!-- add by yurixu 2016/1/3 add bottom -->
<%- partial('bottom') %>
</footer>

在themes\landscape\layout_partial目录下新建文件bottom.ejs,内容如下:

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
<div class="outer">
<div id="footer-info" class="inner" style="text-align:center;">
<table width="100%" border="0">
<tr>
<td style="text-align:left">
Copyright &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %> &nbsp; &nbsp;
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a><br>
<span id="busuanzi_container_site_uv">Total visit <span id="busuanzi_value_site_uv"></span> times</span> &nbsp; &nbsp; &nbsp; &nbsp;
<span id="busuanzi_container_site_pv">Total views <span id="busuanzi_value_site_pv"></span> times</span>
</td>
<td style="text-align:right">
<div style="font-family: FontAwesome;font-size: 20px;">
<a href="http://weibo.com/xywEliot" title="微博" target="_blank">&#61834;</a>&nbsp;
<a href="http://user.qzone.qq.com/864909480" title="QQ空间" target="_blank">&#61910;</a>&nbsp;
<a href="https://github.com/xuyuri" title="GitHub" target="_blank">&#61595;</a>&nbsp;
<a href="http://www.linkedin.com/in/yurixu" title="LinkedIn" target="_blank">&#61665;</a>&nbsp;
</div><br>
<a href="/sitemap.xml">网站地图</a>&nbsp; &nbsp;
<a href="mailto:[email protected]" target="_blank">联系博主</a>&nbsp; &nbsp;
<a href="http://tongji.baidu.com/web/18697832">站长统计</a>
</td>
</tr>
</table>
</div>
</div>

Hexo内置的Font Awesome版本较低,不能显示QQ图标,解决方法:
[1] 首先下载最新版本的Font Awesome;
[2] 打开themes\landscape\source\css\fonts目录,用最新版的文件替换;
[3] 打开文件themes\landscape\source\css_variables.styl,将font-icon-version替换为Font Awesome最新的版本号。

文章目录

可以给文章添加目录结构:
[1] 找到文件themes\landscape\layout_partial\article.ejs中的post.content,将:

1
2
3
<% } else { %>
<%- post.content %>
<% } %>

修改为:

1
2
3
4
5
6
7
8
9
10
11
<% } else { %>
<!-- add by yurixu 2016/1/3 添加文章目录 start-->
<% if (!index && post.toc){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(post.content) %>
</div>
<% } %>
<!-- add by yurixu 2016/1/3 添加文章目录 end-->
<%- post.content %>
<% } %>

[2] 在文件themes\landscape\source\css_partial\article.styl底部添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*toc*/
.toc-article
background #eee
border 1px solid #bbb
border-radius 10px
margin 1.5em 0 0.3em 1.5em
padding 1.2em 1em 0 1em
max-width 28%
.toc-title
font-size 120%
#toc
line-height 1em
font-size 0.9em
float right
.toc
padding 0
margin 1em
line-height 1.8em
li
list-style-type none
.toc-child
margin-left 1em

如果想给生成的文章添加目录只需要在顶部添加:toc: true,例如:

1
2
3
4
5
6
title: Hexo搭建个人博客(四)
toc: true
date: 2016-01-06 23:30:40
categories: Hexo
tags: [Hexo, 博客]
description: 本文详细介绍如何博客进行细节性优化。

域名申请+绑定

域名申请可以到godaddy上申请,网上有许多优惠码可以拿来用。
申请成功后在DOMAIN下配置域名。下面主要讲解下如何使用DNSPOD进行域名解析。
[1] 首先到DNSPOD进行注册;
[2] 添加你注册的域名,并设置记录。
添加域名:
添加域名
添加记录:
添加记录
前2个A记录是Github的域名服务器地址,具体IP值可参考官方教程;
中间两个A记录是DNSPOD的域名服务器地址;
最后一个CNAME类型的记录一定要添加,否则无法通过域名访问你的博客,它的记录值写你博客的Github仓库名称,例如:xuyuri.github.io
[3] 在godaddy上修改DNS配置:
Manage DNS
设置DNS:
NAMESERVER SETTINGS
点击ADD NAMESERVER 添加DNSPOD的域名服务器地址(即DNSPOD中默认的中间两条记录):

1
2
F1G1NS1.DNSPOD.NET
F1G1NS2.DNSPOD.NET

[4] 在博客source目录下新建文件CNAME,内容为你的域名地址。
注:CNAME文件名一定要全大写,域名地址不要带www或者http
godaddy绑定域名并完成解析大概需要24小时,经过以上步骤就可以通过域名直接访问你的博客了。

博客管理

为了便于在不同的电脑上写博客,需要对博客内容进行同步,我们使用github分支来解决这个问题。

  • 新建分支,推送源码

目前我的博客发布后的内容(html)在xuyuri.github.io仓库下的master分支下,首先在xuyuri.github.io下新建一个分支hexo,然后将xuyuri.github.io的默认分支切换到hexo,再进行如下操作流程:
[1] PC下新建一个目录用于存放博客内容,假设为Blog,Git Bash Here 定位到Blog目录
[2] 使用git clone [email protected]:xuyuri/xuyuri.github.io.git 拉取分支,此时会生成一个xuyuri.github.io.目录,进入到该目录,此时git显示当前分支为hexo,即默认分支;
[3] 清空hexo目录

1
rm -rf *
git add .
git commit -m 'init'
git push origin hexo

此步骤会清空hexo分支下原有发布的html博客数据,将博客源码数据拷贝至Blog/xuyuri.github.io目录下,执行:

1
git add .
git commit -m 'init'
git push origin hexo

此时会将本地博客源码推送至hexo目录下。
注意:博客源码中博客主配置文件_config.yml中的deploy参数,部署的分支应为master,以后在hexo分支下写博客,hexo d部署到master分支下。

  • 日常博客维护

日常新建博客,修改博客都在hexo分支下进行,通过:

1
git add .
git commit -m 'XXX'
git push origin hexo

命令将修改内容推送至hexo分支,然后使用:

1
hexo g
hexo d

将修改内容发布到master分支,此时通过域名访问博客可以看到修改后的内容。

  • 在其他电脑上使用

[1] 安装Node.js和Git
分别到Node.jsGit官网下载最新版本,并安装。

[2] 拉取分支:git clone [email protected]:xuyuri/xuyuri.github.io.git(默认为hexo)
注意:如果提示

1
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

需要根据Hexo搭建个人博客(一)设置SSH公钥部分设置SSH公钥。
进入到新生成的文件夹xuyuri.github.io.git下执行以下操作。
[1] 配置环境:

1
npm install [email protected] --save
npm install
npm install hexo-deployer-git --save

注意:一定不要使用hexo init指令!
—编者添加于2016年6月28日—
注意:此处安装hexo时指定了版本3.1.1,因为最新3.2.0版本的hexo安装完成后执行hexo -g会报错,因此使用3.1.1版本的hexo。如果你已经安装了3.2.0的版本,想要降版到3.1.1,执行如下操作:

1
npm uninstall hexo
npm install [email protected] --save
npm install

—编者添加于2016年6月28日—
安装完成后就可以进行博客的修改、新建。
如果在不同电脑上同时有博客的源码目录,每次写/修改博客前要先从分支上拉取最新的代码,然后再在本地目录下进行操作。

1
git status
git pull

先使用git status 查看本地目录的状态,如果有未提交的修改,要先提交,保证本地目录干净;
再使用git pull从hexo分支中拉取最新的代码,此时就可以正常写博客了。

写在最后

至此关于如何使用Hexo搭建个人博客就介绍到这里,最后附上在搭建个人博客中参考的博客/文献,一并致谢!

[1] hexo系列教程
[2] hexo你的博客
[3] Hexo Landscape 主题修改优化
[4] GitHub Pages + Hexo搭建博客
[5] 【Hexo+Github】域名和github绑定的问题
[6] Hexo 部署到 Github Pages 文件夹大小写问题
[7] Hexo入门指南(七)-评论&分享
[8] hexo 添加百度统计

— 完结 —

分享 本文总阅读量
< !-- add by yurixu 替换Google的jquery并且添加判断逻辑 -->