简洁强大的 Hexo 主题 Icarus

最近把博客主题更换为 icarus,作者是 PPOffice。这个主题界面简洁,具有分类、归档、导航等功能,非常适合博文较多的博主整理自己的博客。网上该主题的资料不多,github 上的文档又是纯英文的,所以我就翻译了搬运过来,供大家参考。

主题预览:

icarus预览图

正文


安装


1.在 Hexo 根目录下,输入指令克隆 Icarus 到 theme/icarus

1
2
$ git clone https://github.com/ppoffice/hexo-theme-icarus.git
themes/icarus

或 fork 本仓库,将其作为 git submodule 安装:

1
$ git submodule add https://github.com/<your-username>/hexo-theme-icarus.git themes/icarus

2.修改博客配置文件 _config.yml,将 theme 更换为 icarus 来启动主题:

1
theme: icarus

3.将主题文件夹中的 _config.yml.example 重命名为 _config.yml

4.(可选)别忘了检查最新版本:

1
2
$ cd themes/icarus
$ git pull

5.(可选)启动 Insight-Search 作为默认搜索,需要先安装 hexo-generator-json-content

1
$ npm install -S hexo-generator-json-content

配置


  • 主题

主题配置包括两部分:menucustomize

Menu


Menu

菜单(导航栏)可以直接找到主页,归档,目录,自定义页面等。你可以通过简单地添加菜单名和链接来设置导航栏:

1
2
3
4
menu:
Home: .
Archives: archives
+ GitHub: https://github.com

同时支持绝对地址和相对地址

如果你想启用 CategoriesTags,请把 _source/categories-source/tags 文件夹复制到博客根目录下的 source 文件夹中,然后到 _config.yml 中的 menu 选项里添加如下配置(About 同理):

1
2
3
4
5
menu:
Home: .
Archives: archives
+ Categories: categories
+ Tags: tags

Customize


自定义配置控制你的主题外观。

logo

你可以使用自定义图片替换默认 logo。widthheight 属性决定了 logo 的尺寸(in pixels),url 属性是 logo 图片的地址。你也可以通过设置 enabled: false 隐藏 logo。

1
2
3
4
5
logo:
enabled: true
width: 165
height: 60
url: images/logo-header.png

widthheight 属性仅支持纯数字。
即便 enabled: false 时,也请保留 widthheighturl属性值。

Profile

Profile图片

这里用来简单地展示你的个人信息。

1
2
3
4
5
6
7
8
profile:
enabled: true
avatar: css/images/avatar.png
gravatar:
author: PPOffice
author_title: Web Developer & Designer
location: Harbin, China
follow: https://github.com/ppoffice/

Highlight

highlight

Icarus支持超过60种代码高亮,从 Highlight.js 中导入。你可以从 icarus/source/css/_highlight 文件夹中查看可选选项。

Sidebar

改变 sidebar 的位置,可选的有 leftright

1
sidebar: left

Thumbnail(缩略图)

设置 turefalse 来开启或关闭该功能。

1
thumbnail: true

如何添加为文章添加一个缩略图?
front-matter 中添加 bannerthumbnail 属性。

1
2
3
title: Hello World
date: 2013/7/13 20:46:25
+ thumbnail: https://example.com/image.jpg

Favicon

给博客添加一个 favicon:

1
favicon: favicon.png

Social Links

社交链接

设置链接名和链接地址来添加社交链接,仅可使用由 Fontawesom 提供的图标(直接输入 Fontawesome 中的图标名再添加地址即可)。

1
2
3
social_links:
github: https://github.com/ppoffice/hexo-theme-icarus
+ youtube: https://youtube.com

确保链接地址不会空着,否则社交链接会失效。

  • 控件

Icarus 目前支持的控件:

1
2
3
4
5
6
7
widgets:
- recent_posts
- category
- archive
- tag
- tagcloud
- links

Recent Posts

在 sidebar(边条)上展示最近五篇文章。

Category

在 sidebar(边条)上展示目录。

Archive

在 sidebar(边条)上展示近几个月文章的归档。

Tag

在 sidebar(边条)上展示标签。

Tag Cloud

在 sidebar(边条)上展示标签云。

Links

在 sidebar(边条)上展示自定义链接。可以在 Miscellaneous Configurations 中设置自定义链接。

  • 搜索

Insight Search(笔者选用的是此搜索)

Insight Search

Esc 键关闭搜索框,通过 浏览搜素结果,Enter 键显示搜索结果

- links
1
insight: true

注意:需要先安装 hexo-generator-json-content 才能使用 Insight Search。

1
$ npm install -S hexo-generator-json-content

Swiftype(此搜索要收费)

Swiftype

先注册一个 Swiftype 账号。

1
swiftype: XXXXXXXXXXXXXXXXXXXX

install key 可以在下面的页面中找到:

install key

Baidu(主题作者不推荐)

添加这个就应该可以使用了。

1
baidu: true

  • 评论

Disqus

Disqus

先注册 Disqus 账号。再在配置中输入 shortname,shortname 可以在图中页面找到。

shortname

1
disqus: hexo-theme-icarus

Duoshuo(笔者使用的此评论)

Duoshuo

同样也是先注册 Duoshuo 账号,再输入 shortname。

Duoshuo

1
duoshuo: hexo-theme-icarus

  • 分享

分享按钮会在文章的末尾,评论框的上方显示。Icarus 提供几种分享插件,每一种都已经根据主题进行了风格的调整。

可选的有:

  • default
  • addtoany
  • jiathis
  • bdshare

Default

1
share: default

Default

AddToAny

1
share: addtoany

AddToAny

JiaThis

1
share: jiathis

JiaThis

Baidu Share(笔者使用的百度分享)

1
share: bdshare

bdshare

  • 插件

lightgallery

lightgallery.js 是一个全特性 JavaScript lightbox gallery ,不需要任何依赖。设置 true 来启用该功能。

lightgallery

1
lightgallery: true

Justified Gallery

Justified Gallery 是一个 JQuery 插件,它允许用户创建高质量的图片整理图库。设置 true 再在你的图片两边加上 <div class="justified-gallery"></div> 就能启用该功能。

Justified Gallery

1
justifiedgallery: true

Google Analytics(国内不是很方便,你懂的)
在配置中输入谷歌分析的 tracking ID 为你的站点启用谷歌提供的网站分析功能。在如下的页面中可以找到 tracking ID。

1
google_analytics: UA-66666666-6

tracking ID

Baidu Analytics(笔者使用的百度分析)

在配置中输入百度分析的 hash key 可以启用该功能。百度分析的 hash key 可以在 Get JS 框中找到。

1
baidu_analytics: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

hash key

  • 其它

Open Graph

关于 Open Graph:Open Graph protocol
可设置的选项:

1
2
3
4
5
open_graph:
fb_app_id:
fb_admins:
twitter_id:
google_plus:

Links

向 sidebar 添加友情链接。

1
2
links:
Hexo: http://hexo.io

  • 常见问题

如何修改站点的语言?

编辑博客根目录下的 _config.yml,进行如下更改:

1
2
- language: en
+ language: zh-CN

可以在 icarus/languages 文件夹下找到可使用的语言。

如何为文章添加摘要?
在文章中添加 <!-- more --> 标签,在上传内容前该标签会被标记为摘要。

为什么我的更改没有部署到 Github 页面上?
hexo deploy 之前,运行如下指令:

1
2
$ hexo clean
$ rm -r .deploy_git

怎么为指定文章、页面添加元标签(meta tags)?

通过 font-mater 为文章、页面添加 meta tags。

1
2
3
4
5
6
7
title: test post
date: 2015-01-26 21:55:37
tags:
comments: false
+ meta:
+ - name="robots";content="noindex, follow"
+ - name="another-meta";value="hello world";enabled=false

参考链接

hexo-theme-icarus
hexo博客换主题–icarus

评论