代码
博客排版 - 挤压中文标点符号
·520 字·2 分钟
代码
Cjk-Punctuation
博客
标点
排版
本文介绍了如何解决中文标点符号排版时出现的挤压问题。默认情况下,连续的中文全角标点会占用较多空间。为了解决这个问题,可以使用一些 JS 插件或 CSS 属性来实现标点挤压。其中推荐了「赫蹏」(heti)和 ethantw/Han 这两个 JS 插件,以及使用 OpenType 字体的 halt 功能来将全角字符显示为半角形式。此外,在进行中英文混合排版时也需要注意设置 HTML 全局属性 lang,并引入相应的 JS 脚本和自定义 CSS 样式文件。最后,在文章标签上添加 Heti 标签即可让挤压标点插件生效。
Hugo 博客集成 Mastodon
·2287 字·5 分钟
代码
Hugo-Blog-Embed-Mastodon
Mastodon
长毛象
博客
本文介绍了如何将 Hugo 博客集成到 Mastodon 中。作者首先解释了 API 和 RSS 两种方式可以用来集成 Mastodon,然后详细介绍了使用 API 和 JS 的方法。他使用了一个名为 mastodon-embed-timeline 的 JS 包进行集成,并提供了安装步骤。接下来,作者说明了如何创建一个新的模板文件并修改其中的 CSS 和 JS 引入部分以及配置 Mastodon 参数。最后,作者指导读者在 content 目录下创建一个页面,并插入渲染 Mastodon 容器所需的 HTML 代码。文章给出了具体示例和技巧,帮助读者实现 Hugo 博客与 Mastodon 的集成。
Chrome 插件更新:网址净化器
·518 字·2 分钟
代码
Chrome-Plugin-Update-Url-Cleaner
Chrome
Extension
插件
扩展
网址
净化
这篇文章介绍了一个名为网址净化器的 Chrome 插件。该插件可以将当前标签页的网址转换成干净的网址。作者在 15 年前开发了一款电商插件,用于净化淘宝链接。他发现当时美工和客服对 URL 机制不太了解,导致店铺装修和发送给客户的链接过长。因此,他重新开发了这个插件,并进行了更新迁移至 Manifest V3、更改插件名称、添加设置白名单功能以及更新图标等操作。目前内置白名单默认支持多个常见网站,并且支持国际化(i18n)。最后,作者还提到在发布 2.0.0 版本后学习到 CSS 属性 field-sizing 并进行优化,并发布了 2.0.1 版本。感兴趣的读者可以前往 Chrome Web Store 安装体验该插件。
在 Hugo 中使用 Shiki
·1050 字·3 分钟
代码
Hugo-Syntax-Highlight-Shiki
Hugo
Highlight
Shiki
高亮
本文介绍了如何在 Hugo 中使用 Shiki 代码语法高亮器。Shiki 是一款美观而强大的代码语法高亮器,基于 TextMate 的语法和主题,并能为几乎所有主流编程语言提供准确且快速的语法高亮。与其他代码语法高亮器不同,Shiki 是纯静态的,无需引入庞大的 JS 资源。文章详细介绍了在 Hugo 项目中安装和配置 Shiki 的步骤,包括安装相关插件、设置 Hugo 配置文件以及创建.rehyperc 文件来配置高亮主题等。此外,还提供了适配暗黑模式和生成 Shiki 所需命令行操作等内容。最后还介绍了如何在 GitHub Actions 中使用 Shiki 进行部署,并给出了相应的工作流程示例。
uBlacklist 订阅合集
·920 字·2 分钟
代码
Ublacklist-Subscription-Compilation
Ublacklist
Google
内容农场
搜索
插件
扩展
这是一个uBlacklist插件的订阅地址合集,用于屏蔽中文SEO垃圾站,如机器翻译、AI生成的内容。通过Github Actions每周自动更新。插件可防止指定的网站出现在搜索引擎结果中,可以添加规则或点击工具栏图标屏蔽指定的网站。规则可使用匹配模式或正则表达式指定,并可通过云存储跨设备同步。支持的搜索引擎有Google、Bing、Brave、DuckDuckGo、Ecosia、Qwant、SearX、Startpage、Yahoo! JAPAN和Yandex。安装插件后,设置订阅黑名单列表并添加订阅地址。还可进行其他设置,如在谷歌搜索结果中屏蔽特定网站。
CSS 和 JS 实现博客热力图
·2924 字·6 分钟
代码
Blog-Heatmap
Code
GitHub
Heatmap
Contributions
本文介绍了使用 CSS 和 JS 实现博客热力图的方法。通过获取最近一年的文章数据,并根据字数和发布日期生成相应的小方块,不同颜色代表不同级别的字数。同时,还添加了鼠标悬停时显示文章标题、字数等信息的功能。作者对比了几种类似库,并选择了适合自己需求的 heatmap.js 来实现热力图效果。最后给出了完整代码以及 HTML 和 CSS 样式部分。
Mastodon 同步到 Memos
·2432 字·5 分钟
代码
Mastodon-Sync-to-Memos
Mastodon
Memos
Webhook
脚本
文章介绍了如何使用 Shell 脚本将 Mastodon 上的内容同步到 Memos。作者使用 Shell 脚本实现了这一功能,并提供了详细的配置和操作步骤。脚本会检查最新的 Mastodon 内容,并将其发布到 Memos 上,同时记录 Mastodon ID 和 Memos ID 的绑定关系。同时,作者还分享了自己在使用过程中遇到的问题和解决方案,并给出了具体示例和代码。
Hugo 外部链接跳转提示页面
·1522 字·4 分钟
代码
Hugo-Redirect-Landing-Page
Hugo
博客
跳转
折腾
文章介绍了作者为了合规和自我审查,在博客中迁移评论系统并清理链接,通过跳转页面实现外部链接的跳转。作者使用 Hugo 内置模板_render-link.html_进行 base64 编码,并提供了代码示例。同时,作者还介绍了如何创建一个中转页面模板_go.html_以及相关样式和脚本的设置。最后,文章指出这种方法只适用于渲染 Markdown 内容文档,并对自定义 HTML 链接做了说明。
自部署 GitHub 风格的 Reactions 点赞功能
·864 字·2 分钟
代码
Self-Hosted-Github-Flavored-Reactions
Hugo
Blog
Reactions
文章介绍了如何自部署 GitHub 风格的点赞功能。作者提到了各种实现方式,包括博客系统、评论系统、API 和第三方服务等。然后介绍了一个名为 emaction 的项目,提供了前端和后端代码,并给出了部署步骤。首先需要在 Cloudflare 上创建数据库,然后克隆代码并安装依赖包。接着修改配置文件中的数据库 ID,并登录 Wrangle 授权访问数据库并创建数据表。最后将项目部署到 Cloudflare Worker,并在前端使用时引入 JS 模块即可实现点赞功能。
图床 CDN CNAME 接入 Cloudflare SaaS 实现分流
·3521 字·8 分钟
代码
Cdn-Cname-Cloudflare
Hugo
Blog
Cname
Cloudflare
本文介绍了如何实现图床 CDN 域名国内境外分流。作者首先提出了实现分流的目的,即削减成本、提高性能。然后说明了实现思路,即国内域名 CNAME 指向 Cloudflare 作为回源,再通过 Cloudflare Worker 访问 R2 或 B2 存储。作者列出了各服务的免费限额,以小网站为例说明国内外分流的具体配置步骤,包括 R2 绑定域名、Cloudflare for SaaS 接入、添加 CNAME 记录、创建 Worker 等。文末总结了实现分流的关键步骤。
利用 GitHub Actions 同步对象存储
·653 字·2 分钟
代码
S3-Sync
Cdn
Bucket
Cos
R2
文章介绍了如何利用 GitHub Actions 同步对象存储。作者担心腾讯云删库跑路,决定将存放在腾讯云 COS 上的文件通过 GitHub Actions 备份到 GitHub、Cloudflare R2 和 Backblaze B2 上,并实现图床 CDN 国内国外分流。文章详细介绍了使用 Rclone 进行同步的配置方法,并提供了示例代码。最后,作者还介绍了使用 GitHub Actions 进行自动备份和同步的具体操作步骤。
博客 AI 摘要及优化
·1643 字·4 分钟
代码
Ai-Summary
Hugo
Blog
AI
Summary
这篇文章介绍了作者如何使用 AI 摘要插件来优化博客阅读体验。他通过多种方式获取 AI 摘要,并将其保存在本地的 JSON 文件中。然后,他修改了博客模板文件,将 AI 摘要渲染到每篇文章的开头。最后,他还添加了打字机效果和样式来增强显示效果。通过这些优化措施,作者提高了博客阅读的效率和质量。
豆瓣同步到 Notion 和 Neodb
·781 字·2 分钟
代码
Douban-Sync
Hugo
豆瓣
NeoDB
Notion
本文介绍了如何将豆瓣标记同步到 Notion 和 NeoDB 的方法。作者通过 GitHub Actions 实现了将豆瓣标记的 RSS 同步到 Notion 和 NeoDB,并分享了注意事项。文章还提到,由于豆瓣图片防盗链策略升级,之前引用豆瓣图片的服务都无法使用。作者决定将观影记录迁移到 NeoDB,并对该平台进行捐款和贡献代码。在改造过程中,作者发现了一篇已经有人做好的教程《豆瓣标记导出到 Notion 并同步》,因此放弃自己造轮子,在该教程基础上完成了操作。最后,作者分享了两个坑以及对 Notion Integration 升级后的修改方法。
NeoDB API 创建观影页面
·2857 字·6 分钟
代码
Neodb
Hugo
Blog
NeoDB
Movie
这篇文章介绍了如何使用 NeoDB API 创建观影页面。文章中包含了注册 NeoDB 账号、生成 NeoDB Token、标记影音、下载 NeoDB 数据、新建 HTML 模板等步骤。作者提到他选择将数据下载到本地进行静态化处理,以提高性能。他还提到了注册 Mastodon 和 NeoDB 的过程,并简要介绍了 Shell Script 脚本的使用。最后文章提供了一些必要的 CSS 和 JS 代码来修改页面样式和处理数据。
NeoDB 获取 Access Token
·719 字·2 分钟
代码
Neodb_token
Hugo
Blog
NeoDB
Token
这篇文章介绍了如何获取 NeoDB 的 Access Token。首先需要注册 NeoDB 和 Mastodon 账号,并登录 NeoDB。然后进入 NeoDB 的开发者中心,创建一个应用并获取 AUTH_CODE。最后,通过发送请求,可以获取到有效期为 1 年的 Access Token。
Artalk 无评论随机显示诗词
·595 字·2 分钟
代码
Artalk-No-Comment-Text
Hugo
Blog
Artalk
评论
这篇文章介绍了作者如何在Artalk的管理后台中实现了一个功能,即在无评论时随机显示诗词。作者在前端配置中插入了今日诗词的API代码,并选择了适合不同背景颜色的文字颜色。作者表示这种低代码实现方式无需侵入网页的JS,也无需单独编写兼容CSS,这个功能在作者参与的多个网页或应用中都嵌入了今日诗词的API。
Memos 配置 Artalk 评论系统
·963 字·2 分钟
代码
Artalk_for_memos
Memos
Artalk
嘀咕
评论
这篇文章介绍了如何配置Artalk评论系统在Memos应用和Memos嘀咕页面中。作者提供了登录Memos应用后台,在系统设置中添加自定义样式和脚本的方法,并给出了需要修改的内容。另外,作者还介绍了在assets/memos.js文件中添加和修改代码的步骤,并在HTML文件中引入Artalk的JS和CSS资源文件。
Windows 安装 Rime 小狼毫五笔拼音输入法
·13297 字·27 分钟
代码
Weasel
Rime
中州韻
Weasel
小狼毫
五笔
这篇文章介绍了作者在Windows系统中安装和配置Rime小狼毫五笔拼音输入法的过程。由于微软五笔输入法的一些限制不符合作者的需求,他决定重新安装Rime小狼毫。文章还解释了Rime、Plum和Weasel之间的关系,以及它们各自的功能和作用。作者将详细记录了安装过程,并分享了一些个人的自定义设置和使用体验。
Umami Docker 部署及优化
·1542 字·4 分钟
代码
Umami
Umami
Blog
这篇文章介绍了Umami Docker的部署和优化。作者首先介绍了Umami是一个开源的自托管的轻量级网站统计分析工具,适用于个人博客和小型网站。然后,作者提供了安装Umami的步骤,包括安装Nginx、添加被统计的网站和获取跟踪代码。接着,作者提供了三种优化策略:广告插件反屏蔽、将跟踪代码部署到自己的CDN和如何集成到API。最后,作者介绍了Nginx反向代理的设置和如何在静态博客中使用Umami。
Memos API 获取总条数
·103 字·1 分钟
代码
Memos-Total-Count
嘀咕
哔哔
Memos
Talk
这篇文章介绍了使用Memos API获取总条数的方法。作者指出Memos官方amount API已不再使用,而是要利用Json返回的数据总条数计算Memos的总条数。