博客使用Hexo+Icaurs搭建,在此记录一些使用心得,以及踩坑的地方
Hexo主要负责框架,文档还算比较全,主要对Icarus记录一下
很多已知的问题都能在下面两个地方找到解决方法:
Icarus常见问题
Icarus交流
黑暗模式
Icarus自带了一个黑暗模式(Cyberpunk ),但并不支持一键切换,只能选择一种方式显示。通过配置的方式重启切换 _config.icarus.yml 文件中:
1 2 - variant: default + variant: cyberpunk
要做成一键切换只有自己实现,我是通过切换css样式完成的,下面说下我的大致思路,需要的可以参考:
在node_modules 目录中找到hexo-theme-icarus/include/style 目录,新建一个样式文件(我的是custom),文件里面写你的样式(不推荐直接在原文件中写)
在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 + },
修改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. 完成
捐赠栏目显示与取消
捐赠的打开很简单,只需要将配置中的
donates 项配置好就ok了。
这样就会在所以的文章末尾显示你的捐赠信息栏目。
如果想要全局开启,而又在特定的某个文章关闭捐赠显示,只需要在文章的头部声明一个空的
donates 项就行了。比如我关闭了友情链接的捐赠显示
1 2 3 4 5 6 7 8 --- title: 友情链接 date: 2021-01-15 10:48:58 tags: - 友情链接 toc: true + donates: ---
网站加速 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的服务器要便宜得多(对于个人网站这种访问量来说)。