- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
省流:使用 vitepress-plugin-rss 这个插件 。
在看许多个人博客站点的时候,右上角总会有个RSS订阅的标志 。
恰好 我的博客 也是基于 VitePress 搭建的,就想看看能不能也实现这个功能呢?
动手前先搜了一下,先是看到了 vitepress-blog-zaun 上有这个RSS的实现支持,再搜了一下发现Vue的官方博客 vuejs/blog 也是用的这样的实现 。
大概就是自定义 VitePress 的 buildEnd 钩子,在里面实现逻辑获取 md 文件列表,然后通过 feed 生成 RSS 文件, 整个逻辑就 50+ 行代码 。
由于我的博客还分离了独立的主题包 @sugarat/theme ,我想把这个功能加到我的主题包里,这样使用这个主题的就可以简单的配置一下就能使用了,当然也为了方便广大 VitePress 用户更加简便的使用,我将这段逻辑单独分离封装到了 vitepress-plugin-rss 这个插件里.
接下来我将会先介绍一下如何食用这个插件,再介绍它的核心实现原理 。
通过 pnpm/npm/yarn 安装插件 。
pnpm add vitepress-plugin-rss
在 .vitepress/config.ts 配置文件中添加配置使用 。
下面是最基础的使用配置 。
import { RssPlugin, RSSOptions } from 'vitepress-plugin-rss'
const baseUrl = 'https://sugarat.top'
const RSS: RSSOptions = {
title: '粥里有勺糖',
baseUrl,
copyright: 'Copyright (c) 2018-present, 粥里有勺糖',
}
export default defineConfig({
vite: {
// ↓↓↓↓↓
plugins: [RssPlugin(RSS)]
// ↑↑↑↑↑
}
})
然后运行 build 命令,你可以看到在 rendering pages... 后打印了生成 feed.rss 日志... 。
pnpm run build
同时会在导航栏的 socialLinks 中添加 rss 图标链接 。
使用是不是非常简单,只需要 10 行代码.
如果你对插件的实现原理感兴趣,请接着往下看 🎉 🎉 🎉.
VitePress 的拓展在官方文档 Use Cases 部分有提到 。
其是基于 Vite 的,因此可以使用 Vite 的插件机制来实现主题内容的拓展.
从官方的demo种可以看到,RSS 的生成逻辑是放在 buildEnd 中的,因此咱们插件也需要实现间接修改 buildEnd 方法 。
这个非常的简单,利用 Vite 的插件提供的 configResolved 钩子就行 。
下面是简单的demo 。
import { SiteConfig } from 'vitepress'
let resolveConfig: any = null
function configResolved(config: any) {
// 避免多次执行
if (resolveConfig) {
return
}
resolveConfig = config
const VPConfig: SiteConfig = config.vitepress
if (!VPConfig) {
return
}
const selfBuildEnd = VPConfig.buildEnd
// 自定义 buildEnd 方法,添加 rss 生成支持
VPConfig.buildEnd = async (siteConfig: any) => {
// 调用自己的
await selfBuildEnd?.(siteConfig)
console.log('buildEnd', '生成 rss 文件');
}
}
通过 config.vitepress 即可拿到vitepress的配置,然后重新定义 buildEnd 方法即可 。
这里可以直接快速的验证一下 。
运行后可以看到打印了 buildEnd 生成 rss 文件 ,说明我们的插件的修改已经生效了 。
这个也非常的简单,VitePress 在官方文档里有介绍 socialLinks 。
我们只需要在配置修改中添加一个 socialLinks 的配置即可 。
接着上述的demo,添加如下代码 。
VPConfig.site.themeConfig.socialLinks = [
{
icon: {
svg: 'svg icon'
},
link: 'rss url'
},
...VPConfig.site.themeConfig.socialLinks
]
svg的图标可以通过 xicons 这个网站查找 。
比如我这里找了一个 sun 的图标配上 。
启动博客后就能看见右上角这个小太阳了 。
这个是最核心的逻辑了,① 需要获取所有的 md 文件,② 解析里面的 frontmatter ③ 渲染HTML 。
这个在 vuejs/blog 中可以看到使用的是 VitePress 内置的 createContentLoader 方法(里面包含了上述3部分逻辑) 。
这里把其核心实现拆出来,方便大家理解和更好的自定义(笔者在插件里也没直接使用 createContentLoader 这个方法) 。
① 通过 fast-glob 获取所有的 md 文件 。
import glob from 'fast-glob'
const files = glob.sync(`${srcDir}/**/*.md`, { ignore: ['node_modules'] })
其中 srcDir 即文章所在的目录,可以通过如下方式获取到相对路径 。
// config 即 SiteConfig
const srcDir =
config.srcDir.replace(config.root, '').replace(/^\//, '') ||
process.argv.slice(2)?.[1] ||
'.'
② 通过 gray-matter 解析 frontmatter 。
这里 frontmatter 就是文章开头里两个 --- 之间的内容 。
例如 。
---
title: 示例标题
description: 文章介绍
---
利用 gray-matter 解析 。
import matter from 'gray-matter'
import fs from 'fs'
for (const file of files) {
const fileContent = fs.readFileSync(file, 'utf-8')
const { data: frontmatter, excerpt } = matter(fileContent, {
excerpt: true
})
}
其中 excerpt 即为文章的摘要信息(description) 。
③ MD 渲染为 HTML 。
这个使用 VitePress 提供的 createMarkdownRenderer 即可 。
// 由于插件里最后构建成 CJS/ESM 两种格式,VitePress 最新的版本支持 ESM,因此需要动态引入
const { createMarkdownRenderer } = await import('vitepress')
const mdRender = await createMarkdownRenderer(
config.srcDir,
config.markdown,
config.site.base,
config.logger
)
for (const file of files) {
const fileContent = fs.readFileSync(file, 'utf-8')
// 生成html
const html = mdRender.render(fileContent)
}
通过上面的 markdown 文件的解析,我们已经拿到了所有的文章信息,接下来就是通过 feed 这个库生成 RSS 文件了 。
import { Feed } from 'feed'
const feedOptions = {
// ...
}
const feed = new Feed(feedOptions)
for (const file of files){
// 通过前面解析的信息,生成 feed item
feed.addItem({
title,
id: link,
link,
description,
content: html,
author: [
{
name: author,
...authorInfo
}
],
image: frontmatter?.cover,
date: new Date(date)
})
}
const RSSFilename = 'feed.rss'
const RSSFilepath = path.join(config.outDir, RSSFilename)
// 生成 rss 文件
writeFileSync(RSSFilepath, feed.rss2())
插件的完整源码见 GitHub ,欢迎大家试用和反馈 。
最后此篇关于为VitePress网站添加RSS订阅支持的文章就讲到这里了,如果你想了解更多关于为VitePress网站添加RSS订阅支持的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我的 processmaker 安装遇到了一些问题。我正在尝试使用本指南 [url]http://wiki.processmaker.com/index.php/ProcessMaker_Ubuntu
我正在使用 ShareKit。发送 SMS 消息使用 MFMessageComposeViewController,用户看到标题“文本”。我想将该标题更改为更能反射(reflect)实际可用内容的内容
我需要在我的一个针对 Gingerbread 的 Android 应用程序中使用操作栏和 fragment 的组合。所以我使用了 v7 支持库中的操作栏和 v4 支持库中的 fragment ,并使用
我明白为什么浏览器 vendor 不想帮助我阻止他们的 UI 线程。但是,我不明白为什么会有: Web Workers 中没有 sleep (2) 没有同步 WebSockets API 有一个syn
最近我的组织正在考虑使用 Docker。我们组使用的是cloudera CDH 5.1.2。 1) cloudera 是否与 Docker 容器兼容?2) docker 和cloudera 组合是否存
我正在尝试通过编译在 Mac 上安装 rsync 3.2.3。但是,我想安装所有功能。为此,它需要一些库,此处 ( https://download.samba.org/pub/rsync/INSTA
我一直在使用 PyDev 成功运行 nose 测试,并想试试 nose2。 所以我安装了它 pip install nose2 复制/粘贴来自 http://nose2.info/ 的示例代码进入名为
我想知道 LLVM 中是否有任何函数/方法可以在 LLVM IR 中添加 Open-MP 构造。 llvm-3.0 是否仍然支持 OpenMP 指令? 最佳答案 OpenMP 是一种高级语言扩展。因此
我对 CUDA 编程非常陌生。我正在浏览 SDK 附带的示例。我能够编译代码,但是当我运行它时,出现以下错误: "clock.cu(177) : CUDA Runtime API error 38:
RStudio 是用于 R 开发的出色 IDE。我想知道是否有任何方法可以很好地支持 HiDPI 分辨率? 我目前有 13 英寸显示器和 3200x1800 分辨率,甚至很难阅读 RStudio 选项
我正在寻找一种有助于为 Django 项目提供 RDF 支持的工具。 到目前为止,我发现了两个: django-rdf - 最后一次修改是在 4 年前,所以它看起来像是一个死项目。 djubby -
我刚刚尝试了一些 JS 核心原则,发现引擎评估链接的关系运算符而不会引发错误。相反,他们以我自己无法理解的方式进行评估。 console.log(1 4 > 3 > 2 > 1); //false,
我知道 etexteditor 和 vim/emacs。 是否有任何其他 Windows 编辑器支持类似 textmate 的片段(例如,您编写触发词,按 Tab,它更改为某些内容,再次按 Tab,它
我正在尝试找出验证给定集群的网络策略配置的最佳方法。 According to the documentation Network policies are implemented by the ne
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
Z3 会支持 AUFBV 吗? 对于以下脚本: (set-logic AUFBV) (declare-fun x () (_ BitVec 16)) (declare-const t (Array (
使用分部类编写 NUnit 测试的优缺点是什么? 我要开始了: 亲:可以测试私有(private)方法 缺点:TDD 不再可能了 还有什么? 最佳答案 缺点:要么您必须测试与您发布的版本不同的构建,要
它很容易(对于 90% 的 aop 特性)在没有任何语言本身支持的情况下做到这一点,就像大多数动态语言如 python 和 ruby 一样。然而,Dojo在 1.3.2 上直接支持它.最新版本发生
我在我的 android 应用程序中使用亚洲字符,我已经了解到某些字符无法显示,因为系统字体不支持它们。我查询了一个包含亚洲字符的数据库,并且经常检索到无法显示的标志。这些情况对我的应用程序来说通常不
你好,我想实现一个控件,我想在用户键入@字符时启用该控件,直到未填充运行文本中的空格为止,它应该显示用户列表,@符号后键入的文本应该显示基于键盘字符的建议,就像我们在上面看到的那样Twitter 或
我是一名优秀的程序员,十分优秀!