Hexo搭建个人博客(三)

本文详细介绍了如何发布文章以及如何打造个性化Hexo博客。

如何发布文章

执行hexo new命令会在hexo/source/_posts/目录下生成指定名称的文章。

1
hexo new [layout] "post_name" #新建文章

其中layout是可选参数,默认为post,layout模板文件在目录scaffolds下。
post.md默认内容为:

1
2
3
4
title: {{ title }}
date: {{ date }}
tags:
---

如果想在每篇文章中添加categories分类信息,只需要修改post.md文件即可:

1
2
3
4
5
title: {{ title }}	#文章名称
date: {{ date }} #文章发布日期
categories: #文章分类(可以为空)
tags: #文章标签(可以为空),多标签格式[tag1,tag2,tag3]
---

顶部导航“关于”

我们使用

1
hexo new [layout] "post_name"

来创建文章,如果要添加新页面,例如在博客顶部添加“关于”页面,则使用:

1
hexo new page "about"

此时会在source下生成一个新文件夹about,编辑about中的index.md即可对“关于”显示的内容进行制定;同时在主题配置文件_config.yml中添加“关于”的导航菜单和链接:

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

文章摘要

文章默认是不显示摘要信息的,在需要显示摘要的地方添加以下代码:

1
2
3
以上是摘要
<!--more-->
以下是余下全文

more以上内容即是摘要信息,显示在主页中,点击『Read More』链接打开全文。还可以将『Read More』更换成自己喜欢的文字,修改主题配置文件_config.yml中的excerpt_link配置项即可:

1
2
# Content
excerpt_link: Read More #摘要链接文字

替换Google源

  • 替换Jquery

Hexo中默认使用jquery链接时Google提供的,从大陆访问比较慢,所以我们进行替换。
找到themes/landscape/layout/_partial/after-footer.ejs的第17行:

1
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

替换为:

1
2
3
4
5
6
<script src="//libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-2.0.3.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

即将Google的jquery替换为百度的jquery,同时如果获取百度的jquery失败则调用本地的jquery文件。
下载libs.baidu.com/jquery/2.0.3/jquery.min.js对应的jquery文件,命名为jquery-2.0.3.min.js,并放置于themes\landscape\source\js目录下。

  • 替换字体文件

找到themes/landscape/layout/_partial/head.ejs的第31行:

1
<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">

替换为:

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

注:经过以上文件链接替换,博客打开速度会产生质的飞跃。

评论

Hexo默认使用国外流行的disqus,国内建议选择多说评论。

  • 注册:首先在多说注册账号
  • 配置
    在整站配置文件_config.yml中添加多说的配置:
    1
    duoshuo_shortname: 你站点的short_name

修改themes\landscape\layout_partial\article.ejs模板,把:

1
2
3
4
5
6
7
<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<% } %>

替换为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if (!index && post.comments && config.duoshuo_shortname){ %>
<section id="comments">
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
(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);
})();
</script>
<!-- 多说公共JS代码 end -->
</section>
<% } %>

找到第27行,把:

1
2
3
<% if (post.comments && config.disqus_shortname){ %>
<a href="<%- post.permalink %>#disqus_thread" class="article-comment-link">Comments</a>
<% } %>

替换为:

1
2
3
<% if (post.comments && config.duoshuo_shortname){ %>
<a href="<%- url_for(post.path) %>#comments" class="article-comment-link">留言</a>
<% } %>

百度分享

Hexo默认的分享在国内访问受限,所以选择使用百度分享。
找到themes\landscape\layout_partial\article.ejs第26行:

1
<a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link">分享</a>

替换成:

1
2
3
<script>
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>

找到themes\landscape\source\js\script.js的第35~86行关于Share的部分,全部注释掉。

百度统计

Hexo默认为Google统计,修改为百度统计。注册并登陆百度统计,在网站中心添加网站域名并获取代码。
在主题配置文件themes/landscape/_config.yml中添加配置项:

1
baidu_tongji: true 			#百度统计

新建百度统计ejs文件:themes\landscape\layout_partial\baidu_tongji.ejs,设置内容如下:

1
2
3
<% if (theme.baidu_tongji){ %>
#你的百度统计代码
<% } %>

打开themes\landscape\layout_partial\head.ejs,在底部</head>之前添加:

1
<%- partial("baidu_tongji") %>

404页面

直接在themes\landscape\source目录下创建404.html,但是自定义404页面仅对绑定顶级域名的项目起作用,GitHub默认分配的二级域名以及使用hexo server在本机调试均不起作用。
本博客的404页面。还可以选择公益404页面,例如:
[1] 腾讯公益404
[2] 益云404
[3] 失蹤兒童少年資料管理中心404

图床

图床我使用的是七牛云存储,速度还不错。可以将首页背景图片放置到七牛上,获取存储地址,找到themes\landscape\source\css\_variables.sty第39行:

1
banner-url = "images/banner.jpg"

修改为你在七牛中存储的图片文件地址。

页面统计

页面统计使用不蒜子提供的服务。
打开themes\landscape\layout_partial\footer.ejs,在最底部添加:

1
2
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

不蒜子提供两种统计方式:pv和uv,而且提供总站pv/uv访问量统计和单页面pv访问量统计。
总站pv:

1
2
3
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

总站uv:

1
2
3
<span id="busuanzi_container_site_uv">
本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

单页面pv:

1
2
3
<span id="busuanzi_container_page_pv">
本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>

关于博客细节性优化,例如字体、代码块、版权信息等,我将会在下一节Hexo搭建个人博客(四)介绍。

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