有时你会觉得hexo自带的主题不太顺眼,换了个主题,又觉得某个地方不太顺眼。有时看到别人hexo上的某个特性,就想到能不能也为自己的hexo添上。能够弄懂整个hexo的架构的前端攻城狮来说,这个肯定不难,但是,我只是想快速实现我的目的,鬼管他架构懂多少。这个时候,其实就是follow,看看有没有弄出来的亲们的笔记,此处就把本人这一过程搜集的或者自己积累的列在这里。
如何获取主题
hexo是开源的,hexo的主题也是开源的!只需要简单的命令git clone
即可获取主题,至于主题的仓库在哪,你可以看这里或者大可自己Github搜索。我就用以下命令获取了一个新的主题light
,注意其中的clone保存路径,此处是位于hexo的根目录。1
git clone git://github.com/tommy351/hexo-theme-light.git themes/light
此外,开源项目更新快是一个显著特点,那我们要更新已经获取的主题要应该怎么做呢?通过以下命令即可:1
2cd themes/主题 #进入主题所在文件夹
git pull
Hexo根目录介绍
为什么上述在更新主题的时候需要cd themes/主题
,还有我们获取的主题为什么要保存在themes/light
,这些都需要对整个Hexo的目录框架有一点认识,这一部分先为大家介绍Hexo的根目录。摘自《hexo你的博客》—— 目录介绍。1
2
3
4
5
6
7
8
9
10
11
12.
├── .deploy
├── node_modules
├── public
├── scaffolds
├── source
| ├── _posts
| └── img
├── themes
├── _config.yml
├── db.json
└── package.json
- .deploy:执行hexo deploy命令部署到GitHub上的内容目录。
- node_modules:通过NPM命令安装的Node模块。
- public:执行hexo generate命令,输出的静态网页内容目录。
- scaffolds:layout模板文件目录,其中的md文件可以添加编辑。
draft.md:草稿源码文件模板
page.md:新网页源码文件模板
post.md:文章源码文件模板 - source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
_posts:发布文章
xxx.md:一系列源码文件
img:图片文件夹
about:新网页源码文件夹 - themes:主题文件目录
landscape:本人自带主题
light:获取的新主题 - _config.yml:全局配置文件,大多数的设置都在这里。
- db.json:缓存数据。
- package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮。
主题目录介绍
获取到主题后,将保存在根目录/themes/获取主题
,下面是对该主题目录的相关介绍。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.
├── layout #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
| ├── _partial #局部的布局,此目录下的*.ejs是对头尾等局部的控制
| └── _widget #小挂件的布局,页面侧边栏的控制
| └── *.ejs
├── source #源码
| ├── css
| | ├── _partial #*.styl局部css
| | ├── _util #*.styl基础css
| | ├── fonts #字体
| | ├── images #图片,banner.jpg是header的背景图
| | | ├── banner.jpg
| | └── style.styl #*.styl引入需要的css源码
| ├── fancybox
| └── js
├── _config.yml #主题配置文件
└── README.md #用GitHub的都知道
主题配置文件_config.yml扫盲
要想达到某个主题的效果,还需要对主题配置文件进行修改,下面是结合自身修改做的一些注释。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
42
43
44
45
46
47
48
49
50
51
52
53
54# Header
menu: #站点右上角导航栏,按照格式添加,右侧为public文件夹下的路径,索引至index.html
#从上至下依次显示在右上角从左至右处
Home: /
All-lists: /archives
Resume: /Shengjie
About: /about
# Sidebar
sidebar: left
widgets: #站点右边栏
#- search # 搜索
- category # 分类
- tag # 标签
##- archive # 归档
- blogroll # 友情链接
- weibo # 微博秀
- recent_posts # 最新文章
# Content
# 阅读全文按钮显示内容
excerpt_link: Read More...
# excerpt_link: 阅读全文 #替换为中文
fancybox: true #图片效果,默认
favicon: /favicon.png #网站的标志
# Miscellaneous
duoshuo_shortname: Durant35 #用于加入多说评论的参数
##
# show_replies: false
# tweet_count: 5
google_analytics: #要使用google_analytics进行统计的话,这里需要配置ID,暂时默认
tongji: true
baidu_tongji: true
#comment_provider: facebook
# Facebook comment
# comment_count: 5
# comment_width: 840
# comment_colorscheme: light
Miscellaneous以下的参数其实都是一些自定义的键值对,或者说跟主题本身并无关系。此外,主题配置文件_config.yml中的参数都会在/themes/主题
目录下layout
文件夹中的.ejs
文件中引用,方式是theme.key
。config.key
则是引用根目录下的_config.yml配置文件中的参数。
添加微博秀
在上述的_config.yml主题配置文件中,启用了weibo
微博秀这一侧边栏,但是原始的主题并没有包含这一特性,即layout/_widget
下没有相应的.ejs
文件。此处也许你也看出了个中奥妙,即主题配置文件中的参数索引至相应的.ejs
文件。我们想要启用微博秀,需要在layout/_widget
下创建相应的.ejs
文件,新建txt文件,命名为weibo.ejs
即可。那内容是什么,空肯定不行吧!此处需要获取微博第三方代码。进入微博组件平台,登陆后点击微博秀,进行一些基础设置和样式设置,即可复制代码粘贴进weibo.ejs
。
添加百度分享
要在每篇文章结尾处添加百度分享按钮,需要修改你的主题/layout/_partial/article.ejs
。找到footer标签,如下进行相应的修改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<footer class="article-footer">
<!-- Share按钮,注释掉,不显示Share按钮
landscape代码:
<a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link">Share</a>
landscape-plus代码:
<% if (config.baidushare || theme.baidushare){ %>
<a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link" data-share="baidu"><%= __('share') %></a>
<% } else { %>
<a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a>
<% } %>
-->
<!-- Comment按钮,注释掉,不显示Comment按钮
landscape代码:
<% if (post.comments && config.disqus_shortname){ %>
<a href="<%- post.permalink %>#disqus_thread" class="article-comment-link">Comments</a>
<% } %>
landscape-plus代码:
<% if (post.comments && (config.duoshuo_shortname || theme.duoshuo_shortname)){ %>
<a href="<%- post.permalink %>#ds-thread" class="article-comment-link"><%= __('comments') %></a>
<% } else if (post.comments && config.disqus_shortname){ %>
<a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comments') %></a>
<% } %>
-->
<!-- 百度分享 -->
<div class="bdsharebuttonbox">
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_qzone" data-cmd="qzone"></a>
<a href="#" class="bds_tsina" data-cmd="tsina"></a>
<a href="#" class="bds_tqq" data-cmd="tqq"></a>
<a href="#" class="bds_renren" data-cmd="renren"></a>
<a href="#" class="bds_weixin" data-cmd="weixin"></a>
</div>
<script>
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};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>
<%- partial('post/tag') %>
</footer>
你可以参考上述的百度分享代码,也可以自己从百度分享获取代码。此外,建议将上述百度分享代码独立放置在单独的.ejs
文件中,即在layout/_partial/post
目录下新建baidushare.ejs
文件,粘贴百度分享代码,然后在上述文件中通过以下方式引用:1
2
3
4<footer class="article-footer">
<%- partial('post/baidushare') %>
<%- partial('post/tag') %>
</footer>
加入多说评论
摘自多说官网的《Hexo使用多说教程》。首先登陆多说进行相关配置。其次,在根目录下的全局配置文件_config.yml中添加参数duoshuo_shortname:1
2
3
4
5
6
7# Extensions 插件
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
#
theme: tarantula7 # 自定义主题,from landscape
duoshuo_shortname: 你站点的short_name # 用于加入多说评论的参数
baidushare: true
你的主题/layout/_partial/article.ejs
文件,将原先的Disqus评论,即<% if (!index && post.comments && config.disqus_shortname){ %>
部分代码替换为多说评论: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>
<% } %>
修改归档页面的时间格式
摘自石佳劼的博客《Hexo 官方主题 landscape-plus 优化》。
添加文章目录
转自The Bloom of Youth的《为Hexo博客添加目录》,两步走。第一步,修改你的主题/layout/_partial/article.ejs
如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<div class="article-entry" itemprop="articleBody">
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<% if (theme.excerpt_link){ %>
<p class="article-more-link">
<a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
</p>
<% } %>
<% } else { %>
<!-- Table of Contents -->
<% if (!index && post.toc){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(post.content) %>
</div>
<% } %>
<%- post.content %>
<% } %>
</div>
在article-entry块中,else
部分<%- post.content %>
前加上<!-- Table of Contents -->
部分代码,代码核心其实是toc()函数,该函数Hexo博客系统的核心是支持的。post.toc
参数需要在每篇文章源代码文件.md
开头加以配置,诸如categories、tags。第二部,需要定义相应的CSS样式。在你的主题/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
23
24
25/* 文章目录CSS样式 */
.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
更多
摘自奋进的大头。