Hunter的博客

Hexo其他辅助功能分享

发表于 | 分类于 | 阅读次数
Hexo其他辅助功能分享

这是关于Hexo的第三篇文章了，这里主要分享下Hexo上一些辅助功能项。

目录：

  • fancybox使用
  • 取消默认hexo处理文件
  • 文章摘要
  • 自定义目录
  • 草稿文章的处理
  • 百度统计
  • 自定义挂件
  • 配置404页面
  • 图床
  • 博客访问量统计

fancybox使用
fancybox效果使用，就是在文章头部增加可以切换显示的图片效果，具体效果如下：
fancybox效果

具体配置是在文章头部添加photos配置项：

1
2
3
4
5
---
photos: 
- http://7xqlat.com1.z0.glb.clouddn.com/gaoqing1.jpg
- http://7xqlat.com1.z0.glb.clouddn.com/gaoqing2.jpg
---

取消默认hexo处理文件
如果不想让hexo默认处理文章，可以在文章头部定义：layout: false

1
2
3
---
layout: false
---

文章摘要
在首页只显示more以上的内容，余文需要点击【> Read More】连接打开全文才能显示，效果如下：
文章摘要效果
具体配置是使用<!-more–>:

1
2
3
4
5
6
7
8
9
10
11
12
13
---
# layout: false
title: Hexo其他辅助功能分享
date: 2016-01-29 09:09:50
tags: [第一次]
categories: [日志,生活]
photos: 
- http://7xqlat.com1.z0.glb.clouddn.com/gaoqing1.jpg
- http://7xqlat.com1.z0.glb.clouddn.com/gaoqing2.jpg
---
上面都是在首页显示的摘要信息
<!--more-->
这里是正文信息，只有点击首页的more连接才会显示

自定义目录
使用命令：hexo new page about
在source下面会创建一个about目录，里面有个index.md文件
将自定义目录挂接到博客首页菜单上去，需要在全局配置文件_config.yml中的menu下面新增About: about即可，其中About是在页面显示的名称，可自定义，about是新创建的目录，名称必须一致

草稿文章的处理
在source/_drafts目录下面存放的是草稿文章，默认情况下草稿文章是不会发布到博客上面去，可以通过以下两种方式进行发布。
1、修改全局配置文件_config.yml的render_drafts为true，此时文章还在_drafts目录下面
2、可以通过如下命令将文章迁移到_post目录进行发布，此时文章就在_post目录下面了，_drafts目录下就会被删除掉
hexo publish draft 草稿文件名称
新增草稿文章有两种方式：
1、自己手动在_drafts目录下新建md文件。
2、通过下面命令来新建
hexo new draft 草稿名称

百度统计
百度统计，可以对博客网站的UV、PV等情况进行监控统计。
第一步，需要到百度统计去注册账户
第二步，登录百度统计管理平台，在网站中心选项卡配置我们的博客地址信息
第三步，获取统计的JS代码
第四步，在themes/主题/layout/_partial目录下面新建baidu_tongji.ejs文件，将复制的统计js代码粘贴进去，可以在主题_config.yml配置文件中定义一个变量来控制是否启用百度统计。

1
2
3
4
5
6
7
8
9
10
11
12
13
<% if(theme.baidu_tongji){ %>
  <!-- baidu统计 -->
  <script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "//hm.baidu.com/hm.js?265d75f1ac95ef1760822f57dba2111c";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
  <!-- baidu统计end -->
<% } %>

第五步，编辑同目录下面的head.ejs，在</head>之前增加代码

1
2
3
<!-- 添加baidu统计 -->
 <%- partial('baidu_tongji') %>
 <!-- end 添加baidu统计 -->

第六步，发布hexo博客到github，不知道怎么发布可以参看第一篇文章《使用Hexo在Github上构建免费Blog应用》
第七步，在百度统计管理平台-网站中心去验证下首页代码是否安装正确
第八步，如果安装正确，一般过24小时就可以百度统计就可以采集到博客的统计信息了

自定义挂件
在博客的右边显示了很多挂件，hexo默认提供了5个挂件：分类、最近发布的文章、标签、标签云、查询
自定义挂件第一步在themes/主题/layout/_widget目录下面新建myWidget.ejs文件

1
2
3
4
5
6
7
8
9
<div class="widget tag">
  <h3 class="title">自定义挂件</h3>
  <ul class="entry">
  	<li>自定义挂件1</li>
  	<li>自定义挂件2</li>
  	<li>自定义挂件3</li>
  	<li><a href="404">404</a></li>
  </ul>
</div>

第二步：编辑主题下面的配置文件_config.yml,在widgets变量下面增加新建的自定义挂件ejs文件名

1
2
3
4
5
6
7
widgets:
- search
- category
- tag
- recent_posts
- tagcloud
- myWidget

第三步：重启服务并访问
其实自定义挂件这里可以放些第三方的小插件等等..

配置404页面
404页面，用于在请求不到对应资源的时候响应给用户的界面。关于404页面，我们可以做的更有意义些，有很多关于404的公益项目，在这里我们选择腾讯公益404。
第一步，在blog根目录下面新建404.html，将腾讯公益404js代码粘贴进去
<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>
第二步，发布blog到github上面，本地是无法看到效果的，一定要发布到github上面去。
第三步，查看效果

图床
之前把所有图片都托管在github上，发现访问有点慢，后来改把所有图片资源都放到七牛云上托管了，速度还可以。
七牛注册成功后，会有10GB永久免费存储空间+每月10GB下载流量、10万次PUT请求、100万次Get请求，对于目前个人博客来说已经够用了。在这里我也发一个七牛邀请码

先到这里，下面以后再补上
博客访问量统计