hexo自定义主题

  有时你会觉得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
2
cd 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 #css源码
    | | ├── _partial #*.styl局部css
    | | ├── _util #*.styl基础css
    | | ├── fonts #字体
    | | ├── images #图片,banner.jpg是header的背景图
    | | | ├── banner.jpg
    | | └── style.styl #*.styl引入需要的css源码
    | ├── fancybox #fancybox效果源码
    | └── js #javascript源代码
    ├── _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 #right将侧边栏置于右侧
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 #用于加入多说评论的参数
##
#twitter: #右边栏要显示twitter展示的话,需要在此设置
# username:
# show_replies: false
# tweet_count: 5

#addthis: #SNS分享,身在天朝,当然用“百度分享”,暂时默认,后面会介绍
# enable: true
# pubid:
# facebook: true
# twitter: true
# google: true
# pinterest: true

google_analytics: #要使用google_analytics进行统计的话,这里需要配置ID,暂时默认
tongji: true
baidu_tongji: true

#comment_provider: facebook
# Facebook comment
#facebook:
# appid: 123456789012345
# comment_count: 5
# comment_width: 840
# comment_colorscheme: light

  Miscellaneous以下的参数其实都是一些自定义的键值对,或者说跟主题本身并无关系。此外,主题配置文件_config.yml中的参数都会在/themes/主题目录下layout文件夹中的.ejs文件中引用,方式是theme.keyconfig.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: light
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开头加以配置,诸如categoriestags。第二部,需要定义相应的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

更多

  摘自奋进的大头

文章目录
  1. 1. 如何获取主题
  2. 2. Hexo根目录介绍
  3. 3. 主题目录介绍
  4. 4. 主题配置文件_config.yml扫盲
  5. 5. 添加微博秀
  6. 6. 添加百度分享
  7. 7. 加入多说评论
  8. 8. 修改归档页面的时间格式
  9. 9. 添加文章目录
  10. 10. 更多