关于这个博客主题 Hexo-Theme-Buer使用

作者的个人网站：不二博客

Alt text

随着hexo的版本升级，同时我也想重构我的旧版博客主题，因此在这个月对博客进行了重构加改版，这个仓库存放我的新博客，并且我也会一直使用这个主题。目前基本改版完成，后续可能还会有些细节上的修补。

本博客访问地址：不二博客。

Hexo-Theme-Buer使用

访问我的博客：不二博客

安装

$ git clone https://git.coding.net/yeechong/Hexo-Theme-Buer.git

配置

修改hexo根目录下的 _config.yml ： theme: Hexo-Theme-Buer

更新

cd themes/buer
git pull

配置

关于配置文件，主题配置文件在主目录下的_config.yml：_config.yml

相关插件的安装：请参照Hexo插件安装

全部功能

# >>> Basic Setup | 基础设置 <<<# Header | 主菜单
## About Page: `hexo new page about`
## Tags Cloud Page: `hexo new page tags`
menu:开始的地方: http://buer.website# 不二博客主页: /博文目录: /archives不二拙作: /works留下点什么: /about不二导航: http://yeechong.coding.me/YeeWebGuide/Guide/index.html# 静心阅读: /tags# 光影之路: /instagram# 随笔: /tags/随笔# Link to your avatar | 填写头像地址
avatar: img/head.jpg# Small icon of Your site | 站点小图标地址
favicon: img/favicon.png# Social info. Bar | 社交信息展示
## Keep "mailto:" in Email | 设置 Email 时保留 "mailto:"
## Encrypt email 加密邮件地址 http://ctrlq.org/encode/
## RSS requires a plugin to take effect | 使用 RSS 需先安装对应插件
## https://github.com/hexojs/hexo-generator-feed
subnav:mail: "mailto:yeechongyeung@gmail.com"github: "https://github.com/yeechongyeung"# zhihu: "#"weibo: "http://weibo.com/elchowyo"# google: "#"twitter: "https://twitter.com/yeungyeechong"linkedin: "http://www.linkedin.com/in/yeechongyeung"# facebook: "#"rss: /atom.xml# pinterest: "#"# QQ: "#"# wechat: "#"# douban: "#"# pinboard: "#"# stackoverflow: "#"# Instagram: "#"# segmentfault: "#"# >>> Conments 评论系统 <<<
# Chose ONE as your comment system and keep others disable.
# 选一个作为网站评论系统，其他保持禁用。disqus: #on: trueshortname: # https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-# It is unnecessary to enable disqus here if # you have set "disqus_shortname" in your site's "_config.yml" duoshuo: on: truedomain: yeechong# 是否开启多说评论，http://duoshuo.com/create-site/# 使用上面网址登陆你的多说，然后创建站点，在 domain 中填入你设定的域名前半部分# http://<要填的部分>.duoshuo.com (domain只填上<>里的内容，不要填整个网址)youyan:#on: trueid: # 是否开启友言评论，http://www.uyan.cc/index.php# id 中填写你的友言用户数字ID，注册后进入后台管理即可查看# 友言服务在 Web 环境下运行，普通本地环境无法查看，请部署后在线上测试。# >>> Style Customisation 样式自定义 <<<# Background | 网页侧边栏背景
## "background_sum": show images form /source/background/的图片数目
## "on: true": 自动随机显示这5张图片
## "on: false": 自定义显示图片设置background_image: 5
background:on: true#on: falsebackground_sum: 27background_image: 109highlight_style:on: trueinline_code: 5code_block: 5# Set inline_code to style highlight text# Chose a highlight theme for code block# 通过 inline_code 切换内置文本高亮样式 Value: 0 - 9 可选# 通过 code_block 切换内置代码高亮配色主题  Value: 0 - 4 blockquote_style:#on: trueblockquote: 1  # Value: 0 - 7 可选# 自定义文章「引用部分」的样式# 左边栏宽度 px
left_col_width: 300# 目录中标题不换行
# Keep TOC title on the same line |
toc_nowrap: false# 自定义"阅读全文"链接按钮的显示文字
# Customize the text on excerpt link
excerpt_link: Yeechong
#修改more>>的文字# 是否显示边栏中的搜索框（仅样式，未添加搜索功能）
# Search Box in left column
search_box: true# 是否开启主页及加载头像时的动画效果
# Animation in Homepage and Loading avatar
animate: true# >>> Small features | 小功能设置 <<<# 是否开启边栏多标签切换
# Birdhouse button in left column
tagcloud: true# Blogroll, Link exchange | 友情链接
# friends: false
friends:yeechong: http://buer.website/不二: http://buer.website/#是否开启“关于我”。
aboutme: Yeechong，化名不二！原由名中带“二”，而后觉自己既不傻又不楞，故自述为不二；家中老母常以乳名“二”唤之，其实为“爱”，故而吾常以“二”自贬。
#aboutme: false# 是否在新窗口打开链接
# Open ALL link in a new tab
# open_in_new: false
open_in_new: true# Customize feed link 自定义订阅地址
rss: /atom.xml# >>> Vendors | 第三方工具 & 服务 <<<# images viewer | 图片浏览器
## http://www.fancyapps.com/fancybox/
fancybox: true# Display Math(LaTeX, MathML...) | 数学公式支持
## https://www.mathjax.org/
mathjax: false# Socail Share | 是否开启分享
# share: true
baidushare: true# 开启后页面变的模糊
# showshare: true# 百度、谷歌站长验证。填写 HTML 标签 content
# Site Verification for Google and Baidu. HTML label content.
google_site: # pFW527fHrjfI0si2w4NQ0w3cTw12AvvuohAu1PUfqKA
baidu_site: #c167b9feb4f0b208b712c79629c188e4# Fill in Google Analytics tracking ID, #e.g. UA-XXXXX-X, or Baidu Analytics hash key
google_analytics:
baidu_analytics:# 不蒜子网站计数设置
# http://ibruce.info/2015/04/04/busuanzi/
visit_counter:on: truesite_visit: 海贼到访数page_visit: 本页阅读量# A标签提示
TipTitle: true# Loading
# why me?
Loading: true

文章markdown属性

title: 前端知识体系
date: 2016-01-16 13:58:41
description: #描述
categories: #分类
-HTML 书籍
-HTML 书籍
tags:
-HTML 标签
-HTML 标签
toc: true 文章目录
author:
comments:
original:
permalink:
---** 知识体系：**<Excerpt in index | 首页摘要>+ <!-- more -->
<The rest of contents | 余下全文>

不二使用的格式：

title: Markdown-文章格式
date: #默认系统时间
description: #描述
categories: #分类
- HTML 书籍
- HTML 书籍
tags:
- HTML 标签
- HTML 标签
toc: true 文章目录
author: 不二
comments: true #是否开启评论true
original:
permalink: demo #url中的名字    文件名
---** 知识体系：**<Excerpt in index | 一盏灯， 一片昏黄； 一简书， 一杯淡茶。 守着那一份淡定， 品读属于自己的寂寞。 保持淡定， 才能欣赏到最美丽的风景！ 保持淡定， 人生从此不再寂寞。> + <!-- more -->  #同wordpress一样，<!--more-->之上的内容为摘要。

404 Page

hexo new page 404
And then set permalink: /404 in /source/404/index.md front matter.
在 Hexo 中创建匹配主题的404页面

主题结构

.
├── languages            #多语言
|   ├── default.yml      #默认语言
|   └── zh-CN.yml        #中文语言
├── layout               #布局，根目录下的*.ejs文件是对主页，分页，存档等的控制
|   ├── _partial         #局部的布局，此目录下的*.ejs是对头尾等局部的控制
|   └── _widget          #小挂件的布局，页面下方小挂件的控制
├── source               #源码
|   ├── css              #css源码
|   |   ├── _base        #*.styl基础css
|   |   ├── _partial     #*.styl局部css
|   |   ├── fonts        #字体
|   |   ├── images       #图片
|   |   └── style.styl   #*.styl引入需要的css源码
|   ├── fancybox         #fancybox效果源码
|   └── js               #javascript源代码
├── _config.yml          #主题配置文件
└── README.md            #用GitHub的都知道

主题首页显示概要设置

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。也就是说，在首页显示文章的摘录并显示阅读全文按钮，可以通过以下方法：
1. 在文章中使用手动进行截断，Hexo 提供的方式推荐
2. 在文章的 front-matter 中添加 description，并提供文章摘录
3. 自动形成摘要，在 主题配置文件 中添加：

博客名字欢迎语

位置： \layout_partial\left-col.ejs(13):

<h1 class="header-author"><a href="<%- config.root %>" title="Hi Mate"><%=theme.author%></a></h1>

底部导航修改页面

文件位置：layout_partial\footer.ejs

分享按钮

以下代码是百度分享的页面24页面分享的代码，可以自行选择以下标签。配置vim themes/light/layout/_partial/article.ejs
删除
<%-partial('post/share')%>
替换为刚刚获取的分享代码<div class="bdsharebuttonbox"><a href="#" class="fx fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="fx fa-weixin bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="fx fa-qq bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="fx fa-facebook-official bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="fx fa-twitter bds_twi" data-cmd="twi" title="分享到Twitter"></a><a href="#" class="fx fa-linkedin bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="fx fa-files-o bds_copy" data-cmd="copy" title="分享到复制网址"></a><a href="#" class="fx fa-plus-square bds_more" data-cmd="more"></a><a href="#" class="fx fa-tencent-weibo bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="fx fa-renren bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="fx fa-paw bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a><a href="#" class="fx fa-envelope-o bds_mail" data-cmd="mail" title="分享到邮件分享"></a></div><a href="#" class="fx fa-print bds_print" data-cmd="print" title="分享到打印"></a><a href="#" class="fx fa-share-alt bds_mshare" data-cmd="mshare" title="分享到一键分享"></a><a href="#" class="fx bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="fx fa- bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="fx fa- bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"24"},"share":{}};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>

修改样式

source\css\_partial\article.styl/* bd share button box */
.bdshare-button-style2-24{width: 330px;margin: auto;.fx {color: #999;padding: 0;margin: 6px;height: 54px;display: inline-block;font: normal normal normal 36px/1 FontAwesome;background: none;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.fx:hover{color: #FFF;opacity: 1;}
}themes\spfk\source\css\_partial\mobile.styl
/* bd share button box */
.bdshare-button-style2-24{width: 289px;.fx {font: normal normal normal 30px/1 FontAwesome;}
}

百度统计

去百度统计获取统计代码vim layout/_partial/baidu_analytics.ejs<% if (theme.baidu_analytics){ %><script>var _hmt = _hmt || [];
(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?746094ae9897b0b9190120d1aae8747e";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);
})();</script><% } %>vim Hexo_Theme_Buer/_config.ymlbaidu_analytics: true
# hm.src = "https://hm.baidu.com/hm.js?746094ae9897b0b9190120d1aae8747e";
baidu_analytics_id: 746094ae9897b0b9190120d1aae8747evim Hexo_Theme_Buer/layout/_partial/head.ejs
在/head前添加<%- partial('baidu_analytics') %>
</head>

不蒜子

/layout/_partial/footer.ejs<footer id="footer"><div class="outer"><div id="footer-info"><div class="footer-left">&copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %></div><div class="footer-right"><a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/luuman/hexo-theme-spfk" target="_blank">spfk</a> by luuman</div></div><div class="visit"><span id="busuanzi_container_site_pv" style='display:none'><span id="site-visit" >本站到访数: <span id="busuanzi_value_site_uv"></span></span></span><span id="busuanzi_container_page_pv" style='display:none'><span id="page-visit">, 本页阅读量: <span id="busuanzi_value_page_pv"></span></span></span></div></div><script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</footer>

页面上下导航

 scrolling-button.ejs<div class="scroll" id="scroll"><a href="#"><i class="fa fa-arrow-up"></i></a><a href="#comments"><i class="fa fa-comments-o"></i></a><a href="#footer"><i class="fa fa-arrow-down"></i></a>
</div>
<script>$(document).ready(function() {if ($("#comments").length < 1) {$("#scroll > a:nth-child(2)").hide();};})</script>

修改样式

Hexo-Theme-Buer\source\css\_partial\main.styl
#scroll{right: 0;
}.scroll {z-index: 999;position: fixed;bottom: 40px;   //修改离底部的距离，可以在角落添加建议等底盘图标。text-align: center;line-height: 42px;a {display: block;width: 29px;height: 42px;font-size: 28px;&:last-child {border-bottom: none;};.fa {color: rgba(255, 255, 255, .8);}&:hover {background: rgba(147, 181, 224, .3) !important; .fa {color: white;}}}
}

版权声明

\layout\_partial\post\nav.ejs<% if (post.original != false && !is_page()){ %><div class="copyright"><p><span>本文标题:</span><a href="<%- url_for(post.path) %>"><%= post.title %></a></p><p><span>文章作者:</span><a href="/" title="请访问 <%=theme.author%> 博客"><%=theme.author%></a></p><!-- <p><span>发布时间:</span><%= post.date.format("YYYY年MM月DD日 - HH时mm分") %></p> --><!-- <p><span>最后更新:</span><%= post.updated.format("YYYY年MM月DD日 - HH时mm分") %></p> --><p><span>原始链接:</span><a class="post-url" href="<%- url_for(post.path) %>" title="<%= post.title %>"><%= post.permalink %></a><span class="copy-path" data-clipboard-text="原文: <%= post.permalink %>　　作者: <%=theme.author%>" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span><script src="/js/clipboard.min.js"></script><script>var clipboard = new Clipboard('.copy-path');</script></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" title="中国大陆 (CC BY-NC-SA 3.0 CN)">"署名-非商用-相同方式共享 3.0"</a> 转载请保留原文链接及作者。</p></div>
<% } %><% if (post.prev || post.next){ %>
<nav id="article-nav"><% if (post.prev){ %><a href="<%- url_for(post.prev.path) %>" id="article-nav-newer" class="article-nav-link-wrap"><strong class="article-nav-caption"><</strong><div class="article-nav-title"><% if (post.prev.title){ %><%= post.prev.title %><% } else { %>(no title)<% } %></div></a><% } %><% if (post.next){ %><a href="<%- url_for(post.next.path) %>" id="article-nav-older" class="article-nav-link-wrap"><div class="article-nav-title"><%= post.next.title %></div><strong class="article-nav-caption">></strong></a><% } %>
</nav>
<% } %>

修改版权框样式

Hexo-Theme-Buer\source\css\_partial\article.styl/* copyright */
.copyright {width: 85%;max-width: 45em;margin: 0 auto;padding: .5em 1.8em;border: 1px solid lightgray;font-size: .93em;line-height: 1.6em;word-break: break-word;background: rgba(255, 255, 255, .4);span {margin-right: 1em;color: #B5B5B5;font-weight: bold;}a {color: gray;&:hover {font-weight: bold;color: #a3d2a3;text-decoration: underline;}}&:hover p .copy-path::after {content: "复制";}.post-url:hover {font-weight: normal;}.copy-path {margin-left: 1em;&:hover {color: gray;cursor: pointer;}}
}

社交账号图标修改

\layout\_partial\left-col.ejs<nav class="header-nav"><div class="social"><% for (var i in theme.subnav){ %><a class="fl <%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><%= i %></a><%}%></div>
</nav>

站点Swiftype搜索框

layout\_partial\left-col.ejs<form>                <input type="text" class="st-default-search-input search" id="search" placeholder=" Search..." autocomplete="off" autocorrect="off" autocapitalize="off">
</form>D:\Hexo\Hexo\themes\spfk\layout\_partial\after-footer.ejs<script type="text/javascript">window.onload = function(){document.getElementById("search").onclick = function(){console.log("search")search();}}function search(){(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);})(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');_st('install','A1Pz-LKMXbrzcFg2FWi6','2.0.0');}</script>

修改样式

.search {width: 68%;height: 18px;margin-top: 1px;padding: 0;font-family: inherit;border: 2px solid transparent;border-bottom: 2px solid lightgray;border-radius: 2px;opacity: .7;background: none;&:hover {border: 0px solid lightgray;opacity: 1;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);};
}display: inline-block;width: 190px;height: 16px;padding: 7px 11px 7px 28px;border: 1px solid #bbb;border: 1px solid rgba(0,0,0,0.25);font-weight: 400;color: #444;font-size: 14px;line-height: 16px;box-sizing: content-box;background: #fff 8px 8px no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAACXB…Hx4Taq1nrnKaW8K6XUUsrHWuvNevdRRLzFGwzvDbXAB9cDAHvhedDruuxSAAAAAElFTkSuQmCC);background-clip: padding-box;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;

RSS插件

安装RSS插件$ npm install hexo-generator-feed --save开启RSS功能编辑hexo/themes_config.yml，添加如下代码：rss: /atom.xml #rss地址  默认即可

sitemap网站地图插件

1、安装插件：$npm install hexo-generator-sitemap --save
$npm install hexo-generator-baidu-sitemap --save2、在博客目录的hexo/_config.yml中添加如下代码：# 自动生成sitemap编辑sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml3、hexo编译的时候会自动在根目录生成站点地图UUhike@UUhike-pc MINGW64 /d/Hexo/Hexo (master)$npm install hexo-generator-sitemap --savenpm WARN install Couldn't install optional dependency: Unsupportednpm WARN install Couldn't install optional dependency: Unsupportedhexo-site@0.0.0 D:\Hexo\Hexo└── hexo-generator-sitemap@1.0.1UUhike@UUhike-pc MINGW64 /d/Hexo/Hexo (master)$npm install hexo-generator-baidu-sitemap --savenpm WARN install Couldn't install optional dependency: Unsupportednpm WARN install Couldn't install optional dependency: Unsupportedhexo-site@0.0.0 D:\Hexo\Hexo└── hexo-generator-baidu-sitemap@0.1.2UUhike@UUhike-pc MINGW64 /d/Hexo/Hexo (master)$hexo gINFO  Files loaded in 2.42 sINFO  Generated: baidusitemap.xmlINFO  Generated: sitemap.xmlINFO  2 files generated in 477 ms

关于Hexo迁移

非常感谢Waterstrong# URL #这项暂不配置，绑定域名后，欲创建sitemap.xml需要配置该项
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://luuman.github.io/Blog/
root: /Blog/
permalink: :year/:month/:day/:title/
permalink_defaults:上传是需要出入密码# Deployment 站点部署到github要配置，上一节中已经讲过
## Docs: http://zespia.tw/hexo/docs/deploy.html
deploy:type: git#repository: git@github.com:luuman/Blog.gitrepository: https://github.com/luuman/Blog.gitbranch: gh-pages

多说插件

├── spfk├── _config.yml #主题配置文件#是否开启多说评论，填写你在多说申请的项目名称 duoshuo: duoshuo-key（http://duoshuo-key.duoshuo.com/）#若使用disqus，请在博客config文件中填写disqus_shortname，并关闭多说评论duoshuo: true复制到 themes\landscape\layout\_partial\article.ejs把<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<% } %>改为<% if (!index && post.comments && config.disqus_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.disqus_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>
<% } %>

修改样式：

设计达人

添加方法：
添加方法：打开「后台」 > 「多说评论」 > 「设置」 > 「基本设置」 > 然后把样式粘贴到「自定义CSS」文本框 > 「保存」

为Hexo博客添加目录

Hexo博客系统的核心支持生成目录（Table of Contents），但其默认的主题Landscape并不支持目录的显示。我们只需对Landscape的主题文件稍作修改并添加一点目录的CSS就可以在文章前面显示友好的目录了。
修改Landscape主题的ejs文件
我们首先要编辑文章显示页面的模板，也就是themes/landscape/layout/_partial/article.ejs文件。为了将目录生成在正文之前，我们首先在这个文件中找到<%- post.content %>，并在这一行之前加入如下代码：

引入文件_partial\article.ejs<% if (!index && post.toc != false && !is_page()){ %><%- partial('_partial/toc') %><% } %><% if (!index && post.toc){ %><%- partial('post/toc') %><% } %><div id="toc" class="toc-article"><strong class="toc-title">文章目录</strong><%- toc(post.content) %>
</div>
<style>.left-col .switch-btn {display:none;}.left-col .switch-area {display:none;}</style><input type="button" id="tocButton" value="隐藏目录"  title="点击按钮隐藏或者显示文章目录"><%- js('http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min') %>
<script>var toc_button = document.getElementById("tocButton");var toc_div = document.getElementById("toc");toc_button.onclick=function() {if (toc_div.style.display == "none") {toc_div.style.display = "block";toc_button.value = "隐藏目录";document.getElementById("switch-btn").style.display = "none";document.getElementById("switch-area").style.display = "none";}else {toc_div.style.display = "none";toc_button.value = "显示目录";document.getElementById("switch-btn").style.display = "block";document.getElementById("switch-area").style.display = "block";}}if ($(".toc").length < 1) {$("#toc").css("display","none");$("#tocButton").css("display","none");$(".switch-btn").css("display","block");$(".switch-area").css("display","block");}</script><% if (theme.toc_nowrap) { %><style>.toc {white-space:nowrap;overflow-x:hidden;}</style><script>$(document).ready(function() {$(".toc li a").mouseover(function() {var title = $(this).attr('href');$(this).attr("title", title);});})</script>
<% } %>

if语句中有两个条件，!index是为了不在首页的文章摘要中生成目录，post.toc确保了只在显式地标记了toc: true的文章中生成目录。若这两个条件满足，则创建一个目录的。
修改完这个文件之后，找一篇包含了多个子标题的文章，并在文章开头的front-matter中添加一句toc: true，在浏览器中访问这篇文章，应该可以看到文章的开头处已经有了带链接的目录。但是这样的目录实在太难看，我们还需要添加相应的CSS来将其指定为我们想要的样式。

目录样式

/*toc*/
#tocButton {position: fixed;border: none;left: 220px;top: 382px;background: none;font-size: .9em;font-weight: bold;color: lightgray;cursor: pointerfont-family: inherit;outline: none; /*Remove button border when clicked.*/-webkit-appearance: none; /*Remove iOS button style*/&:hover {color: #88acdb;}
}
.toc-article {position: fixed;width: 230px;top: 378px;bottom: 1em;left: 0;margin-left: 0em;padding: 6px 10px 10px 50px;border-radius: 2.8%;overflow: auto;
}
#toc {float: right;font-size: .9em;line-height: 1.65em;z-index: 12;a {color: gray;&:visited {color: rgba(244, 131, 133, 1);} &:hover {color: #88acdb;text-decoration: none;}}li:hover {background: none;li:hover {background: rgba(158, 188, 226, .21);}}.toc-title {font-weight: bold;color: gray;}.toc {padding: .7em;padding-right: 0;li {list-style-type: none;}}ol {margin-left: 0;}.toc-child {padding-left: 1.25em;margin: 4px 0; }.toc-link:hover {background: rgba(158, 188, 226, .21);}
}.copyright {width: 85%;max-width: 45em;margin: 0 auto;padding: .5em 1.8em;border: 1px solid lightgray;font-size: .93em;line-height: 1.6em;word-break: break-word;background: rgba(255, 255, 255, .4);span {margin-right: 1em;color: #B5B5B5;font-weight: bold;}a {color: gray;&:hover {font-weight: bold;color: #a3d2a3;text-decoration: underline;}}&:hover p .copy-path::after {content: "复制";}.post-url:hover {font-weight: normal;}.copy-path {margin-left: 1em;&:hover {color: gray;cursor: pointer;}}
}

第一段的toc-article指定了目录整个的背景色、边框色、倒角半径、各种间距以及最大的宽度。注意这里最好指定目录的最大宽度，我将其设为了28%，也就是文章正文那个框的宽度的28%，也可以设为一个固定的长度，比如在笔记本电脑上16em就是个不错的宽度，但为了能适配各种不同尺寸的屏幕，最好还是设置为百分比。如果不指定最大宽度，遇到比较长的标题时，生成的目录会非常难看。这个最大宽度的设置是我在网上其他添加目录的方法中没有见到的。
第二段的toc-title指的就是“文章目录”那四个字，这四个字要比其他字大一些，将其字号设为其他字的120%。
第三段的#toc.toc指定了目录列表的一些细节，将font-size设为0.9em会让目录的字比文章的字稍小一些。最后的.toc-child指定了二级目录的缩进量。
再次生成页面，应该已经可以显示比较美观的目录了。

下面我就需要编辑每一篇需要添加目录的文章，在文章开头的front-matter中加入toc: true。

插入自定义页面

仿照Hexo官网，了解到单页面的添加方式。

\layout\plugins.swig<div id="content-wrap"><div class="wrapper"><div class="inner"><header id="plugin-list-header"><h1 id="plugin-list-title">{{ page.title }}</h1><input type="search" id="plugin-search-input" placeholder="Search"><div id="plugin-list-count">{{ site.data[page.data].length }}items</div></header><ul id="plugin-list">{% for plugin in _.sortBy(site.data[page.data], 'name') %}{{ partial('_partial/' + page.partial, {plugin: plugin}) }}{% endfor %}</ul></div></div>
</div>
<script>window.SEARCH_INDEX ={{ lunr_index(site.data[page.data]) }}</script>

layout\_partial\plugin.swig<li class="plugin on"><a href="{{ plugin.link }}" class="plugin-name" target="_blank">{{ plugin.name }}</a><p class="plugin-desc">{{ plugin.description }}</p><div class="plugin-tag-list">{% for tag in plugin.tags %}<a href="#{{ tag }}" class="plugin-tag">{{ tag }}</a>{% endfor %}</div>
</li>

\layout\_partial\work.swig<li class="plugin on"><div class="plugin-screenshot"><img src="{{ plugin.imgs }}" class="plugin-screenshot-img">{% if plugin.preview %}<a href="{{ plugin.preview }}" class="plugin-preview-link" target="_blank"><i class="fa fa-eye"></i></a>{% endif %}</div><a href="{{ plugin.link }}" class="plugin-name" target="_blank">{{ plugin.name }}</a><p class="plugin-desc">{{ plugin.description }}</p><div class="plugin-tag-list">{% for tag in plugin.tags %}<a href="#{{ tag }}" class="plugin-tag">{{ tag }}</a>{% endfor %}</div>
</li>


引入样式文件
D:\Hexo\Hexos\themes\spfk\source\css\style.styl@import "_partial/plugins"

修改样式

\layout\_partial\plugin.swig#plugin-list-headerclearfix()margin: 40px 0#plugin-list-titlefont-family: font-titlefont-size: 36pxfont-weight: 300line-height: 1float: left#plugin-list-countcolor: color-graypadding-top: 1emtext-align: right@media mq-normalfloat: rightline-height: 40pxpadding-top: 0padding-right: 15px#plugin-search-inputfont-size: 16pxfont-family: inherit-webkit-appearance: noneborder: 1px solid color-borderpadding: 10px 10pxwidth: 100%margin-top: 25px@media mq-normalfloat: rightwidth: 50%margin-top: 0#plugin-listmargin: 40px -20pxdisplay: flexflex-flow: column@media mq-tabletflex-flow: row wrap.plugindisplay: nonepadding: 20px@media mq-tabletflex: 0 0 50%@media mq-normalflex: 0 0 (100 / 3)%&.ondisplay: block.plugin-namefont-family: font-titlefont-weight: boldcolor: color-linkfont-size: 20pxtext-decoration: noneline-height: 1&:hovercolor: color-link-hover.plugin-descline-height: line-heightmargin: 1em 0.plugin-tag-listclearfix()line-height: 1.3.plugin-tagcolor: color-grayfont-size: 0.9emtext-decoration: nonefloat: leftmargin-right: 10px&:hovercolor: color-link-hover&:beforecontent: "#".plugin-screenshotmargin-bottom: 15pxposition: relativepadding-top: (10 / 16 * 100)% // 16:10 ratioheight: 0overflow: hidden.plugin-screenshot-imgposition: absolutetop: 0left: 0width: 100%height: auto.plugin-preview-linkposition: absolutetop: 0left: 0width: 100%height: 100%background: rgba(0, 0, 0, 0.7)color: #ffftext-align: centeropacity: 0transition: 0.15s&:hoveropacity: 1.faopacity: 1transform: scale(1).faposition: absolutetop: 0left: 0bottom: 0right: 0margin: autofont-size: 50pxwidth: @font-sizeheight: @font-sizeopacity: 0transform: scale(6)transition: 0.2stransition-delay: 0.15s

自定义挂件

除了默认已提供的挂件外，你还可以自定义自己的小挂件，在hexo\themes\modernist\layout_widget\下，新建自己的ejs文件，如myWidget.ejs，然后在配置文件hexo\themes\modernist_config.yml中配置。

widgets:- myWidget
用上述方法可以添加新浪微博小挂件。生成自己的微博组件。
添加hexo\themes\modernist\layout\_widget\weibo.ejs文件。
配置hexo\themes\modernist\_config.yml。

Hexo语法高亮

查阅格式高亮代码，了解到本主题，通过特定的规律进行语法高亮！好像无法识别不同代码的语法高亮！
测试：
通过测试代码，查看后台代码逻辑，了解到可以识别Apache、C++、bash等，还有部分不可识别。那么这个主题用的是什么的语法高亮？
代码code，table-gutter-pre是代码前面的序号。class=”highlight apache”

source\css\_partial\highlight.styl// https://github.com/luuman/hexo-theme-spfkcode-bgc = #002B36
code-tag = #F92672
code-attr = #A6E22E
code-word = #FFFFFF
code-value = #E6DB74
code-number = #9E90FF
code-keyword = #66D9EF
code-comment = #75715E
code-argument = #FD971F$code-blockbackground: code-bgcmargin: 10px 0padding: 10px 10pxoverflow: autocolor: #4C4C4Cline-height: font-size * line-height

参考：
highlight.js：
Demo https://highlightjs.org/static/demo/
Solarized Dark
Atelier Sulphurpool Dark
文档：http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html
下载：https://highlightjs.org/download/

首页添加loading效果

\layout\index.ejs<link rel="stylesheet" href="css/loading-style.css">
<div id="loader-wrapper"><div id="loader"></div>
</div><%- partial('_partial/archive', {pagination: 2, index: true}) %>
<!-- loading -->
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script type="text/javascript">$(window).load(function() {                              // makes sure the whole site is loaded$('#loader').fadeOut();                              // will first fade out the loading animation$('#loader-wrapper').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.$('body').delay(350).css({'overflow-y':'visible'});})</script>

LoadingBar页面顶部加载进度条

layout_partial\head.ejs

<!-- 加载特效 -->
<% if(theme.animate) { %><script src="/js/pace.js"></script>
<link href="/css/pace/pace-theme-flash.css" rel="stylesheet" />
<% } %>

Hexo插件

https://swiftype.com/
支持RSS：npm install hexo-generator-feed –save
生成站点地图：npm install hexo-generator-sitemap –save
生成百度站点地图：npm install hexo-generator-baidu-sitemap –save
HTML 压缩：npm install hexo-html-minifier –save
JavaScript 压缩：npm install hexo-uglify –save
CSS 压缩插件：npm install hexo-clean-css –save
SEO优化：npm install hexo-generator-seo-friendly-sitemap –save

文／YouMeek（简书作者）
原文链接：http://www.jianshu.com/p/2640561e96f8
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

Buer博客中的图片视频类资源使用七牛云存储

七牛云存储

七牛云

图片水印接口

?watermark/2/text/5Zu-54mH5p2l5rqQIGh0dHBzOi8vYnVlci53ZWJzaXRl/font/5a6L5L2T/fontsize/500/fill/IzAwMDAwMA==/dissolve/100/gravity/Center

Hexo-Theme-Buer Debug

Update Log

2016.6.20

[+] 在文章页中添加上一篇和下一篇文章链接。
[^] 修改 font-family 顺序，避免微软雅黑将单引号解析为全角。
[^] 修复标签云算法中被除数为零的 bug。

2016.5.11 v2.0.1

[^] 优化代码，将页面中的大段评论相关代码抽离出来，放入comments.html
[+] 添加百度统计和Google分析代码，在_config.yml中配置相关参数即可
[+] 更新文档，添加博客主题使用方法，便于上手
[+] 添加了favicon.ico
[^] 修复 bug，目录太长时，滚动到最底部时隐藏到footer下面。修复后长目录在滚动到底部时使用position:absolute
[^] 修改目录区的滚动条样式（仅针对webkit内核浏览器）
[^] 修改 demo 页中 disqus 评论区 a 标签的颜色 bug，修改 blockqoute 中 p 标签的 margin
[+] 添加不蒜子计数功能，在footer上显示访问量
[+] 添加回到顶部功能

2016.4.27 v2.0.0

[^] 基于hexo重构了所有代码
[+] 主页添加了摘要，在正文中使用4个换行符来分割，可在_config.yml中修改
[+] 主页添加了近期文章、分类列表和标签云
[+] 主页导航区做了视觉优化，阴影效果
[+] 增加了归档、标签和分类页面
[+] 增加了收藏页面
[+] 评论插件可以选择 disqus 或多说，直接在_config.yml中修改
[+] 适配移动端
[+] 页面滚动时，文章目录固定在右侧
[+] 页面内容较少时，固定 footer 在页面底部
[^] 使用 GitHub 风格的代码高亮写法，即“`的写法，去除highlight.js代码高亮插件的使用
[^] 使用 Masonry 重写了 Demo 页中的瀑布流布局，响应式交互体验更好

Hexo-Theme-Buer主题修改介绍相关推荐

hexo的yelee主题修改左上角的博客名字颜色、修改代码模块中的引号内部的字体颜色
一.修改左上角的博客名字颜色路径: themes/yelee/source/css/_partial/main.styl 找到下列代码: #header{width:100%;a {color: # ...
hexo的yelee主题修改文章正文颜色、正文字體大小
一.修改正文字體顏色路徑: themes/yelee/source/css/_partial/article.styl 中修改.article-inner这个模块,加入color这一行 .artic ...
Hexo主题修改Next.Mist
修改Hexo主题及问题记录昨晚试着将段时间搭建的hexo改一下主题,觉得NexT.Mist看起来挺简洁,挺喜欢这种风格的: 以下主要是一个索引,记录我搭建以及修改过程所参考的文章搭建博客当时搭建 ...
butterfly主题修改
butterflt主题前置开始我的主题是matery的,经过不断修改又来到了butterfly这个主题.这里省略 node 和 hexo 的安装,直接在初始化博客开始.相关操作请查看之前的博客搭建 ...
Hexo博客主题安装和优化（一）
当你看到这篇文章的时候,想必你已经搭建好了属于你的Hexo博客并且已经部署到了Github上面,如果还没有的话呢,请移步去Hexo+github搭建博客! 因为默认的Hexo主题实在太难看了,所以我们 ...
基于Hexo的matery主题搭建博客并深度优化
本文转自悟尘纪,获取更新内容可查看原文: https://www.lixl.cn/2019/092856736.html 对于有一定技术背景的同学,自己动手搭建博客网站是一个很不错的选择.选择喜欢的 ...
hexo下next主题的优化
1.站点信息的配置. 修改一些基本的配置,比如站点名.站点描述等等. # Site title: halisi7 subtitle: '一个专注技术的组织' description: '涉猎的主要编程 ...
【Hexo】NexT 主题的配置使用记录
文章目录简介版本安装配置记录风格/主题网页图标菜单栏侧边栏本地搜索代码块动画效果阅读进度书签 Mermaid lazyload fancybox pangu 捐赠版权声明 ...
wordpress主题修改_如何正确更改WordPress主题（最终指南）
wordpress主题修改 Are you planning to change the WordPress theme of your website? WordPress makes it sup ...

Hexo-Theme-Buer主题修改介绍

关于这个博客主题 Hexo-Theme-Buer使用

Hexo-Theme-Buer使用

安装

配置

更新

配置

全部功能

文章markdown属性

不二使用的格式：

404 Page

主题结构

主题首页显示概要设置

博客名字欢迎语

底部导航修改页面

分享按钮

修改样式

百度统计

不蒜子

页面上下导航

修改样式

版权声明

修改版权框样式

社交账号图标修改

站点Swiftype搜索框

修改样式

RSS插件

sitemap网站地图 插件

关于Hexo迁移

多说插件

为Hexo博客添加目录

目录样式

插入自定义页面

修改样式

自定义挂件

Hexo语法高亮

首页添加loading效果

LoadingBar页面顶部加载进度条

Hexo插件

Buer博客中的图片视频类资源使用七牛云存储

七牛云存储

图片水印接口

Hexo-Theme-Buer Debug

Update Log

2016.6.20

2016.5.11 v2.0.1

2016.4.27 v2.0.0

Hexo-Theme-Buer主题修改介绍相关推荐

最新文章

热门文章

sitemap网站地图插件