🎃 Hexo+Icarus使用经验

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

很多已知的问题都能在下面两个地方找到解决方法:
Icarus常见问题 Icarus交流

黑暗模式

Icarus自带了一个黑暗模式(Cyberpunk)，但并不支持一键切换，只能选择一种方式显示。通过配置的方式重启切换 _config.icarus.yml 文件中:

-   variant: default
+   variant: cyberpunk

要做成一键切换只有自己实现，我是通过切换css样式完成的，下面说下我的大致思路，需要的可以参考：

1. 在node_modules目录中找到hexo-theme-icarus/include/style目录，新建一个样式文件(我的是custom)，文件里面写你的样式(不推荐直接在原文件中写)
   
   

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

// 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文件了

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

  "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

  followLink: follow_link ? url_for(follow_link) : undefined,
-          followTitle: __('widget.follow'),
+          followTitle: follow_title,
          socialLinks
      };
  });

  module.exports = Profile;

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

  # 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项就行了。比如我关闭了友情链接的捐赠显示

  ---
  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的服务器要便宜得多(对于个人网站这种访问量来说)。