有时你会觉得hexo自带的主题不太顺眼,换了个主题,又觉得某个地方不太顺眼。有时看到别人hexo上的某个特性,就想到能不能也为自己的hexo添上。能够弄懂整个hexo的架构的前端攻城狮来说,这个肯定不难,但是,我只是想快速实现我的目的,鬼管他架构懂多少。这个时候,其实就是follow,看看有没有弄出来的亲们的笔记,此处就把本人这一过程搜集的或者自己积累的列在这里。
如何获取主题
hexo是开源的,hexo的主题也是开源的!只需要简单的命令git clone
即可获取主题,至于主题的仓库在哪,你可以看这里或者大可自己Github搜索。我就用以下命令获取了一个新的主题light
,注意其中的clone保存路径,此处是位于hexo的根目录。
此外,开源项目更新快是一个显著特点,那我们要更新已经获取的主题要应该怎么做呢?通过以下命令即可:
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: ## Themes: http: ##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
| .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
|
更多
摘自奋进的大头。