Loading [MathJax]/extensions/MathMenu.js

hexo自定义主题

技术留档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.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: 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开头加以配置，诸如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

更多

　　摘自奋进的大头。

本文标题:hexo自定义主题

文章作者:Gary

发布时间:2016-01-26, 15:23:04

最后更新:2020-03-28, 12:37:22

原始链接:http://durant35.github.io/2016/01/26/hexo_自定义主题/

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