hexo-theme-icarus @Susreal Finish 2.3.0


目录:


Hexo-theme-icarus 是一个优秀的 Hexo 主题,开发者 Ruipeng Zhang 同时还维护了 hexo-theme-huemanhexo-theme-minos 两个项目。

icarus 是一个三栏结构的自适应主题,预置了大量第三方插件,可以方便使用者快速建站。整体风格简约,适合各种类型的站点,无论是技术文章,还是摄影佳作,都可以完美承载。

效果图

Icarus

安装

在命令行中cd至博客根目录,加载主题:

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

基础配置

首先,要在博客根目录下的 _config.yml 文件中做两件事情:

  1. 设置语言: language: zh-CN
  2. 设置主题为 icarus: theme: icarus

icarus 为我们预置了多达 12 种语言,默认是英文。一开始我没有设置语言,电脑上打开使用的是英文,但是手机上看就是一种类似葡萄牙语的文字。没有深究原因,所以还是按照博客的受众以及平时的喜好设置一下语言,zh-CN是简体中文。

icarus 的文件结构

先来看看 icarus 主题的文件结构吧,让我们准备好尖叫声!

├─includes
├─languages
├─layout
│  ├─comment
│  ├─common
│  ├─donate
│  ├─plugin
│  ├─search
│  ├─share
│  └─widget
├─sripts
└─source
    ├─css
    ├─images
    └─js

仔细观察渲染文件 layout 目录,就可以发现 icarus 的强大了,评论、捐赠、搜索、分享以及诸多第三方插件,都已经集成好啦!再说一遍,集成好啦!icarus 的简中翻译相对中规中矩,大家可以根据自己的文案风格修改 languages 目录下的 zh-CN.yml 文件。

_config.yml 文件配置

首次在博客根目录执行 hexo clean 或者 hexo g 都会触发 icarus 自动生成一个 _config.yml 文件,我们逐一说明。

logo 会展示在顶部导航栏的最左侧以及底部的footer区域,大家可以替换 source/images/ 下的 logo 文件,使用 svg 或者 png 格式的都可以。研究源码发现,这个地方给没有 logo 的同学保留了一套文字方案:

<% if (has_config('logo.text') && get_config('logo.text')) { %>
    <%= get_config('logo.text') %>
<% } else { %>
    <img src="<%- url_for(get_config('logo')) %>" alt="<%= get_config('title') %>" height="28">
<% } %>

也就是说,只要给 logo 添加 text 属性,就会优先展示预设文字作为 logo:

logo:
  text: your name

这对于不会画 logo 的同学来说无疑是个大好消息了:

logo

评论系统

icarus 预置了 Changyan Disqus Facebook Gitment Gitalk Isso LiveReValine 八大主流评论插件。

这里以我使用的 Valine 为例。首先在 LeanCloud 注册一个免费的开发账号,新建一个新应用,并把 appid 和 appkey 配置在对应部分:

comment:
    type: valine
    app_id:         # (required) LeanCloud application id
    app_key:        # (required) LeanCloud application key
    notify:         # (optional) receive email notification
    verify:         # (optional) show verification code
    placeholder:    # (optional) comment box placeholder text

其余的三项选填,这样就完成了 Valine 的基本配置了。此外,Valine 同步 Gravatar 头像,只要在评论的时候留下邮箱,就会展示你独一无二的头像咯!

效果如下:

Valine Comment

如果有的文章不希望别人评论,但是我们又希望把整个站点的评论关闭的话,就需要对指定文章进行评论关闭操作了。操作也很简单,只需要在文章 markdown 文件的 front-matter 区域设置 commentsfalse 即可:

---
title: article title
comments: false
---

打赏

作为程序员的收入来源之一,打赏是必不可少的啦。icarus 提供了 支付宝 微信 PayPalPatreon 四种方式:

donate:
    -
        type: alipay
        qrcode: /images/alipay.JPG
    -
        type: wechat
        qrcode: /images/wechat.JPG
    -
        # type: paypal
        # Paypal business ID or email address
        # business: ''
        # Currency code
        # currency_code: USD
    -
        # type: patreon
        # URL to the Patreon page
        # url: ''

支付宝微信 只需要提供二维码就可以了,可以使用本地静态资源或者图床链接。效果如下,大家懂的:

投喂现场

widget

我觉得这是 icarus 比较精髓的部分了,所有的 widget 都是一个卡片,可以自由摆放在任何位置:

卡片化部件

包括文章在内,个人资料、链接、分类、最新文章、归档、标签和标签云都是一个卡片,可以在 _config.yml 中设置各个卡片的具体属性,同时也可以设置卡片出现在网站的左侧还是右侧:

widgets:
    -
        # Widget name
        type: tagcloud
        # Where should the widget be placed, left or right
        position: left

其他设置(置顶/阅读量统计)

还有一些其他的设置就不在这里赘述了,具体可以参考 官方文档 进行了解。

除此之外,我根据实际需求,在 icarus 主题内添加了 置顶文章阅读量统计 的两个小功能,大家如果有兴趣,可以前往我的博客和我交流喔:-O

关于评论

评论前请填好“昵称”、“邮箱”这两栏内容,否则不会收到回复,谢谢!