个性化博客

发表于 更新于 分类于 Waline：

诗词

挑选中...

安装主题

官方主题网站：https://hexo.io/themes/.

我使用的主题是NexT，官网：next-theme/hexo-theme-next: 🎉 Elegant and powerful theme for Hexo. (github.com).

预览界面：NexT - Theme for Hexo (theme-next.js.org).

使用步骤官网上有，建议使用命令下载主题：npm install hexo-theme-next，下载过程可能需要科学上网。

下载好后，在博客根目录下修改_config.yml，设置theme主题为next

theme: next

修改主题风格

next主题提供了四种风格可供切换，我选择的是默认风格，如下所示

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

设置icon

下载地址：https://www.iconfont.cn/.

将下载的icon放置在/博客根目录/node_modules/hexo-theme-next/source/images

修改主题配置文件中favicon中的内容。

设置菜单栏

  1. 编辑主题配置文件_config.yml，修改menu中的内容，将想要展示的内容取消注释。
1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat
  1. 创建页面
1
2
3
4
5
# 在站点的根目录
# 下面分别创建 about categories tags 页面
hexo new page about
hexo new page categories
hexo new page tags
  1. 修改type

创建页面后，在/博客根目录/source/目录中可以看到新创建的页面，修改其中的index.md文件，增加or修改：

1
2
# 下面是 tags 页面的，categories 页面则是 categories
type: tags

修改之后，可以在本地运行并验证一下，看本地的博客菜单栏中是否正常显示添加的页面。

  1. 添加公益404，方法同上面，在index.md文件中添加下面的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>
  1. 配置回到顶部按钮

修改主题配置文件_config.yml，将back2top的enable设置为true即可，边栏和滚动百分比可以按照需求自行添加。

  1. 设置已读进度条

将reading_progress的enable设置为true即可，位置、颜色和高度都可以调整。

  1. 边角的GitHub banner

修改github_banner，设置为true即可。

  1. 设置头像

修改avatar，url设置为https://pic.imgdb.cn/api/avatar，可以设置头像是否为圆形以及旋转。

  1. 设置语言

打开博客根目录/node_modules/hexo-theme-next/languages，可以看到支持的语言。

编辑站点配置文件，修改language，填入上述目录下的文件夹名称。

添加友链

1.新增links页面

博客根目录下打开终端，输入：hexo new page links

PS：也可以在source目录下手动创建，需要手动创建index.md文件

2.配置menu

主题配置文件_config.yml中menu下添加：

links: /links/ || fa fa-link

主题/languages/zh-CN.yml文件中menu下增加中文描述

links: 友链

新建links.njk文件，具体是什么后缀名取决于next主题的layout目录下的文件是什么后缀名，不同的版本后缀名可能不一样。

内容如下：

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
{% block content %}
  {######################}
  {### LINKS BLOCK ###}
  {######################}

    <div id="links">
        <style>

            #links{
               margin-top: 5rem;
            }

            .links-content{
                margin-top:1rem;
            }

            .link-navigation::after {
                content: " ";
                display: block;
                clear: both;
            }

            .card {
                width: 300px;
                font-size: 1rem;
                padding: 10px 20px;
                border-radius: 4px;
                transition-duration: 0.15s;
                margin-bottom: 1rem;
                display:flex;
            }
            .card:nth-child(odd) {
                float: left;
            }
            .card:nth-child(even) {
                float: right;
            }
            .card:hover {
                transform: scale(1.1);
                box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
            }
            .card a {
                border:none;
            }
            .card .ava {
                width: 3rem!important;
                height: 3rem!important;
                margin:0!important;
                margin-right: 1em!important;
                border-radius:4px;

            }
            .card .card-header {
                font-style: italic;
                overflow: hidden;
                width: 236px;
            }
            .card .card-header a {
                font-style: normal;
                color: #2bbc8a;
                font-weight: bold;
                text-decoration: none;
            }
            .card .card-header a:hover {
                color: #d480aa;
                text-decoration: none;
            }
            .card .card-header .info {
                font-style:normal;
                color:#a3a3a3;
                font-size:14px;
                min-width: 0;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        </style>
        <div class="links-content">
            <div class="link-navigation">

                {% for link in theme.mylinks %}

                    <div class="card">
                        <img class="ava" src="{{ link.avatar }}"/>
                        <div class="card-header">
                        <div><a href="{{ link.site }}" target="_blank">@ {{ link.nickname }}</a></div>
                        <div class="info">{{ link.info }}</div>
                        </div>
                    </div>

                {% endfor %}

            </div>
            {{ page.content }}
            </div>
        </div>

  {##########################}
  {### END LINKS BLOCK ###}
  {##########################}
{% endblock %}

4.修改page.njk

修改主题/layout/page.njk文件，在

1
2
{%- elif page.type === 'tags' and not page.title %}
    {{- __('title.tag') + page_title_suffix }}

位置下添加类似代码：

1
2
{%- elif page.type === 'links' and not page.title %}
    {{- __('title.links') + page_title_suffix }}

效果如下：

在主题/layout/page.njk中，在

1
2
{% elif page.type === 'categories' %}
          {%- include '_partials/page/categories.njk' -%}

位置下添加类似代码：

1
2
{% elif page.type === 'links' %}
          {%- include '_partials/page/links.njk' -%}

PS：之前新建的文件就放在这个目录下，不要随意更改存放位置。

6.配置友链

在主题配置文件_config.yml中配置友链，menu下方新增mylinks，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
mylinks:
- nickname: '黎辉'
  avatar: https://pic.imgdb.cn/api/avatar
  site: https://iloveszy.com/
  info: 攀峰之高险，岂有崖颠；搏海之明辉，何来彼岸？前进不止，奋斗不息。
  
- nickname: '花猪のBLOG'  #友链名称
  avatar: https://gcore.jsdelivr.net/gh/CNhuazhu/Image/avatar.jpg  #友链头像
  site: https://cnhuazhu.top/  #友链地址
  info: 致力于Web应用开发与Python学习,研究,开发。  #友链说明
  
- nickname: 'This is a Lengux blog'
  avatar: http://q1.qlogo.cn/g?b=qq&nk=1217671134&s=100
  site: https://xushao.top/
  info: 这个人很懒，没有介绍他自己。

这里只配置了三个友链，多个的配置方式相同。

添加打赏功能

首先，要将支付宝或者微信打赏的二维码下载下来，可以修剪一下，放在博客根目录/node_modules/hexo-theme-next/source/images文件夹中。

修改主题配置文件：

1
2
3
4
5
6
7
8
9
10
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: false

reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

添加雪花

  1. 在博客根目录/node_modules/hexo-theme-next/source/js下新建文件snow.js，添加如下代码：
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
(function($){
	$.fn.snow = function(options){
	var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
	documentHeight 	= $(document).height(),
	documentWidth	= $(document).width(),
	defaults = {
		minSize		: 10,
		maxSize		: 20,
		newOn		: 1000,
		flakeColor	: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
	},
	options	= $.extend({}, defaults, options);
	var interval= setInterval( function(){
	var startPositionLeft = Math.random() * documentWidth - 100,
	startOpacity = 0.5 + Math.random(),
	sizeFlake = options.minSize + Math.random() * options.maxSize,
	endPositionTop = documentHeight - 200,
	endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
	durationFall = documentHeight * 10 + Math.random() * 5000;
	$flake.clone().appendTo('body').css({
		left: startPositionLeft,
		opacity: startOpacity,
		'font-size': sizeFlake,
		color: options.flakeColor
	}).animate({
		top: endPositionTop,
		left: endPositionLeft,
		opacity: 0.2
	},durationFall,'linear',function(){
		$(this).remove()
	});
	}, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
	    minSize: 5, 	// 定义雪花最小尺寸 
	    maxSize: 50,	// 定义雪花最大尺寸 
	    newOn: 500  	// 定义密集程度，数字越小越密集 
    });
});
  1. 在博客根目录/node_modules/hexo-theme-next/layout/layout.njk下添加：

<script src="/js/snow.js"></script>

  1. 注意事项：需要注意的就是要引入jquery，代码：

<script type="text/javascript" src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

配置黑暗模式

  1. 安装

npm install hexo-next-darkmode --save

  1. 修改博客根目录/node_modules/hexo-theme-next/_config.yml文件，确保黑暗模式选项是关闭状态
1
2
# Dark Mode
darkmode: false

再添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Darkmode JS
# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.js
darkmode_js:
  enable: true
  bottom: '64px' # default: '32px'
  right: 'unset' # default: '32px'
  left: '32px' # default: 'unset'
  time: '0.5s' # default: '0.3s'
  mixColor: 'transparent' # default: '#fff'
  backgroundColor: 'transparent' # default: '#fff'
  buttonColorDark: '#100f2c' # default: '#100f2c'
  buttonColorLight: '#fff' # default: '#fff'
  isActivated: true # default false
  saveInCookies: false # default: true
  label: '🌓' # default: ''
  autoMatchOsTheme: false # default: true
  libUrl: # Set custom library cdn url for Darkmode.js

其中

isActivated: true 默认用于激活黑暗模式，始终与saveInCookies: false和autoMatchOsTheme: false一起使用。同时，需要在NexT主题的配置文件中设置pjax: true，即启用Pjax。

配置代码块

新版NexT主题集成了一键复制功能，只需要在主题配置文件中更改即可，不用添加代码，如图所示：

添加每日一言或诗

今日诗词官方API文档：https://www.jinrishici.com/doc/.

  1. 为子标题添加今日诗词

使用方法：博客根目录配置文件_config.yml中的subtitle上加入代码<span id="jinrishici-sentence">正在加载今日诗词....</span><script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>，一行即可。

  1. 为博客文章添加今日诗词、每日一言

主题/source/css/_schemes/你所使用的主题/

使用的哪个主题就直接在那个主题下的index.styl文件中更改，直接在后面加上如下代码：

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/*诗*/
.poem-wrap {
    position: relative;
    width: 730px;
    max-width: 80%;
    border: 2px solid #797979;
    border-top: none;
    text-align: center;
    margin: 80px auto;
}
 
.poem-wrap h1 {
    font-size: 30px;
    position: relative;
    margin-top: -20px;
    display: inline-block;
    letter-spacing: 4px;
    color: #797979
}
 
.poem-wrap p {
    width: 70%;
    margin: auto;
    line-height: 30px;
    color: #797979;
}
 
.poem-wrap p#poem {
    font-size: 25px;
}
 
.poem-wrap p#info {
    font-size: 15px;
    margin: 15px auto;
}
 
.poem-border {
    position: absolute;
    height: 2px;
    width: 27%;
    background-color: #797979;
}
 
.poem-right {
    right: 0;
}
 
.poem-left {
    left: 0;
}
 
@media (max-width: 685px) {
    .poem-border {
        width: 18%;
    }
}
 
@media (max-width: 500px) {
    .poem-wrap {
        margin-top: 60px;
        margin-bottom: 20px;
        border-top: 2px solid #797979;
    }
 
    .poem-wrap h1 {
        margin: 20px 6px;
    }
 
    .poem-border {
        display: none;
    }
}

然后在你想添加诗词的.md文件中添加如下代码：

一诗

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="poem-wrap">
  <div class="poem-border poem-left"></div>
  <div class="poem-border poem-right"></div>
    <h1>念两句诗</h1>
    <p id="poem">挑选中...</p>
    <p id="info">

  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
  <script type="text/javascript">
    jinrishici.load(function(result) {
      poem.innerHTML = result.data.content
      info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
      document.getElementById("poem").value(poem);
      document.getElementById("info").value(info);  
  });
  </script>
</div>

一言

1
2
<p id="hitokoto">获取中...</p>
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

也可以直接在.md或者.html文件中插入如下代码显示每日诗词：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="poem-wrap">
  <div class="poem-border poem-left"></div>
  <div class="poem-border poem-right"></div>
    <h1>念两句诗</h1>
    <p id="poem">挑选中...</p>
    <p id="info">

  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
  <script type="text/javascript">
    jinrishici.load(function(result) {
      poem.innerHTML = result.data.content
      info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
      document.getElementById("poem").value(poem);
      document.getElementById("info").value(info);  
  });
  </script>
</div>

也可在文本中插入如下代码显示每日一言：

1
2
<p id="hitokoto">获取中...</p>
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

去掉顶部黑线

NexT主题顶部的黑线让人看着难受，去掉它的办法就是将主题/layout/_layout.njk文件中的下面这句话注释掉就行。

<div class="headband"></div>

播放网络视频

插入iframe代码

1
<iframe width="951" height="535" src="https://www.youtube.com/embed/m4iRwp_FWxI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

提高加载速度

有几种办法：

  1. vercel
  2. netlify
  3. cloudflare
  4. 域名绑定GitHub page页面，然后使用国内cdn提供商加速，如七牛云cdn、又拍云cdn、腾讯云cdn、阿里云cdn，这些都需要域名备案才具有更好的性价比。
  5. hexo主题优化，替换谷歌字体，如下：

修改主题配置文件_config.yml，找到其中的font配置，设置为true，编辑host，替换原来的https://fonts.googleapis.com

1
2
3
4
5
font:
  enable: true

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host: https://fonts.lug.ustc.edu.cn/

替换JQuery服务，编辑主题配置文件_config.yml，找到vendors配置，自定义custom_cdn_url，如下：

custom_cdn_url: https://code.jquery.com/jquery-2.0.3.min.js

  1. hexo懒加载插件，在配置文件中配置图片lazyload，进一步减少网页呈现的时间。
  2. hexo代码压缩插件。
  3. hexo-offline-popup插件。

添加valine评论

Why remove the valine comment in the latest version？.

解决办法

  1. 换一个评论系统，完事…
  2. 参考Hexo NexT Valine.

① powershell管理员模式下cd到博客根目录，执行npm install next-theme/hexo-next-valine

② 进入主题配置文件夹，加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: false
  appId:  # your leancloud application appid
  appKey:  # your leancloud application appkey
  serverURLs: # When the custom domain name is enabled, fill it in here
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  meta: [nick, mail, link] # Custom comment header
  pageSize: 10 # pagination size
  visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP

③ leancloud. 创建开发板项目(已有的无需再创建)，获取appid和appkey，并将其填入上面的appId和appKey中

④ 调试，一般情况下到这里就完成了，不过因为我的是next主题，所以有点特殊，经过上述配置后，调试时，在文章底部会看到如下问题：

解决办法：进入leancloud控制台，在设置-应用凭证里复制REST API 服务器地址，粘贴到上面代码中的serverURLs中，即可解决。

valine评论设置邮件提醒

  1. 打开leancloud官网登录进入控制台，然后按照图示来(PS: 就为了找到这个Git部署，我花了好长时间，真的感觉自己眼睛不大好使啊😂)

注意：可能一开始看不到Git部署，要先部署项目，然后选择Git部署；

  1. 选择配置Git

  1. 配置Git填写https://github.com/DesertsP/Valine-Admin(随着时间的更改，可能会因为该仓库下的node版本过低而导致部署失败，这时就去GitHub上搜索新的Valine-Admin)，分支填写master，点击部署；

  1. 设置6个变量；

注意：

SMTP_PASS就是邮箱授权码，需要支持smtp，如何获取请百度或者谷歌。

SMEP_SERVICE支持列表https://nodemailer.com/smtp/well-known/#supported-services.

SMTP_USER就是邮箱地址。

  1. 需要设置邮箱的休眠策略，需要有管理后台的必须域名备案(国际版好像不用，但我用的是国内开发版)，然后参考上面的文章即可，没有备案的可忽略，表达式填写0 */20 7-23 * * ?

  1. 重启服务，重新部署，不要忘记填写分支master

  1. 到这里就结束了，不用更新hexo，等待一会儿之后，在博客网站里面提交评论时就会收到邮件提醒了。

添加waline评论

官网：https://waline.js.org/.

官网上介绍的很详细，这里就不多介绍了，需要注意的是，添加环境变量时，前面的是名称，后面的是值，如下图：

关于next主题配置执行hexo g出现问题

这是next主题的原因，我使用其它主题都没出现过这种情况，关闭杀毒软件，退出窗口重新进入再执行hexo g命令即可，如果是其它的问题就可能不是主题的原因了，需要另外分析了。

推荐其它几个好看的主题

  1. GitHub - blinkfox/hexo-theme-matery: A beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。国内访问：http://blinkfox.com.
  2. GitHub - fluid-dev/hexo-theme-fluid: :ocean: 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo.
  3. GitHub - zhaoo/hexo-theme-zhaoo: 🐳 A simple theme for Hexo.
  4. GitHub - anzhiyu-c/hexo-theme-anzhiyu: 安知鱼主题，这是一个简洁美丽的hexo主题。.

参考文章

  1. Hexo主题配置-Next.
  2. 【Hexo】全面改造属于你的个性化博客.
  3. Hexo添加雪花飘落效果_慕课手记 (imooc.com).
  4. Hexo添加雪花动态效果背景 | 花猪のBlog (gitee.io).
  5. GitHub - rqh656418510/hexo-next-darkmode: Add Dark Mode support for NexT.
  6. hexo(next)——每日一言、今日诗词_hexo 诗词-CSDN博客.
  7. Hexo添加两句诗词 | 花猪のBlog (cnhuazhu.top).
  8. 【Hexo】全面改造属于你的个性化博客 - 掘金 (juejin.cn).
  9. hexo(next)——每日一言、今日诗词_hexo 诗词-CSDN博客.
  10. hexo博客插入音视频-腾讯云开发者社区-腾讯云 (tencent.com).
  11. Hexo NexT主题自定义友链页面.
  12. Hexo页面加载速度优化.
  13. Hexo博客再次完善_hexo 图片懒加载-CSDN博客.
  14. Hexo博客技巧：提升博客访问速度.
  15. Next主题设置-安装Valine和Artitalk.
  16. GitHub - zhaojun1998/Valine-Admin: 一个 Valine 的拓展应用，用来增强 Valine 的邮件通知。.
  17. 为Valine评论系统添加邮件提醒_fluid主题实现valine评论通知系统-CSDN博客.
  18. GitHub - DesertsP/Valine-Admin: 🔥A simple comment system based on LeanCloud and Valine.。
  19. 关于时区的一个问题 · Issue #63 · DesertsP/Valine-Admin (github.com)。
  20. 博客更换为Waline评论系统.
  21. 关于waline国内无法使用的解决方案 （vercel.app国内无法使用问题）.
  22. 使用Hexo+NexT8+Waline搭建评论系统 .
  23. [Bug0053] Hexo主题Butterfly添加评论功能Valine、Waline评论不成功.
  24. hexo+Next8.1.0+waline1.6.0踩坑记录.
  25. 可参考文章(next主题配置美化)：《Hexo博客优化之Next主题美化》、《安装并优化next主题》
  26. hexo下NexT的主题背景及框体透明度修改_hexo 透明度-CSDN博客.
  27. zhaoo (izhaoo.com).
  28. zhaoo/hexo-theme-zhaoo: 🐳 A simple theme for Hexo (github.com).
  29. https://cloud.tencent.com/developer/article/1964392.
  30. https://zhuanlan.zhihu.com/p/463548944?utm_id=0.
  31. https://blog.csdn.net/zpf1813763637/article/details/128340109.
  32. https://blog.csdn.net/Hodors/article/details/103226958.
  33. https://www.cnblogs.com/ssgeek/p/10854839.html.
  34. https://developer.qiniu.com/kodo/5972/kodo-browser.