Hello hexo
HEXO 加速速度优化二
carlzeng.com 加载8-10s 完成
优化页面的css?最大的文件all.min.css
1 | https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css |
后记:发现仅仅替换_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 | fontawesome: |
HEXO配置JS CSS 文件的CDN
1 | vendors: |
这样设置后,JS和CSS(以及css文件中的.woff2大文件)才会走国内CDN线路,优化后本地访问体验提升。转用七牛云 https://www.staticfile.org/
参考章节:GitHub Pages + Hexo 搭建个人博客及 Next 主题配置
1 | npm install hexo-next-darkmode --save |
也很赞,另外把js也该到七牛CDN
绝大部分引用都ok,发现一个七牛CDN的CORS配置问题,涉及一下这些文件(含版本):
1 | https://cdn.staticfile.org/font-awesome/6.5.0/css/all.min.css |
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 | npm install @next-theme/plugins |
还是建议 npm uninstall @next-theme/plugins 然后使用默认的cdnjs
https://getquick.link
quicklink:
enable: true
这就是哪个问题的配置;修改成
1 | quicklink: |
artalk的头像配置
参考:Hexo-添加Artalk评论教程
文本颜色标签
1 | 通过 note 标签可以为段落添加背景色,语法如下: |
起到提醒的作用,还有这么多类型可以指定颜色,个人很喜欢
还有一种超级简易的方式是 使用大于号(>);语法是
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.html1 | {% post_path hello-world %} |
跳转到站外
https://github.com/naicfeng/hexo-filter-links
作者说明:https://cuojue.org/read/hexo-filter-links.html
一次完整的Hexo写作流程
/404.html
总结来说,最常用的套路就是
hexo g; hexo s本地预览,再更改(文章内容自动实时状态),直到满意为止
hexo d; 或者hexo g &&hexo d远程部署。
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 | {% tabs 名称%} |
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 | | 标题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
Installation
- $ npm install hexo-generator-searchdb
hexo next 不生成tag页面解决方案
https://blog.csdn.net/yinjiangQAQ/article/details/103951416
hexo 阅读排行榜
感觉不好弄,而且需要依赖另外一个计数系统 https://www.jianshu.com/p/27b971d84f76
hexo 自动生成url, 文章URL设置
一直没有安装那个自定义文章URL的插件,主要是考虑到个人喜好:尽量避免安装过多插件(仅留下长期使用的)
- 今日切换到懒人模式, 使用hash值
这个方案虽然无法自定义文章url,但是hash值是根据文件名和日期自动生成的,只要我不修改文章标题(同文件名)
url值就会永久保留。
虽然无法做到SEO友好的url,但我不能给我自己增加开启一遍新的随笔的动力,不给自己添堵。 - 最终切换为对人类更友好的日期模式。
参考:
hexo文章url设置
Hexo永久链接(Permalinks)生成方式比较
Note:宝塔 部署 Hexo,没有意义。hexo 写博客流程
github.io
还是选择使用hexo.io的构架,能长久!文档,本地编辑,git。
不依赖vps或服务器。
.md文件的编辑罢了
放弃方案:使用宝塔面板快速搭建Typecho个人博客(图文教程)
hexo这种模式的优点
可以极其方便地不停的更新文章内容,版本不停迭代,(不再像cnblogs发布后,不搭理文章了,由于维护很麻烦,人的惰性成为一大阻力)
样式和设置随时更新,极其方便的hexo -g即可本地实时预览到(hexo -s 如果一直开着,会自动动态刷新)
不需要VPS,不受制于具体的平台或服务
Next 说明:https://theme-next.js.org/docs/theme-settings/footer.html?highlight=copyright
设置了security插件,说明:
https://github.com/D0n9X1n/hexo-blog-encrypt/blob/master/ReadMe.zh.md
hexo
hexo文末 添加本文的url
解决慢慢迁移到新blog的长远目标
20231024 文末添加当前文章链接和版权声明
hexo-addlink 文末添加当前文章链接和版权声明 https://github.com/acwong00/hexo-addlink
原来这个插件已经6-7年前的了,无效了。直接使用NexT中的设置即可解决
文章链接和版权声明需求。
1 | creative_commons: |
可是生成的本文链接地址不正确(不是https://chuanzhuo.github.io/blog/)
文末添加当前文章日期信息
编辑NexT中的post-followme.njk
文件目录:》themes〉next》layout〉_partials 》 post
添加如下到div中(从#33行以下是添加的),为方便你直接使用,贴出修改后的.njk全文:
1 | <div class="followme"> |
关于404页面
需要在html头添加一个自动跳转的功能
(由于所有文章生成的链接有变动,导致404页面变得重要了)
编辑位置 /source/404/index.md
1 |
|
最终会生成/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 | <!-- recent posts --> |
解决每次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 | let paginator = this.paginator({ |
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 如何增加到10条?
实践证明,那些related_posts weight 参数是有效的!
必须要要在源码的位置修改才生效!
比如filter_threshold: 0.001 #必须到源码调节一下这些参数才生效,
位置(我的环境):/Users/carlzeng/AppTesting/blog/node_modules/hexo-related-posts/index.js
1 | 新增 “相关文章” section到页脚位置,方便手机用户衍生阅读 |
主要的配置参数说明
以后要重视填写tags, categories,也符合我的个人习惯。
分享我个人目前修改过的配置,适合我的参数:
1 | filter_threshold: 0.004, |
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
- [Done]考虑是否将cnblogs里面备份下来的xml文件,如何重新发布到hexo中?
- 学习:https://www.itfanr.cc/about
- hexo博客通过webhook自动部署到个人VPS
- 插件列表:Hexo博客 | 插件推荐
- hexo博客通过webhook自动部署到个人VPS
- [Done]hexo new page netsuite
单独拉出NetSuite做一个分类,暂时先用简单的link
NetSuite: https://www.carlzeng.com/tags/netsuite/ || fa fa-calendar - 主题:Fluid 亮点 本文最后更新于:2023年2月20日 中午
https://github.com/fluid-dev/hexo-theme-fluid
实例:https://blog.dov.moe/posts/49102/
Best