Icarus主题下的配置

题外话

久违地打开了VScode写起了文章，不得不说，用VScode来写MarkDown是真的方便，装个插件就可以预览了

Icarus主题

回到正题

因为Keep老出问题，于是，在几天前，我将主题更换为BUtterfly，可配置的选项非常多，整体美观度也非常不错；看似一切都很完美，~~那就没有这篇文章了~~

可是有一个缺点，就是加载的速度太慢了，除了必要的头像等，已经尽力让网站不出现图片，但首次加载仍需2～5秒的时间，如果刚好网不好，那就至少得8秒以上了。

其实早在几天前，我就开始申请又拍云联盟了，但因为网站访问时间太长，审核误认为无法访问给拒了

办法当然有，最好的方法就是换主题，前一段时候用的next主题就不错，黑白色调，除了图片其他的都不用怎么加载

于是我又换主题了，这次是有6K star的Icarus主题，整体看着也很不错，也没什么图片需要加载的

又拍云联盟

光换主题还不行，还得上魔法，因为我的博客部署在Github，所以访问比较慢，于是我打算给我的博客套个CDN

CDN是什么

简单来说就是把我的文章分散在各个节点，如果你在广州，就可以直接访问广州CDN上的缓存资源，就不用跨越半个地球去Github的服务器上找了

你可能注意到了页脚处添加了本网站由又拍云提供CDN加速/云储存服务这是因为我加入了又拍云联盟；那么加入又拍云联盟又什么好处呢

免费获取每月 10GB 存储空间 + 15GB 流量

15GB流量对于我这种小型的博客完全够用了，而且10GB的云存储刚好可以用来作图床，这下所有的问题都解决了—–吗？

加入又拍云联盟

想要白嫖首先得在网站的下方添加又拍云的标记和链接(本教程基于Icarus，可能不适用于您的主题)

首先找到~/hexo/themes/icarus/layout/common/footer.jsx其他主题的大概在这个目录或者上级目录layout中，用vim footer.jsx编辑它
仿照格式，添加上又拍云的文字

1

 <a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" rel="noopener">本网站由<img src="/images/upyun.png" alt="logo" style={{width:'50px',height:'25px'}}/>提供CDN加速/云储存服务</a>

其中https://www.upyun.com/?utm_source=lianmeng&utm_medium=referra为又拍云提供的链接，src="/images/upyun.png"为logo的路径

ICP备案

Icarus默认是没有ICP备案填写的配置的，我们可以仿照添加一个ICP

同样的文件，添加上

1
2


 <a href="https://icp.gov.moe/?keyword=20230439" target="_blank" rel="noreferrer noopener">萌ICP备20230439号</a>
                                <span>&nbsp; || &nbsp;</span>

其中添加上<span>  ||  </span>可于网站访问人数一同显示，中间用||隔开

完成后填写号信息点击申请，1-3个工作日内会回复，但我的域名没备案，所以CDN用不了，图床给的测试域名也不知道什么时候会失效

又一题外话

真的很喜欢写题外话

友链

Icarus的友链在侧边栏，这点和Next很像，同样的，一多就很难管理

我单独创建了一个友链页来展示我的朋友们(再插一嘴，空想笔记的站长去备案了，暂时访问不了)

用hexo new page link创建一个友链页面

原本想看下又没有好的解决方案，但找到的都没用，最后只能自己折腾一个了。

想要imaegoo大佬的友链页

在source/link/index.md填入以下内容生成一组(两个)友链

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<div class="columns">
  <div class="column is-half">
     <div class="box">
      <a target="_blank" rel="noopener" href="博客链接">博客名称</a>
          <br>
           博客简介
       </p>
    </div>
  </div>
<div class="column is-half">
    <div class="box">
      <a target="_blank" rel="noopener" href="博客链接">博客名称</a>
          <br>
           博客简介
        </p>
    </div>
  </div>
</div>

其中，每一个<div class="column is-half">就是一个友链，<div class="columns">范围内<div class="column is-half">的个数，就是一行显示的个数

作者这里写了两个，一行就显示两个友链，手机等屏幕较小的就显示一个

简介超出字数省略

如果你的友链简介过长，就会出现一个友链占用过多空间导致布局不美观；在书写友链前添加以下css即可解决

1
2
3
4
5
6
7


<style>
        .box {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
</style>

之前Keep用的是Giscus评论系统，感觉还不错，最重要的是有两条全站唯一的评论在

但Icarus不支持Giscus，需要手动修改comment.jsx

还是同样的~/hexo/themes/icarus/layout/common目录，找到comment.jsx

在<h3 class="title is-5">{__('article.comments')}</h3>

和{(() => {中填入Giscus生成的代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


const logger = require('hexo-log')();
const { Component } = require('inferno');
const view = require('hexo-component-inferno/lib/core/view');

module.exports = class extends Component {
    render() {
        const { config, page, helper } = this.props;
        const { __ } = helper;
        const { comment } = config;
        if (!comment || typeof comment.type !== 'string') {
            return null;
        }

        return <div class="card">
            <div class="card-content">
                <h3 class="title is-5">{__('article.comments')}</h3>
+               <script src="https://giscus.app/client.js"
+                                data-repo="[在此输入仓库]"
+                                data-repo-id="[在此输入仓库 ID]"
+                                data-category="[在此输入分类名]"
+                                data-category-id="[在此输入分类 ID]"
+                                data-mapping="pathname"
+                                data-strict="0"
+                                data-reactions-enabled="1"
+                                data-emit-metadata="0"
+                                data-input-position="bottom"
+                                data-theme="preferred_color_scheme"
+                                data-lang="zh-CN"
+                                crossorigin="anonymous"
+                                async>
+               </script>

                {(() => {
                    try {
                        let Comment = view.require('comment/' + comment.type);
                        Comment = Comment.Cacheable ? Comment.Cacheable : Comment;
                        return <Comment config={config} page={page} helper={helper} comment={comment} />;
                    } catch (e) {
                        logger.w(`Icarus cannot load comment "${comment.type}"`);
                        return null;
                    }
                })()}
            </div>
        </div>;
    }
};

添加完后，使用hexo s --debug本地预览，看是否出现评论框

这里又有一个问题，因为Icarus不支持Giscus，所以在_config.icarus.yml中，如果填入Giscus或者其他评论系统，生成界面和本地预览时都会出现warning，但不影响生成和预览

添加Valine评论

用了一天的Utterances，发现不登陆就看不到评论；反正评论也没了，不如选个更好的评论系统，最终选择了Valine

不用Waline的原因很简单，Vercel部署的时候提示我账号被锁了，懒得搞Gitlab，发邮件也没回我，无奈选用Valine

因为Icarus支持Valine，所以只需要填写配置即可，无需再修改comment.jsx

LearnCloud

登陆或注册一个LearnCloud账号，进入控制台创建一个应用，随便取一个名字，选择开发版
找到设置/应用凭证，复制你的AppID和AppKey
转到主题配置文件_config.icarus.yml，在comment写入以下内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


comment:
    type: valine
    app_id: xxxxxxxxxxx-xxxxx
    app_key: xxxxxxxxxxxxxxxxxxxxxx
    placeholder: ""                 # 可选填
    avatar: mm                      # 可选填
    avatar_force: false             # 可选填
    meta: ["nick", "mail", "link"]  # 可选填
    page_size: 10                   # 可选填
    lang: zh-CN                     # 可选填
    visitor: false                  # 可选填
    highlight: true                 # 可选填
    record_ip: false                # 可选填
    server_urls:                    # 可选填
    emoji_cdn:                      # 可选填
    emoji_maps:                     # 可选填
    enable_qq: false                # 可选填
    required_fields: []             # 可选填

具体每个配置是什么意思请看Valine文档

坑1

因为us.avoscloud.com域名失效，如果不填写serverURLs，就会导致net::ERR_CONNECTION_CLOSED这个错误

解决方法很简单，只需设置

1

server_urls: https://xxxxxxxx.api.lncldglobal.com # 把xxxxxxxx替换成你自己AppID的前8位字符

重新hexo三联即可评论

坑2

为履行合规责任，降低平台风险， LeanCloud 国际版共享域名将于 2022 年 8 月 1 日起不再向中国大陆的最终用户提供服务，国际版共享域名仅服务于海外用户。

因为这个原因，解决完坑1后国内用户如果要评论只能挂代理，国内网路也看不到别人的评论，需要我们绑定自己的域名

打开设置/域名绑定，输入你想绑定的二级域名
转到你购买域名的地方，添加一个CNAME解析，值为绑定时生成的值
等待DNS刷新，完成绑定
将上面的server_urls: 设置为绑定的域名

1

server_urls: https://xxxx.example.xxx

注意不要漏了https://

参考

Last modified on 2023-10-06