作者的个人网站: 不二博客
随着hexo的版本升级,同时我也想重构我的旧版博客主题,因此在这个月对博客进行了重构加改版,这个仓库存放我的新博客,并且我也会一直使用这个主题。目前基本改版完成,后续可能还会有些细节上的修补。
本博客访问地址:不二博客。
访问我的博客:不二博客
修改hexo根目录下的 _config.yml : theme: Hexo-Theme-Buer
关于配置文件,主题配置文件在主目录下的_config.yml:_config.yml
相关插件的安装:请参照Hexo插件安装
不二使用的格式:
在首页显示一篇文章的部分内容,并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说,在首页显示文章的摘录并显示 阅读全文 按钮,可以通过以下方法:
1. 在文章中使用
手动进行截断,Hexo 提供的方式 推荐
2. 在文章的 front-matter 中添加 description,并提供文章摘录
3. 自动形成摘要,在 中添加:
位置: layout_partialleft-col.ejs(13):
文件位置:layout_partialfooter.ejs
修改样式:
设计达人
添加方法:
添加方法:打开「后台」 > 「多说评论」 > 「设置」 > 「基本设置」 > 然后把样式粘贴到「自定义CSS」文本框 > 「保存」
Hexo博客系统的核心支持生成目录(Table of Contents),但其默认的主题Landscape并不支持目录的显示。我们只需对Landscape的主题文件稍作修改并添加一点目录的CSS就可以在文章前面显示友好的目录了。
修改Landscape主题的ejs文件
我们首先要编辑文章显示页面的模板,也就是themes/landscape/layout/_partial/article.ejs文件。为了将目录生成在正文之前,我们首先在这个文件中找到<%- post.content %>,并在这一行之前加入如下代码:
if语句中有两个条件,!index是为了不在首页的文章摘要中生成目录,post.toc确保了只在显式地标记了toc: true的文章中生成目录。若这两个条件满足,则创建一个目录的。
修改完这个文件之后,找一篇包含了多个子标题的文章,并在文章开头的front-matter中添加一句toc: true,在浏览器中访问这篇文章,应该可以看到文章的开头处已经有了带链接的目录。但是这样的目录实在太难看,我们还需要添加相应的CSS来将其指定为我们想要的样式。
- 第一段的toc-article指定了目录整个的背景色、边框色、倒角半径、各种间距以及最大的宽度。注意这里最好指定目录的最大宽度,我将其设为了28%,也就是文章正文那个框的宽度的28%,也可以设为一个固定的长度,比如在笔记本电脑上16em就是个不错的宽度,但为了能适配各种不同尺寸的屏幕,最好还是设置为百分比。如果不指定最大宽度,遇到比较长的标题时,生成的目录会非常难看。这个最大宽度的设置是我在网上其他添加目录的方法中没有见到的。
- 第二段的toc-title指的就是“文章目录”那四个字,这四个字要比其他字大一些,将其字号设为其他字的120%。
第三段的#toc.toc指定了目录列表的一些细节,将font-size设为0.9em会让目录的字比文章的字稍小一些。最后的.toc-child指定了二级目录的缩进量。
再次生成页面,应该已经可以显示比较美观的目录了。下面我就需要编辑每一篇需要添加目录的文章,在文章开头的front-matter中加入toc: true。
仿照Hexo官网,了解到单页面的添加方式。
除了默认已提供的挂件外,你还可以自定义自己的小挂件,在hexo hemesmodernistlayout_widget下,新建自己的ejs文件,如myWidget.ejs,然后在配置文件hexo hemesmodernist_config.yml中配置。
查阅格式高亮代码,了解到本主题,通过特定的规律进行语法高亮!好像无法识别不同代码的语法高亮!
测试:
通过测试代码,查看后台代码逻辑,了解到可以识别Apache、C++、bash等,还有部分不可识别。那么这个主题用的是什么的语法高亮?
代码code,table-gutter-pre是代码前面的序号。class=”highlight apache”
参考:
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/
layout_partialhead.ejs
- 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
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
七牛云