Hexo | icarus主题初体验

Hexo | icarus主题初体验


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

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 的同学保留了一套文字方案:

/layout/common/navbar.ejs

<% 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 的同学来说无疑是个大好消息了:

评论系统

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 头像,只要在评论的时候留下邮箱,就会展示你独一无二的头像咯!

效果如下:

如果有的文章不希望别人评论,但是我们又希望把整个站点的评论关闭的话,就需要对指定文章进行评论关闭操作了。操作也很简单,只需要在文章 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

  0

评论

📧 邮箱: 留下邮箱,别人回复后会收到通知喔
😉 头像: 自动同步邮箱对应的「Gravatar」头像
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×