croyoux's blog

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，可能不适用于您的主题)

  1. 首先找到~/hexo/themes/icarus/layout/common/footer.jsx其他主题的大概在这个目录或者上级目录layout中，用vim footer.jsx编辑它
  2. 仿照格式，添加上又拍云的文字
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 <a href="https://icp.gov.moe/?keyword=20230439" target="_blank" rel="noreferrer noopener">萌ICP备20230439号</a>
2                                <span>&nbsp; || &nbsp;</span>

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

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

又一题外话

真的很喜欢写题外话

友链

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

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

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

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

想要imaegoo大佬的友链页

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

 1<div class="columns">
 2  <div class="column is-half">
 3     <div class="box">
 4      <a target="_blank" rel="noopener" href="博客链接">博客名称</a>
 5          <br>
 6           博客简介
 7       </p>
 8    </div>
 9  </div>
10<div class="column is-half">
11    <div class="box">
12      <a target="_blank" rel="noopener" href="博客链接">博客名称</a>
13          <br>
14           博客简介
15        </p>
16    </div>
17  </div>
18</div>

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

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

简介超出字数省略

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

1<style>
2        .box {
3          overflow: hidden;
4          text-overflow: ellipsis;
5          white-space: nowrap;
6        }
7</style>

评论

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

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

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

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

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

 1const logger = require('hexo-log')();
 2const { Component } = require('inferno');
 3const view = require('hexo-component-inferno/lib/core/view');
 4
 5module.exports = class extends Component {
 6    render() {
 7        const { config, page, helper } = this.props;
 8        const { __ } = helper;
 9        const { comment } = config;
10        if (!comment || typeof comment.type !== 'string') {
11            return null;
12        }
13
14        return <div class="card">
15            <div class="card-content">
16                <h3 class="title is-5">{__('article.comments')}</h3>
17+               <script src="https://giscus.app/client.js"
18+                                data-repo="[在此输入仓库]"
19+                                data-repo-id="[在此输入仓库 ID]"
20+                                data-category="[在此输入分类名]"
21+                                data-category-id="[在此输入分类 ID]"
22+                                data-mapping="pathname"
23+                                data-strict="0"
24+                                data-reactions-enabled="1"
25+                                data-emit-metadata="0"
26+                                data-input-position="bottom"
27+                                data-theme="preferred_color_scheme"
28+                                data-lang="zh-CN"
29+                                crossorigin="anonymous"
30+                                async>
31+               </script>
32
33                {(() => {
34                    try {
35                        let Comment = view.require('comment/' + comment.type);
36                        Comment = Comment.Cacheable ? Comment.Cacheable : Comment;
37                        return <Comment config={config} page={page} helper={helper} comment={comment} />;
38                    } catch (e) {
39                        logger.w(`Icarus cannot load comment "${comment.type}"`);
40                        return null;
41                    }
42                })()}
43            </div>
44        </div>;
45    }
46};

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

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

添加Valine评论

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

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

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

LearnCloud

  1. 登陆或注册一个LearnCloud账号，进入控制台创建一个应用，随便取一个名字，选择开发版
  2. 找到设置/应用凭证，复制你的AppID和AppKey
  3. 转到主题配置文件_config.icarus.yml，在comment写入以下内容
 1comment:
 2    type: valine
 3    app_id: xxxxxxxxxxx-xxxxx
 4    app_key: xxxxxxxxxxxxxxxxxxxxxx
 5    placeholder: ""                 # 可选填
 6    avatar: mm                      # 可选填
 7    avatar_force: false             # 可选填
 8    meta: ["nick", "mail", "link"]  # 可选填
 9    page_size: 10                   # 可选填
10    lang: zh-CN                     # 可选填
11    visitor: false                  # 可选填
12    highlight: true                 # 可选填
13    record_ip: false                # 可选填
14    server_urls:                    # 可选填
15    emoji_cdn:                      # 可选填
16    emoji_maps:                     # 可选填
17    enable_qq: false                # 可选填
18    required_fields: []             # 可选填

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

坑1

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

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

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

重新hexo三联即可评论

坑2

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

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

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

注意不要漏了https://

参考

Tags: