🎃 Hexo+Icarus使用经验

🎃 Hexo+Icarus使用经验

博客使用Hexo+Icaurs搭建,在此记录一些使用心得,以及踩坑的地方
Hexo主要负责框架,文档还算比较全,主要对Icarus记录一下

黑暗模式

Icarus自带了一个黑暗模式(Cyberpunk),但并不支持一键切换,只能选择一种方式显示。通过配置的方式重启切换 _config.icarus.yml 文件中:
1
2
-   variant: default
+ variant: cyberpunk
要做成一键切换只有自己实现,我是通过切换css样式完成的,下面说下我的大致思路,需要的可以参考:
  1. node_modules目录中找到hexo-theme-icarus/include/style目录,新建一个样式文件(我的是custom),文件里面写你的样式(不推荐直接在原文件中写)

  2. hexo-theme-icarus/source/css/style.style文件中下引入你的文件,这样你的样式就能生效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Base CSS framework
@import '../../include/style/base'
// Helper classes & mixins
@import '../../include/style/helper'
// Icarus components
@import '../../include/style/button'
@import '../../include/style/card'
@import '../../include/style/article'
@import '../../include/style/navbar'
@import '../../include/style/footer'
@import '../../include/style/pagination'
@import '../../include/style/timeline'
@import '../../include/style/search'
@import '../../include/style/codeblock'
@import '../../include/style/widget'
@import '../../include/style/donate'
@import '../../include/style/plugin'
@import '../../include/style/responsive'
+ @import '../../include/style/custom'

我是通过给body标签加上class属性night完成css样式覆盖的。
localStorage存储用户的白天/黑暗状态数据防止页面刷新效果失效

标签

markdown语法提供了很多页面标签,但对于一个网站来说还是太少了,所有你在markdown语法中找不到的标签都可以在Hexo文档中找到,在Hexo中找不到的都可以在Icarus文档中找到,在Icarus中找不到的都可以在Bluma文档中找到(Icarus使用的Bluma插件库)

背景图

Icarus没有提供网站背景图的配置,给网站添加背景图就用原始的css样式自己添加就行了

新加导航栏菜单

上面这种新的菜单栏只需要在_config.icarus.yml配置文件中新加一行就行了,然后在文章的目录中新建一个名字和路由名相同的目录下面放一个index.md文件,默认点击新的菜单栏就是访问对应目录下的index.md文件了
1
2
3
4
5
6
7
navbar:
# Navigation menu items
menu:
首页: /
分类: /categories
时间轴: /archives
+ 书架: /books

信息栏按钮内容修改

现在icarus的配置文件没有提供修改下图中个人信息栏按钮的配置项,我们可以自己修改
我是用npm包安装的hexo和icarus,所以我修改的文件直接就是node_modules里面的文件

1.修改profile.json

修改node_modules/hexo-theme-icarus/include/schema/widget/profile.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  "follow_link": {
"type": "string",
"description": "URL or path for the follow button",
"examples": [
"https://github.com/ppoffice"
],
"nullable": true
},
+ "follow_title": {
+ "type": "string",
+ "description": "content for the follow button",
+ "examples": [
+ "github"
+ ],
+ "nullable": true
+ },

2.修改widgets.jsx

修改node_modules/hexo-theme-icarus/layout/common/widgets.jsx

1
2
3
4
5
6
7
8
  followLink: follow_link ? url_for(follow_link) : undefined,
- followTitle: __('widget.follow'),
+ followTitle: follow_title,
socialLinks
};
});

module.exports = Profile;

3. _config.icarus.yml文件添加配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  # Whether show the rounded avatar image
avatar_rounded: false
# Email address for the Gravatar
gravatar:
# URL or path for the follow button
follow_link: 'https://github.com/itpika'
+ follow_title: github
# Links to be shown on the bottom of the profile widget
social_links:
# Github:
# icon: fab fa-github
# url: 'https://github.com/itpika'
# Facebook:
# icon: fab fa-facebook
# url: 'https://facebook.com'

4. 完成

网站加速

icarus文件加速

icarus的一些外部样式(css,js)文件是从其它地方拉取的,虽然提供了几个地址可供选择,但这些地址都是国外的,速度不太稳定,有时候这个慢,有时候那个又慢,建议把需要的文件download下来,放在自己本地
下面列举一些:
justifiedGallery.min.css all.min.css cookieconsent.min.css justifiedGallery.min.css

lightgallery.min.css pace.min.js jquery.justifiedGallery.min.js lightgallery.min.js

低成本的静态网站

一个再小的网站都是需要成本的,如果是hexo这种静态网站,为了降低成本,比较好的方式是一个低配服务器配合CDN,我的是一个1核2G的服务器加上某厂商的CDN。服务器不直接提供服务,网站采用CDN托管(因为不需要动态交互,也就不需要源站),服务器只是用作CDN的源站(拉取原始数据的地方)。如果你有信心让网站的访问量上去,也只需要购买CDN流量就行了。就目前看来,买流量还是要比买一个2核4G的服务器要便宜得多(对于个人网站这种访问量来说)。
作者

itpika

发布于

2021-01-15 17:08:58

更新于

2021-02-04 15:12:18

许可协议

评论