搭建 Hexo 其三: icarus 主题

2019-06-04发表2022-08-06更新Hexo14 分钟读完 (大约2027个字)0次访问

A simple, delicate, and modern theme for the static site generator Hexo.

icarus 是一个十分简洁高效的 Hexo 主题, 并且支持多种语言, 页面使用响应式布局, 并且使用多个小部件展示不同的内容, 设计得非常漂亮!

本博客便基于 icarus 主题, 并进行了一定的自定义.

官方 Github 地址

个人修改版地址

安装 icarus

推荐使用 git clone 安装:

在 Hexo 的文件夹下, 执行命令:

下面程序中使用的是我修改过的主题, 如果想使用官方主题, 请改一下 Git 仓库地址

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

如果想要将 icarus 作为 submodule 来安装, 可以使用下面的命令:

1	git submodule add https://github.com/czccc/hexo-theme-icarus.git themes/icarus

然后, 在站点配置文件中, 将 theme 改为 icarus :

_config.yml

1	theme: icarus

然后执行一次 hexo g 操作, 会在 themes/icarus 生成一个 _config.yml 文件, 即为此主题的配置文件.

重新合并官方分支

首先, 在 Github 上 fork 了 icarus 仓库后, 那么 fork 得到的项目并不会跟着原仓库进行更新, 那么如果这时候还想要合并原仓库的程序, 以改善某些 bug, 并使用新的特性, 有下面两种方式.

`fetch -> merge`

首先, 跟上游仓库同步代码之前，必须配置过 remote，指向上游仓库。

git remote add ppoffice https://github.com/ppoffice/hexo-theme-icarus

# 再次执行命令 git remote -v 检查是否成功。
git remote -v
# origin  git@github.com:czccc/hexo-theme-icarus (fetch)
# origin  git@github.com:czccc/hexo-theme-icarus (push)
# ppoffice        https://github.com/ppoffice/hexo-theme-icarus (fetch)
# ppoffice        https://github.com/ppoffice/hexo-theme-icarus (push)

然后, 从上游仓库获取到分支，及相关的提交信息，它们将被保存在本地的 ppoffice/master 分支

git fetch ppoffice
# remote: Counting objects: 75, done.
# remote: Compressing objects: 100% (53/53), done.
# remote: Total 62 (delta 27), reused 44 (delta 9)
# Unpacking objects: 100% (62/62), done.
# From https://github.com/ppoffice/hexo-theme-icarus
#  * [new branch]      dev        -> ppoffice/dev
#  * [new branch]      gh-pages   -> ppoffice/gh-pages
#  * [new branch]      master     -> ppoffice/master
#  * [new branch]      site       -> ppoffice/site

最后, 切换到本地的 master 分支, 把 ppoffice/master 分支合并到本地的 master 分支，本地的 master 分支便跟上游仓库保持同步了，并且没有丢失你本地的修改。

git checkout master
# Already on 'master'
# Your branch is up to date with 'origin/master'.

git merge ppoffice/master
# Updating a422352..5fdff0f
# Fast-forward
#  README                    |    9 -------
#  README.md                 |    7 ++++++
#  2 files changed, 7 insertions(+), 9 deletions(-)
#  delete mode 100644 README
#  create mode 100644 README.md

提示：同步后的代码仅仅是保存在本地仓库，记得 push 到 Github 哟。

参考

如何同步 Github fork 出来的分支

https://github.com/selfteaching/the-craft-of-selfteaching/issues/67

修改主题配置

网站基本设置

_config.yml

# 图片文件可以存放至 themes/icarus/source/images/xxx

# 网站 icon
favicon: /images/favicon.jpg

# 网站左上角的主页图标
logo: /images/fav.png

设置侧边栏滚动类型

true : 固定
false : 滚动

_config.yml

# Sidebar settings.
# Note: 只有当侧边栏至少包含一个部件时, 才会显示此侧边栏
sidebar:
    left:
        sticky: false
    right:
        sticky: false

改为两栏布局

可否将内容三栏格式改成两栏？

将主题下的 _config.yml 复制一份, 改为 _config.post.yml, 再在里面重新排列 Widget 的布局, 将所有的 Widget 都调到左边, 并适当删去不需要的 Widget, 便可实现自动的双栏布局.

修改双栏布局宽带

在改成双栏布局后, 会导致文章详情页所占的总宽度变短. 为了解决这个问题, 可以通过更改样式文件. 具体的修改内容如下:

layout/layout.jsx

    'is-12': columnCount === 1,
//  修改宽度为 8 9 9
//  'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
    'is-8-tablet is-9-desktop is-9-widescreen': columnCount === 2,
    'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3

include/style/responsive.styl

/* 修改对应的布局 */
+widescreen()
    .is-1-column .container, .is-2-column .container
        /* max-width: $desktop - 2 * $gap */
        /* width: $desktop - 2 * $gap */
        max-width: $widescreen - 2 * $gap
        width: $widescreen - 2 * $gap

+fullhd()
    .is-2-column .container
        /* max-width: $widescreen - 2 * $gap */
        /* width: $widescreen - 2 * $gap */
        max-width: $fullhd - 2 * $gap
        width: $fullhd - 2 * $gap

layout/common/widgets.jsx

function getColumnSizeClass(columnCount) {
    switch (columnCount) {
        case 2:
            // 修改为 4 3 3
            // return 'is-4-tablet is-4-desktop is-4-widescreen';
            return 'is-4-tablet is-3-desktop is-3-widescreen';
        case 3:
            return 'is-4-tablet is-4-desktop is-3-widescreen';
    }

固定目录卡片

在 icarus 3.0 中, 类似于 toc, tag 等小部件不在默认的主题文件家中, 而是集成到了 hexo-component-inferno 这个依赖模块中. 因此想要改动这些内容的话, 需要手动地将toc.jsx 文件复制到 layout/widget/toc.jsx 中.

具体内容参考请教几个3.0版本修改的问题

因为在使用时并不想简单地将左右两栏固定, 而是想要实现对于不同的卡片, 设置不同的滚动方式. 比如, 对于文章内现实的目录卡片, 设置成固定, 并进入滚动条, 代码修改的内容如下:

加入了 column-left is-sticky 这两个 class
设置滚动条: style="max-height: calc(100vh - 5rem); overflow-y: auto;"

layout/widget/toc.jsx

// 第 5 行
const { tocObj: getTocObj, unescapeHTML } = require('hexo-util');
const { Component } = require('inferno');
const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');

// 第 112 行
    render() {
        const toc = getToc(this.props.content);
        if (!Object.keys(toc).length) {
            return null;
        }

        // return <div class="card widget" id="toc">
        return <div class="card widget column-left is-sticky" id="toc">
            <div class="card-content">
                <div class="menu" style="max-height: calc(100vh - 5rem); overflow-y: auto;">
                    <h3 class="menu-label">{this.props.title}</h3>
                    {this.renderToc(toc)}
                </div>
            </div>
        </div>;
    }

标题自动编号

在文章的样式文件中加入下面的内容, 便可以实现标题的自动编号.

include/style/article.styl

.content {counter-reset:section}
.content h1{counter-reset:sub-section}
.content h2{counter-reset:composite}
.content h3{counter-reset:detail}
.content h1:before{content:counter(section) ".  ";counter-increment:section;font-family:$family-sans-serif}
.content h2:before{content:counter(section) "." counter(sub-section) ".  ";counter-increment:sub-section;font-family:$family-sans-serif}
.content h3:before{content:counter(section) "." counter(sub-section) "." counter(composite) ".  ";counter-increment:composite;font-family:$family-sans-serif}

添加鼠标悬浮阴影

为 card 加入一个 hover 的属性, 便可实现悬浮阴影.

include/style/card.styl

.card
    overflow: visible
    border-radius: $card-radius

    &:hover
        box-shadow: 0 6px 15px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.1)

加入末尾版权说明

layout/common/article.jsx

    {/* Content/Excerpt */}
    <div class="content" dangerouslySetInnerHTML={{ __html: index && page.excerpt ? page.excerpt : page.content }}></div>
+   {!index && page.layout !== 'page' ?
+      <ul class="post-copyright">
+           <li><strong>本文标题：</strong><a href={url_for(page.permalink)}>{page.title}</a></li>
+           <li><strong>本文作者：</strong><a href={url_for('/')}>{config.author}</a></li>
+           <li><strong>本文链接：</strong><a href={url_for(page.permalink)}>{page.permalink}</a></li>
+           <li><strong>发布时间：</strong>{page.date.format("YYYY-MM-DD")}</li>
+           <li><strong>版权声明：</strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！</li>
+       </ul> : null
+   }
+   <br></br>
    {/* Tags */}
    {!index && page.tags && page.tags.length ? <div class="article-tags size-small is-uppercase mb-4">
        <span class="mr-2">#</span>

更改样式:

include/style/article.styl

.post-copyright
    font-size: 1rem
    letter-spacing: 0.02rem
    word-break: break-all
    margin: 2.5rem 0 0
    padding: 1rem 1rem
    border-left: 3px solid #FF1700
    background-color: #F9F9F9

在元数据前命加入图标

此处更改较多且比较繁琐, 因此不再贴出代码, 详情请看 commit 记录

启用静态搜索

_config.yml

# Search plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search
search:
    # Name of the search plugin
    type: insight

使用 `valine` 评论

Valine 诞生于2017年8月7日，是一款基于Leancloud的快速、简洁且高效的无后端评论系统。

理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。

特性:

快速
安全
Emoji 😉
无后端实现
MarkDown 全语法支持
轻量易用(~15kb gzipped)
文章阅读量统计 v1.2.0+

获取APP ID 和 APP Key

请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用

应用创建好以后，进入刚刚创建的应用，选择左下角的设置>应用Key，然后就能看到你的APP ID和APP Key了

_config.yml

# Comment plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment
comment:
    # 评论插件名称
    type: valine
    app_id:     # (必填) LeanCloud application id
    app_key:    # (必填) LeanCloud application key
    notify: false        # (可选) 是否接收邮件通知
    verify: false        # (可选) 是否显示验证码
    placeholder: ヾﾉ≧∀≦)o来啊，快活啊!   # (可选) 评论框占位符

启用分享插件

使用简单的 sharejs 插件实现分享

使用 npm 进行安装

1	npm install social-share.js

并且在 _config.yml 中修改:

_config.yml

# Share plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
share:
    # Share plugin name
    type: sharejs

搭建 Hexo 其三: icarus 主题

http://blog.czccc.cc/p/bdc060a9/

作者

Cheng

发布于

2019-06-04

更新于

2022-08-06

许可协议

#Blog Hexo

搭建 Hexo 其三: icarus 主题

安装 icarus

重新合并官方分支

fetch -> merge

参考

修改主题配置

网站基本设置

设置侧边栏滚动类型

改为两栏布局

修改双栏布局宽带

固定目录卡片

标题自动编号

添加鼠标悬浮阴影

加入末尾版权说明

在元数据前命加入图标

启用静态搜索

使用 valine 评论

特性:

获取APP ID 和 APP Key

启用分享插件

作者

发布于

更新于

许可协议

喜欢这篇文章？打赏一下作者吧

评论

目录

`fetch -> merge`

使用 `valine` 评论