当前位置 : 首页 » 文章分类 :  开发  »  Hexo博客(04)free2mind主题配置

Hexo博客(04)free2mind主题配置

刚开始博客用的是freemind主题，后来发现了一款从freemind主题派生的free2mind主题更加简洁紧凑，所以又更换为free2mind主题。之后自己也对free2mind主题做了很多修改，有很多个性化的配置以及自己增加的第三方插件都在主题的配置中，如果更换主题的话这些个性化定制都会消失，所以不能轻易更换主题。

使用freemind主题

安装freemind主题

进入username.github.io目录(即自己的hexo根目录)的hexo_branch分支下，clone主题到themes/freemind目录并将其添加为本项目的子项目：
git submodule add https://github.com/wzpan/hexo-theme-freemind.git themes/freemind

$ git submodule add https://github.com/wzpan/hexo-theme-freemind.git themes/freemind
Cloning into 'themes/freemind'...
remote: Counting objects: 2136, done.
remote: Total 2136 (delta 0), reused 0 (delta 0), pack-reused 2136
Receiving objects: 100% (2136/2136), 35.03 MiB | 869.00 KiB/s, done.
Resolving deltas: 100% (986/986), done.
Checking connectivity... done.

如果不需要将主题添加为Git子模块，直接clone主题项目即可：
git clone https://github.com/wzpan/hexo-theme-freemind.git themes/freemind

安装tag和站内搜索插件

npm install hexo-tag-bootstrap --save
npm install hexo-generator-search --save

hexo-tag-bootstrap是一个可在Markdown书写的hexo博客文章中增加漂亮的标签、按钮、高亮的插件。
hexo-generator-search是一个hexo本地搜索插件，安装后在博客的根_config.yml配置中增加如下配置即可启用：

search:
  path: search.xml
  field: post

其中：

  • path 指定生成的索引数据的文件名。默认为 search.xml 。
  • field 指定索引数据的生成范围。可选值包括：
    • post 只生成博客文章（post）的索引（默认）；
    • page 只生成其他页面（page）的索引；
    • all 生成所有文章和页面的索引。

文章太多了，生成的 search.xml 有十几兆，每次刷新页面都要下载一遍，暂时禁用搜索功能，以后有空自己写一个基于es的搜索服务。
sudo npm uninstall hexo-generator-search --save

sudo npm uninstall hexo-generator-search --save

Password:
removed 1 package and audited 7132 packages in 4.202s
found 6 vulnerabilities (3 low, 2 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

通过子模块来管理主题

如果我们通过git clone来安装主题，在themes/freemind目录中会自动生成.git隐藏文件夹并将之纳入这个子目录的Git版本控制中，这样我们之后在username.github.io目录备份博客源码时会与自己的GitHub pages远程仓库冲突，所以将主题添加为主项目的子项目，统一管理。
但是这样有一个问题，如果主题子模块是直接通过原作者的Git地址添加的，对主题进行修改后是无法提交到原作者的远程仓库的，所以无法备份对主题的更改，并且还会出现如下错误：

fatal: reference is not a tree: 1e60629d04abea4c92c6fc4960cc87236f206123
Unable to checkout '1e60629d04abea4c92c6fc4960cc87236f206123' in submodule path 'themes/freemind'

原因是我们本地对子模块进行了修改但是并没有推送到子模块的远程仓库，然后在主项目中提交了一个指向那个非公开状态的指针然后推送远程仓库。当在其他地方进行git submodule update或迭代clone时，那个子模块系统会找不到所引用的提交。
解决方法是先fork原作者的主题项目为自己的项目，再添加为子模块。
或者可以删除themes/freemind目录中.git隐藏文件夹，同时也就将这个子目录与其单独的Git版本控制解除关联。但是这样带来的一个问题是之后更新主题时，不能直接git pull了，还要重新clone。
当然，如果不需要备份博客源码到远程仓库，不需要这样处理。

启用freemind主题

修改hexo项目的_config.yml配置文件里的 theme 选项为 freemind：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: freemind

之后通过hexo g生成博客并hexo s启动本地服务器可看到未经配置的freemind主题。

配置Categories,Tags,About页面

在博客(注意是博客的source目录，不是主题的)的source/categories/目录(如果没有categories目录，新建一个)中创建一个index.html文件，内容为：

title: Categories
layout: categories
---

同理创建source/tags/index.html文件，内容为：

title: Tags
layout: tags
---

同理创建source/about/index.html文件，内容为：

title: About
layout: page
---

重新hexo g生成博客后，发现标题中的类别、标签、关于都有对应页面了。

更新freemind主题

如果主题项目有了更新，可以进入themes/freemind目录中，执行git pull来更新主题。我们使用子模块来管理主题同样适用。
2016.7.4版本更新：增加了front-matter项top，top: true可以将此文章置顶，实现是在_partial/index.ejs中遍历文章列表时。

freemind/free2mind主题个性化配置

说明：我现在用的free2mind主题是在freemind基础上改造来的，两者差别不大，所以这些个性化配置对两者都适用。
进入username.github.io/themes/freemind目录，编辑主题的_config.yml配置文件，进行个性化配置。

文章目录

freemind主题提供一个额外的Front-matter选项toc，设置为true后可以为指定文章添加目录，很多其他主题也都支持此选项。

主题颜色

编辑主题的配置themes/freemind/_config.yml，下面两个配置可设置freemind主题的配色：

theme: bootstrap
inverse: inverse

其中theme指定freemind的主题色，inverse可设置为default或inverse，分别对应此主题颜色的两个颜色，可选主题颜色见作者的博客：http://wzpan.github.io/hexo-theme-freemind/2016/01/30/color-themes/

每篇文章的右侧边栏配置

这里讨论的是每篇文章右侧的侧边栏，不是主页的侧边栏。
文章右侧边栏由themes/freemind/layout/_partial/post/meta.ejs脚本定义，打开后可以看到日期、分类、标签、TOC的配置，我们可以自由的添加自己的内容，例如添加一个文章访问量在这里。

更换为free2mind主题

迁移原主题上的自定义配置

下载原版freemind主题，用beyondcompare和我修改后的freemind主题做整个文件夹对比，找出我自己添加或修改的配置代码，然后对应添加到free2mind中。

├── layout
|   ├── _partial：
|      ├── post
|          ├── meta.ejs：单篇文章页面的侧边栏插件配置。我增加了阅读次数项。
|      ├── archive.ejs：我去掉了几行代码，忘了为啥了，忽略。
|      ├── footer.ejs：所有页面的footer模版。我有改动，增加了busuanzi访问量统计，以及多说公共代码。
|   ├── _widget：我增加了几个widget
├── source：无修改
├── languages：无修改
└── _config.yml

生成message布局页面

free2mind主题中自定义了message模版(layout)，即留言页面，需要为其生成一个html文件。
在博客的source/message/目录(如果没有message目录，新建一个)中创建一个index.html文件，内容为：

title: Message
layout: message
---

然后hexo g产生留言页面。编辑free2mind/layout/message.ejs可自定义留言页面内容。

生成about布局页面

free2mind主题中新增了about模版(layout)，即站点简介页面，需要为其生成一个html文件。
hexo博客默认已有about/index.html页面，但其使用的是page布局，free2mind主题中把page.ejs布局文件清空了，改为about布局即可。

title: About
layout: about

然后hexo g产生简介页面。编辑free2mind/layout/about.ejs可自定义简介页面内容。

修改categories.ejs布局

free2mind中去掉了这个布局，我感觉还是需要“类别”布局的，拷贝freemind主题中的categories.ejs放到free2mind/layout文件夹中，然后修改为free2mind样式。
主要是去掉了导航栏下面的一大块非常碍眼的title，在此位置增加了当前位置导航。

修改tags.ejs布局

同categories.ejs布局，也从freemind主题中拷贝tags.ejs过来做修改，参考categories.ejs.

修改style.css样式表

widget的样式改为原freemind主题的样式，即h1-h4的样式改为原来的。
widget标题上下间距过大，修改了.h4样式的margin。
widget条目右侧间距过大，将.widget ul的右margin置零。
h1,h2,h3,h4,h5,h6样式去掉字体加粗，font-weight改为normal。
h1字体太大，改小，h1,h2,h3颜色修改
侧边栏toc目录左右间距太大，改小，修改.toc-article，.toc-article ol，.toc-article ol ol 的padding
2017.6.11修改：
为了不影响code-prettify代码样式，去掉themes\free2mind\source\css\themes\cerulean.css中标签pre的样式，在style.css中添加自定义pre样式。
2017.10.10修改：
给文章侧边栏toc目录添加样式，增加不同级别不同颜色：

.toc-article-level-1 a{
  color: #FF6600; /*橙*/
}

2017.10.12修改：
归档widget样式，文章数前后加括号：

span.archive-list-count:before {
    content: "(";
}

span.archive-list-count:after {
    content: ")";
}

2017.10.20修改：
修改表格样式，整个表格加外边框，行、列加边框

修改archive.ejs归档页面

free2mind\layout_partial\archive.ejs模版负责生成归档页面以及点击具体某个标签、类别后进入的页面
2016.7.4版本更新后的问题：
通过点击类别、标签侧边栏中按钮跳转到的类别、标签页面(http://masikkk.com/categories/类别名/ )，里面的文章列表显示不全。作者Github上有人提了这个issue。通过修改_partial/archive.ejs实现。（最新版中此代码又被去掉了）。其实没显示的文章列表已经生成了，只不过由于限制了每页文章个数，显示到下一页去了，而页面上又没有下一页按钮，就看不到了。添加个分页按钮即可。
2017.6.4修改：
通过点击类别、标签侧边栏中按钮跳转到的类别、标签页面有分页按钮很不爽，在一页显示不全，还得点下一页按钮，改为在一页中显示此类别/标签的所有文章列表。
通过详细分析archive.ejs模版，知道为什么通过点击类别/标签侧边栏中按钮跳转到的类别/标签页面在一页显示不全了，因为文章列表是从page.posts变量中拿到的，page.posts变量是本页的所有文章，而每页文章的个数是在根目录_config.yml配置中通过变量per_page: 10配置的，某个类别/标签的文章个数超过了这个值，就要分页显示了。
而我想要的结果是像点击类别(http://masikkk.com/categories/ )或标签(http://masikkk.com/tags/ )页面那样，直接列出站点上的所有文章，所以需要修改archive.ejs模版模版，归档页面、点击具体某个标签、类别后进入的页面都是此模版生成的。
在archive.ejs模版中，原来如果是点击具体某个标签、类别后打开的页面，文章列表从page.posts变量中拿，拿到的是此类别、标签的所有文章，现在改为从site.posts变量（即站点的所有文章）中拿。如此修改后的问题是拿到的是全部文章，在遍历文章列表时需要将文章的类别和类别页的类别进行对比，只有当此篇文章的其中一个类别等于类别页的类别page.category时才列出。
修改后当然也不需要分页按钮了，将2016.7.4版本更新后添加的底部分页按钮去掉即可。
区分类别页和点击某类别按钮后打开的页面

2017.6.17修改：
2017.6.4修改中将所有情况下的文章列表都改为从site.posts变量（即站点的所有文章）中获取，这样会出现一个问题，就是所有年份归档页面都显示站点全部文章。
现在改为如果是年份归档页，则文章列表取自page.posts即当前年份的所有文章。

修改index.ejs首页文章列表

_partial/index.ejs模版负责生成首页上的文章列表，每篇文章是一个entry
在主页的文章列表标题上方，原来是日期、作者铭牌、评论数，我把作者铭牌去掉，改为类别和标签。并增加了阅读数，不过目前不蒜子貌似不支持在文章列表读取阅读数。
2017.6.4修改：每篇文章的entry上方添加网易云跟帖列表页参与数。
2017.6.7修改：标题上方的元素过多，将标题上方的文章类别和标签放到文章预览下面。
2017.7.17修改：无法获取来必力评论数，去掉每篇文章的entry上方的评论数显示。

修改article.ejs文章页面

_partial/article.ejs模版负责生成单篇文章页面。
去掉单篇文章标题上的日期、作者、评论数，这些都在侧边栏里展示了。
2017.6.4修改：每篇文章的标题字体改大，由h3改为h1。

修改meta.ejs文章侧边栏

themes\free2mind\layout_partial\post\meta.ejs负责生成单篇文章页面的侧边栏，在article.ejs中被引用。
单篇文章的侧边栏感觉还是原freemind主题中的好看，改为原来的。增加单篇文章右侧搜索框，拷贝_widget/search.ejs中的本地搜索代码到这里即可。
2017.6.1修改：增加文章修改日期，选用fa-calendar-plus-o图标。
2017.6.4修改：添加网易云跟帖评论数。添加hexo-wordcount字数统计和阅读时长预计插件。
2017.7.17修改：无法获取来必力评论数，去掉文章侧边栏的评论数显示。

修改head.ejs模版

themes\free2mind\layout_partial\head.ejs模版是所有页面的head模版，被layout.ejs引用。负责生成网站标题、meta内容，加载css样式。
2017.6.11修改：
增加Google Prettify 代码高亮css代码。

修改footer.ejs模版

themes\free2mind\layout_partial\footer.ejs模版是所有页面的footer模版，负责生成网站底部的Powered By等，以及加载一些js代码，引用analytics.ejs，被layout.ejs引用。
修改了Powered By内容，增加了busuanzi访问量统计js代码、多说公共js代码，引用的analytics.ejs中增加了CNZZ统计js代码。
2017.6.11修改：
增加本地Google Prettify 代码高亮js代码加载。
2017.6.18修改：
添加MathJax数学公式js，加载themes/free2mind/layout/_partial 目录中新建的mathjax.ejs
2017.7.1修改：
google-code-prettify加载方式修改：改为使用jQuery的$(document).ready(function(){})方式加载

其他修改

source/favicon.ico：把网站图标替换为自己喜欢的。
themes\free2mind\layout\_widget\tagcloud.ejs，标签云插件，2017.6.7修改：去掉20个标签限制，去掉随机排序，改为按标签名排序
themes\free2mind\layout\_widget\recent_posts.ejs，最新文章插件，2017.7.9修改：侧边栏条数由5改为10，文字数限制由25改为100
themes\free2mind\layout\_widget\recent_updates.ejs，2017.7.9新增最近更新插件

hexo-generator-search本地搜索无结果

换为free2mind主题一段时间后发现此问题，在主页、归档、标签、类别页面无法使用原freemind主题内置的hexo-generator-search本地搜索，但打开某篇文章后可以搜索。看freemind主题的issue列表，有的无法搜索是因为没有生成索引文件search.xml，我看了下public文件夹，有search.xml文件。看来是搜索相关的js没有被调用，我换回freemind主题后搜索又好了，对比两个页面，怎么也找不到不同。后来看到无法使用的搜索框下面都有个”站点公告(broadcast)”widget，想着是不是这个挂件影响了搜索结果的显示，把broadcast挂件去掉后，果然可以搜索了。单篇文章页面的侧边栏是通过meta.ejs加载的，没有broadcast挂件，所以一直是可以用的；主页、归档、标签、类别页面的侧边栏是通过sidebar.ejs加载的，有broadcast插件。
解决方法是暂时不用broadcast挂件了。

参考

上一篇 Git-常用命令

下一篇 2016年第二季度运动记录

阅读
评论
4.3k字
阅读预计16分钟
创建日期 2016-04-02
修改日期 2020-02-19
类别
标签
目录

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:
navigator:
platform:
userAgent:

评论

▲