拓展插件
帮助我们完善此页面代码高亮
Hexo 内置两款代码高亮插件——highlight.js 与 prismjs,而 highlight.js 又分为 Hexo 定制 highlight.js 与原生 highlight.js。这样就对应三个版本:Hexo 定制 highlight.js(highlight
)、原生 highlight.js(hljs
)与 prismjs(prismjs
)。
highlight
在站点配置文件中配置 highlight
字段。请确保 enable
为 true
且 hljs
为 false
,并将 primsjs.enable
设为 false
。
|
Hexo 定制 highlight.js 是无法直接使用 highlight.js 主题的,为此「Cards」主题定制了 代码高亮主题,并为更贴合主题样式做了些许改动。
由于许多代码高亮主题在亮色/暗色模式下可读性差异较大,在主题配置文件 style
字段下可以分别设置亮色/暗色模式下使用的代码高亮主题。
|
default
:默认代码高亮主题darkmode
:暗色模式下代码高亮主题
这里只需填入代码高亮主题的名称,无需填入路径、后缀等,「Cards」在请求时会将其补全。而在 vendors.highlight
中可配置存放代码高亮主题的文件夹路径。
hljs
在站点配置文件中配置 highlight
字段。请确保 enable
与 hljs
均为 true
且 line_number
与 wrap
均为 false
,并将 primsjs.enable
设为 false
。
|
原生 highlight.js 可以直接使用 highlight.js 提供的 主题。同前者一致,在主题配置文件 style.hljs
字段下可以分别设置亮色/暗色模式下使用的代码高亮主题、在 vendors.hljs
中可配置存放代码高亮主题的文件夹路径。
prismjs
在站点配置文件中配置 prismjs
字段。请确保 enable
与 preprocess
均为 true
,并将 highlight.enable
设为 false
。
|
prismjs 支持直接使用其提供的 主题。在主题配置文件 style
字段下可以分别设置亮色/暗色模式下使用的代码高亮主题。
|
default
:默认代码高亮主题darkmode
:暗色模式下代码高亮主题
同样的,这里只需填入代码高亮主题的名称,无需填入路径、后缀等,「Cards」在请求时会将其补全。而在 vendors.prismjs
中可配置存放代码高亮主题的文件夹路径。
数学公式
在需要渲染数学公式的文章 front-matter
中添加:
|
如果你之前有更换过渲染器,请根据自身实际情况调整。
图片懒加载
「Cards」内置图片 Lazyload 插件,为避免冲突请勿安装其他插件。
从「Cards」v1.1.0 开始,你无需将 lazyload
配置项移动至站点配置文件,直接修改主题配置文件便可使相关配置生效。
|
onlypost
: 仅在文章页面启用图片懒加载loadingImage
:懒加载占位图
站内搜索
「Cards」主题内置了站内搜索功能,为避免冲突请勿安装其他插件。在启用之前你需要为其单独 生成一个页面。
从「Cards」v1.1.0 开始,你无需将 search
配置项移动至站点配置文件,直接修改主题配置文件便可使相关配置生效。
|
path
:生成网站数据库路径field
:数据获取范围(Page | Post | All)
标签插件
标签插件,丰富引用块样式。
|
在文章中使用此插件:
|
其中 [ type ]
可选填:info
、important
、tip
、caution
、warning
,分别对应 5 种样式。
内容折叠插件
通过内容折叠插件折叠文章内任一内容片段。
|
summary
:默认折叠标题motion
:折叠/展开时添加纵向滑动动画
在文章中使用本插件:
|
如果你希望某一折叠框默认展开:
|
fancybox
图片点击放大插件,可以前往 Demo 中的图片测试页面查看效果。由于「Cards」定制了自己的 Lazyload 功能,所以即便开启图片懒加载也能很好地兼容 fancybox。此插件依赖 jQuery。
|
设置 enable: true
开启 fancybox。默认不应用到所有图片,请在需要使用 fancybox 的包裹在 <fancybox>
标记内,例如:
|
而如果将 auto: true
开启,则自动应用到所有图片,无需包裹在 <fancybox>
内。
返回顶部
返回顶部按钮。
|
暗色模式
暗色模式,通过访问者终端 prefers-color-scheme
参数控制,亦添加手动切换按钮。
|