惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

AI
AI
WordPress大学
WordPress大学
博客园 - 聂微东
Hugging Face - Blog
Hugging Face - Blog
小众软件
小众软件
V
V2EX
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google DeepMind News
Google DeepMind News
V
Visual Studio Blog
The GitHub Blog
The GitHub Blog
IT之家
IT之家
D
Docker
M
MIT News - Artificial intelligence
D
DataBreaches.Net
博客园 - 三生石上(FineUI控件)
酷 壳 – CoolShell
酷 壳 – CoolShell
量子位
博客园_首页
Y
Y Combinator Blog
F
Full Disclosure
Microsoft Security Blog
Microsoft Security Blog
月光博客
月光博客
C
CXSECURITY Database RSS Feed - CXSecurity.com
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Spread Privacy
Spread Privacy
Know Your Adversary
Know Your Adversary
A
Arctic Wolf
Vercel News
Vercel News
T
Threat Research - Cisco Blogs
T
Threatpost
Apple Machine Learning Research
Apple Machine Learning Research
L
LINUX DO - 热门话题
T
The Exploit Database - CXSecurity.com
N
Netflix TechBlog - Medium
GbyAI
GbyAI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
Tailwind CSS Blog
J
Java Code Geeks
爱范儿
爱范儿
Cisco Talos Blog
Cisco Talos Blog
博客园 - 叶小钗
Latest news
Latest news
C
Check Point Blog
阮一峰的网络日志
阮一峰的网络日志
博客园 - Franky
P
Privacy International News Feed
MyScale Blog
MyScale Blog
Project Zero
Project Zero
Simon Willison's Weblog
Simon Willison's Weblog

子虚栈

PowerBI笔记 巨人的荷塘·其二 瓜车笔记 冷轧压下规程设计笔记 何以有闲与以何遣闲 工艺笔记 LP3:终寎记 两次寻找设备IP的经验 LP2:塞如记 观草木虫鱼鸟兽 仲春夜行记 溶剂上石机理:高分子的溶解性分析 LP1:窒陬记 皆得其宜? 金属清洗笔记 播客解蔽 卖个破绽 MetaBase笔记 动量 随机的殇 mysql树形结构联结之尝试 乙巳大雪摄影小结 字母雕刻笔记 mysql子查询 业余无线电笔记 EP4:有纸化生活 格风吹草木 W山游记 巨人的荷塘 小心王二麻子 Oxygen Pro Mini 使用手册 池塘、鱼以及鱼食
MDX+HEXO初试
· 2026-01-09 · via 子虚栈

今日发现了一个hexo-renderer-mdx渲染插件,可以直接对mdx文件进行渲染,而且与md的渲染器可以共存。查阅了mdx的文档,它的一大特性就是支持JavaScript,比如大括号中的表达式({1 + 1})和ESM(importexport)(引入插件、变量、函数等)。发觉这其中有许多可玩的东西,几乎是敞开了一个面向前端的大门。鄙人虽玩这个hexo博客五六年了,对于前端的了解也仅限于html+css+一点点js,完全没有接触过react/vue等前端框架。mdx的出现让我有机会可以在博客中直接使用jsx语法,从而可以使用react/vue等前端框架的组件。

今日便开始尝试一番。之前用LaTeX比较久,很是享受那些自定义指令的功能——临时定义一个样式,然后便\lalala()重复利用起来,巨方便。通过mdx来执行jsx代码,便可以实现这种梦寐以求的效果。借由jsx还可以直接进行计算,比如输入{Math.PI} 得到3.141592653589793

用作自定义块也很方便,比如我有时候需要输入一些不好打的或者经常使用的文字,比如站点名,我的笔名、座右铭等,那么我便可以提前定义到一个字符上,然后在需要的地方直接调用。在做了如下的定义之后便可以这样写——本站名为{blog} ,站长{me},近来的座右铭“{motto}”出自《荀子·解蔽篇》,意思是要沉心静气,专一学问。

export const blog = '子虚栈'
export const me = '秉蕳'
export const motto = ' 虚一而静,浊明外景。'

本站名为子虚栈 ,站长秉蕳,近来的座右铭“ 虚一而静,浊明外景。 ”出自《荀子·解蔽篇》,意思是要沉心静气,专一学问。

很好玩吧。经过测试,mdx插件目前基本支持md语法,但代码不高亮、数学公式不能渲染,或许需要引用一些组件什么的,等下再摸索。

图片测试:J君养的宠物可达鸭

接下来,开始学习点React,希望能做出来类似duckquill主题作者主页那样的效果。

彩虹文字效果 霓虹灯闪烁效果

版权声明: 本博客所有文章除特别声明外,均采用 子虚栈版权声明 许可协议。转载请注明来源 子虚栈