Hello hexo

HEXO 加速速度优化二

carlzeng.com 加载8-10s 完成
优化页面的css?最大的文件all.min.css

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
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css	

css/all.min.css 替换为:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/regular.min.css
失去了图标,再换一个
css/v5-font-face.min.css
css/brands.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/fontawesome.min.css

font-awesome 替代?
有解决办法,可是目前还没有掌握替换的方法,暂时先用轻量级的(无图标)的css/regular.min.css
替换掉:css/all.min.css; 页面加载速度提升很明显。
TODO: 替换font-awesome并加载图标。

is that make the image load faster?

https://wsrv.nl/?url=https://content.evernote.com/shard/s122/sh/6ae8e607-5752-4cdb-97e9-9ca27c67ac34/n2UiZ8dhaEX3-Dps8Ws25YQ12vx-31PUft2pMAg5ibbAf3qG4CGC2jR0qQ/deep/0/image.png&h=300

压缩图片:https://www.iloveimg.com/zh-cn/compress-image
done upload in local and server, next github

anime.min.js 这个不知道怎么取消掉;还能加速

优化使用CDN查询:https://cdnjs.com/libraries/font-awesome/6.5.0

下一步图片优化:https://wsrv.nl/?url=https://content.evernote.com/shard/s122/sh/6ae8e607-5752-4cdb-97e9-9ca27c67ac34/n2UiZ8dhaEX3-Dps8Ws25YQ12vx-31PUft2pMAg5ibbAf3qG4CGC2jR0qQ/deep/0/image.png&h=300

后记:发现仅仅替换_vendors.yml中file: css/regular.min.css,会导致Chrome的验证失败而block掉这个css

Failed to find a valid digest in the ‘integrity’ attribute for resource ‘https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/regular.min.css‘ with computed SHA-256 integrity ‘9eDbr7V6F0HA2UC04tZP05BoY1A/SpEM4qcNQaEcCJ4=’. The resource has been blocked.

是的,有SHA验证,还发现cdnjs还把原先的SHA-256升级到下面(目前)的sha512。有这个必要吗?浪费CPU资源(当然,绝大部分时候CPU资源绝大多数都是拿来浪费的)

节选_vendors.yml文件如下:

1
2
3
4
5
6
fontawesome:
name: '@fortawesome/fontawesome-free'
version: 6.5.0
file: css/regular.min.css
alias: font-awesome
integrity: sha512-De7THrOr7M9dmDMBVMfyDfYypLtaH9KnvpfZ3PENIwAS0Od6Eh0M0EMucYwouLEZSaPL/PFQRQzg2Zir4tF2UQ==

HEXO配置JS CSS 文件的CDN

1
2
3
4
5
vendors:
internal: local
plugins: custom
# Custom CDN URL
custom_cdn_url: https://cdn.staticfile.org/${cdnjs_name}/${version}/${cdnjs_file}

这样设置后,JS和CSS(以及css文件中的.woff2大文件)才会走国内CDN线路,优化后本地访问体验提升。转用七牛云 https://www.staticfile.org/

参考章节:GitHub Pages + Hexo 搭建个人博客及 Next 主题配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
npm install hexo-next-darkmode --save 

编辑配置文件
# 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: false # default false
saveInCookies: true # default: true
label: '🌓' # default: ''
autoMatchOsTheme: true # default: true
libUrl: https://cdn.staticfile.org/Darkmode.js/1.5.7/darkmode-js.min.js # Set custom library cdn url for Darkmode.js

也很赞,另外把js也该到七牛CDN

绝大部分引用都ok,发现一个七牛CDN的CORS配置问题,涉及一下这些文件(含版本):

1
2
3
4
5
6
7
8
https://cdn.staticfile.org/font-awesome/6.5.0/css/all.min.css
https://cdn.staticfile.org/social-share.js/1.0.16/fonts/iconfont.woff
https://cdn.staticfile.org/social-share.js/1.0.16/fonts/iconfont.ttf
https://cdn.staticfile.org/social-share.js/1.0.16/fonts/iconfont.woff

https://cdn.staticfile.org/next-theme-pjax/0.6.0/pjax.min.js
https://cdn.staticfile.org/quicklink/2.3.0/quicklink.umd.js
https://cdn.staticfile.org/hexo-generator-searchdb/1.4.1/search.js

CORS error

还是切换回来local吧,因为www本身就在CDN之下,天朝访问速度优化得不错了

下一步考虑换到
https://www.bootcdn.cn/hexo-theme-next/

WARN  Dependencies for `plugins: local` not found. The default CDN provider CDNJS is used instead.
1
2
3
4
npm install @next-theme/plugins

#然后把配置文件更新
plugins: local

还是建议 npm uninstall @next-theme/plugins 然后使用默认的cdnjs

https://getquick.link
quicklink:
enable: true
这就是哪个问题的配置;修改成

1
2
3
4
5
quicklink:
enable: true
delay: true
timeout: 1000
priority: false

artalk的头像配置
参考:Hexo-添加Artalk评论教程

文本颜色标签

1
2
3
4
5
6
7
通过 note 标签可以为段落添加背景色,语法如下:

{% note class %}
文本内容 (支持行内标签)
{% endnote %}

支持的 class 种类包括 default primary success info warning danger,也可以不指定 class。

起到提醒的作用,还有这么多类型可以指定颜色,个人很喜欢

还有一种超级简易的方式是 使用大于号(>);语法是

1
> 文本内容

文本内容

本章节感谢:https://whatsid.me/2019/08/21/hexo-markdown-syntax/

邮件订阅

成功选用follow.it
https://blog.ccknbc.cc/posts/add-email-subscription-to-your-hexo-blog/

Generate RESTful json data for Hexo plugins.
https://github.com/yscoder/hexo-generator-restful

3.0 构建Towxml
新构建出来的文件在dist目录下,将dist目录复制到你的小程序项目中并将目录名称改为towxml即可
小程序项目, 不清楚wx如何组织的,没有在公众号的管理中使用,找不到。

Briefcake它的界面就很简洁
最后的最后,和之前介绍浏览器订阅一样,你还是得坚持内容产出,不要把它当作广告推销去使用而违背了初衷,因为我们只是博客,仅此而已,虽然现在阅读人数很少了,但哪天真的有人订阅了并且愿意等着你更新的话,也许值得曾经付出的默默码字的时光吧

Hexo 博客导流微信公众号
https://github.com/rqh656418510/hexo-readmore
https://www.techgrow.cn/posts/c86372a2.html
https://open.techgrow.cn/#/register

hexo to WX小程序
尝试 Hexo 转小程序

https://github.com/sbfkcel/towxml/issues/60

social-share

wechat_qrcode
反复安装,测试切换三个不同的类型needmoreshare, likely, sharejs,
最后启用sharejs,另外由于jsdelivr被墙,切换为unpkg,找到合适的文件地址:
js: //unpkg.com/social-share.js@1.0.16/dist/js/social-share.min.js
css: //unpkg.com/social-share.js@1.0.16/dist/css/share.min.css
social-share 能用吧,偶尔加载不出来,需要刷新页面
感谢列表:https://ekaros.cn/2020/03/01/fix-share-button/
https://github.com/theme-next/hexo-next-share

2023年12月14日 unpkg.com 替换到 七牛cdn

Multi-languages generator for hexo.

https://github.com/Jamling/hexo-generator-i18n
Next:
- 如何让页面的点击,跳转等都携带语言选项,也就是继承最新的语言选择内容。
- 如果能用Chatgpt自动翻译页面内容,哪怕是生产文章简介,汇总,总结/小结也能提高体验度。
- 发现目前不是真正的多语言版,sitemap也没有体现,语言也没有全部‘翻译’ TODO

取消google的分析,占用太多资源

hexo 语言切换 添加到sidebar

站内相连接

/202309222329.html
1
2
3
4
5
{% post_path hello-world %}
{% post_path 文章文件名(不要后缀)%})

简化模版:
<a href="{% post_path hexo %}">hexo</a>

跳转到站外

https://github.com/naicfeng/hexo-filter-links
作者说明:https://cuojue.org/read/hexo-filter-links.html

一次完整的Hexo写作流程

/404.html

总结来说,最常用的套路就是

  1. hexo g; hexo s本地预览,再更改(文章内容自动实时状态),直到满意为止

  2. hexo d; 或者hexo g &&hexo d远程部署。

  3. HTTPS_PROXY=”socks5://127.0.0.1:7890” hexo g && hexo d

新建一遍随笔文章

1
hexo n 0模版 xxx

调整back to top到页面右下角,方便返回头部。

手机端:显示目录!

直接编辑 themes 》 next 》source》 css 》 _schemes 》Pisces》_sidebar.styl
+tablet-mobile() {
//display: none;
display: block;
}

如何编写tab

1
2
3
4
{% tabs 名称%}
<!-- tab -->
<!-- endtab -->
{% endtabs %}

hexo 如何写多个tag

类似与数组,必须使用逗号, 隔开各个tag
比如:[AI,人脸识别,人脸对比,机器人脸比对,批量人脸比对]

第二种方法是:

  • 如何使用hexo
  • hexo

关于github如何重新运行deployment:发布文章至github.io

打开链接:https://github.com/chuanzhuo/blog/actions/runs/6364108418/job/17311236272
Re-run jobs

历史记录和查看当前workflow运行的情况:https://github.com/chuanzhuo/blog/actions

如何插入代码段?

前后单独段落的三个撇:```

1
$ sudo -i

插入本地图片

20231210更新:

图片请务必使用格式:图片名称

这样可以支持内容的多平台发布,而不仅仅局限于hexo

20231030最新更新:
请务必使用lazy load的方式添加图片,可以有效提高网站的访问速度和友好体验度

TODO:转化现有的img标签为上面这样lazy load的格式

这里主要参考这篇文章赵大宝hexo-images

举例说明(设置大小和样式) { % img http://www.viemu.com/vi-vim-cheat-sheet.gif 200 400 vi-vim-cheat-sheet % }
这个功能太赞了,我终于可以链接我的Evernote存储的Skitch应用(发布的链接)来方便地展示图片了!

第二种支持的图片语法(比较通用)

1
<img src= https:// >

让hexo的首页只显示文章的部分内容而不是全部
在文章的 front-matter 中添加 description,并提供文章摘录
如何加入到模版中,每次hexo new “”的时候,自动有这个标签?

使用表格

首页 配置页
1
2
3
4
| 标题1 | 标题2 | 标题3 |
| ------ | ------ | ------ |
| 文本好短 | 文本不短也不长 | 文本好长文本好长文本好长 |
| 文本好长文本好长文本好长 | 文本好短 | 文本不短也不长 |

官方中文文档

https://hexo.io/zh-cn/docs/writing.html

大方向(大体)思路

https://cloud.tencent.com/developer/article/1546392

步骤参考

使用hexo在GitHub上搭建个人博客
https://developer.aliyun.com/article/940387

存储位置:

https://github.com/chuanzhuo/blog

Hexo Markdown 简明语法手册

怎么安装新的hexo插件,步骤如下:

比如:https://github.com/next-theme/hexo-generator-searchdb

  1. Installation

    • $ npm install hexo-generator-searchdb
  2. Detail Configuration

hexo next 不生成tag页面解决方案

https://blog.csdn.net/yinjiangQAQ/article/details/103951416

hexo 阅读排行榜

感觉不好弄,而且需要依赖另外一个计数系统 https://www.jianshu.com/p/27b971d84f76

hexo 自动生成url, 文章URL设置

一直没有安装那个自定义文章URL的插件,主要是考虑到个人喜好:尽量避免安装过多插件(仅留下长期使用的)

  1. 今日切换到懒人模式, 使用hash值
    这个方案虽然无法自定义文章url,但是hash值是根据文件名和日期自动生成的,只要我不修改文章标题(同文件名)
    url值就会永久保留。
    虽然无法做到SEO友好的url,但我不能给我自己增加开启一遍新的随笔的动力,不给自己添堵。
  2. 最终切换为对人类更友好的日期模式。

参考:
hexo文章url设置
Hexo永久链接(Permalinks)生成方式比较

Note:宝塔 部署 Hexo,没有意义。hexo 写博客流程

github.io
还是选择使用hexo.io的构架,能长久!文档,本地编辑,git。
不依赖vps或服务器。
.md文件的编辑罢了
放弃方案:使用宝塔面板快速搭建Typecho个人博客(图文教程)

hexo这种模式的优点

hexo

hexo文末 添加本文的url

解决慢慢迁移到新blog的长远目标

20231024 文末添加当前文章链接和版权声明
hexo-addlink 文末添加当前文章链接和版权声明 https://github.com/acwong00/hexo-addlink
原来这个插件已经6-7年前的了,无效了。直接使用NexT中的设置即可解决
文章链接和版权声明需求。

1
2
3
4
5
6
7
creative_commons:
# Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
license: by-nc-sa
# Available values: big | small
size: small
sidebar: true
post: true

可是生成的本文链接地址不正确(不是https://chuanzhuo.github.io/blog/)

文末添加当前文章日期信息

编辑NexT中的post-followme.njk
文件目录:》themes〉next》layout〉_partials 》 post
添加如下到div中(从#33行以下是添加的),为方便你直接使用,贴出修改后的.njk全文:

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
<div class="followme">
<span>{{ __('follow_me.welcome') }}</span>

<div class="social-list">
{%- for name, value in theme.follow_me %}
{%- set link = value.split('||')[0] | trim %}
{%- set icon = value.split('||')[1] | trim if value.split('||')[1] else '' %}

<div class="social-item">
{%- if link.endsWith('.png') or link.endsWith('.jpg') %}
<span class="social-link">
<span class="icon">
<i class="{{ icon }}"></i>
</span>

<span class="label">{{ name }}</span>
</span>

<img class="social-item-img" src="{{ url_for(link) }}">
{%- else %}
<a target="_blank" class="social-link" href="{{ url_for(link) }}">
<span class="icon">
<i class="{{ icon }}"></i>
</span>

<span class="label">{{ name }}</span>
</a>
{%- endif %}
</div>
{%- endfor %}
</div>

{%- set date_diff = date(post.date) != date(post.updated) %}
{%- set time_diff = time(post.date) != time(post.updated) %}
{%- if theme.post_meta.created_at %}
<span>
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">{{ __('post.posted') }}</span>

{%- if not date_diff and time_diff and theme.post_meta.updated_at.enable and theme.post_meta.updated_at.another_day %}
{%- set create_title = __('post.created') + __('symbol.colon') + full_date(post.date) + ' / ' + __('post.modified') + __('symbol.colon') + time(post.updated) %}
{% else %}
{%- set create_title = __('post.created') + __('symbol.colon') + full_date(post.date) %}
{%- endif %}

<time title="{{ create_title }}" itemprop="dateCreated datePublished" datetime="{{ moment(post.date).format() }}">{{ date(post.date) }}</time>
</span>
{%- endif %}
{%- if theme.post_meta.updated_at.enable and (not theme.post_meta.updated_at.another_day or date_diff or not theme.post_meta.created_at) %}
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">{{ __('post.edited') }}</span>
<time title="{{ __('post.modified') + __('symbol.colon') + full_date(post.updated) }}" itemprop="dateModified" datetime="{{ moment(post.updated).format() }}">{{ date(post.updated) }}</time>
</span>
{%- endif %}
</div>

关于404页面

需要在html头添加一个自动跳转的功能
(由于所有文章生成的链接有变动,导致404页面变得重要了)
编辑位置 /source/404/index.md

1
2
3
4

<script>
document.location = 'https://chuanzhuo.github.io/blog/'
</script>

最终会生成/404.html;下一步是如何获取传输过来的url来自动搜索到原先链接的内容

hexo使用Artalk评论系统

这个链接介绍的是使用方法,着重在前端配置和应用层面
https://www.iots.vip/post/hexo-artalk-comment.html

痛点:目前我不知道我的那些文章是最近被关注的?
https://statcounter.com/p12934590/visitor/

blog的文章浏览的监控/统计,
即便是一个简单的列表,今日或昨日,有多少人浏览了那些html页面,排行榜
这样我就可以针对这些文章进行,更新,改进,迭代。

可否直接使用http的服务?避免使用域名的门槛问题
不可以

Artalk 的IP归属地检测,仍然失效,如何解决?(不知道如何调试)
已下载并配置:./data/ip2region.xdb
移动4G网络仍然无法访问https://@.carlzeng.com:@
具体步骤和笔记详见:(《Hexo定制之家宽部署artalk评论系统》)[https://www.carlzeng.com/202310261222.html]
外网正常后,IP归属地检测自动就正常了

3年或6-7年以前的hexo插件就不要考虑了

比如:https://github.com/huiwang/hexo-recommended-posts
实践了半天,也可能是服务器早就挂了
https://www.npmjs.com/package/hexo-recommended-posts?activeTab=explore
严重质疑这个npm,保留一堆过时的包。

添加最近的文章 How to add recent posts to Next theme(v8.x.x)

https://egbert-yu-ting.github.io/posts/68394953/
调整半天的css, 在sidebar.njk中;务必是在_data文件夹下。
In the /blog/source/ path, establish _data/sidebar.njk file under source/ directory, and add contents into sidebar.njk as below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- recent posts -->
{%- if theme.recent_posts %}
<div class="sidebar-inner sidebar-overview-active animated fadeInUp">
<div class="links-of-blogroll-title recent-posts-title">
<i class="fa fa-history {{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list recent-posts-list">
{%- set posts = site.posts.sort('-date').toArray() %}
{%- for post in posts.slice('0', '5') %}
<li class="popular-posts-item">
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="">
{{ post.title }}
</a>
</li>
{%- endfor %}
</ul>
</div>
{%- endif %}

解决每次hexo clean后都要手动添加wechat_channel.png到public目录

由于hexo clean会删除public文件夹,需要把固定住的突破保存到》themes〉next》source〉image

新版hexo 的next 怎么把分页的数量调多点?

打开 ./themes/next/layout/_partials/pagination.njk 文件,
找不到 mid_size 字段,指向next_paginator函数。
打开 ./themes/next/script/helpers/next-paginator.js 文件
仅修改mid_size字段内容,修改完效果如下:

1
2
3
4
5
6
let paginator = this.paginator({
prev_text: '<i class="fa fa-angle-left"></i>',
next_text: '<i class="fa fa-angle-right"></i>',
mid_size : 5,
escape : false
});

hexo md 渲染 html 给文字自动添加站内链接

<img class="lozad" data-src="">
关闭了# Use Animate.css to animate everything. 
motion: enable: false

how to hide the need password encrypted article?

或者直接要求付款后查阅?
npm install hexo-hide-posts --save
hidden: true

新增 “相关文章” section到页脚位置,方便手机用户衍生阅读

done
编辑一下post-followme.njk

SEO优化之Google收录

收到Google的邮件(New reason preventing your pages from being indexed)
解决思路:Nginx Proxy Manager修复笔记

网址缩短 url

短网址
https://t.hk.uy/b5kg
https://netlify.carlzeng.com 暂不支持您输入的域名(后缀)。
使用这个网址来缩短: https://sage-halva-bac054.netlify.app
https://t.hk.uy/b6qy
https://t.hk.uy/b9tw (南方的网络可访问)

缺陷:用手机(+异地)访问这些链接,需要点击确认页面的“继续访问”按钮

轻松缩短链接
https://goo.su/BwRaE1T
https://goo.su/prTA5T5

缺陷:用手机(+异地)访问这些链接,会有长达好几十秒的广告和等待

縮短網址產生器
https://tinyurl.com/yurgh2fm

老牌免费短网址工具
http://s8u.cn/HIG7o
优美,但无法接受:先跳转到一个链接以后,在恢复原始网址。

转变思路:
还是用自己的域名做Nname更短,
[done]切换www.carlzeng.com 到 netlify

a.carlzeng.com
新增github.carlzeng.com; 修改github deployment的CNAME互相对应到github.carlzeng.com
修改www.carlzeng.com cname指向sage-halva-bac054.netlify.app
pending commit and push….

详细请参考独立的链接:实测Docker搭建短链接服务YOURLS

实践证明,那些related_posts weight 参数是有效的!
必须要要在源码的位置修改才生效!
比如filter_threshold: 0.001 #必须到源码调节一下这些参数才生效,
位置(我的环境):/Users/carlzeng/AppTesting/blog/node_modules/hexo-related-posts/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
新增 “相关文章” section到页脚位置,方便手机用户衍生阅读
{%- if theme.related_posts.enable %}
{%- if theme.pjax %}
<div class="pjax">
{%- endif %}
{%- if page.related_posts and page.related_posts.length > 0 %}
<div class="sidebar-inner sidebar-post-related">
<div class="animated">
{{ partial('_partials/post/post-related.njk') }}
</div>
</div>
{%- endif %}
{%- if theme.pjax %}
</div>
{%- endif %}
{%- endif %}
主要的配置参数说明

以后要重视填写tags, categories,也符合我的个人习惯。
分享我个人目前修改过的配置,适合我的参数:

1
2
3
4
5
6
7
8
9
10
11
12
    filter_threshold: 0.004,
related_count: 8,
weight: {
title: 0.05,
description: 0.05,
keywords: 0.01,
tags: 0.5,
categories: 0.5,
text: 1
},
stemmers: ['en'],
....
filter_threshold no 0.2 During related posts calculation some number is going to be calculated. The more value means that the posts more similar. So, if you see that it calculates "unrelated" posts, you can slightly increase this value.
related_count no 5 Number of posts that will be included into final list of related posts.
weight no The plugin compares title, description, keywords, tags, categories and text. You can adjust each component value in final estimate by increasing/descreasing corresponding value.
weight.title no 0.05 Weight for post's title.
weight.description no 0.05 Weight for post's description.
weight.keywords no 0.01 Weight for post's keywords.
weight.tags no 0.005 Weight for post's tags.
weight.categories no 0.005 Weight for post's categories.
weight.text no 1 Weight for post's content.
发布带搜索功能的404页面

20231107 改善用户体验度,友好的404页面(原先是直接后台跳转到首页)
可以直接输入搜索框内容来检索全站信息,尝试通过document.referrer来获取原始链接,然后自动搜索来衔接用户浏览,失败了,主要是document.referrer被浏览器限制了很多而无法获取。小伙伴如果有解决方案,欢迎探讨。

/404.html页面:
如何引导到home页面+search页面,把提取自url内的信息提交到搜索内容框中
404 添加浏览监控

添加/search页面

用于文章多站发布时,回溯到源站点;这样标题就自动成为搜索关键字

格式已添加到post模版:

1
新版原文: https://www.carlzeng.com/search?q={{ title }}

如何批量添加这个致所有近期的文章中?

Next

Best

个性化需求沟通 扫客服加V加群: