介绍我为 Hexo 编写的 Freemind 主题。

Freemind 是我为 Hexo 编写的一个开源主题。

特点

Freemind 和 HaHack 所用的主题的基本相似,特点在于:

  • Bootstrap - 基于 Bootstrap 3.1.1 ;
  • 标签插件 - 专门编写了一系列的 Bootstrap tag plugins ,以最大程度的发挥 Bootstrap 的威力。包括:
    • textcolor - 插入一段带有特殊颜色标记的文本;
    • button - 插入一个按钮,并允许为其指定超链接、文本及颜色;
    • label - 插入一个标签,并为其指定文本和样式;
    • badge - 插入一个徽章,并为其指定文本;
    • alert - 插入一段警报文本信息,并为其指定样式。
  • 本地搜索 - 自带一个 本地搜索引擎

安装

  1. 安装主题:

1
$ git clone https://github.com/wzpan/hexo-theme-freemind.git themes/freemind

  1. 安装 hexo-tag-bootstrap (可选):

1
$ npm install hexo-tag-bootstrap --save

  1. 安装 hexo-generator-search (可选):

1
$ npm install hexo-generator-search --save

  1. 创建页面

Freemind 预先定义了 Categories(分类)、Tags(标签) 和 About(关于)页面,要使用它们,你需要先在你的博客的 source 目录中添加相应页面。

例如,要创建 Categories 页面,你可以在 source/categories/ 目录 1 1如果没有这个目录,就新建一个。 下创建一个 index.html 文件,内容如下:

1
2
3
title: Categories
layout: categories
---

Tags 页面和 About 页面与此类似,不同的是 layout 分别为 tags 和 page。

如果你依然不太明白如何创建这几个文件,可以参考 Freemind 的 Demo 站点的 source 目录。

启用

修改 _config.yml 文件里的 theme 选项为 freemind 即可。

更新

1
2
$ cd themes/freemind
$ git pull

配置

Freemind 的配置文件如下:

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
slogan: Yet another bootstrap theme.
menu:
- title: Archives
url: archives
intro: All the articles.
icon: fa fa-archive
- title: Categories
url: categories
intro: All the categories.
icon: fa fa-folder
- title: Tags
url: tags
intro: All the tags.
icon: fa fa-tags
- title: About
url: about
intro: About me.
icon: fa fa-user
links:
- title: My Github
url: http://www.github.com/wzpan
intro: My Github account.
icon: fa fa-github
- title: My LinkedIn
url: http://www.linkedin.com/pub/weizhou-pan/5b/8a0/161
intro: My Linkin account.
icon: fa fa-linkedin
widgets:
- search
- category
- tagcloud
- recent_posts
- links
rss: atom.xml
favicon: favicon.png
fancybox: true
duoshuo_shortname:
# analytics
google_analytics:
enable: false
siteid:
baidu_tongji:
enable: false
siteid:
# Search
swiftype_key:

其中:

  • slogan - 修改显示在博客首页的个性签名;
  • menu - 导航菜单;
  • links - 修改 links 小挂件的推荐链接;
  • widgets - 在博客边栏显示的挂件列表;
  • rss - RSS 链接;
  • fancybox - 是否启用 Fancybox
  • duoshuo_shortname - 多说ID,如果希望使用多说取代 Disqus 做评论系统;
  • analytics - 统计 ID 。支持 Google Analytics 和百度统计;
  • swiftype_key - Swifttype key 。如果希望使用自建的本地搜索引擎,则可以留空或注释掉这句话。

如果希望使用 disqus ,则应该在站点的 _config.yml 中设置:

# Disqus
disqus_shortname:

Front-Matter

Freemind 主题额外提供了一些新的 front-matter 的选项,利用这些选项可以更好的装饰你的文章。

  • description - 在文章顶部插入一段简短的摘要信息
  • feature - 为文章添加一张 feature 图片,这张图片将展示在主页的文章列表中
  • toc - 生成 table of contents

示例:

1
2
3
4
5
6
7
8
title: Tag Plugins
date: 2014-03-16 10:17:16
tags: plugins
categories: Docs
description: Introduce tag plugins in freemind.
feature: images/tag-plugins/plugins.jpg
toc: true
---

Q&A

Q Freemind 这名字有何含义?

A Freemind 命名出自 Pluskid 的博客。这个主题很大程度借鉴了他的博客的布局和样式。

Q 现在都有这么多 Hexo 的主题了,为啥又要写一个?

A 实际上我这个主题在我使用 Hexo 前已经创建了。我在半年前将博客迁移到 Hexo ,因为我已经习惯了原来的主题,所以顺便把主题也移植了过来。

Q 为啥还用 CSS 写样式,而不用更高端大气的 stylus ?

A 嗯,stylus 的确很酷。不过我不想再把以前的样式重写成 stylus 了。所以暂时先保留原来的 CSS。

Q 你的博客不错用,如何贡献?

A 有人喜欢我的东西我就很高兴咯。如果想做出贡献,你可以:

  • 为本主题的 Github 项目 加颗星;
  • Fork 这个项目,尽情DIY,然后给我发 pull request;
  • 这个项目遵循 MIT 开源协议,你可以在本主题基础上创建你的主题。不过如果你能在你的主题页面中声明主题基于 Freemind 就再好不过了。

Q 你自己的博客 看起来跟这个主题有点不一样呀,为什么?

A 是的。我在开源这个主题前做了些简化。不是所有人都需要我的博客里的一些特性,比如 Wiki 页面。

Q 如何指定某些页面生成 ToC(Table of Contents) ?

A 在文章头部添加 toc: true

Q 从哪里可以找到 Freemind 的 Demo 站点的的几篇文档的 Markdown 源码?

A 在项目的 source 分支。

Q 为啥我在插入 bootstrap 插件后总是自动折行?

A 这个问题是你的 Markdown 设置引起的。解决办法是在你的 Hexo 的 _config.yml 文件中禁用 Markdown 的 breaks 选项:

1
2
3
4
5
6
7
8
9
10
# Markdown
## https://github.com/chjj/marked
markdown:
gfm: true
pedantic: false
sanitize: false
tables: true
breaks: false
smartLists: true
smartypants: true

Comments