如何更好的进行知识分享的思考
如果您看到这篇文章,表示您的 blog 已经安装成功.
一些可以很好的与markdown配合的语法
静态资源压缩
我的博客部署在vercel,vercel好像会自动压缩静态资源,同时也默认开启gzip的,所以静态资源压缩其实不是特别需要,但是我还是开启了静态资源压缩的
hexo-minify:https://github.com/Lete114/hexo-minify
hexo-filter-optimize:https://github.com/theme-next/hexo-filter-optimize
.github/workflows/pages.yml文件备份
自从使用vercel之后就不怎么用得上这个action了,但是还是备份一下吧。
1 |
|
hexo 使用sw.js
待研究:https://github.com/EmptyDreams/hexo-swpp#readme
在我的源码里面使用Go语言写了两个脚本,方便更好的管理hexo blog
要求是运行后是自动获取当前的时间戳并且格式化之后填入commit信息,然后push代码到远端
1 |
|
Vercel 使用 HTTP 缓存
参考资料:https://blog.imlete.cn/article/Vercel-Use-HTTP-Cache.html 和https://www.yt-blog.top/9952/
vercel能够自定义设置响应头(静态文件部署居然可以) ,Vercel 文档: https://vercel.com/docs/project-configuration#project-configuration/headers 。在我个人的角度,我以为只有使用 ServerLess 才能用 http 的响应对象指定响应头信息,没想到 Vercel 居然可以直接通过vercel.json
文件指定配置。那我部署的博客(或其它静态站点)岂不是可以启动 http 缓存了?
以下是本站的使用的vercel.json
文件信息(缓存开启了 1 天)
1 |
|
VsCode更加优秀的编辑体验插件——Hexo Utils
可以在vscode侧边栏生成hexo文章管理工具,非常好用
通过hexo5的注入器功能自定义博客js、css样式
简单说下hexo的注入器(Injector)扩展功能,
注入器被用于将静态代码片段注入生成的 HTML 的 <head>
和/或 <body>
中。Hexo 将在 after_render:html
过滤器 之前 完成注入。
1 |
|
entry <string>
代码片段注入的位置,接受以下值:
head_begin
: 注入在<head>
之后(默认)head_end
: 注入在</head>
之前body_begin
: 注入在<body>
之后body_end
: 注入在</body>
之前
value <string> | <Function>
除了字符串,也支持返回值为字符串的函数
需要注入的代码片段。
to <string>
需要注入代码片段的页面类型,接受以下值:
default
: 注入到每个页面(默认值)home
: 只注入到主页(is_home()
为true
的页面)post
: 只注入到文章页面(is_post()
为true
的页面)page
: 只注入到独立页面(is_page()
为true
的页面)archive
: 只注入到归档页面(is_archive()
为true
的页面)category
: 只注入到分类页面(is_category()
为true
的页面)tag
: 只注入到标签页面(is_tag()
为true
的页面)- 或是其他自定义 layout 名称,自定义 layout 参见 [写作 - 布局(Layout)
hexo注入器官方文档:https://hexo.io/zh-cn/api/injector.html 和参考的其他博主的博客链接:https://hexo.fluid-dev.com/posts/hexo-injector/ 。总共发现了两种方式:
方法一,先在根目录下scripts/inject.js
文件;然后再去新建source/css/navbar.css
文件。
1 |
|
1 |
|
方法二是直接在scripts/inject.js
写入以下代码。
1 |
|
快速测试
1 |
|
通过qexo编辑器为hexo博客提供在线更新的后端功能
其实还有其他在线更新的方法,比如https://cloudstudio.net 腾讯的云主机,每天免费2小时,够用了。或者你配置好action自动化部署之后也是可以直接在github编辑你的文章文件的,但是今天我选择的是另外一种更美观方便简洁的方式。
参考官方部署文档:https://www.oplog.cn/qexo/ 。我使用的是目前仍处于Beta功能的Vercel提供的免费数据库部署 (PostgreSQL/Vercel)
我的后端面板地址:暂时不暴露后端链接
(其他细节有时间补充)
修复Safari游览器无法正常显示icarus书签favicon的情况
Safari 浏览器是支持 SVG(可缩放矢量图形)格式的图标图片的。SVG 是一种矢量图形格式,它可以在不失真的情况下调整大小,并且通常具有很好的清晰度和质量。但是不知道为什么我的Safari游览器无法正常显示该网页书签的icon大小,游览器书签显示的icon大小太小,我怀疑是尺寸的问题,但是我不是专业前端,不愿在这个问题上深究。于是我直接把favicon替换成了png格式的图片,问题遂得到解决。但是过了一天之后我发现问题并没有得到解决,于是我查看了其他hexo博客之后得到了一个规律,我把favicon换成了ico格式的之后就能正常显示了,效果很好。
有关Safari游览器的书签网页icon正常显示的问题,在下没有太多兴趣,不过看了一下发现乱七八糟的方法还挺多的,有时间再继续探究吧。搜索:如何让苹果 Safari 浏览器个人收藏栏显示网站 LOGO 图标。
放下我参考的文章:https://zhangzifan.com/apple-touch-icon-png.html 和 https://www.360mb.net/908.html 和 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
其他
- 2020 年 c++和算法
- 2021 年 golang和项目
- 2022 年 sql和科班基础
- 2023 年 八股和深入研究的开源项目
- 2024 年 系统设计架构
在 Hexo 中,你可以通过设置文章的 front-matter(文章头部的配置信息)来实现置顶文章。具体步骤如下:
- 打开需要置顶的文章,找到 front-matter 部分;
- 在 front-matter 中添加 sticky: true,表示该文章需要置顶;
- 如果你想让多篇文章按照一定的顺序置顶,可以在 sticky 属性后面再添加一个数字,数字越小,文章的权重越高,例如 sticky: 1;
- 保存文章,重新生成网站即可看到效果。
需要注意的是,如果你的主题没有对置顶文章做出特殊的处理,那么置顶文章会直接显示在文章列表的最上面。如果你想要更加精细的控制,可以在主题的模板文件中添加一些逻辑判断来实现。不需要插件,Hexo 默认就支持置顶文章功能。你只需要在文章的 front-matter 中添加 sticky: true 属性即可将该文章置顶。如果你想要多篇文章按照一定的顺序置顶,可以在 sticky 属性后面再添加一个数字,数字越小,文章的权重越高,例如 sticky: 1。
markdown语法提供了很多页面标签,但对于一个网站来说还是太少了,所有你在markdown语法中找不到的标签都可以在Hexo文档中找到,在Hexo中找不到的都可以在Icarus文档和iMaeGoo中找到,在Icarus中找不到的都可以在Bluma文档中找到(Icarus使用的Bluma插件库)
这是html的写法,我个人认为还存在markdown的写法,等日后研究hexo文档再做更新,暂时就这样吧。我不是很建议在文章中使用这些不方便移植的写法,这会导致主题在迁移的时候文章样式变得很难迁移。
1 |
|
1 |
|
tab 标签语法 :
1 |
|
其中,各参数意义如下:
- Unique name: 全局唯一的 Tab 名称,将作为各个标签页的 id 属性前缀
- index: 当前激活的标签页索引,如果未定义则默认选中显示第一个标签页,如果设为 - 1 则默认隐藏所有标签页
- Tab caption: 当前标签页的标题,如果不指定则会以 Unique name 加上索引作为标题
- icon: 在标签页标题中添加 Font awesome 图标
hexo icarus 配置文件
更换Github Action 之后就不需要备份了,配置文件和站点可以随之一起备份在Github上,这样就不需要备份了。
优化Hexo博客文章永久链接
文章默认的URL配置是包含年月日以及文章标题的,而且每次文章文章有修改就会引起一些链接的变化,繁琐且不易于检索传播。而URL地址对于SEO来说(Search Engine Optimization:搜索引擎优化)是相当重要的,如何缩短并固定每篇文章的连接,同时又可以在链接后面加上html
使其显得更为正式。
基于Hexo
搭建的博客,可以通过插件hexo-abbrlink
来实现自定义文章的连接。首先我们使用如下代码进行优化:
1 |
|
接着打开站点配置文件_config.yml
,按照如下部分进行相关配置:
1 |
|
如上所示,是我本人的配置,另,permalink
的配置,我多加了一个固定链接posts
,纯属个人喜好,你也可以去掉直接配置成:abbrlink.html
。我们完成了如上的配置后,如果不对博客文章做任何处理的话,在部署的时候,将会根据算法随机生成每篇博客的数字链接。当然,如果你觉得使用随机的数字连接不具有识别性,想要自定义每篇博客的链接的话也是可以的,只需要在你的博客.md
文章的头部配置如下字段即可:
1 |
|
通过这一顿操作,你就可以随心所欲控制你的博客的链接了。每次修改博客文章的时候,只要不修改abbrlink
配置项,那么这篇博客的链接就永远不会发生变化。这样不仅有利于博客链接的记忆与传播,更有利于整个博客的SEO优化,提升检索度和排名。
官方文章中你还可以使用如下变量的配置,当然除了这些还可以使用Front-matter
中的所有属性。
变量 | 描述 |
---|---|
:year | 文章的发表年份(4 位数) |
:month | 文章的发表月份(2 位数) |
:i_month | 文章的发表月份(去掉开头的零) |
:day | 文章的发表日期 (2 位数) |
:i_day | 文章的发表日期(去掉开头的零) |
:hour | 文章发表时的小时 (2 位数) |
:minute | 文章发表时的分钟 (2 位数) |
:second | 文章发表时的秒钟 (2 位数) |
:title | 文件名称 (relative to “source/_posts/“ folder) |
:name | 文件名称 |
:post_title | 文章标题 |
:id | 文章 ID (not persistent across cache reset) |
:category | 分类。如果文章没有分类,则是 default_category 配置信息。 |
:hash | 文件名(与 :title 相同)和日期(12-16进制)的 SHA1 哈希值 |
您可在 permalink_defaults
参数下调整永久链接中各变量的默认值:
1 |
|
示例如下:
1 |
|
参数 | 结果 |
---|---|
:year/:month/:day/:title/ | 2013/07/14/lorem/hello-world/ |
:year/:month/:day/:name/ | 2013/07/14/hello-world/ |
若要建立一个多语种的网站,您可修改 new_post_name
和 permalink
参数,如下:
1 |
|
当您建立新文章时,文章会被储存到:
1 |
|
而网址会是:
1 |
|
Cloud workSpace
自动化部署
https://hexo.io/zh-cn/docs/github-pages.html
https://mdnice.com/writing/5c0ea88d4f624fa2b047463a0e24a9ef
Frequent bloggers
博主 | 主页链接 | 其他 |
---|---|---|
辣椒の酱 | 辣椒の酱 | / |
iMaeGoo | iMaeGoo | / |
Yida | Yida | / |
Xinyu Liu | Xinyu Liu | / |
李文周 | 李文周 | / |
Icarus同款主题博客使用者们:PPOffice和https://pj568.eu.org和 https://leimao.github.io/
混合空间 Mix Space、作者blog地址:https://innei.in , github repo 地址 https://github.com/mx-space 。一个全新的博客系统,前后端分离,支持docker一键部署,感觉还挺有意思的,对服务器配置要求略高(实际测1h1g部署后端core也没什么压力)。部署下来主要是遇到了两个坑,一个是反向代理,使用宝塔的反向代理需要新建一个静态网站,在里面的设置里面添加反向代理规则,不要自己去修改nginx的配置。另外一个是前后端分为两个域名,要改的地方也特别多,这样的话假如你修改了一次域名,那么你需要修改配置的地方会特别多,玩起来非常的不方便。现在我也搭建了这个站,但是说实话我觉得不知道还能用多久,因为这个站实在是太笨重了。不过功能也确实很全,好像还接入了clerk登陆之类的,比较现代化,作者也一直在使用,还是有保障的, 其中Shiro主题也一直在更新。
进入宝塔面板—网站,设置后端网站地址这里使用 api.miaoer.xyz
自己喜欢啥主机名就填啥,记得解析
新建完成站点到设置-反向代理-添加反向代理
代理名字这里方便管理就设置为 后端
目标URL: http://127.0.0.1:2333 发送域名: $host
保存后点击 配置文件 将下方配置文件文本复制复制进去,记得全选删掉以前的配置 ,不要去配置文件里面改nginx的配置typecho Cuteen 主题、作者blog地址:https://blog.zwying.com
Notion 建站工具盘点:https://sspai.com/post/77787 ;我使用的https://notaku.so/ ,效果还不错但是价格太贵了,网站地址:https://jiejaitt.blog.notaku.site/ ,免费版甚至限制每个notion站点只能有20个文档。
Cali Castle | 开发者、设计师、细节控、创始人;目前大佬的网站已经开源,开源部署地址:https://cali.so/blog/guide-for-cloning-my-site
Future plan
- 完善收集一些优化文章样式特殊的语法
- https://whatsid.me/2019/08/21/hexo-markdown-syntax/#
- 加密某些重要内容的文章
- 了解一下使用 npm 安装的方式,伺机迁移安装方式
分享一些优秀的个人博客
- https://www.elliot98.top/
- https://mrseawave.github.io/blogs/
- https://flc.io/
- robking的小窝:https://robking.top
- Otstar Lin:https://blog.ixk.me/
- https://chirpy.cotes.page/
- 因为搜索Vercel部署Typecho博客而发现,还看了关于vercel静态站点设置缓存的教程,质量不低:https://blog.imlete.cn
- 杜老师说:https://dusays.com/
更新日志
如果你使用vercel部署可以看这个教程:https://blog.im0o.cn/posts/c6d9de72.html
如何更新Hexo及插件的版本?如何更新主题版本?
运行hexo -v
后,Hexo将显示安装在您系统上的Hexo版本号。另外,如果您正在使用Hexo的项目目录中,也可以查看Hexo的版本信息。在Hexo项目的根目录中,打开package.json文件,您可以找到一个类似于以下内容的行:
1 |
|
其中,x.x.x表示安装的Hexo版本号。无论是通过命令行还是查看package.json文件,您都能够找到Hexo的版本信息。
尝试运行Hexo生成命令(hexo g)时遇到了权限问题。这可能是由于缺少执行命令的权限导致的。更改Hexo命令的权限:使用以下命令更改Hexo命令的权限,使其可执行:
1 |
|
1 |
|
npm下载的时候还是太慢了,很多人说改镜像源,但是我还是更喜欢配置npm走代理端口的方式来解决npm下载缓慢的问题
1 |
|
同样在使用icarus theme 的博主
我比较喜欢看看大家的icarus都魔改成什么样子,方便我自己学习,例如H J H 和 到 ICARUS 中去 —— 记对 Icarus 主题的使用及微调
最后,汇总我以上提到的所有的blog url 有 https://hujiahao6.gitee.io 和 https://blog.uiharu.top
关于我的其他博客系统
- 子比主题其实功能强大,但是外在样式我不是特别喜欢,以后有机会优化一下吧,我希望给他弄成尽量简约的类型,然后颜色大体偏向淡绿色,主要保留文章内容,其他不重要的功能酌情优化吧,子比社区地址:https://www.zibll.com/ 子比博客演示:https://demo.zibll.com/ ;
- inis blog系统 go版本其实很有意思,但是现在没时间研究,暂时只能这样了。
- NotionNext
NotionNext帮助手册:https://docs.tangly1024.com/about
杂七杂八的技术待研究的
- 反向代理,包括vercel,cloudflare,nginx,Nginx Proxy Manager反向代理面板还有Caddy等等;
如何更好的进行知识分享的思考