content.json

{"meta":{"title":"Volantis","subtitle":"","description":"Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。","author":"Volantis Team","url":"https://volantis.js.org","root":"/"},"pages":[{"title":"","date":"2024-03-28T06:49:49.706Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"404.html","permalink":"https://volantis.js.org/404","excerpt":"","text":"404 很抱歉，您访问的页面不存在 可能是输入地址有误或该地址已被删除"},{"title":"鸣谢项目和社区贡献者","date":"2024-03-28T06:49:49.910Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"contributors/index.html","permalink":"https://volantis.js.org/contributors/","excerpt":"Volantis 社区的发展离不开团队大佬们的无私奉献和社区小伙伴们的热情互助。每一个心怀梦想、有着独特见解的朋友都可以成为团队的一员。目前 Volantis 社区正处于建设初期，我们缺少各方面的人才，如果您使用主题至少一个月且长期活跃于社区，例如： 解答 issues / discussions 提交有效的建议 官网文档补全/纠错 发现并收录有意思的文章（搭建博客方面）到官网 我们非常欢迎您的加入，请在论坛发帖告诉我们。","text":"Volantis 社区的发展离不开团队大佬们的无私奉献和社区小伙伴们的热情互助。每一个心怀梦想、有着独特见解的朋友都可以成为团队的一员。目前 Volantis 社区正处于建设初期，我们缺少各方面的人才，如果您使用主题至少一个月且长期活跃于社区，例如： 解答 issues / discussions 提交有效的建议 官网文档补全/纠错 发现并收录有意思的文章（搭建博客方面）到官网 我们非常欢迎您的加入，请在论坛发帖告诉我们。 感谢开发者 感谢社区建设者 如何参与社区建设社区建设主要包括 Issues Discussions(论坛) 官网博客收录 官网文档维护 几个方面。 如何维护文档目前 Volantis 已是已知的 Hexo 主题中文档最全面的，但仍有部分功能缺少明确的文档、部分文档已经过时，如果您发现了遗漏或者错误之处，我们非常希望您能够帮忙完善一下。 Volantis 官网支持 CI ，您可以直接在线编辑源码： 在线编辑文档https://github.com/volantis-x/community/tree/main/source 发布与分享文章每位用户在使用或更新主题的时候都需要阅读官网的文档，收录的相关内容能帮助用户更高效地上手，同时也能够提高被收录的文章的曝光率。如果在官网能看到更多的有价值的文章，就会有更多 Volantis 用户或者非 Volantis 用户来访问。 如果您有或者发现了与 Hexo 博客搭建相关的文章，可以转载外链到 Volantis 官网，示例如下： _posts/blogs/2020-05-17-pjax.md---title: Volantis 主题部署 Pjaxdate: 2020-05-17updated: 2020-08-07categories: [开发心得]author: inksslink: https://inkss.cn/blog/76993423/description: 本篇文章记录了我对 Volantis 主题做 Pjax 兼容的种种，大抵算是种记录吧~headimg: # 可以设置文章头图backup: https://web.archive.org/web/xxxxxxxxxx # 将页面存档到互联网档案馆 archive.org 的存档链接 https://web.archive.org/save--- 如果这篇文章的作者是第一次出现在官网，还需要在 _data/author.yml 文件中添加作者信息，例如： _data/author.yml...inkss: name: 枋柚梓 avatar: https://cdn.jsdelivr.net/gh/inkss/common@1.4.2/hexo/img/static/avatar.jpg url: https://inkss.cn 注意事项文章存放在 _posts/blogs/ 目录中，且文件名格式为「年-月-日-文章话题」。鼓励原创文章，摘要部分300字符以内。如果想不出摘要可以不写，不要在摘要里重复一遍文章标题。最好选择一个文章分类，如果现有的分类中没有合适的，可以自己新增。如果有文章头图，请确保图片内最多只有一个单词或短语，图片不清晰或者与文章无关的话不建议使用。不仅限于自己的文章，可以在征得文章作者同意的情况下将其链接收录到官网。 在线编辑文档https://github.com/volantis-x/community/tree/main/source/_posts/blogs"},{"title":"","date":"2024-03-28T06:49:49.910Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"examples/index.html","permalink":"https://volantis.js.org/examples/","excerpt":"示 例 博 客 社区维护团队的博客xaoxuu开发者MHuiG划水Colsrch开发者inkss摸鱼volantis-x.js.orgTest Site For Development 使用 Volantis 的博客示例","text":"示 例 博 客 社区维护团队的博客xaoxuu开发者MHuiG划水Colsrch开发者inkss摸鱼volantis-x.js.orgTest Site For Development 使用 Volantis 的博客示例 如何添加自己的博客链接 第一步：新建 Issue 按照格式填写并提交 { "title": "", "description": "", "screenshot": "", "url": "", "avatar": "", "version": "版本：^4.0"}为了提高图片加载速度，建议优化图片尺寸：打开 压缩图 上传自己的截图，将图片的高度调整到 360px 后下载。将压缩后的图片上传到 ImgURL免费图床 或 去不图床 并使用此图片链接作为截图链接。 第二步：刷新 回来刷新即可生效。 如何更新自己的博客链接 如果是自己创建的 issue ，可以自己修改。 如果是管理员创建的，请自己重新创建一份，然后让管理员删掉旧的。"},{"title":"常见问题与反馈渠道","date":"2024-03-28T06:49:49.914Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"faqs/index.html","permalink":"https://volantis.js.org/faqs/","excerpt":"通常来说，一个全新的工程全部使用默认配置是正常没有故障的。如果无法使用或者效果与示例有较大区别，可以使用 Hexo 官方提供的用于单元测试的博客应用本主题查看样式是否正常，对比 _config.yml 文件排查问题。 Hexo 官方的单元测试项目： https://github.com/hexojs/hexo-theme-unit-test 向开发者反馈问题","text":"通常来说，一个全新的工程全部使用默认配置是正常没有故障的。如果无法使用或者效果与示例有较大区别，可以使用 Hexo 官方提供的用于单元测试的博客应用本主题查看样式是否正常，对比 _config.yml 文件排查问题。 Hexo 官方的单元测试项目： https://github.com/hexojs/hexo-theme-unit-test 向开发者反馈问题 如何更新主题使用主题的时候，尽量 fork 主题到自己的 GitHub，然后进行修改并使用。这样做的好处是：当主题进行重要更新的时候可以根据需要拉取合并代码，使自己 DIY 的主题能够通过更新获取 BUG 修复或者新特性。 如果不懂请自行搜索关键词：fork 更新 实用小技巧所有需要写在主题配置文件中的配置都可以写在站点配置文件的 theme_config: 中，在 Hexo 5.0 后，还可以写在 _config.volantis.yml 文件中，详见 Hexo 官方文档：覆盖主题配置https://hexo.io/zh-cn/docs/configuration#覆盖主题配置也可以直接查看本站源码中站点配置文件的写法：_config.volantis.yml 无法成功运行本地预览 可能是没有安装依赖，请按照「开始」页面中的步骤进行安装，并安装所需依赖。 如果开启了某些第三方服务，请查看文档中是否要求安装插件。 如果报错信息有 lastIndex，你可以尝试把博客根目录配置文件中找到 highlight，并将 auto_detect 设置为 false。 主题配置修改没有生效请确认文档中要求修改的是博客主目录的配置文件 blog/_config.yml 还是主题的配置文件 blog/_config.volantis.yml。 主题样式修改没有生效如果主题配置文件中开启了 cdn 服务，那么修改本地的样式是不会生效的，需要关闭 cdn 服务。 修改什么都没有生效需要 hexo clean 然后重新 hexo s 如果安装了「相关文章推荐」插件后，每次修改 md 文件后都需要重新 hexo s 关掉 CDN 之后样式错乱 请前往文档「开始」页面，检查是否安装了必要的依赖包。 搜索无法使用 请前往文档「开始」页面，检查是否安装了必要的依赖包。 检查根目录配置文件是否有 search 字段冲突。 如果以上两步都无法找到问题，请下载示例源码进行对比。 搜索结果链接不正确请检查根目录配置文件中的链接是否正确，如： blog/_config.ymlurl: https://xaoxuu.comroot: / 教程与指南 Hexo 官方文档请一定要阅读官方文档！ 可供交流的渠道解决问题 渠道 方式 用途 Issues @volantis-x/hexo-theme-volantis 和开发者沟通的唯一渠道，用于跟进和解决问题 请不要发送邮件开源项目的开发者很反感别人不通过正确的途径如 Issues 而是通过私人邮件询问开源项目问题，所以一般不会回复此类邮件。 交流 渠道 方式 用途 论坛 @volantis-x/discussions 慢，相对正式，方便检索，可以给其他用户参考 QQ群 1146399464 (验证码: vlts-2021) 非正式，即时通讯，易于斗图；不利于给其他用户参考 Telegram t.me/volantis_x 非正式，即时通讯，佛系交流互动 Gitter hexo-theme-volantis/community 佛系交流互动 评论区 留言 佛系交流互动 可以测试、灌水、推广自己的博客。"},{"title":"如何正确地更新主题","date":"2024-03-28T06:49:49.950Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"how-to-update/index.html","permalink":"https://volantis.js.org/how-to-update/","excerpt":"","text":"如何正确地更新主题https://github.com/volantis-x/hexo-theme-volantis/issues/459 稳定版本如果您以内容创作为主，推荐使用稳定版本：npm i hexo-theme-volantis 更新时，把 package.json 中的版本号改为 * 再执行 npm i 就可以了。 如果您需要对主题的源文件进行修改，推荐 fork引用并修改自己 fork 的那份，当主题有更新时，合并到自己的分支。 如果您不 fork 而直接修改主题源码，是没办法获得更新的！Fork 篇本文以 GitKraken 软件的使用展开，相关链接：GitKraken: Free Git GUI Client - Windows, Mac, Linux 如果您按照主题文章中的 设置子模块 已经克隆了一份主题并添加到自己的博客仓库中，那么本篇文章将极大的帮助到您，如果您还没有如此操作，不妨尝试一番。这里是本文的仓库环境：博客仓库 Hexo-Blog 、主题仓库 volantis 。 一、GitKraken 的简单操作在 GitKraken 的软件界面中，位于正中间面积最大的区域是仓库的历史提交信息，右边为选中提交记录的详情，左边则放有一些仓库相关的信息，将目光集中到左边的 SUBMODULES 选项栏，如果您已经正常的将 Fork 的主题仓库添加到博客仓库中，您便可以在这里看到。展开 SUBMODULES 选项卡，右键并选择 Open this submodlue 打开子模块： 博客仓库 打开子模块 如此进入的仓库为您的主题仓库，可以在当前页面中查看到所有提交的历史记录等等。为了避免一些拗口的称呼所带来的不良影响，这里设定如下：将 Fork 的仓库称为 主题仓库 ，将 hexo-theme-volantis 仓库称为 volantis 仓库。 主题仓库 在图中，当前 Fork 的主题仓库所处的分支为 master-theme ，图中右侧展示的是个人主题仓库的最后一次提交信息。中间区域，较上部分在写有 master 标记的为 volantis 仓库的分支（您可以通过右侧的 Logo 图片进行区别）。显而易见的，当前主题仓库已经落后 Volantis 仓库，下面我们便需要合并代码到自己的主题仓库中。如果您打开后的界面并没有看到 Volantis 的仓库信息，意味着当前没有添加 Volantis 仓库为远端，您可以按照如下操作添加： 添加 Volantis 远端仓库信息 在左侧面板的 REMOTE 选项卡处，点击加号，进入如下图所示界面，选中 volantis-x/hexo-theme-volantis 后添加即可。 二、GitKraken 的合并操作1. Merge在 volantis 仓库的 master 分支处右键，选择 Merge volantis/master into xxxx，进行合并操作。至于为什么不选择变基（Rebase），个人认为保留仓库的提交历史比修改历史更好。通常，合并操作会自动完成，但是如若冲突时，会收到如此提醒：Merge Failed ,There are merge conflicts that need tobe resolved. 如它所说存在需要解决的冲突，此时右侧选项卡会展示 Merge conflicted detected 窗口，已解决的和冲突文件会显示在其中。 点击待解决冲突的窗口，在这个页面中，上半部分为本地和远端的代码，下半部分为合并后的内容。您可以根据实际情况，如回忆修改历史，选择是选中左边本地，还是右边远端，抑或是两边都选择，如果对选择后的结果不满意，您还可以手动修改 Output 窗口中的内容，当一切结束后，点击 Save 结束操作。（原则上您必须选择其中的一方，而不是直接修改 Output 的内容） 有时，可能遇到远端删除了某个文件，收到如下提示：GitKraken was unable to determine whether to keep source/css/_plugins/gitalkstyl, would you like to keep it? GitKraken 不会主动删除您的文件，不过一般情形下无需保留，Delete The File 即可。 最后，在解决完所有冲突文件后，回到仓库列表界面，点击 Commit and Merge 完成提交。 A. 合并操作 B. 合并冲突检测 C. 选择合适的内容 D. 提交内容 2. Rebase简言之，Rebase 将你的所有修改（提交）重新放到了公共分支的最后面，当然后果是可能会经常面临是否强制提交，而且不太适合与 Merge 操作共同使用。以下内容摘抄自：Rebase - 廖雪峰的官方网站 多人在同一个分支上协作时，很容易出现冲突。后 Push 的童鞋不得不先 Pull ，在本地合并，然后才能 Push 成功。 总之看上去很乱，有强迫症的童鞋会问：为什么 Git 的提交历史不能是一条干净的直线？其实是可以做到的！Git 有一种称为 Rebase 的操作，有人把它翻译成“变基”。 Rebase 操作的特点：把分叉的提交历史“整理”成一条直线，看上去更直观。缺点是本地的分叉提交已经被修改过了。 Rebase 操作可以把本地未push的分叉提交历史整理成直线； Rebase 的目的是使得我们在查看历史提交的变化时更容易，因为分叉的提交需要三方对比。 三、冲突的产生与避免冲突一般产生于同一处被不同人修改时，Git 无法自动处理，抛出错误让用户解决。由于主题目前仍处于青少年阶段，更新迭代速度比较快，冲突现象可能会比较明显，下面提供一些思路减少这类情况。 1.首先是配置文件，根据 Hexo 的规则，所有对配置的修改都可以独立出来，无需直接修改主题仓库下的 config.yml ，这里可以参阅：创建主题配置文件。配置类文件是最不该产生冲突的地方。 2.样式文件，根据 css 的覆盖规则，使用样式覆盖比直接修改样式来的欢快，例如主题中的光标便是采用的样式覆盖的思路。 四、代码历史维护您可以对单个文件进行历史查看操作，以此来对比您所做出的个人修改，最大程度上的避免代码丢失。正所谓熟能生巧，多加操作后主题更新将不再是一件麻烦的事情，末尾愿您一路走来，最终回归创建博客的初心，完结撒花 ★,°:.☆(￣▽￣)/$:.°★ 。 历史记录"},{"title":"文章分类","date":"2024-03-28T06:49:49.902Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blog/categories/index.html","permalink":"https://volantis.js.org/blog/categories/","excerpt":"","text":""},{"title":"所有标签","date":"2024-03-28T06:49:49.906Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blog/tags/index.html","permalink":"https://volantis.js.org/blog/tags/","excerpt":"","text":""},{"title":"进阶设定","date":"2024-03-28T06:49:50.066Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/advanced-settings/index.html","permalink":"https://volantis.js.org/v5/advanced-settings/","excerpt":"","text":"设置子模块 将主题添加为子模块 开始前需要确认不存在 themes/volantis 文件夹, 如果有, 请自行删除.sshhttpsgit submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantisgit submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis 多人协同默认的作者信息在主题配置文件中设置： blog/themes/volantis/_config.yml# 文章布局article: ... body: ... meta_library: author: avatar: name: 请设置文章作者 url: / Volantis 支持多个作者在一个站点发布文章，其他作者信息需要写在数据文件中，例如： blog/source/_data/author.ymlJon: name: Jon Snow avatar: https://cn.bing.com/th?id=AMMS_fc8f99fd41ebd737a71c4e13806db9a0&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=2&pid=16.1 url: https://gameofthrones.fandom.com/wiki/Jon_SnowDany: name: Daenerys Targaryen avatar: https://tse1-mm.cn.bing.net/th?id=OIP.Yax4wLzIFbcBVUa_RsKywQHaLH&w=80&h=80&c=8&rs=1&qlt=90&dpr=2&pid=3.1&rm=2 url: https://gameofthrones.fandom.com/wiki/Daenerys_Targaryen 在文章的 front-matter 中新增 author 即可： ---title: Jon Snow | Game of Thrones Wiki | Fandomauthor: Jon--- 内容安全策略(CSP)blog/_config.volantis.yml# 内容安全策略( CSP ) meta 标签 http-equiv="Content-Security-Policy"# https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP# https://content-security-policy.com/# 也可以设为 false 在 HTTP 标头中设置 https://volantis.js.org/v5/advanced-settings/#设置-HTTP-响应标头csp: enable: true content: " default-src 'self' https:; block-all-mixed-content; base-uri 'self' https:; form-action 'self' https:; worker-src 'self' https:; connect-src 'self' https: *; img-src 'self' data: https: *; media-src 'self' https: *; font-src 'self' data: https: *; frame-src 'self' https: *; manifest-src 'self' https: *; child-src https:; script-src 'self' https: 'unsafe-inline' *; style-src 'self' https: 'unsafe-inline' *; " # 可以使用自动程序替换默认的 'unsafe-inline' 和 * 生成更严格的内容安全策略. # 另可以参考官网的 gulp 方案. # gulpfile.js https://github.com/volantis-x/community/blob/main/gulpfile.js 设置 HTTP 响应标头以 Cloudflare 为例， 在 规则 > 转换规则 > HTTP 响应头修改 中，可以添加以下设置： 内容安全策略( CSP ) Content-Security-Policy: default-src 'self' https:; block-all-mixed-content; base-uri 'self' https:; form-action 'self' https:; worker-src 'self' https:; connect-src 'self' https: *; img-src 'self' data: https: *; media-src 'self' https: *; font-src 'self' data: https: *; frame-src 'self' https: *; manifest-src 'self' https: *; child-src https:; script-src 'self' https: 'unsafe-inline' *; style-src 'self' https: 'unsafe-inline' *; Doc for Content-Security-Policy 不允许在 frame 中展示 x-frame-options: DENY Doc for X-Frame-Options 为网站提速加载速度 减少不必要的 js 插件，例如字数统计、动态背景。 查找并解决拖慢速度的资源，以 Chrome 浏览器为例： 页面中点击右键，选择「检查」。 在右边的窗口中「Network」选项卡，并勾选「Disable cache」。 刷新网页，查看加载速度慢的资源。 3.1. 加载缓慢的图片，建议使用 CDN。 3.2. 加载缓慢的可以不用的 js 插件，建议舍弃。 3.3. 加载缓慢却必须使用的 js 插件，建议下载并自己上传至 CDN。 运行速度 访问具有动态特效背景（如雪花、粒子等）的网站时，手机很快会发烫变卡，笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。 优化 SEORobotsblog/_config.volantis.ymlseo: # When there are no keywords in the article's front-matter, use tags as keywords. use_tags_as_keywords: true # When there is no description in the article's front-matter, use excerpt as the description. use_excerpt_as_description: true robots: home_first_page: index,follow home_other_pages: noindex,follow archive: noindex,follow category: noindex,follow tag: noindex,follow # robots can be written in front-matter 在 front-matter 中，可以设置 keywords、description、robots 和 seo_title。其中 seo_title 仅仅用作网页标题，优先级高于 title。 文章内部不要使用 H1 标题。 通过死链检测工具检查并删除无法访问的链接。 安装 SEO 优化插件： hexo-autonofollowhttps://github.com/liuzc/hexo-autonofollow hexo-generator-seo-friendly-sitemaphttps://github.com/ludoviclefevre/hexo-generator-seo-friendly-sitemap 页面不要堆砌关键词，不要频繁更改路径。 Open Graphblog/_config.volantis.yml# https://ogp.me/# https://hexo.io/zh-cn/docs/helpers#open-graphopen_graph: image: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/android-chrome-192x192.png twitter_card: summary # summary_large_image , summary #twitter_id: #twitter_site: Structured Datablog/_config.volantis.yml# SEO 入门文档: https://developers.google.com/search/docs# https://schema.org.cn/# 结构化数据用于更改搜索结果的显示效果# 目前内置的结构化数据: blogposting, breadcrumblist, organization, person, website# 目前内置的富媒体搜索结果: 路径(面包屑导航), 徽标(Logo), 站点链接搜索框(SearchAction)# https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data# 富媒体搜索结果测试: https://search.google.com/test/rich-resultsstructured_data: enable: true # 以下是覆盖配置, 默认配置见 scripts/helpers/structured-data/lib/config.js data: person: sns: - https://github.com/volantis-x logo: path: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/android-chrome-192x192.png width: 192 height: 192 使用 CDN对于大部分将博客 deploy 到 GitHub 的用户来说，直接加载本地资源速度比较慢，可以使用 jsdelivr 为开源项目提供的 CDN 服务。 开启方法blog/_config.volantis.yml# 本地静态文件使用 CDN 加速# 默认使用 https://unpkg.com/hexo-theme-volantis@<%- theme.info.theme_version %>/source/js/*.js ，注意版本号对应关系！！可以通过修改以下配置项覆盖# 开发者注意 cdn.enable 设置为 falsecdn: enable: true # CDN 前缀，为空使用默认值，链接最后不加 "/", # 例如： https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page 填写最后编译生成的源码CDN地址前缀，此路径下应该含有/js与/css目录, # 该配置默认值是："https://unpkg.com/hexo-theme-volantis@"+ theme.info.theme_version +"/source" prefix: #https://unpkg.com/hexo-theme-volantis/source # 以下配置可以覆盖 cdn.prefix,配置项的值可以为空，但是要使用CDN必须依据路径填写配置项的键 set: js: app: /js/app.js css: style: /css/style.css # (异步加载样式)# 静态资源版本控制# 本地文件使用文件内容的hash值作为版本号(app.8c1e7c88.js) 其他为时间戳 (?time=1648684470140)# 建议静态资源设置标头浏览器缓存一年边缘缓存一个月 cache-control: max-age=86400, s-maxage=31536000 如果有更新记得刷新缓存cdn_version: true# volantis static 静态资源文件 npm 包 CDN 地址 (后面加 "/" )# https://github.com/volantis-x/volantis-staticvolantis_static_cdn: https://unpkg.com/volantis-static/ 如果你需要对样式进行 DIY，可以只关闭 style 文件的 CDN。 从V5版本开始，首屏样式采用硬编码的方式写在HTML中。首屏样式内含 cover navbar search 的样式，其他样式放入/css/style.css异步加载。 如果你需要对样式进行 DIY，请注意首屏渲染和异步延迟加载的差异。 自定义 CDN如果你把对应的文件上传到自己的 CDN 服务器，可以把对应的链接改为自己的 CDN 链接。 尝试使用 gulp 压缩静态文件安装压缩工具npm install -g gulpnpm install --save-dev gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-terser gulp-sourcemaps gulp 配置文件参考文档： gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-terser gulp-sourcemaps gulp 配置文件 https://github.com/volantis-x/community/blob/main/gulpfile.js 运行 gulpgulp 尝试使用 babel 转换兼容 ES6如果想要兼容旧版浏览器，可以尝试使用 gulp-babel 将 ES6 转换为 ES5。 安装 gulp-babel 工具npm install -g gulpnpm install --save-dev gulp-babel @babel/core @babel/preset-env gulp 配置文件参考文档： gulp gulp-babel gulp 配置文件 https://github.com/volantis-x/community/blob/main/gulpfile.jsgulp.src(['./public/**/*.js', '!./public/**/*.min.js', '!./public/{lib,lib/**}', '!./public/{libs,libs/**}', '!./public/{media,media/**}']) .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(gulp.dest('./public')) 运行 gulpgulp 安装 Service Worker 服务方案一 安装插件安装 hexo-offline-popup 或者 hexo-offline 插件，初次加载速度不变，后期切换页面和刷新网页速度越来越快。 方案二 使用 workbox 自定义配置 step 1. 修改 blog/_config.yml 文件。 blog/_config.yml# 全局导入import: body_end: - <script>"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(n){n.onupdatefound=function(){var e=n.installing;e.onstatechange=function(){switch(e.state){case"installed":navigator.serviceWorker.controller?console.log("Updated serviceWorker."):console.log("serviceWorker Sucess!");break;case"redundant":console.log("The installing service worker became redundant.")}}}}).catch(function(e){console.log("Error during service worker registration:",e)}); </script> step 2. 在 blog/source 中创建 sw.js 文件。 https://gist.github.com/MHuiG/a423c0a953ed5645840a651c33dcd60c 如果你使用了此方案，修改静态文件后发布网页一定要修改缓存版本号。 方案三 参考官网 volantis-sw.jsvolantis-sw.js discussions/791 安装「相关文章」插件 安装插件 npm i -S hexo-related-popular-posts 插件的自定义配置方法： hexo-related-popular-postshttps://github.com/tea3/hexo-related-popular-posts 如果您使用了头图，可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图： blog/_config.ymlpopularPosts: eyeCatchImageAttributeName: headimg 注意需要升级到 5.0.1 及以上版本才可以支持自定义头图，详见 #29 分析与统计数据统计PV 和 UV支持 不蒜子 的访问统计和 leancloud 统计，在配置文件中设置。 若你选择 leancloud 统计, 你还需前往 leancloud 创建应用并填写下面 leancloud 相关配置 若你选择 不蒜子 统计, 请取消下面 busuanzi 的配置注释 blog/_config.volantis.ymlanalytics: busuanzi: #/libs/busuanzi/js/busuanzi.pure.mini.js #https://cdn.jsdelivr.net/gh/volantis-x/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js leancloud: # 请使用自己的 id & key 以防止数据丢失 app_id: # 应用 APP_ID app_key: # 应用 APP_KEY custom_api_server: # 国际版一般不需要写，除非自定义了 API Server 我们还支持以下评论系统提供的访问统计: waline、twikoo、discuss、artalk 如需使用它们，请将上面 leancloud 和 busuanzi 的所有配置注释，并启用对应评论系统的统计功能 字数和阅读时长 安装以下插件：npm i --save hexo-wordcount 修改配置文件，将 wordcount 插件打开blog/_config.volantis.ymlplugins: ... # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount wordcount: enable: #true 然后修改配置文件，将 wordcount 写入需要显示的 meta 位置：blog/_config.volantis.yml# 文章布局article: ... # 文章详情页面的文章卡片本体布局方案 body: # 文章顶部信息 # 从 meta_library 中取 top_meta: [..., wordcount, ...] ... # 文章底部信息 # 从 meta_library 中取 bottom_meta: [..., wordcount, ...] 数据分析百度统计blog/_config.ymlbaidu_analytics_key: 百度统计的key Google Analyticsblog/_config.ymlgoogle_analytics_key: Google Analytics Key 腾讯前端性能监控blog/_config.ymltencent_aegis_id: 上报 id 51LA统计blog/_config.ymlv6_51_la: 应用id 灵雀监控blog/_config.ymlperf_51_la: 应用id CNZZ 统计请参考 ZYMIN 的这篇教程： Hexo hexo+ejs+material x 添加CNZZ统计代码https://zymin.cn/arcticle/hexo+ejs+material.html 更多进阶玩法详见 @TRHX 的这篇博客： Hexo 博客主题个性化https://www.itbob.cn/article/003/ 内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。 主题官网 #进阶玩法https://volantis.js.org/categories/进阶玩法/"},{"title":"开发文档","date":"2024-03-28T06:49:50.070Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/development-api/index.html","permalink":"https://volantis.js.org/v5/development-api/","excerpt":"","text":" Volantis5 Development API for Volantis 样式文件说明/source/css/Readme.md 全局变量volantis我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。 源码参考：layout/_partial/scripts/global.ejs VolantisApp我们提供了全局变量 VolantisApp 和一些全局函数等主题开发调用接口。 源码参考：/source/js/app.js PjaxPjax 重载区域划分接口我们提供了可以实现Pjax重载区域灵活划分的开发接口。 源码参考：layout/_plugins/pjax/index.ejs <pjax></pjax> 标签所有被 <pjax></pjax> 标签包裹的所有元素将被pjax重载。 请检查并确保 pjax 标签必须存在于所有页面 否则 pjax error. <pjax> <!--我是将被pjax重载的内容 begin--> <div> <div></div> <script></script> </div> <!--我是将被pjax重载的内容 end--></pjax> 使用案例：/layout/_partial/scripts/index.ejs script[data-pjax]所有含有 data-pjax 标记的 script 标签将被pjax重载。 <script data-pjax>我是将被pjax重载的内容</script> .pjax-reload script所有在 pjax-reload Class元素内部的 script 标签将被pjax重载。 <div class="pjax-reload"> <div> <div>我不是将被pjax重载的内容</div> <script>我是将被pjax重载的内容</script> </div></div> Pjax 回调方法我们提供了灵活的 Pjax 回调方法。 源码参考： layout/_partial/scripts/global.ejs layout/_plugins/pjax/index.ejs 使用案例：layout/_plugins/pjax/animate.ejs 中括号[]里面的内容表示选项是可选的，可以不填。下同，不再赘述。 volantis.pjax.push 在Pjax请求完成后触发。使用 volantis.pjax.push(callBack[,"callBackName"]) 传入pjax:complete回调函数。 callBack是回调函数,必填。 "callBackName" string类型 默认值是回调函数的函数名，选填。 volantis.pjax.send 在Pjax请求开始后触发。使用 volantis.pjax.send(callBack[,"callBackName"]) 传入pjax:send回调函数。 callBack是回调函数,必填。 "callBackName" string类型 默认值是回调函数的函数名，选填。 volantis.pjax.error 在Pjax请求失败后触发。使用 volantis.pjax.error(callBack[,"callBackName"]) 传入pjax:error回调函数。 callBack是回调函数,必填。 "callBackName" string类型 默认值是回调函数的函数名，选填。 暗黑模式我们提供了暗黑模式灵活的开发接口。 源码参考： layout/_partial/scripts/global.ejs layout/_plugins/darkmode/script.ejs 暗黑模式样式详见：/source/css/Readme.md 当前模式调用 volantis.dark.mode 查看当前模式。返回值为字符串 dark 或者 light。 暗黑模式触发器调用 volantis.dark.toggle() 触发切换亮黑模式。 暗黑模式触发器回调函数调用 volantis.dark.push(callBack[,"callBackName"]) 传入触发器回调函数. 使用案例：layout/_plugins/comments/utterances/script.ejs Message 消息提示我们在 iziToast 的基础上封装了一个简单的消息提示： 源码参考： 源码参考：/source/js/app.js VolantisApp.message(title, message, option, done);VolantisApp.question(title, message, option, success, cancel, done); title：标题（必填），字符串（String） message：内容（必填），字符串（String） option：配置项，对象(Object) done：完成时回调，函数(Function) success：确认时回调，函数(Function) cancel: 取消时回调，函数(Function) option 可选参数： icon, // Fontawesome 图标 time, // 持续时间 position, // 弹出位置 transitionIn, // 弹窗打开动画 transitionOut, // 弹窗关闭动画 messageColor, // 消息颜色 titleColor, // 标题颜色 backgroundColor, // 默认背景色 zindex // 层级 option 配置优先级大于配置文件设置值。 使用范例： // 同样弹窗VolantisApp.message('这里是标题', '这里是弹窗内容');// 居中弹窗VolantisApp.message('系统提示', '这里是 Volantis 主题站，欢迎访问。', { icon: 'fad fa-smile-wink light-blue', position: 'topCenter', transitionIn:'bounceInDown', transitionOut: 'fadeOutDown', time: 10000});// 询问弹窗VolantisApp.question('问卷调查', '你是否喜欢 Volantis 主题', {}, () => { alert('谢谢支持')}, () => { console.log('再接再厉')}); 如果以上两个接口仍然不能满足您的需求，可以参考 iziToast 的内容直接调用 iziToast 动态加载脚本源码参考： layout/_partial/scripts/global.ejs volantis.js("src", cb)volantis.css("src") src String类型 加载脚本URL cb 可选 可以传入onload回调函数 或者 JSON对象 例如: volantis.js("src", ()=>{}) 或 volantis.js("src", {defer:true,onload:()=>{}}) 返回 Promise 对象 如下方法同步加载资源，这利于处理文件资源之间的依赖关系，例如：APlayer 需要在 MetingJS 之前加载 (async () => { await volantis.js("...theme.plugins.aplayer.js.aplayer...") await volantis.js("...theme.plugins.aplayer.js.meting...")})(); 使用案例：layout/_plugins/aplayer/script.ejs 由于返回的是 Promise 对象，也可以采用以下方式实现加载完成后调用回调函数： volantis.js("https://cdn.jsdelivr.net/npm/jquery").then(()=>{ console.log("我在脚本加载完成后调用")}) 按需加载的插件源码参考： layout/_partial/scripts/global.ejs jQueryvolantis.import.jQuery().then(()=>{ // 依赖 jQuery 的代码段 // ..... // .....}) requestAnimationFrame1、requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。 2、在隐藏或不可见的元素中，requestAnimationFrame 将不会进行重绘或回流，这当然就意味着更少的的 cpu，gpu 和内存使用量。 volantis.requestAnimationFrame(() => { // 包含 DOM 操作的代码段 // ......... // .........}) Layout Helper向目标元素动态注入 HTML volantis.layoutHelper(helper, html, opt) helper：Helper id（必填），字符串（String） html：HTML（必填），字符串（String） opt：配置项，对象(Object) opt 可选参数： clean, // 清除 Layout Helper 原有的所有内容, 默认 false pjax, // 支持 pjax, 默认 true helper 可选参数： page-plugins, // 页面插件 Layout, 位于 layout/_partial/article.ejs comments, // 评论 Layout, 位于 layout/_plugins/comments/index.ejs // 向 page-plugins 入口动态注入 id 为 artitalk_main 的 div, 不启用 pjax, 不清除 Layout Helper 原有的内容volantis.layoutHelper("page-plugins",`<div id="artitalk_main"></div>`, { pjax:false, clean:false }) 滚动事件处理源码参考：layout/_partial/scripts/global.ejs 获取滚动条距离顶部的距离volantis.scroll.getScrollTop() 获取滚动方向volantis.scroll.del volantis.scroll.del 中存储了一个数值, 该数值检测一定时间间隔内滚动条滚动的位移, 数值的检测频率是浏览器的刷新频率. 数值为正数时, 表示向下滚动. 数值为负数时, 表示向上滚动. 滚动事件回调函数使用 volantis.scroll.push(callBack[,"callBackName"]) 传入滚动事件回调函数, 当页面滚动时触发回调函数。 volantis.scroll.push(()=>{ if (volantis.scroll.del > 0) { console.log("向下滚动"); } else { console.log("向上滚动"); }}) 使用 volantis.scroll.unengine.push(callBack[,"callBackName"]) 传入非滚动事件回调函数, 当页面没有滚动时触发回调函数。 使用 volantis.scroll.unengine.remove("callBackName") 移除名称为 "callBackName" 的非滚动事件回调函数。 触发页面滚动至目标元素位置// 滚动到目标 Dom 元素 "ele" 位置volantis.scroll.to(ele, option) ele：Dom 元素（必填） option 可选参数： top, // 类型 Float,文档中的纵轴坐标, 默认值 ele.getBoundingClientRect().top + document.documentElement.scrollTop addTop, // 类型 Float,向上面的 top 参数中 添加补偿值. behavior, // 类型 String, 表示滚动行为, 支持参数 smooth (平滑滚动), instant (瞬间滚动) observer, // 类型 Boolean, 是否启用监视器,默认值 false, 监视器用于监视元素是否滚动到指定位置 目前用于处理 toc 部分 lazyload 引起的 cls 导致的定位失败问题. observerDic, // 类型 Float, 监视器监视距离, 默认值 25. 例如: volantis.scroll.to(document.getElementById("locationID"),{addTop: - volantis.dom.header.offsetHeight - 10, behavior: 'instant'}) 对本地文件使用CDN源码参考： layout/_partial/scripts/_ctrl/cdnCtrl.ejs theme.cdn.addJS("name","source","force")theme.cdn.addCSS("name","source","force") 参数都为 String 类型，其中 source 和 force 是可选的。 返回值为 CDN 处理后的链接，并存入theme.cdn.map.js和theme.cdn.map.css中 可以使用theme.cdn.map.js["name"]再次调用。 "name" 是自定义名称 "source" 是资源路径 "force" 是强制覆盖的资源路径 如果"source"为空，则将"name"赋值给"source"。 例如： 对于文件source/js/plugins/sites.js使用CND链接，使用如下方法生成。 theme.cdn.addJS("sites","plugins/sites") 生成的CDN链接可使用 theme.cdn.map.js.sites 回调。 以下用于配置项 cdn.set 覆盖配置,下面是覆盖配置的方法 cdn: enable: true # 以下配置可以覆盖 cdn.prefix,配置项的值可以为空，但是要使用CDN必须依据路径填写配置项的键 set: js: app: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/app.js rightMenu: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/rightMenu.js parallax: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/parallax.js plugins: contributors: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/contributors.js friends: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/friends.js sites: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/sites.js css: style: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/css/style.css message: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/css/message.css 直接使用cdn配置项，不使用theme.cdn.addJS("sites","plugins/sites") 也可以生成 theme.cdn.map.js.sites CDN链接回调 Custom Files 自定义文件在不修改主题原始源代码的情况下添加自定义内容 注入点我们提供了一些注入点接口: let points={ styles:[ "first", "style", "dark", "darkVar", ], views:[ "headBegin", "headEnd", "header", "side", "topMeta", "bottomMeta", "footer", "postEnd", "bodyBegin", "bodyEnd", ]} 样式注入点 first: 向 theme/source/css/first.styl 文件末尾注入自定义内容, 该文件中包含首屏样式,首屏样式采用硬编码的方式写在HTML中。首屏样式内含 cover navbar search 的样式. style: 向 theme/source/css/style.styl 文件末尾注入自定义内容, 该文件中包含异步延迟加载的样式,除首屏样式,其他样式放入此处异步加载. dark: 向 theme/source/css/_style/_plugins/_dark/dark_plugins.styl 文件末尾注入自定义内容, 该文件中包含异步暗黑模式样式 的 强制覆盖样式. darkVar: 向 theme/source/css/_style/_plugins/_dark/dark_async.styl 调用函数 async_dark() 末尾注入自定义内容, 该文件中包含异步暗黑模式样式 的 暗黑模式 CSS 变量. 布局视图注入点 headBegin: 向 theme/layout/_partial/head.ejs 文件 <head> 标签开头注入自定义内容. headEnd: 向 theme/layout/_partial/head.ejs 文件 <head> 标签末尾注入自定义内容. header: 向 theme/layout/_partial/header.ejs 文件 导航栏 .nav-main 末尾注入自定义内容. side: 向 theme/layout/_partial/side.ejs 文件 侧边栏 #l_side 末尾注入自定义内容. topMeta: 向 theme/layout/_partial/meta.ejs 文件 topMetas 末尾注入自定义内容. bottomMeta: 向 theme/layout/_partial/meta.ejs 文件 bottomMetas 末尾注入自定义内容. footer: 向 theme/layout/_partial/footer.ejs 文件 <footer> 标签末尾注入自定义内容. postEnd: 向 theme/layout/_partial/article.ejs 文件 <article> 标签末尾注入自定义内容. bodyBegin: 向 theme/layout/layout.ejs 文件 <body> 标签开头注入自定义内容. bodyEnd: 向 theme/layout/layout.ejs 文件 <body> 标签末尾注入自定义内容. blog/source/_volantis/ 文件夹一般的, 创建 blog/source/_volantis/ 文件夹并在此文件夹下创建与注入点同名同扩展名的文件,用以写入注入点自定义内容. blog/source/_volantis/ ├─ first.styl ├─ style.styl ├─ dark.styl ├─ darkVar.styl ├─ headBegin.ejs ├─ headEnd.ejs ├─ header.ejs ├─ topMeta.ejs ├─ bottomMeta.ejs ├─ postEnd.ejs ├─ bodyBegin.ejs └─ bodyEnd.ejs 当然,你仍然可以修改主题配置文件将自定义布局或样式放置在特定位置.以下是默认配置,该配置已隐藏. blog/_config.volantis.ymlcustom_files: first: source/_volantis/first.styl style: source/_volantis/style.styl dark: source/_volantis/dark.styl darkVar: source/_volantis/darkVar.styl headBegin: source/_volantis/headBegin.ejs headEnd: source/_volantis/headEnd.ejs header: source/_volantis/header.ejs topMeta: source/_volantis/topMeta.ejs bottomMeta: source/_volantis/bottomMeta.ejs postEnd: source/_volantis/postEnd.ejs bodyBegin: source/_volantis/bodyBegin.ejs bodyEnd: source/_volantis/bodyEnd.ejs 示例: blog/source/_volantis/darkVar.stylbody --color-site-body: blue !important theme_inject 过滤器使用 Hexo 过滤器 theme_inject ，可以将所需的自定义内容添加到任何注入点。 如果您的代码很简单，建议您编写脚本，您只需要把 JavaScript 文件放到 scripts 文件夹，在启动时就会自动载入。您可以直接在 blog 文件夹下创建 scripts 文件夹. hexo.extend.filter.register('theme_inject', function(injects) { // ...}); 对于注入布局视图: // The name of same `injectPoint` suggest be unique. If same, it will override low priority configurations.// `locals` and `options` is the same as partial https://hexo.io/docs/helpers#partial.// `order` defines the order of injection, which by default depends on the priority of injection.hexo.extend.filter.register('theme_inject', function(injects) { // it will put code from this filePath into injectPoint. injects.[injectPoint].file(name, filePath, [locals, options, order]); // it will put raw string as code into injectPoint. injects.[injectPoint].raw(name, raw, [locals, options, order]);}); 对于注入样式: hexo.extend.filter.register('theme_inject', function(injects) { // it will put styleFile into injectPoint. injects.[injectPoint].push(styleFile);}); Examples以文件的形式向 theme/css/style.styl 文件末尾注入自定义样式 blog/scripts/example-1.jshexo.extend.filter.register('theme_inject', function(injects) { injects.style.push('source/_data/mystyle.styl');}); 以文本的形式向 <body> 标签末尾注入自定义脚本内容 blog/scripts/example-2.jshexo.extend.filter.register('theme_inject', function(injects) { injects.bodyEnd.raw('load-custom-js', '<script src="js-path-or-cdn.js"></script>');}); 以文件的形式向侧栏注入自定义布局视图内容 blog/scripts/example-3.jshexo.extend.filter.register('theme_inject', function(injects) { injects.side.file('my-favourite-food', 'source/_data/my-favourite-food.ejs');}); 插件系统我们还支持 hexo 的插件系统，无需修改核心模块的源代码即可轻松扩展功能。你可以参考 https://hexo.io/docs/plugins.html#Plugin 学习如何创建插件。 请注意，以上是主题开发文档，不是使用文档！"},{"title":"FAQ","date":"2024-03-28T06:49:50.078Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/faq/index.html","permalink":"https://volantis.js.org/v5/faq/","excerpt":"","text":" Volantis5 FAQ List For Volantis 5 这是什么？我在哪里？我也不知道 我这里出现了故障，需要先做什么？ Troubleshooting any problem without the error log is like driving with your eyes closed. 在没有错误日志的情况下诊断任何问题无异于闭眼开车 控制台报错 SyntaxError: Unexpected token '.'SyntaxError: Unexpected token '.' at new Script (vm.js:88:7) at createScript (vm.js:263:10) at runInThisContext (vm.js:311:10) node.js 版本过低，请升级至 v16.x 及以上版本！ 配置和使用 volantis 5.x 之前请确保 node.js 升级至 v16.x 及以上版本！ 我应该使用哪个版本？使用最新的版本 如何在魔改主题的情况下还能兼顾更新？使用 Custom Files 自定义文件 和 Development API for Volantis. 使用 Hexo Theme Plus 替换掉在 layout 文件夹下的主题文件. 使用 Hexo 插件系统 在 blog 目录根下创建 scripts 文件夹编写脚本. 如何更新主题？RTFM 如何修改 favicon？RTFM 文档为什么和配置文件不一样？以配置文件为准，文档更新的不是非常及时 如何设置主页的背景图？主题有俩种背景图片设置方式 background 仅能设置一张背景图，且背景图范围仅为 cover 区域 parallax 可以设置一张或更多的背景图，当 position 取值为 cover 时，背景图仅为 cover 区域，具有视差滚动效果。position 取值为 fixed 时，背景图固定在整个页面，不具有视差滚动效果。 原 parallax 和 backstretch 已合并为 parallax注意：背景图配置只能生效一个 volantis-x/community/issues/115#issuecomment-907983622 到哪里查找 fontawesome 图标？ https://fontawesome.com/icons 为什么无法正常显示 aplayer？可能是网易云 API 崩溃了 图片怎么添加灯箱放大效果？使用 gallery 标签 控制台有一个奇怪的 Warning？(node:7973) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency(Use `node --trace-warnings ...` to show where the warning was created)(node:7973) Warning: Accessing non-existent property 'column' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'column' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency 我想把它命名为 Warning-738. volantis-x/hexo-theme-volantis/discussions/738 5.0 的友情链接页有啥变化？volantis-x/hexo-theme-volantis/discussions/734 如何正确渲染多行 MathJax 公式？使用 pandoc 正确渲染多行 MathJax 公式 或者直接放图片... 为什么文章会被截断？ What is the answer to Life, the Universe, and Everything?42 上面没有我要找的答案？尝试 打开搜索 或 常见问题与反馈渠道"},{"title":"","date":"2024-03-28T06:49:50.082Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/getting-started/index.html","permalink":"https://volantis.js.org/v5/getting-started/","excerpt":"","text":" Volantis5 A Wonderful Theme for Hexo Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。 示例博客/examples/ 所有的 Volantis 用户都可以按照格式自行创建 Issue 来将自己的博客添加到官网的示例博客页面中。 准备工作能力条件环境配置条件自建博客需要一定的相关知识，在开始前，请务必确保您会使用 markdown 语法，掌握简单的 git 知识，最最重要的是，遇到困难知道该怎么寻求解决： 翻阅和搜索文档 搜索 issues 中是否有解决办法 新建 issue 并按照要求进行操作，详尽地描述您遇到的问题 如果您没有使用过 Hexo 也不要着急，可以先通读一遍 Hexo 中文文档，要想使用地得心应手，最好参照团队提供的开源项目的源码进行搭建： Demo 源码 ｜ 官网源码如果您从旧版本更新或着其它主题迁移，请确保环境版本不要太低，否则会产生兼容性问题。 Hexo: 5.4 ~ 6.xhexo-cli: 4.3 ~ latestnode.js: 16.x LTS ~ latest LTSnpm: 8.x ~ latest LTS 配置和使用 volantis 5.x 之前请确保 node.js 升级至 v16.x 及以上版本！ FAQ List For Volantis 5/v5/faq/ 快速体验如果您已经具备环境配置条件，可以在终端中输入下面这行代码，稍等片刻即可尝鲜体验： git clone https://github.com/volantis-x/demo.git && cd demo && npm i && hexo s 下载与安装volantis 5.x 目前正处于 「stable 阶段」 volantis 4.x 目前正处于 「EOL(End of Life) 阶段」 Tips: volantis 开发发布周期 volantis 开发发布周期依次经过: 「alpha 阶段」=>「beta 阶段」=>「rc 阶段」=>「stable 阶段」=>「EOL 阶段」rc 阶段的测试版本和 stable 阶段的正式版本 我们统称为 「稳定版本」 , 只有 「稳定版本」 发布到 npmalpha 阶段的开发测试版本 和 beta 阶段的测试版本 我们统称为 「小白鼠测试版本」, 「小白鼠测试版本」 仅存在于 Github 仓库的 dev 分支 安装或更新 「稳定版本」 (rc 阶段的测试版本 或 stable 阶段的正式版本) 全新博客安装从其它主题迁移第 1/2 步：修改站点配置文件在 blog/_config.yml 文件中找到并修改：theme: volantis第 2/2 步：下载主题在终端中输入：npm i hexo-theme-volantis 如果您是 Mac 用户，可以使用脚本完成全部流程 在博客路径打开终端，下载安装并应用主题：curl -s https://volantis.js.org/start | bash这行命令将会自动检测并安装所需环境，初始化博客，然后下载安装并应用主题。脚本详细使用方法：#hexo.sh 第 1/3 步：修改站点配置文件在 blog/_config.yml 文件中找到并修改：theme: volantis第 2/3 步：下载主题如果您已经升级到 Hexo 5.0.2 及以上，可以直接使用 npm 命令安装：npm i hexo-theme-volantis对于旧版本，需要下载主题源码到 themes/ 文件夹：git clone https://github.com/volantis-x/hexo-theme-volantis themes/volantis如果您无法访问 GitHub 可以使用国内镜像源：git clone https://e.coding.net/volantis-x/p/hexo-theme-volantis.git themes/volantis第 3/3 步：检查并安装依赖安装 Hexo 搜索的依赖包：npm i hexo-generator-json-content安装 Stylus 渲染器：npm i hexo-renderer-stylus 安装或更新 「小白鼠测试版本」 (alpha 阶段的开发测试版本 或 beta 阶段的测试版本) 第 1/3 步：修改站点配置文件在 blog/_config.yml 文件中找到并修改：theme: volantis第 2/3 步：将主题仓库添加为子模块 将主题添加为子模块 开始前需要确认不存在 themes/volantis 文件夹, 如果有, 请自行删除.sshhttpsgit submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantisgit submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis 第 3/3 步：将主题仓库切换为 dev 分支在终端中输入：cd themes/volantisgit checkout dev第 n/n 步：更新主题在终端中输入：git pull 版本更新注意事项使用主题的时候，尽量 fork 主题到自己的 GitHub，然后进行修改并使用。这样做的好处是：当主题进行重要更新的时候可以根据需要拉取合并代码，使自己 DIY 的主题能够通过更新获取 BUG 修复或者新特性。 如果不懂请自行搜索关键词：fork 更新 实用小技巧所有需要写在主题配置文件中的配置都可以写在站点配置文件的 theme_config: 中，在 Hexo 5.0 后，还可以写在 _config.volantis.yml 文件中，详见 Hexo 官方文档：覆盖主题配置https://hexo.io/zh-cn/docs/configuration#覆盖主题配置也可以直接查看本站源码中站点配置文件的写法：_config.volantis.yml 请对照 更新日志 进行更新. 如何正确地更新主题/how-to-update/ 许可协议本主题采用 MIT开源许可协议 ，永久无限制免费使用。 MIT开源许可协议被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。被授权人可根据程式的需要修改授权条款为适当的内容。在软件和软件的所有副本中都必须包含版权声明和许可声明。 配置与使用配置与使用/v5/site-settings/"},{"title":"页面配置","date":"2024-03-28T06:49:50.086Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/page-settings/index.html","permalink":"https://volantis.js.org/v5/page-settings/","excerpt":"","text":"页面布局模板布局模板 取值 含义 page 独立页面 post 文章页面 docs 文档页面 category 分类页面 tag 标签页面 friends 友链页面 list 列表页面 page & post & docs这三种页面相同，但是有以下细微区别： post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 和 docs 不会。 post 文章末尾最多可以显示「参考资料」、「相关文章」、「版权标识」、「打赏」四个模块。 docs 文章末尾最多可以显示「参考资料」一个模块。 除了归档页面是自动生成的，其它独立页面都需要手动创建 md 文件。 归档页面归档页面是自动生成的，并且初始化的时候已经生成，路径如下： blog/_config.yml# Directoryarchive_dir: archives 关于页面Create file if not exists: source/about/index.md---layout: docsseo_title: 关于bottom_meta: falsesidebar: []twikoo: placeholder: 有什么想对我说的呢？---下面写关于自己的内容 分类页面Create file if not exists: source/categories/index.md---layout: categoryindex: truetitle: 所有分类--- 标签页面Create file if not exists: source/tags/index.md---layout: tagindex: truetitle: 所有标签--- 列表页面Create file if not exists: source/mylist/index.md---layout: listgroup: mylistindex: true--- 结果就是筛选出所有文章中 front-matter 部分含有 group: mylist 的文章。 友链页面创建页面文件Create file if not exists: source/friends/index.md---layout: friends # 必须title: 我的朋友们 # 可选，这是友链页的标题---这里写友链上方的内容。<!-- more -->这里可以写友链页面下方的文字备注，例如自己的友链规范、示例等。 插入友链数据可以 选择布局方案 或 使用友链标签 选择布局方案在主题配置文件中找到以下内容： pages: # 友链页面配置 friends: layout_scheme: traditional # simple: 简单布局, traditional: 传统布局 目前提供2种布局方案： simple: 简单布局，只有头像和标题。 traditional: 传统布局，是 Volantis 旧版本的风格。 以上2种友链的数据源写在以下路径，如果没有请自行创建： blog/source/_data/friends.yml 内容格式为： blog/source/_data/friends.yml- group: # 分组标题 description: # 分组描述 items: - title: # 名称 avatar: # 头像 url: # 链接 screenshot: # 截图 keywords: # 关键词 description: # 描述 - title: # 名称 avatar: # 头像 url: # 链接 screenshot: # 截图 keywords: # 关键词 description: # 描述 不同的布局方式，会用到一部分的字段，一般来说，title、avatar 和 url 都是必须的。这些数据被转成 HTML 标签插入到友链页面的 <!-- more --> 部分。 Volantis 4.x 新增的网站卡片标签的样式 sites 网站卡片布局 在5.0版本移除 被 sites标签 friends标签 contributors标签 替代 issues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代 使用友链标签使用 友链标签 您可以在任何位置插入友链，支持静态数据和动态数据, 关于如何使用 友链标签 插入友链，详见： volantis 主题文档 #友链标签/v5/tag-plugins/#友链标签 404页面Create file if not exists: source/404.md---cover: truerobots: noindex,nofollowsitemap: falseseo_title: 404 Not Foundbottom_meta: falsesidebar: []twikoo: path: /404.html placeholder: 请留言告诉我您要访问哪个页面找不到了---{% p logo center huge, 404 %}{% p center bold, 很抱歉，您访问的页面不存在 %}{% p center small, 可能是输入地址有误或该地址已被删除 %} front-matterfront-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter 字段 含义 值类型 默认值 layout 布局模版 String - title 页面标题 String - seo_title 网页标题 String page.title short_title 页面标题（在group列表中显示） String page.title date 创建时间 Date 文件创建时间 updated 更新日期 Date 文件修改时间 link 外部文章网址 String - music 内部音乐控件 [Object] - robots robots String - keywords 页面关键词 String - description 页面描述、摘要 String - cover 是否显示封面 Bool true top_meta 是否显示文章或页面顶部的meta信息 Bool true bottom_meta 是否显示文章或页面底部的meta信息 Bool true sidebar 页面侧边栏 Bool, Array theme.layout.*.sidebar body 页面主体元素 Array theme.layout.on_page.body thumbnail 缩略图 String false icons 图标 Array [] pin 是否置顶 Bool false headimg 文章头图 url - layout:post 时特有的字段： 字段 含义 值类型 默认值 author 文章作者 [Object] config.author categories 分类 String, Array - tags 标签 String, Array - toc 是否生成目录 Bool true music 字段 是否必须 值类型 server 是 netease, tencent, kugou, xiami, baidu type 是 song, playlist, album, search, artist id 是 song id / playlist id / album id / search keyword 文章置顶在 front-matter 中设置以下值： front-matterpin: true 文章分类多个分类有两种关系，一种是层级（等同于文件夹），一种是并列（等同于标签）。 多级分类： front-matter---categories: [分类A, 分类B]--- 或者 front-matter---categories: - 分类A - 分类B--- 并列分类 front-mattercategories: - [分类A] - [分类B] 多级+并列分类 front-mattercategories: - [分类A, 分类B] - [分类C, 分类D] 文章摘要在文章中插入 <!-- more -->，前面的部分即为摘要。 某篇文章源码---title: xxxdate: 2020-02-21---这是摘要<!-- more -->这是正文 注意： <!-- more --> 前后一定要有空行，不然可能导致显示错位。 设置文章作者Volantis 支持多个作者在一个站点发布文章，其他作者信息需要写在数据文件中，例如： blog/source/_data/author.ymlJon: name: Jon Snow avatar: https://cn.bing.com/th?id=AMMS_fc8f99fd41ebd737a71c4e13806db9a0&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=2&pid=16.1 url: https://gameofthrones.fandom.com/wiki/Jon_SnowDany: name: Daenerys Targaryen avatar: https://tse1-mm.cn.bing.net/th?id=OIP.Yax4wLzIFbcBVUa_RsKywQHaLH&w=80&h=80&c=8&rs=1&qlt=90&dpr=2&pid=3.1&rm=2 url: https://gameofthrones.fandom.com/wiki/Daenerys_Targaryen 在文章的 front-matter 中新增 author 即可： front-matter---title: Jon Snow | Game of Thrones Wiki | Fandomauthor: Jon--- 引入外部文章利用 link，搭配自定义的文章作者信息，你可以在文章列表中显示外部文章或者网址，例如： blog/source/_data/author.ymlxaoxuu: name: xaoxuu avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png url: https://xaoxuu.com front-matter---layout: postdate: 2017-07-05title: [转]如何搭建基于Hexo的独立博客categories: [Dev, Hexo]tags: - Hexoauthor: xaoxuulink: https://xaoxuu.com/blog/2017-07-05-hexo-blog/---![](https://img.vim-cn.com/d9/a9af7dc49fc0af8ca3e6dd2450a2f7095a87db.png) 置顶对于任何文章或者页面，设置 pin: true 即可置顶在首页。 front-matter---pin: true--- 这会导致一个小问题：首页 post 卡片数量多于设定值，如果有强迫症希望每一个分页数量一致，可以安装插件来实现，详见：#421 不归档存放在 _posts 文件夹下的文章一般都会出现在归档页，如果某篇文章不希望出现在归档页面： front-matter---archive: false--- 页面自定义布局显示迷你音乐播放器标题右边显示迷你音乐播放器，支持的字段有：server、type、id。 front-matter---music: server: netease # netease, tencent, kugou, xiami, baidu type: song # song, playlist, album, search, artist id: 16846091 # song id / playlist id / album id / search keyword--- 实际效果见： #contributors 显示 meta 标签文章顶部和底部的日期、分类、更新日期、标签、分享等属于 meta 标签。 front-matter---top_meta: falsebottom_meta: false--- 如果一个页面没有 title 则不会显示 top_meta ，像404、关于页面就可以完全隐藏： front-matter---seo_title: 关于top_meta: falsebottom_meta: false--- 标题右边显示缩略图front-matter---thumbnail: https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png--- 缩略图仅在文章列表和文章页面显示，不会在归档页面显示。 标题右边显示图标front-matter---icons: [fas fa-fire red, fas fa-star green]--- 图标仅在归档页面中显示，可以用来标注热门文章。 可以通过 red / blue / green / yellow / orange / theme / accent 来设置图标的颜色 是否要显示封面如果某个页面需要封面，可以这样写： front-matter---cover: true--- 显示侧边栏通过自由设置边栏卡片来删减对应页面的冗余信息，提高有价值的信息在页面中的权重。 如果某个页面不需要侧边栏，可以这样写： front-matter---sidebar: []--- 某个页面想指定显示某几个侧边栏，就这样写: front-matter---sidebar: [grid, toc, tags] # 放置任何你想要显示的侧边栏部件--- 关闭评论front-matter---comments: false--- 页面插件 (page plugins)在 front-matter 中配置页面插件 front-matter---plugins: - mathjax - katex - artitalk - bbtalk - fcircle - gitter - indent - snackbar: oldversion--- 说说页面以 Artitalk页面 为例: 创建页面文件Create file if not exists: source/artitalk/index.md---seo_title: 说说comments: falseplugins: - artitalk # - bbtalk # - fcircle--- 配置Artitalk在主题配置文件中找到以下内容 # Artitalk https://artitalk.js.org# 配置过程请参考：https://artitalk.js.org/doc.html# 使用过旧版本的请修改Leancloud shuoshuo class部分列名：https://artitalk.js.org/release.html# 除appID和appKEY外均为选填项artitalk: # Set `plugins: ["artitalk"]` to enable in front-matter # 不支持 Pjax # 配置项按照yml格式继续填写即可 appId: # your appID appKey: # your appKEY # serverURL: #leancloud绑定的api访问域名，使用国际版的话不需要填写 # lang: # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语 # pageSize: #每页说说的显示数量 # shuoPla: #在编辑说说的输入框中的占位符 # avatarPla: #自定义头像url的输入框的占位符 # motion: #加载动画的开关，1为开，0为关，默认为开 # bgImg: #说说输入框背景图片url # color1: #说说背景颜色1&按钮颜色1 # color2: #说说背景颜色2&按钮颜色2 # color3: #说说字体颜色 # cssUrl: #自定义css接口 渲染公式默认是不渲染的，如果文章内有公式，需要在 front-matter 中设置开启。即便开启了，文章列表中也不会进行渲染，请注意不要把公式写在文章开头。 example.md:---title: 渲染公式（MathJax）date: 2020-02-23plugins: - mathjax---添加一段描述性文字<!-- more -->$$t+1=2$$$$\\mbox{积累因子}=\\begin{cases}1+ni & \\mbox{单利}\\\\\\\\(1+i)^n & \\mbox{复利}\\end{cases}$$$$\\begin{equation}\\sum_{i=0}^n F_i \\cdot \\phi (H, p_i) - \\sum_{i=1}^n a_i \\cdot ( \\tilde{x_i}, \\tilde{y_i}) + b_i \\cdot ( \\tilde{x_i}^2 , \\tilde{y_i}^2 )\\end{equation}$$$$\\begin{equation}\\beta^*(D) = \\mathop{argmin} \\limits_{\\beta} \\lambda {||\\beta||}^2 + \\sum_{i=1}^n max(0, 1 - y_i f_{\\beta}(x_i))\\end{equation}$$ 查看公式渲染效果 $$t+1=2$$$$\\mbox{积累因子}=\\begin{cases}1+ni & \\mbox{单利}\\\\(1+i)^n & \\mbox{复利}\\end{cases}$$$$\\begin{equation}\\sum_{i=0}^n F_i \\cdot \\phi (H, p_i) - \\sum_{i=1}^n a_i \\cdot ( \\tilde{x_i}, \\tilde{y_i}) + b_i \\cdot ( \\tilde{x_i}^2 , \\tilde{y_i}^2 )\\end{equation}$$$$\\begin{equation}\\beta^*(D) = \\mathop{argmin} \\limits_{\\beta} \\lambda {||\\beta||}^2 + \\sum_{i=1}^n max(0, 1 - y_i f_{\\beta}(x_i))\\end{equation}$$ 如果公式仍无法正确渲染可以阅读 @MicDZ 的这篇文章： 在Material-X上使用KaTeXhttps://www.micdz.cn/article/katex-on-volantis/ 页面 gitter页面配置 front-matter---plugins: - gitter--- 配置 gitter在主题配置文件中找到以下内容 plugins: .... # Gitter # https://gitter.im gitter: room: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 文章页首行缩进front-matter---plugins: - indent--- Snackbar (页面通知)配置数据源数据源写在以下路径，如果没有请自行创建： blog/source/_data/notification.yml 内容格式为： blog/source/_data/notification.ymloldversion: title: 过期的文档 message: 这份文档过于久远，如果您使用的是新版的主题，请查看新版本的文档。 position: bottom # bottom (底部通知), right (右侧通知，会自动消失) theme: warning # default, warning cache: false # 是否记住选项（下次不再弹出） buttons: - title: 查看新版文档 url: /getting-started/ dismiss: false # 点击了是否关闭底部横幅 配置 front-matterfront-matter---plugins: - snackbar: oldversion---"},{"title":"站点配置","date":"2024-03-28T06:49:50.086Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/site-settings/index.html","permalink":"https://volantis.js.org/v5/site-settings/","excerpt":"","text":"博客根目录下的 _config.yml 文件通常负责站点相关配置、第三方 npm 插件相关的配置。 网站标题blog/_config.yml# 网站标题title: my blog 网站图标简单方式完全自定义blog/_config.yml# 网站图标，更多尺寸等图标请使用import方式批量导入favicon: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.icoblog/_config.ymlimport: head_begin: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/browserconfig.xml"> - <meta name="theme-color" content="#ffffff"> - <link rel="apple-touch-icon" sizes="180x180" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon.ico"> - <meta name="apple-mobile-web-app-title" content="Volantis"> - <meta name="application-name" content="Volantis"> - <meta name="msapplication-TileColor" content="#f4f4f4"> - <meta name="msapplication-TileImage" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"> - '<meta name="theme-color" content="#f4f4f4" media="(prefers-color-scheme: light)">' - '<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">' head_end: body_begin: body_end: 多语言设置blog/_config.ymllanguage: - zh-CN - en - zh-HK - zh-TW 对应的翻译文件路径： themes/volantis/languages/ 使用 Import 导入外部文件Volantis 用户可以在不修改主题文件的情况下向 head 和 body 中添加各种标签。 代码片段注入的位置： head_begin: 注入在 <head> 之后 head_end: 注入在 </head> 之前 body_begin: 注入在 <body> 之后 body_end: 注入在 </body> 之前 blog/_config.ymlimport: head_begin: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/browserconfig.xml"> - <meta name="theme-color" content="#ffffff"> - <link rel="apple-touch-icon" sizes="180x180" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon.ico"> - <meta name="apple-mobile-web-app-title" content="Volantis"> - <meta name="application-name" content="Volantis"> - <meta name="msapplication-TileColor" content="#f4f4f4"> - <meta name="msapplication-TileImage" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"> - '<meta name="theme-color" content="#f4f4f4" media="(prefers-color-scheme: light)">' - '<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">' head_end: - <meta name="hello" content="world"> body_begin: - <script></script> body_end: - <script></script> 更多Hexo 官方文档 #配置https://hexo.io/zh-cn/docs/configuration"},{"title":"标签插件","date":"2024-03-28T06:49:50.090Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/tag-plugins/index.html","permalink":"https://volantis.js.org/v5/tag-plugins/","excerpt":"","text":"为了兼容老用户，旧的标签插件在重构之前依然沿用旧的格式，即 command + 空格 作为参数分隔符，而部分新增标签插件是 空格 + 英文竖线 + 空格 ，请注意区分。 我们也在探索哪种分隔符既简单又不容易引起冲突，所以可能存在多种格式，具体以对应文档描述为准。 5.0 版本起临时实验使用英文双冒号 ( :: ) 作为分隔符，之前版本的分隔符写法向下兼容 6.0 版本的分隔符最终计划使用 stellar 的分隔符，之前版本的分隔符写法没有兼容计划 text效果源码带 下划线 的文本；带 着重号 的文本；带 波浪线 的文本；带 删除线 的文本 键盘样式的文本：⌘ + D 密码样式的文本：这里没有验证码带 {% u 下划线 %} 的文本；带 {% emp 着重号 %} 的文本；带 {% wavy 波浪线 %} 的文本；带 {% del 删除线 %} 的文本键盘样式的文本：{% kbd ⌘ %} + {% kbd D %}密码样式的文本：{% psw 这里没有验证码 %} span语法效果源码参数本插件最后更新于 5.0 版本{% span 样式参数::文本内容 %}各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。 超大号文字： Volantis A Wonderful Theme for Hexo各种颜色的标签，包括：{% span red::红色 %}、{% span yellow::黄色 %}、{% span green::绿色 %}、{% span cyan::青色 %}、{% span blue::蓝色 %}、{% span gray::灰色 %}。超大号文字：{% span center logo large::Volantis %} {% span center small::A Wonderful Theme for Hexo %} 属性 可选值 字体 logo, code 颜色 red, yellow, green, cyan, blue, gray 大小 small, h4, h3, h2, h1, large, huge, ultra 对齐方向 left, center, right p参数效果源码参数本插件最后更新于 5.0 版本{% p 样式参数::文本内容 %}红色 黄色 绿色 青色 蓝色 灰色 Volantis A Wonderful Theme for Hexo{% p red::红色 %}{% p yellow::黄色 %}{% p green::绿色 %}{% p cyan::青色 %}{% p blue::蓝色 %}{% p gray::灰色 %}{% p center logo large::Volantis %}{% p center small::A Wonderful Theme for Hexo %} 属性 可选值 字体 logo, code 颜色 red, yellow, green, cyan, blue, gray 大小 small, h4, h3, h2, h1, large, huge, ultra 对齐方向 left, center, right noteNoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。 最后更新于 5.0 版本{% note 样式参数::文本内容 %} 演示效果经典用法可以在配置文件中设置默认样式，为简单的一句话提供最的简便写法。 note quote 适合引用一段话 note info 默认主题色，适合中性的信息 note warning 默认黄色，适合警告性的信息 note error/danger 默认红色，适合危险性的信息 note done/success 默认绿色，适合正确操作的信息 更多图标这些都是默认样式，可以手动加上颜色： note radiation 默认样式 note radiation yellow 可以加上颜色 note bug red 说明还存在的一些故障 note link green 可以放置一些链接 note paperclip blue 放置一些附件链接 note todo 待办事项 note guide clear 可以加上一段向导 note download 可以放置下载链接 note message gray 一段消息 note up 可以说明如何进行更新 note undo light 可以说明如何撤销或者回退 上述示例的源码example:#### 经典用法{% note::可以在配置文件中设置默认样式，为简单的一句话提供最的简便写法。 %}{% note quote::note quote 适合引用一段话 %}{% note info::note info 默认主题色，适合中性的信息 %}{% note warning::note warning 默认黄色，适合警告性的信息 %}{% note danger::note error/danger 默认红色，适合危险性的信息 %}{% note success::note done/success 默认绿色，适合正确操作的信息 %}#### 更多图标这些都是默认样式，可以手动加上颜色：{% note radiation::note radiation 默认样式 %}{% note radiation yellow::note radiation yellow 可以加上颜色 %}{% note bug red::note bug red 说明还存在的一些故障 %}{% note link green::note link green 可以放置一些链接 %}{% note paperclip blue::note paperclip blue 放置一些附件链接 %}{% note todo::note todo 待办事项 %}{% note guide clear::note guide clear 可以加上一段向导 %}{% note download::note download 可以放置下载链接 %}{% note message gray::note message gray 一段消息 %}{% note up::note up 可以说明如何进行更新 %}{% note undo light::note undo light 可以说明如何撤销或者回退 %} 可以支持的参数样式参数位置可以写图标和颜色，多个样式参数用空格隔开。 图标彩色的quote, info, warning, done/success, error/danger 灰色的，也可以指定颜色radiation, bug, idea, link, paperclip, todo, message, guide, download, up, undo 颜色指定颜色clear, light, gray, red, yellow, green, cyan, blue noteblockNoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。 最后更新于 5.0 版本{% noteblock 样式参数（可选）::标题（可选） %}文本段落{% endnoteblock %} 演示效果可以在区块中放置一些复杂的结构，支持嵌套。 标题（可选）Windows 10不是為所有人設計,而是為每個人設計嵌套测试： 请坐和放宽，我正在帮你搞定一切... Folding 测试： 点击查看更多 不要说我们没有警告过你我们都有不顺利的时候 上述示例的源码example:{% noteblock::标题（可选） %}Windows 10不是為所有人設計,而是為每個人設計{% noteblock done %}嵌套测试： 请坐和放宽，我正在帮你搞定一切...{% endnoteblock %}{% folding yellow::Folding 测试： 点击查看更多 %}{% note warning::不要说我们没有警告过你 %}{% noteblock bug red %}我们都有不顺利的时候{% endnoteblock %}{% endfolding %}{% endnoteblock %} 可以支持的参数样式参数位置可以写图标和颜色，多个样式参数用空格隔开。 图标彩色的quote, info, warning, done/success, error/danger 灰色的，也可以指定颜色radiation, bug, idea, link, paperclip, todo, message, guide, download, up, undo 颜色指定颜色clear, light, gray, red, yellow, green, cyan, blue checkbox最后更新于 5.0 版本{% checkbox 样式参数（可选）::文本（支持简单md） %} 演示效果 纯文本测试 支持简单的 markdown 语法 支持自定义颜色 绿色 + 默认选中 黄色 + 默认选中 青色 + 默认选中 蓝色 + 默认选中 增加 减少 叉 上述示例的源码example:{% checkbox 纯文本测试 %}{% checkbox checked::支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}{% checkbox red::支持自定义颜色 %}{% checkbox green checked::绿色 + 默认选中 %}{% checkbox yellow checked::黄色 + 默认选中 %}{% checkbox cyan checked::青色 + 默认选中 %}{% checkbox blue checked::蓝色 + 默认选中 %}{% checkbox plus green checked::增加 %}{% checkbox minus yellow checked::减少 %}{% checkbox times red checked::叉 %} 可以支持的参数颜色red, yellow, green, cyan, blue 样式plus, minus, times 选中状态checked radio最后更新于 5.0 版本{% checkbox 样式参数（可选）::文本（支持简单md） %} 演示效果 纯文本测试 支持简单的 markdown 语法 支持自定义颜色 绿色 黄色 青色 蓝色 上述示例的源码example:{% radio 纯文本测试 %}{% radio checked::支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}{% radio red::支持自定义颜色 %}{% radio green::绿色 %}{% radio yellow::黄色 %}{% radio cyan::青色 %}{% radio blue::蓝色 %} 可以支持的参数颜色red, yellow, green, cyan, blue 选中状态checked timeline最后更新于 3.0 版本{% timeline 时间线标题（可选） %}{% timenode 时间节点（标题） %}正文内容{% endtimenode %}{% timenode 时间节点（标题） %}正文内容{% endtimenode %}{% endtimeline %} 演示效果 2020-07-24 2.6.6 -> 3.0 如果有 hexo-lazyload-image 插件，需要删除并重新安装最新版本，设置 lazyload.isSPA: true。2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 use_cdn: true 则需要删除。2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。2.x 版本的置顶 top: true 改为了 pin: true，并且同样适用于 layout: page 的页面。如果使用了 hexo-offline 插件，建议卸载，3.0 版本默认开启了 pjax 服务。 2020-05-15 2.6.3 -> 2.6.6 不需要额外处理。 2020-04-20 2.6.2 -> 2.6.3 全局搜索 seotitle 并替换为 seo_title。group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。group 组件的列表名优先显示文章的 short_title 其次是 title。 上述示例的源码example:{% timeline %}{% timenode 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) %}1. 如果有 `hexo-lazyload-image` 插件，需要删除并重新安装最新版本，设置 `lazyload.isSPA: true`。2. 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 `use_cdn: true` 则需要删除。3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。4. 2.x 版本的置顶 `top: true` 改为了 `pin: true`，并且同样适用于 `layout: page` 的页面。5. 如果使用了 `hexo-offline` 插件，建议卸载，3.0 版本默认开启了 pjax 服务。{% endtimenode %}{% timenode 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) %}不需要额外处理。{% endtimenode %}{% timenode 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) %}1. 全局搜索 `seotitle` 并替换为 `seo_title`。2. group 组件的索引规则有变，使用 group 组件的文章内，`group: group_name` 对应的组件名必须是 `group_name`。2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`。{% endtimenode %}{% endtimeline %} link最后更新于 5.0 版本{% link 标题::链接::图片链接（可选） %} 演示效果如何参与项目https://volantis.js.org/contributors/ 上述示例的源码example:{% link 如何参与项目::https://volantis.js.org/contributors/::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets@master/logo/256/safari.png %} button这个页面的标签将会在不久后重构 基础按钮请将您的 Volantis 升级至 2.4 版本以上使用。 语法格式参数列表示例写法示例效果{% btn 样式参数（可选）::标题::链接::图标（可选） %} 可选的参数可以省略，但是前后顺序不能乱。样式参数 regular, large, center 图标 第1个或者第2个参数包含 fa- 的那个被识别为图标。example.md:不设置任何参数的 {% btn 按钮:: / %} 适合融入段落中。regular 按钮适合独立于段落之外：{% btn regular::示例博客::https://xaoxuu.com::fas fa-play-circle %}large 按钮更具有强调作用，建议搭配 center 使用：{% btn center large::开始使用::https://volantis.js.org/v3/getting-started/::fas fa-download %}行内按钮 不设置任何参数的 按钮 适合融入段落中。 空心按钮 示例博客 示例博客 示例博客 示例博客 居中： 开始使用 实心按钮 示例博客 示例博客 示例博客 示例博客 居中： 开始使用 富文本按钮请将您的 Volantis 升级至 2.3 版本以上使用。 语法格式参数列表示例写法示例效果{% btns 样式参数 %}{% cell 标题::链接::图片或者图标 %}{% cell 标题::链接::图片或者图标 %}{% endbtns %}样式参数位置可以写图片样式、布局方式，多个样式参数用空格隔开。 圆角样式 默认为方形 rounded, circle 布局方式 默认为自动宽度，适合视野内只有一两个的情况。 参数 含义 wide 宽一点的按钮 fill 填充布局，自动铺满至少一行，多了会换行。 center 居中，按钮之间是固定间距。 around 居中分散 grid2 等宽最多2列，屏幕变窄会适当减少列数。 grid3 等宽最多3列，屏幕变窄会适当减少列数。 grid4 等宽最多4列，屏幕变窄会适当减少列数。 grid5 等宽最多5列，屏幕变窄会适当减少列数。 增加文字样式 可以在容器内增加 <b>标题</b> 和 <p>描述文字</p>如果需要显示类似「团队成员」之类的一组含有头像的链接： example.md:{% btns circle grid5 %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% endbtns %} 或者含有图标的按钮： example.md:{% btns rounded grid5 %}{% cell 下载源码::/::fas fa-download %}{% cell 查看文档::/::fas fa-book-open %}{% endbtns %} 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中 example.md:{% btns circle center grid5 %}<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'> <i class='fab fa-apple'></i> <b>心率管家</b> {% p red::专业版 %} <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'></a><a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'> <i class='fab fa-apple'></i> <b>心率管家</b> {% p green::免费版 %} <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'></a>{% endbtns %}如果需要显示类似「团队成员」之类的一组含有头像的链接： xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu 或者含有图标的按钮： 下载源码 查看文档 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中 心率管家 专业版 心率管家 免费版 ghcard最后更新于 5.0 版本{% ghcard 用户名::其它参数（可选） %}{% ghcard 用户名/仓库::其它参数（可选） %} 用户信息卡片 上述示例的源码： example:| {% ghcard xaoxuu %} | {% ghcard xaoxuu::theme=vue %} || -- | -- || {% ghcard xaoxuu::theme=buefy %} | {% ghcard xaoxuu::theme=solarized-light %} || {% ghcard xaoxuu::theme=onedark %} | {% ghcard xaoxuu::theme=solarized-dark %} || {% ghcard xaoxuu::theme=algolia %} | {% ghcard xaoxuu::theme=calm %} | 仓库信息卡片 上述示例的源码： example:| {% ghcard volantis-x/hexo-theme-volantis %} | {% ghcard volantis-x/hexo-theme-volantis::theme=vue %} || -- | -- || {% ghcard volantis-x/hexo-theme-volantis::theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis::theme=solarized-light %} || {% ghcard volantis-x/hexo-theme-volantis::theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis::theme=solarized-dark %} || {% ghcard volantis-x/hexo-theme-volantis::theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis::theme=calm %} | 更多参数选择GitHub 卡片 API 参数https://github-readme-stats.xaoxuu.com site网站卡片可以显示网站截图、logo、标题、描述，使用方法和 友链标签 一模一样，唯一的区别是数据文件名称为 sites.yml，可以和友链数据混用，通过分组过滤实现不一样的效果。 最后更新于 5.0 版本{% sites [筛选方式]:[组名] %} 演示效果xaoxuu开发者MHuiG划水Colsrch开发者inkss摸鱼 上述示例的源码example{% sites only:community_team %} 可以支持的参数数据按组筛选支持分组（白名单模式和黑名单模式）显示: // 显示 communtiy_team{% sites only:communtiy_team %}// 除了 communtiy_team 别的都显示{% sites not:community_team %}// 多个分组使用 `,` 分隔{% sites only:communtiy_team, communtiy_builder %} dropmenu这个页面的标签将会在不久后重构 下拉菜单请将您的 Volantis 升级至 3.0 版本以上使用。 语法格式示例写法示例效果容器 {% menu 前缀（可省略）::标题::后缀（可省略） %}菜单内容{% endmenu %} 菜单内容 菜单项 {% menuitem 文本::链接::图标 %} 分割线 {% menuitem hr %} 子菜单 {% submenu 嵌套菜单::图标 %}菜单内容{% endsubmenu %}示例1 {% menu 下拉菜单 %}{% menuitem 主题源码::https://github.com/volantis-x/hexo-theme-volantis/::fas fa-file-code %}{% menuitem 更新日志::https://github.com/volantis-x/hexo-theme-volantis/releases/::fas fa-clipboard-list %}{% menuitem hr %}{% submenu 有疑问？::fas fa-question-circle %}{% menuitem 看 FAQ::/faqs/ %}{% menuitem 看 本站源码::https://github.com/volantis-x/volantis-docs/ %}{% menuitem 提 Issue::https://github.com/volantis-x/hexo-theme-volantis/issues/ %}{% endsubmenu %}{% endmenu %} 示例2 {% menu 这个是::下拉菜单 %}（同上）{% endmenu %} 示例3 {% menu 这个是::下拉菜单::的示例效果。 %}（同上）{% endmenu %}示例1 下拉菜单 主题源码 更新日志 有疑问？ 看 FAQ 看 本站源码 提 Issue 示例2 这个是 下拉菜单 主题源码 更新日志 有疑问？ 看 FAQ 看 本站源码 提 Issue 示例3 这个是 下拉菜单 主题源码 更新日志 有疑问？ 看 FAQ 看 本站源码 提 Issue 的示例效果。 tab此插件移植自 NexT #tabs 最后更新于 2.1 版本{% tabs 页面内不重复的ID %}<!-- tab 栏目1 -->内容<!-- endtab --><!-- tab 栏目2 -->内容<!-- endtab -->{% endtabs %} 演示效果栏目1栏目2。。。！！！ 上述示例的源码example:{% tabs tab-id %}<!-- tab 栏目1 -->。。。<!-- endtab --><!-- tab 栏目2 -->！！！<!-- endtab -->{% endtabs %} folding最后更新于 5.0 版本{% folding 参数（可选）::标题 %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endfolding %} 演示效果 查看图片测试 查看默认打开的折叠框 这是一个默认打开的折叠框。 查看代码测试 {% folding green::查看代码测试 %}查看代码测试{% endfolding %} 查看列表测试 hahahehe 查看嵌套测试 查看嵌套测试2 查看嵌套测试3 hahaha 上述示例的源码example:{% folding 查看图片测试 %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endfolding %}{% folding cyan open::查看默认打开的折叠框 %}这是一个默认打开的折叠框。{% endfolding %}{% folding green::查看代码测试 %}{% endfolding %}{% folding yellow::查看列表测试 %}- haha- hehe{% endfolding %}{% folding red::查看嵌套测试 %}{% folding blue::查看嵌套测试2 %}{% folding 查看嵌套测试3 %}hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>{% endfolding %}{% endfolding %}{% endfolding %} 可以支持的参数参数位置可以填写颜色和状态，多个参数用空格隔开。 颜色blue, cyan, green, yellow, red 状态状态填写 open 代表默认打开。 inlineimageInlineimage 标签是一种行内图片标签，可以用来在一段话中间插入表情。 本插件最后更新于 5.0 版本{% inlineimage 图片链接::height=高度（可选） %} 演示效果这是 一段话。 这又是 一段话。 上述示例的源码example:这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif::height=40px %} 一段话。 可以支持的参数高度height=20px imageImage 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。 本插件最后更新于 5.0 版本{% image 链接::width=宽度（可选）::height=高度（可选）::alt=描述（可选）::bg=占位颜色（可选） %} 演示效果添加描述： 每天下课回宿舍的路，没有什么故事。 指定宽度： 指定宽度并添加描述： 每天下课回宿舍的路，没有什么故事。 设置占位背景色： 优化不同宽度浏览的观感 上述示例的源码example:添加描述：{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::alt=每天下课回宿舍的路，没有什么故事。 %}指定宽度：{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px %}指定宽度并添加描述：{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::alt=每天下课回宿舍的路，没有什么故事。 %}设置占位背景色：{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::bg=#1D0C04::alt=优化不同宽度浏览的观感 %} 可以支持的参数图片宽高度example:width=300px::height=32px 图片描述example:alt=图片描述 占位背景色example:bg=#f2f2f2 galleryGallery 标签是一种针对一组图片应用场景的标签。 本插件最后更新于 5.0 版本{% gallery 参数::列数::分组 %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg){% endgallery %} 演示效果一行一个图片 图片描述 一行多个图片（不换行） 图片描述图片描述图片描述 多行多个图片（每行2～8个图片） 上述示例的源码一行一个图片 example.md:{% gallery %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endgallery %} 一行多个图片（不换行） example.md:{% gallery::::one %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg){% endgallery %} 多行多个图片（每行2～8个图片） example.md:{% gallery stretch::6::two %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/007.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/008.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/009.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/010.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/011.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/013.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/014.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/015.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/017.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/018.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/020.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/021.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/022.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/023.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/024.jpg){% endgallery %} 可以支持的参数对齐方向left::center::right 缩放stretch 列数::后面直接写列数，支持 2 ～ 8 列。设定列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。 测试中 设定列数之后 不会产生 累积布局偏移; 没有设定列数 产生了累积布局偏移 分组相同内容的会被归档在一个分组中。 audio本插件最后更新于 2.4 版本{% audio 音频链接 %} 演示效果Your browser does not support the audio tag. 上述示例的源码example:{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %} video本插件最后更新于 5.0 版本{% video 视频链接 %} 演示效果100%宽度 Your browser does not support the video tag. 50%宽度 Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. 25%宽度 Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. 上述示例的源码100%宽度 example.md:{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %} 50%宽度 example.md:{% videos::2 %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% endvideos %} 25%宽度 example.md:{% videos::4 %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% endvideos %} 可以支持的参数对齐方向left::center::right 列数::后面直接写列数，支持 1 ～ 4 列。 frame这是一个能够将图片或者视频套入设备框架中的标签，可以用来更优雅地显示截图、录屏。 本插件最后更新于 5.0 版本{% frame 框架名::img=图片链接::alt=图片描述（可选）::part=top/bottom（可选） %}{% frame 框架名::video=视频链接::part=top/bottom（可选） %} {% frame iphone11::img=https://bu.dusays.com/2020/09/28/baa33914a34ec.jpg::video=https://bu.dusays.com/2020/09/28/39db723f1e200.mp4::part=top %} 在这个示例中同时出现了 img 和 video 那么它就是一个带有封面的视频，在视频加载完成之前会先显示视频封面。 设备框架目前支持的有： iphone11 如果您有以下其它设备框架图(svg)，欢迎 PR 兼容。 android, ipad, macbook, watch 剪裁通过设置 part=top 或者 part=bottom 来显示上半部分或者下半部分，否则将显示完整的框架及其中的图片/视频。 aplayer主题对 APlayer 插件的样式进行了兼容。安装插件： npm i -S hexo-tag-aplayer 使用方法： hexo-tag-aplayerhttps://github.com/MoePlayer/hexo-tag-aplayer issuesissues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代 md在局部渲染外部md文件。 示例写法{% md https://cdn.jsdelivr.net/gh/volantis-x/hexo-theme-volantis/README.md %} md (()=>{ volantis.css(\"https://cdn.bootcdn.net/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css\"); const contentEl = document.getElementById(\"md-3a48fc80-bb3b-1341-af9b-92e7d053bb76\"); const loadMarkdown = (url) => { if (!window.fetch) { contentEl.innerHTML = 'Your browser outdated. Please use the latest version of Chrome or Firefox!您的浏览器版本过低，请使用最新版的 Chrome 或 Firefox 浏览器！'; } else { contentEl.innerHTML = 'Loading ... | 加载中。。。'; fetch(url, { method: \"GET\" }) .then((resp) => { return Promise.all([ resp.ok, resp.status, resp.text(), resp.headers, ]); }) .then(([ok, status, data, headers]) => { if (ok) { return { ok, status, data, headers, }; } else { throw new Error(JSON.stringify(json.error)); } }) .then((resp) => { let data = marked.parse(resp.data); contentEl.innerHTML = data; }) .catch((error) => { console.log(error); contentEl.innerHTML = 'There was a problem loading the file!加载文件时出现问题！'; }); }; }; volantis.js(\"https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js\").then(()=>{ loadMarkdown(\"https://cdn.jsdelivr.net/gh/volantis-x/hexo-theme-volantis/README.md?t=\" + new Date().getTime()); })})(); swiper轮播标签默认一张图片是 50% 宽度，通过设置 width:min 设置为 25% 宽度，width:max 设置为 100% 宽度。 最大图片宽度 {% swiper width:max %}![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot11.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot12.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot13.png){% endswiper %} 最小图片宽度 {% swiper width:min %}![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot01.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot02.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot03.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot04.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot05.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot06.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot07.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot08.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot09.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot10.png){% endswiper %} pandown本插件最后更新于 5.0 版本{% pandown 网盘类型::网盘链接::提取码(可为空)::文件名 %} 演示效果volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) 上述示例的源码example:{% pandown baidu::https://example.com::1234::百度网盘 %}{% pandown tx::https://example.com::1234::腾讯微云 %}{% pandown onedrive::https://example.com::1234::onedrive %}{% pandown hc::https://example.com::1234::和彩云 %}{% pandown ty::https://example.com::1234::天翼云 %}{% pandown aliyun::https://example.com::1234::阿里网盘 %}{% pandown 115::https://example.com::1234::115网盘 %}{% pandown jg::https://example.com::1234::坚果云 %}{% pandown 360::https://example.com::1234::360安全云盘 %}{% pandown 123::https://example.com::1234::123网盘 %}{% pandown qn::https://example.com::1234::七牛云 %}{% pandown github::https://example.com::::Github %}{% pandown lz::https://example.com::1234::蓝奏云 %} 可以支持的参数网盘类型baidu, tx, onedrive, hc, ty, aliyun, 115, jg, 360, 123, qn, github, lz 如果里的主题版本不支持或有问题可查看如下文档 原版文档https://www.yt-blog.top/docs/vls-pandown-tags 友链标签您可以在任何位置插入友链，支持静态数据和动态数据，静态数据需要写在数据文件中： blog/source/_data/friends.ymlvolantis_developer: title: description: items: - title: xaoxuu url: https://github.com/xaoxuu avatar: https://avatars.githubusercontent.com/u/16400144?s=60&v=4 - title: MHuiG url: https://github.com/MHuiG avatar: https://avatars.githubusercontent.com/u/38281581?s=60&v=4 - title: inkss url: https://github.com/inkss avatar: https://avatars.githubusercontent.com/u/31947043?s=60&v=4 - title: Colsrch url: https://github.com/Colsrch avatar: https://avatars.githubusercontent.com/u/58458181?s=60&v=4 - title: Drew233 url: https://github.com/Drew233 avatar: https://avatars.githubusercontent.com/u/47592224?s=60&v=4 - title: Linhk1606 url: https://github.com/Linhk1606 avatar: https://avatars.githubusercontent.com/u/50829219?s=60&v=4 - title: W4J1e url: https://github.com/W4J1e avatar: https://avatars.githubusercontent.com/u/74824162?s=60&v=4community_builder: title: description: items: - title: xaoxuu url: https://github.com/xaoxuu avatar: https://avatars.githubusercontent.com/u/16400144?s=60&v=4 - title: MHuiG url: https://github.com/MHuiG avatar: https://avatars.githubusercontent.com/u/38281581?s=60&v=4 - title: Colsrch url: https://github.com/Colsrch avatar: https://avatars.githubusercontent.com/u/58458181?s=60&v=4 - title: penndu url: https://github.com/penndu avatar: https://avatars.githubusercontent.com/u/46226528?s=60&v=4 - title: heson525 url: https://github.com/heson525 avatar: https://avatars.githubusercontent.com/u/32234343?s=60&v=4 - title: W4J1e url: https://github.com/W4J1e avatar: https://avatars.githubusercontent.com/u/74824162?s=60&v=4 - title: luosiwei-cmd url: https://github.com/luosiwei-cmd avatar: https://avatars.githubusercontent.com/u/61175380?s=60&v=4groupGitHub: title: 来自 GitHub 的朋友 description: '以下友链通过 [GitHub Issue](https://github.com/xaoxuu/friends/issues/) 提交，按 issue 最后更新时间排序：' api: https://issues-api.xaoxuu.com repo: xaoxuu/friends 标题和描述都支持 md 格式，需要写在引号中。如果指定了 api 和 repo 字段，则从 issues 中取第一个 json 代码块数据作为友链。 写法如下{% friends %} 数据按组筛选友链支持分组（白名单模式和黑名单模式）显示： 写法如下// 显示 volantis_developer{% friends only:volantis_developer %}// 显示 volantis_developer 和 community_builder{% friends only:volantis_developer,community_builder %}// 除了 community_builder 别的都显示{% friends not:community_builder %} friends only:volantis_developer xaoxuuMHuiGinkssColsrchDrew233Linhk1606W4J1eericcloseheson525CRainyDayFlexistonMicDZzhaohaihaolixiang810WillyChen123ic3evi1pennduPHIKN1GHTzsStrikecode004AcceptedqinxsXuxuGoodTRHXcofmlunhui1994gyl-coderfi6 实现动态友链可以加载来自 issues 的友链数据，除了需要在 _data/friends.yml 中指定 api 和 repo 外，还需要做一下几件事： 从 xaoxuu/issues-api 作为模板克隆或者 fork 仓库，然后提交一个 issue 进行测试，不出意外的话，仓库中已经配置好了 issue 模板，只需要在模板中指定的位置填写信息就可以了。 提交完 issue 一分钟左右，如果仓库中出现了 output 分支提交，可以点击查看一下文件内容是否已经包含了刚刚提交的 issue 中的数据，如果包含，那么再次回到前端页面刷新就可以看到来自 issue 的友链数据了。 关于自建 Vercel API 如果您想使用自己的 api，请把您刚创建的仓库导入到 Vercel 项目，详见 小冰博客 的教程。 特别感谢小冰博客通过 Vercel 进行加速的方案，解决了原本直接请求 GitHub API 速度过慢的问题。 只显示动态数据如果您不想创建 friends.yml 来设置任何静态数据，可以在标签中设置 api 来只显示动态数据： {% friends api:https://api.vlts.cc/output_data/v2/volantis-x/examples %} 网站卡片标签网站卡片可以显示网站截图、logo、标题、描述，使用方法和友链标签一模一样，唯一的区别是数据文件名称为 sites.yml，可以和友链数据混用，通过分组过滤实现不一样的效果。 示例写法{% sites only:test_demo %} sites only:test_demo volantis-x.js.orgTest Site For Development Hexo 通用标签在文章中使用 <!-- more -->，那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。详见 Hexo 官方文档： Hexo 官方文档 #标签插件https://hexo.io/zh-cn/docs/tag-plugins"},{"title":"主题配置","date":"2024-03-28T06:49:50.094Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/theme-settings/index.html","permalink":"https://volantis.js.org/v5/theme-settings/","excerpt":"","text":"创建主题配置文件主题目录下的 _config.yml 文件通常负责主题相关配置，我们强烈建议您使用代替的主题配置文件以防止自己的配置丢失。那么如何使用代替主题配置文件呢？ 第 1/2 步：创建配置文件 在博客根目录的 _config.yml 文件旁边新建一个文件： _config.volantis.yml ，这个文件中的配置信息优先级高于主题文件夹中的配置文件。 第 2/2 步：覆盖自定义配置 当您需要修改某项内容时，例如导航栏菜单，那么您需要在主题配置文件中找到相关内容，复制进自己创建的配置文件中：blog/_config.volantis.ymlnavbar: visiable: auto # always, auto logo: # choose [img] or [icon + title] img: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png icon: title: menu: - name: 博客 icon: fa-solid fa-rss url: /小提示使用「npm i hexo-theme-volantis」方式安装的主题，主题配置文件在「blog/node_modules/hexo-theme-volantis/_config.yml」使用传统方式安装的主题，主题配置文件在「blog/themes/volantis/_config.yml」 自定义主题外观最大布局宽度blog/_config.volantis.ymlcustom_css: ... max_width: 1080px # Sum of body width and sidebar width 网页所呈现的内容的最大宽度，即 body 和 sidebar 的宽度之和。 抗锯齿blog/_config.volantis.ymlcustom_css: ... font_smoothing: true # font-smoothing for webkit 自定义光标样式blog/_config.volantis.ymlcustom_css: ... cursor: enable: true text: volantis-static/media/cursor/text.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/text.png pointer: volantis-static/media/cursor/pointer.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/pointer.png default: volantis-static/media/cursor/left_ptr.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/left_ptr.png not-allowed: volantis-static/media/cursor/circle.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/circle.png zoom-out: volantis-static/media/cursor/zoom-out.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/zoom-out.png zoom-in: volantis-static/media/cursor/zoom-in.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/zoom-in.png grab: volantis-static/media/cursor/openhand.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/openhand.png 导航栏样式您可以设置导航栏的高度以及视觉特效，视觉特效目前可选的有： shadow：卡片阴影。 floatable：当鼠标移动到容器内时，呈现出浮起来的效果。 blur：背景模糊效果（毛玻璃），当浏览器不支持时显示为不透明。 blog/_config.volantis.ymlcustom_css: ... navbar: height: 64px width: auto # auto, max effect: [shadow, blur] # [shadow, floatable, blur] 滚动条样式blog/_config.volantis.ymlcustom_css: ... scrollbar: size: 4px border: 2px color: '#2196f3' hover: '#ff5722' 侧边栏样式视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。 blog/_config.volantis.ymlcustom_css: ... sidebar: effect: [shadow] # [shadow, floatable, blur] 正文区域样式视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。 blog/_config.volantis.ymlcustom_css: ... body: effect: [shadow] # [shadow, floatable, blur] highlight: language: true # show language of codeblock copy_btn: true text_align: # left, right, justify, center h1: left h2: left h3: left h4: left p: justify 布局间距您可以设置几种标题的布局间距 h2/h3/h4、段落间距 line、区块内部的段落间距 inline。 blog/_config.volantis.ymlcustom_css: ... gap: h2: 48px # Spacing above H2 (only px unit) h3: 24px # Spacing above H3 (only px unit) h4: 16px # Spacing above H4 (only px unit) p: 1em # Paragraph spacing between paragraphs line_height: 1.6 # normal, 1.5, 1.75, 2 ... 自定义字体您可以自定义正文和代码字体。 blog/_config.volantis.ymlcustom_css: ... fontfamily: logofont: fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'Varela Round' url: volantis-static/media/fonts/VarelaRound/VarelaRound-Regular.ttf # https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf weight: normal style: normal bodyfont: fontfamily: 'UbuntuMono, "Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'UbuntuMono' url: volantis-static/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf # https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf weight: normal style: normal codefont: fontfamily: 'Menlo, UbuntuMono, Monaco' # name: 'Monaco' # url: volantis-static/media/fonts/Monaco/Monaco.ttf # https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf # weight: normal # style: normal 自定义颜色多彩配色方案 blog/_config.volantis.ymlcolor_scheme: # ------------ # 通用颜色 common: # 主题色 theme: '#44D7B6' # 链接色 link: '#2196f3' # 按钮色 button: '#44D7B6' # 鼠标放到交互元素上时的色 hover: '#ff5722' # 主题色块内部的文字颜色 inner: '#fff' # 选中区域文字的背景颜色 selection: 'alpha(#2196f3, 0.2)' # ------------ # 亮色主题（默认） light: # 网站背景色 site_bg: '#f4f4f4' # 网站背景上的文字 site_inner: '#fff' # 网站页脚文字 site_footer: '#666' # 卡片背景色 card: '#fff' # 卡片上的普通文字 text: '#444' # 区块和代码块背景色 block: '#f6f6f6' # 代码块高亮时的背景色 codeblock: '#FFF7EA' # 行内代码颜色 inlinecode: '#D56D28' # 文章部分 h1: '#444' h2: '#444' h3: '#444' h4: '#444' h5: '#444' h6: '#444' p: '#444' # 列表文字 list: '#666' # 列表 hover 时的文字 list_hl: 'mix($color-theme, #000, 80)' # 辅助性文字 meta: '#888' # ------------ # 暗色主题 dark: # 网站背景色 site_bg: '#222' # 网站背景上的文字 site_inner: '#eee' # 网站页脚文字 site_footer: '#aaa' # 卡片背景色 card: '#444' # 卡片上的普通文字 text: '#eee' # 区块和代码块背景色 block: '#3a3a3a' # 代码块高亮时的背景色 codeblock: '#343a3c' # 行内代码颜色 inlinecode: '#D56D28' # 文章部分 h1: '#eee' h2: '#eee' h3: '#ddd' h4: '#ddd' h5: '#ddd' h6: '#ddd' p: '#bbb' # 列表文字 list: '#aaa' # 列表 hover 时的文字 list_hl: 'mix($color-theme, #fff, 80)' # 辅助性文字 meta: '#888' # 夜间图片亮度 brightness: 70% 自定义右键菜单自定义右键菜单自 5.0.0-rc.8 版本进行了全新重构，与历史版本相比，重构版右键菜单拥有更灵活的配置。 由于新版右键菜单配置较为复杂，原版菜单暂时性保留，在配置文件上新版右键以 rightmenus 命名。 为了方面称呼，以新版右键代指重构版右键菜单，老版右键代指历史版本右键菜单。 差异对比新旧两版右键菜单的差异如下： 对比项 老版右键 新版右键 自定义菜单项 只支持新增链接型菜单 同时支持事件型和链接型菜单 菜单项显示与顺序调整 部分支持 完全支持 内置菜单自定义调整 部分支持 完全支持修改文字描述、图标显示、功能实现等内容 自定义响应事件处理 不支持 支持自行添加 复制图片至剪切板 仅支持 PNG 格式图片 任意格式的图片 全局音乐控制 支持 支持 新版右键菜单新版右键在菜单项上根据配置文件自行生成前端代码，所以统一了一个共用的菜单对象： {id: '', name: '', icon: '', link: '', event: '', group: ''} 同时为了响应不同状态下的右键行为，提出了内置组 （defaultGroup）的概念，相应的对于右键默认提供的功能实现则定义为内置实现（defaultEvent）。 { defaultEvent: ['copyText', 'copyLink', 'copyPaste', 'copyAll', 'copyCut', 'copyImg', 'printMode', 'readMode'], defaultGroup: ['navigation', 'inputBox', 'seletctText', 'elementCheck', 'elementImage', 'articlePage']} 具体来说，内置组对应右键行为，例如 inputBox 代表在输入框下右键行为；内置实现对应自定义右键默认提供的功能实现，例如 readMode 代表了阅读模式。 参数解释plugins/menus 类的组内数据支持对象（单个菜单）或数组（一系列菜单）rightmenus: order: menus.groupName plugins: defaultGroupItem menus: groupName: - {menu} - {menu} groupName1: {menu} 右键菜单加载菜单的具体加载由 order 控制，可供使用的内容为：plugins.[组名], menus.[组名], hr, music 这四大类。 右键菜单排序菜单的排序由 order 字段的先后顺序和组内菜单项的先后顺序决定。 右键菜单类菜单项共分为两大类：plugins 和 menus，前者放置内置组及内置菜单，允许添加/修改组内菜单；后者为用户自建菜单类，允许添加/修改组及组内菜单。一般意义上 plugins 类的组为动态组，根据实际的右键状态进行显示；menus 类中内容由用户添加，菜单项默认显示。 右键菜单项菜单项共六个字段：id, name, icon, link, event, group，具体作用如下： id: 唯一值 name: 用于菜单名称显示 icon: 用于菜单图标显示 link: 跳转链接 event: 事件，当输入内容不为内置事件时，作 JavaScript 代码执行 group: 菜单项所处分组名称 note link/event 二选一，同时出现时仅处理 link。 内置功能内置组 组名 描述 备注 navigation 导航组件，横向排列，共用一行，仅显示图标 原则上支持的数量不限 inputBox 文本输入框相关组件 生效于 input/textarea seletctText 文本选中类组件 生效于右键选中文本，text 为选中的文本 elementCheck 链接判断组件 生效于链接处的右键行为，link 为链接地址 elementImage 图片判断类组件 生效于图片类的右键行为，link 为链接地址 articlePage 文章页面组件 生效于 post.article 页面 note 除 navigation 外的内置组，在显示时会隐藏含 link 属性的菜单项。 内置实现 事件名 描述 备注 copyText 复制文本 复制选中文本 copyLink 复制链接地址 复制 a 或 image 下的链接至剪切板 copyPaste 粘贴文本 需要用户批准相应权限，仅支持粘贴文本至输入框（暂不支持粘贴图片） copyAll 全选文本 选中输入框内的文本内容 copyCut 剪切文本 剪切输入框中选中的文本内容 copyImg 复制图片 支持 Chrome 浏览器，复制图片资源至剪切板 printMode 打印页面 一个调制过样式的打印功能 readMode 阅读模式 一个简单的阅读模式功能 默认设置iconPrefixFontawesome 图标前缀，音乐类组件使用，参考内容：fa-solid, fa-regular, fa-light, fa-thin, fa-duotone, fa-brands。 articleShowLink在 articlePage 组显示时（文章页）时依旧显示含 link 属性的菜单项。 musicAlwaysShow当设定全局音乐播放器时，是否一直显示音乐控制菜单。false：仅当音乐播放时启用。 corsAnywhere适用于复制图片文件的场景，当图片源未设置 Access-Control-Allow-Origin 时，图片复制由于 CORS 问题失败。 你可以自行部署相应项目解决该问题，详见：Rob--W/cors-anywhere 或者 Zibri/cloudflare-cors-anywhere。 回调方法volantis.rightmenu.handle 在右键菜单打开时执行。 volantis.rightmenu.handle(callBack[,"callBackName", "setRequestAnimationFrame = true"])。 此外，你还可以在 volantis.mouseEvent 处获得 MouseEvent 信息。 配置文件 blog/_config.volantis.yml ### 自定义右键 新rightmenus: enable: true # 右键菜单项及加载顺序 # 内容示例：plugins.[组名], menus.[组名], hr(分割线，推荐去线留白), music(音乐控制器) order: - plugins.navigation - hr - plugins.inputBox - plugins.seletctText - plugins.elementCheck - plugins.elementImage - menus.link - hr - menus.darkMode - plugins.articlePage - music ############################ # - {id: '', name: '', icon: '', link: '', event: '', group: ''} # id: 唯一值 # name: 用于菜单名称显示 # icon: 用于菜单图标显示 # link: 跳转链接 # event: 事件，当输入内容不为内置事件时，作 JavaScript 代码执行 # group: 菜单项所处分组名称 # 注： # 1. link/event 二选一，同时出现时仅处理 link # 2. 内置事件列表： copyText, copyLink, copyPaste, copyAll, copyCut, copyImg, printMode, readMode # 3. 内置组列表：navigation, inputBox, seletctText, elementCheck, elementImage, articlePage # 4. plugins 列允许自定义组内项目 # 5. menus 列允许自定义组及其内容 # 6. 除 navigation 外的内置组，在显示时会隐藏含 link 属性的菜单项 ########################### # 基础项设置 options: # 图标前缀 fa-solid, fa-regular, fa-light, fa-thin, fa-duotone, fa-brands iconPrefix: fa-solid # 例外，在 articlePage 组显示时（文章页）时依旧显示含 link 属性的菜单项 articleShowLink: false # 当设定全局音乐播放器时，是否一直显示音乐控制菜单。false：仅当音乐播放时启用 musicAlwaysShow: false # 适用于复制图片文件的场景，当图片源未设置 Access-Control-Allow-Origin 时，图片复制由于 CORS 问题失败 # 你可以自行部署相应项目解决该问题，详见：https://github.com/Rob--W/cors-anywhere 或者 https://github.com/Zibri/cloudflare-cors-anywhere corsAnywhere: # 右键内置组，预置实现 plugins: # 导航组件 # 横向排列，共用一行，仅显示图标 (原则上支持的数量不限) navigation: - {id: 'left', name: '转到上一页', icon: 'fa-solid fa-arrow-left', event: 'history.back()', group: 'navigation'} - {id: 'right', name: '转到下一页', icon: 'fa-solid fa-arrow-right', event: 'history.forward()', group: 'navigation'} - {id: 'redo', name: '刷新当前页面', icon: 'fa-solid fa-redo', event: 'window.location.reload()', group: 'navigation'} - {id: 'up', name: '回到顶部', icon: 'fa-solid fa-arrow-up', event: 'VolantisApp.scrolltoElement(volantis.dom.bodyAnchor)', group: 'navigation'} #- {id: 'home', name: '回到首页', icon: 'fa-solid fa-home', link: '/', group: 'navigation'} # 文本输入框相关组件 # 生效于 input/textarea，粘贴、剪切、全选 inputBox: - {id: 'copyPaste', name: '粘贴文本', icon: 'fa-solid fa-paste', event: 'copyPaste', group: 'inputBox'} - {id: 'copyAll', name: '全选文本', icon: 'fa-solid fa-object-ungroup', event: 'copyAll', group: 'inputBox'} - {id: 'copyCut', name: '剪切文本', icon: 'fa-solid fa-cut', event: 'copyCut', group: 'inputBox'} # 文本选中类组件 # 生效于右键选中文本，__text__ 为选中的文本。 seletctText: - {id: 'copyText', name: '复制文本', icon: 'fa-solid fa-copy', event: 'copyText', group: 'seletctText'} - {id: 'searchWord', name: '站内搜索', icon: 'fa-solid fa-search', event: 'OpenSearch(__text__)', group: 'seletctText'} - {id: 'bingSearch', name: '必应搜索', icon: 'fa-solid fa-search', event: 'window.open(`https://cn.bing.com/search?q=${__text__}`)', group: 'seletctText'} #- {id: 'googleSearch', name: '谷歌搜索', icon: 'fa-solid fa-search', event: 'window.open(`https://www.google.com/search?q=${__text__}`)', group: 'seletctText'} # 链接判断组件 # 生效于链接处的右键行为，__link__ 为链接地址 elementCheck: - {id: 'openTab', name: '新标签页打开', icon: 'fa-solid fa-external-link-square-alt', event: 'window.open(__link__)', group: 'elementCheck'} - {id: 'copyLink', name: '复制链接地址', icon: 'fa-solid fa-link', event: 'copyLink', group: 'elementCheck'} # 图片判断类组件 # 生效于图片类的右键行为，__link__ 为链接地址 elementImage: - {id: 'copyImg', name: '复制图片', icon: 'fa-solid fa-image', event: 'copyImg', group: 'elementImage'} - {id: 'googleImg', name: '谷歌识图', icon: 'fa-solid fa-images', event: 'window.open(`https://www.google.com.hk/searchbyimage?image_url=${__link__}`)', group: 'elementImage'} # 文章页面组件 # 生效于 post.article 页面 articlePage: - {id: 'printMode', name: '打印页面', icon: 'fa-solid fa-print', event: 'printMode', group: 'articlePage'} - {id: 'readMode', name: '阅读模式', icon: 'fa-solid fa-book-open', event: 'readMode', group: 'articlePage'} # 右键自定义菜单区域 menus: link: - {id: 'help', name: '常见问题', icon: 'fa-solid fa-question', link: 'https://volantis.js.org/faqs/', group: 'link'} - {id: 'examples', name: '示例博客', icon: 'fa-solid fa-rss', link: 'https://volantis.js.org/examples/', group: 'link'} - {id: 'contributors', name: '加入社区', icon: 'fa-solid fa-fan', link: 'https://volantis.js.org/contributors/', group: 'link'} - hr - {id: 'source_docs', name: '本站源码', icon: 'fa-solid fa-code-branch', link: 'https://github.com/volantis-x/volantis-docs/', group: 'link'} - {id: 'source_theme', name: '主题源码', icon: 'fa-solid fa-code-branch', link: 'https://github.com/volantis-x/hexo-theme-volantis/', group: 'link'} darkMode: - {id: 'darkMode', name: '暗黑模式', icon: 'fa-solid fa-moon', event: 'volantis.dark.toggle()', group: 'darkMode'}### 高级玩法可以利用 Custom Files 自定义文件 功能，实现自定义右键菜单脚本及菜单项控制。 一个在右键菜单中添加 查看上一篇、查看下一篇 菜单项的范例： blog/_config.volantis.ymlblog/source/_volantis/bodyEnd.ejs省略了部分不相关内容rightmenus: order: - menus.prevNext menus: prevNext: - {id: 'prev', name: '查看上一篇', icon: 'fa-solid fa-angles-left', event: "volantis.rightmenu.jump('prev')", group: 'prevNext'} - {id: 'next', name: '查看下一篇', icon: 'fa-solid fa-angles-right', event: "volantis.rightmenu.jump('next')", group: 'prevNext'}为了方便管理，将函数挂在 volantis.rightmenu 对象下<script> volantis.rightmenu.jump = (type) => { const selector = type === 'prev' ? 'article .prev-next a.prev' : 'article .prev-next a.next'; const item = document.querySelector(selector); if(!!item) { if(typeof pjax !== 'undefined') { pjax.loadUrl(item.href) } else { window.location.href = item.href; } } } volantis.rightmenu.handle(() => { const prev = document.querySelector('#prev').parentElement, next = document.querySelector('#next').parentElement, articlePrev = document.querySelector('article .prev-next a.prev p.title'), articleNext = document.querySelector('article .prev-next a.next p.title'); prev.style.display = articlePrev ? 'block' : 'none'; prev.title = articlePrev ? articlePrev.innerText : null; next.style.display = articleNext ? 'block' : 'none'; next.title = articleNext ? articleNext.innerText : null; }, 'prevNext', false) </script> 老版右键菜单目前老版右键与新版右键共存，但同时只能开启一个自定义右键菜单。 配置文件 blog/_config.volantis.yml # 自定义右键菜单rightmenu: enable: false faicon: fa # 公共图标类型 fa fal fa-solid fa-duotone # hr: 分割线, music: 音乐控制器 layout: [home, hr, help, examples, contributors, hr, source_docs, source_theme, hr, print, darkmode, reading, music] ### 可选功能项 ### print: # 只有文章页才允许自定义打印 name: 打印页面 icon: fa fa-print darkmode: # 需开启 plugins.darkmodejs name: 暗黑模式 icon: fa fa-moon reading: name: 阅读模式 icon: fa fa-book-open customPicUrl: # 右键的图片复制：只有 Chrome 支持，且只支持 PNG 格式的图片。 enable: false # 如果使用了对象存储且开启了自适应 Webp，那么可以提供额外的链接用以替换图片的访问地址 old: #https://static.inkss.cn/img/article/ new: #https://cdn.jsdelivr.net/gh/inkss/inkss-cdn@master/img/article/ music: # 当设定全局音乐播放器时，是否一直显示音乐控制菜单。false：仅当音乐播放时启用 alwaysShow: true ### 自定义菜单 ### help: name: 常见问题 icon: fa fa-question url: https://volantis.js.org/faqs/ examples: name: 示例博客 icon: fa fa-rss url: https://volantis.js.org/examples/ contributors: name: 加入社区 icon: fa fa-fan fa-spin url: https://volantis.js.org/contributors/ source_docs: name: 本站源码 icon: fa fa-code-branch url: https://github.com/volantis-x/volantis-docs/ source_theme: name: 主题源码 icon: fa fa-code-branch url: https://github.com/volantis-x/hexo-theme-volantis/#### 设置网站导航栏导航栏配置导航栏分为 logo、menu、search 三个区域设置，其中 logo 区域如果设置了图片，则不能显示图标和标题， menu 区域的设置可以写在一个单独的文件中。 blog/_config.volantis.yml# 注意事项：建议规范全站路径 URL 最后带一个 "/" 例如 "about/"navbar: visiable: auto # always, auto logo: # choose [img] or [icon + title] img: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png icon: title: menu: - name: 博客 icon: fa-solid fa-rss url: / - name: 分类 icon: fa-solid fa-folder-open url: categories/ - name: 标签 icon: fa-solid fa-tags url: tags/ - name: 归档 icon: fa-solid fa-archive url: archives/ - name: 友链 icon: fa-solid fa-link url: friends/ - name: 关于 icon: fa-solid fa-info-circle url: about/ search: Search... # Search bar placeholder 菜单嵌套导航栏菜单支持嵌套，嵌套的属性名为 rows ，写法示例： ...- name: 更多 icon: fa-solid fa-ellipsis-v rows: - name: 主题源码 url: https://github.com/volantis-x/hexo-theme-volantis/ - name: 更新日志 url: https://github.com/volantis-x/hexo-theme-volantis/releases/ - name: hr - name: 有疑问？ rows: - name: 看 FAQ url: faqs/ - name: 看 本站源码 url: https://github.com/volantis-x/volantis-docs/ - name: 提 Issue url: https://github.com/volantis-x/hexo-theme-volantis/issues/ - name: hr - name: 公告和测试博文 url: archives/ - name: 示例博客 url: examples/ - name: 特别感谢 url: contributors/ 分割线在子菜单中，新增一个只有 name: hr 的“菜单”就会被渲染成一个分割线。 - name: hr 小标题在子菜单中，新增一个只有 name: 小标题内容（也可以有 icon: 小标题的图标）的“菜单”就会被渲染成一个小标题。 ...- name: 近期 icon: fa-solid fa-clock url: / rows: - name: 热门文章 icon: fa-solid fa-fire - name: ProHUD 开源库的设计思路 url: blog/2019-08-27-prohud/ - name: ValueX：实用的安全对象类型转换库 url: blog/2019-08-29-valuex/ - name: 心率管家 App 的设计与开发 url: blog/2019-07-23-heartmate/ 播放器在子菜单中，新增一个 icon: fa-solid fa-compact-disc 的“菜单”就会被渲染成一个 APlayer 播放器。 - name: 背景音乐 icon: fa-solid fa-compact-disc 设置网站页脚您通过 layout 可以自由布局网站页脚内容 aplayer, social, license, info, copyright。 blog/_config.volantis.ymlsite_footer: # layout of footer: [aplayer, social, license, info, copyright] layout: [aplayer, social, license, info, copyright] social: - icon: fas fa-rss url: atom.xml - icon: fas fa-envelope url: mailto:me@xaoxuu.com - icon: fab fa-github url: https://github.com/xaoxuu - icon: fas fa-headphones-alt url: https://music.163.com/#/user/home?id=63035382 copyright: '[Copyright © 2017-2021 XXX](/)' # You can add your own property here. (Support markdown, for example: br: '<br>') br: '<br>' 其中，aplayer 需要在插件部分设置中启用。您可以新增文字属性，用于展示其它文字信息，例如： blog/_config.volantis.ymlsite_footer: layout: [..., br, hello, ...] ... # You can add your own property here. (Support markdown, for example: br: '<br>') br: '<br>' hello: '[Hello World](/)' 网站与文章封面封面高度blog/_config.volantis.ymlcover: height_scheme: full # full, half ... 目前主题提供两种首页封面高度方案，其它页面均为半屏幕高度。 封面布局方案blog/_config.volantis.ymlcover: ... layout_scheme: dock # search (搜索), dock (坞), featured (精选), focus (焦点) ... 布局方案 适合场景 search 注重搜索 dock 入口选项比较多 featured 选项在4个左右 focus 选项在4个左右 默认显示设置blog/_config.volantis.ymlcover: ... display: home: true archive: false others: false # can be written in front-matter 'cover: true' 由于主页、归档是 hexo 自动生成的，您需要在主题配置文件中设置是否显示封面，而其它页面则可以在 front-matter 中通过设置 cover: true/false 来决定显示封面或者不显示封面。 文章布局配置# 文章布局article: # 文章列表页面的文章卡片布局方案 preview: scheme: landscape # landscape # pin icon for post pin_icon: https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f4cc.svg # auto generate title if not exist auto_title: true # false, true # auto generate excerpt if not exist auto_excerpt: true # false, true # show split line or not line_style: solid # hidden, solid, dashed, dotted # show readmore button readmore: auto # auto, always # 文章详情页面的文章卡片本体布局方案 body: # 文章顶部信息 # 从 meta_library 中取 top_meta: [author, category, date, counter] # ---------------- # 文章页脚组件 footer_widget: # ---------------- # 参考资料、相关资料等 (for layout: post/docs) references: title: 参考资料 icon: fas fa-quote-left # 在 front-matter 中: # references: # - title: 某篇文章 # url: https:// # 即可显示此组件。 # ---------------- # 相关文章，需要安装插件 (for layout: post) # npm i hexo-related-popular-posts related_posts: enable: false title: 相关文章 icon: fas fa-bookmark max_count: 5 # 设为空则不使用文章头图 placeholder_img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg # ---------------- # 版权声明组件 (for layout: post/docs) copyright: enable: true permalink: '本文永久链接是：' content: - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议' - permalink # ---------------- # 打赏组件 (for layout: post/docs) donate: enable: false images: - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png # 文章底部信息 # 从 meta_library 中取 bottom_meta: [updated, tags, share] # meta library meta_library: # 默认文章作者（可在 front-matter 中覆盖） author: avatar: name: 请设置文章作者 url: / # 文章创建日期 date: icon: fas fa-calendar-alt title: '发布于：' format: 'll' # 日期格式 http://momentjs.com/docs/ # 文章更新日期 updated: icon: fas fa-edit title: '更新于：' format: 'll' # 日期格式 http://momentjs.com/docs/ # 文章分类 category: icon: fas fa-folder-open # 文章浏览计数 counter: icon: fas fa-eye unit: '次浏览' # 文章字数和阅读时长 wordcount: icon_wordcount: fas fa-keyboard icon_duration: fas fa-hourglass-half # 文章标签 tags: icon: fas fa-hashtag # 分享 share: - id: qq img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png - id: qzone img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png - id: weibo img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png - id: # qrcode # 当id为qrcode时需要安装插件 npm i hexo-helper-qrcode img: # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png - id: # telegram img: # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/telegram.png 其中 top_meta 和 bottom_meta 部分的取值自 meta_library 库。 侧边栏配置侧边栏小组件与 meta 库不同的是：除了现有的 widget ，您可以很轻易地创建自己的 widget ，然后放在需要的地方。此外，您还可以将 widget 写在单独的文件中。 查看所有相关配置 blog/_config.volantis.ymlsidebar: # 主页、分类、归档等独立页面 for_page: [blogger, category, tagcloud, qrcode] # layout: docs/post 这类文章页面 for_post: [toc] # 侧边栏组件库 widget_library: # --------------------------------------- # blogger info widget blogger: class: blogger display: [desktop, mobile] # [desktop, mobile] avatar: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png shape: rectangle # circle, rectangle url: /about/ title: subtitle: jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails. social: true # --------------------------------------- # toc widget (valid only in articles) toc: class: toc display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-list title: 本文目录 list_number: false min_depth: 2 max_depth: 5 # --------------------------------------- # category widget category: class: category display: [desktop] # [desktop, mobile] header: icon: fas fa-folder-open title: 文章分类 url: /blog/categories/ # --------------------------------------- # tagcloud widget tagcloud: class: tagcloud display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-tags title: 热门标签 url: /blog/tags/ min_font: 14 max_font: 24 color: true start_color: '#999' end_color: '#555' # --------------------------------------- # qrcode widget donate: class: qrcode display: [desktop, mobile] # [desktop, mobile] height: 64px # Automatic height if not set images: - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png # --------------------------------------- # webinfo widget webinfo: class: webinfo display: [desktop] header: icon: fa-solid fa-award title: 站点信息 type: article: enable: true text: '文章数目：' unit: '篇' runtime: enable: true data: '2020/01/01' # 填写建站日期 text: '已运行时间：' unit: '天' wordcount: enable: true text: '本站总字数：' # 需要启用 wordcount unit: '字' visitcounter: siteuv: enable: true text: '本站访客数：' unit: '人' sitepv: enable: true text: '本站总访问量：' unit: '次' lastupd: enable: true friendlyShow: true # 更友好的时间显示 text: '最后活动时间：' unit: '日' 每一个小部件都有 class 和 display，前者代表这个小部件是什么，后者代表这个小部件在什么桌面和移动平台中是否显示，如果在移动平台显示，由于屏幕宽度有限，侧边栏的小部件则会被移动到正文区域下方，因此部分侧边栏小部件便失去意义，建议设置为仅桌面端显示。 小部件名: class: 小部件类别 display: [小部件在桌面端是否显示, 小部件在移动设备是否显示] pjaxReload: true # 是否 pjax 重载 默认 true; 设置为 false 时 确保所有页面都含有该小部件 sticky: true # 是否开启粘性定位，默认 false；设置为 true 时固定在屏幕中 博主信息部件blog/_config.volantis.ymlblogger: class: blogger display: [desktop] # [desktop, mobile] avatar: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png title: subtitle: jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails. social: true 其中，今日诗词 jinrishici 如果设置为一个字符串，这个字符串会变成占位文字，加载失败时显示。如果不需要，就请设置为 jinrishici: false。social 的具体内容请在网站页脚部分设置。 文章目录部件blog/_config.volantis.ymltoc: class: toc display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-list title: 本文目录 list_number: false min_depth: 2 max_depth: 5 这个部件只能放置在侧边栏，并且在文章中有效。在移动设备中预览时，手指向上滑动时，导航栏右边会出现 TOC 按钮，点击即可展开 TOC 部件。如果您需要显示章节序号，请设置 list_number。 min_depth 和 max_depth 代表 TOC 支持的标题层级，最大范围是2～6。 文章分类部件blog/_config.volantis.ymlcategory: class: category display: [desktop] # [desktop, mobile] header: icon: fas fa-folder-open title: 文章分类 url: /blog/categories/ 这个部件可以直接显示所有文章分类，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。 标签云部件blog/_config.volantis.ymltagcloud: class: tagcloud display: [desktop] # [desktop, mobile] header: icon: fas fa-tags title: 热门标签 url: /blog/tags/ min_font: 14 max_font: 24 color: true start_color: '#999' end_color: '#555' 这个部件可以直接显示所有文章的标签，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。 二维码部件blog/_config.volantis.ymldonate: class: qrcode display: [desktop, mobile] # [desktop, mobile] height: 64px # Automatic height if not set images: - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png 您可以放置在文章页脚用于展示打赏图片，也可以放置在侧边栏。 通用文本部件blog/_config.volantis.ymlrepos: class: text display: [desktop] # [desktop, mobile] header: icon: fab fa-github title: 点个赞吧 url: https://github.com/xaoxuu/ content: - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。' - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)' - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)' - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)' 您可以创建用于展示任何文本内容的文本部件。 通用列表部件blog/_config.volantis.ymlwiki-hexo-theme: class: list display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-chevron-left title: Hexo Themes url: /wiki/ rows: - name: Volantis for Hexo url: /wiki/volantis/ - name: Resume for Hexo url: /wiki/resume/ 您可以创建用于展示任何链接列表的列表部件。列表的 rows 中的每一项支持的属性有： name、url、icon、img、avatar，其中 img 是方形图片的链接，avatar 是圆形图片的链接。 组索引这个部件的布局继承自 list 部件，用于展示文章所属的分组的文章列表。请将您的 Volantis 升级至 2.5 版本以上使用。 blog/_config.volantis.ymlgroup-1: class: group display: [desktop, mobile] # [desktop, mobile] header: icon: fab fa-github title: Git url: /wiki/git/ 在文章的 front-matter 中设置： front-mattergroup: group-1order: 16sidebar: [group-1, toc] 「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章，顺序按照 order 从小到大排列。 通用网格部件blog/_config.volantis.ymlfeedback: class: grid display: [desktop, mobile] header: icon: fas fa-headset title: 联系开发者 url: https://github.com/volantis-x/hexo-theme-volantis fixed: true # 固定宽度 rows: - name: 反馈BUG icon: fas fa-bug url: https://github.com/volantis-x/hexo-theme-volantis/issues/ - name: 疑问求助 icon: fas fa-question-circle url: https://github.com/volantis-x/hexo-theme-volantis/issues/ - name: 提个建议 icon: fas fa-lightbulb url: https://github.com/volantis-x/hexo-theme-volantis/issues/ 您可以创建用于展示任何链接列表的网格部件。网格默认根据文字长度自动确定每一个格子的宽度，如果文字长短不一，建议通过设置 fixed: true 来固定宽度，此时文字过长的格子中的文字会换行显示。 通用页面部件blog/_config.volantis.ymltest: class: page display: [desktop, mobile] pid: haha content: excerpt # excerpt, more, content 您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容，可选 excerpt，more，content 分别对应文章的摘要、摘要后面的内容、全文。 音乐部件blog/_config.volantis.ymlmusic: class: music display: [desktop, mobile] # [desktop, mobile] pjaxReload: false 选择评论系统目前共支持 14 款评论系统： artalk, giscus, beaudar, utterances, twikoo, waline, discuss, disqus, disqusjs, gitalk, vssue, livere, isso, hashover blog/_config.volantis.ymlcomments: title: <i class='fas fa-comments'></i> 评论 subtitle: service: giscus GitHub Discussions 系列 giscus A comments system powered by GitHub Discussions. https://giscus.app/blog/_config.volantis.ymlcomments: ... service: giscus ... # giscus # https://giscus.app # https://github.com/laymonage/giscus giscus: # 以下配置按照 yml 格式增删填写即可 # repo: xxx/xxx # repo-id: xxx # category: xxx # category-id: xxx # mapping: "pathname" # reactions-enabled: "1" # emit-metadata: "0" # lang: "zh-CN" # 以上配置按照 yml 格式增删填写即可 theme: light: "light" # https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/light.css dark: "dark" # https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/dark.css GitHub Issues 系列 beaudarutterancesVssueGitalk Beaudar 名称源于粤语“表达”的发音，是 Utterances 的中文版本。 https://beaudar.lipk.org/blog/_config.volantis.ymlcomments: ... service: beaudar ... # beaudar # https://beaudar.lipk.org/ beaudar: repo: xxx/xxx issue-term: pathname issue-number: branch: main position: top order: desc theme: light: github-light dark: github-dark label: ✨💬✨ A lightweight comments widget built on GitHub issues. https://utteranc.es/blog/_config.volantis.ymlcomments: ... service: utterances ... # utterances # https://utteranc.es/ utterances: repo: xxx/xxx issue-term: pathname issue-number: theme: light: github-light dark: github-dark label: ✨💬✨ Vue 驱动的、基于 Issue 的评论插件 https://vssue.js.org/zh/blog/_config.volantis.ymlcomments: ... service: vssue ... vssue: owner: repo: clientId: clientSecret: A modern comment component based on Github Issue and Preact. https://gitalk.github.io/blog/_config.volantis.ymlcomments: ... service: gitalk ... gitalk: clientID: clientSecret: repo: owner: admin: # []clientID 和 clientSecret 的获取方法可自行搜索教程，这里仅简单描述一下步骤：点击 GitHub -> Settings https://github.com/settings/profile点击 Developer settings https://github.com/settings/developers点击 New OAuth App https://github.com/settings/applications/new填写信息：Application name 随便填，我的是：xaoxuu.comHomepage URL 和 Authorization callback URL 都写你的网址，我的是：https://xaoxuu.com可以通过设置 gitalk.id 实现多个页面共用一个评论框。front-matter---gitalk: id: /wiki/volantis/--- Disqus 系列 DisqusDisqusJSIsso Disqus - The #1 way to build an audience on your website. https://disqus.com/blog/_config.volantis.ymlcomments: ... service: disqus ... disqus: shortname:可以通过设置 disqus.path 实现多个页面共用一个评论框。front-matter---disqus: path: /wiki/volantis/--- Render Disqus comments in Mainland China using Disqus API https://github.com/SukkaW/DisqusJSblog/_config.volantis.ymlcomments: ... service: disqusjs ... # DisqusJS # https://github.com/SukkaW/DisqusJS disqusjs: path: # 全局评论地址 # 配置项按照yml格式继续填写即可 除了 [siteName url identifier] 选项 #shortname: #api: #apikey: #admin: #nesting: A commenting server similar to Disqus. https://posativ.org/isso/blog/_config.volantis.ymlcomments: ... service: isso ... isso: url: https://example.com/(path/) src: https://example.com/(path/)js/embed.min.js Valine 衍生系列 Valine 在 5.0 版本被移除,具体原因可参考hexo-theme-next#188#issuecomment-766578906以下是在解决 valine 遗留问题同一时期产生的评论系统故归为一类, 然在其社区issue中也报告了类似的攻击事件(eg: twikoo#157 waline#424 waline#430),故请谨慎选择.discusstwikooWaline 一款简单，安全，免费的评论系统 | A simple, safe, free comment system https://discuss.js.orgblog/_config.volantis.ymlcomments: ... service: discuss ... # Discuss # https://discuss.js.org discuss: js: https://cdn.jsdelivr.net/npm/discuss/dist/Discuss.js # 建议锁定版本 serverURLs: # Discuss server address url # https://discuss.js.org/Quick-Start.html#path其中，placeholder 支持在 front-matter 中设置。front-matter---discuss: placeholder: 你觉得xxx怎么样呢？---也可以通过设置 discuss.path 实现多个页面共用一个评论框。front-matter---discuss: path: /--- 一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system. https://twikoo.js.org/blog/_config.volantis.ymlcomments: ... service: twikoo ... twikoo: js: https://cdn.jsdelivr.net/npm/twikoo@latest # 建议锁定版本 path: # 全局评论地址 # 其他配置项按照yml格式继续填写即可 除了 [el path] 选项 envId: xxxxxxxxxxxxxxx # 腾讯云环境id其中，placeholder 支持在 front-matter 中设置。front-matter---twikoo: placeholder: 你觉得xxx怎么样呢？---也可以通过设置 twikoo.path 实现多个页面共用一个评论框。front-matter---twikoo: path: /--- 一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system. https://waline.js.org/blog/_config.volantis.ymlcomments: ... service: waline ... # Waline # https://waline.js.org/ waline: js: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js path: # 全局评论地址 目前设置全局评论地址后visitor失效,这是waline的问题 placeholder: 快来评论吧~ # 评论占位提示 imageHosting: https://7bu.top/api/upload # 图床api（默认使用去不图床） # 其他配置项按照yml格式继续填写即可 除了 [el path placeholder uploadImage] 选项 serverURL: xxxxxxxxxxxxxxx # Waline 的服务端地址（必填） 测试用地址: https://waline-ruddy.vercel.app ... 可选配置项详见源码其中，placeholder 支持在 front-matter 中设置。front-matter---waline: placeholder: 你觉得xxx怎么样呢？---也可以通过设置 waline.path 实现多个页面共用一个评论框。front-matter---waline: path: /--- Others 其他系列 ArtalkLivereHashoverMore... 一款简洁的自托管评论系统 | A Selfhosted Comment System. https://artalk.js.org/blog/_config.volantis.ymlcomments: ... service: artalk ... artalk: js: https://cdn.jsdelivr.net/npm/artalk@2.1.3/dist/Artalk.js css: https://cdn.jsdelivr.net/npm/artalk@2.1.3/dist/Artalk.css server: http://127.0.0.1:8080/api # 修改为自建的后端服务地址其中，placeholder 支持在 front-matter 中设置。front-matter---artalk: placeholder: 你觉得xxx怎么样呢？---也可以通过设置 artalk.path 实现多个页面共用一个评论框。front-matter---artalk: path: /--- Communication makes better world. https://www.livere.com/blog/_config.volantis.ymlcomments: ... service: livere ... livere: uid: #你的livere的uid在这里查看你的 uid：https://livere.com/insight/myCode，在【代码管理 -> 一般网站】中找到如下这段代码，其中 data-uid 中的内容就是你的 livere_uid。<!-- 来必力City版安装代码 --><div id="lv-container" data-id="city" data-uid="你的livere的uid">... A free and open source PHP comment system designed to allow completely anonymous comments and easy theming. https://www.barkdull.org/software/hashoverblog/_config.volantis.ymlcomments: ... service: hashover ... hashover: src: https://example.com/(path/)comments.phpblog/themes/volantis/layout/_third-party/comments/评论系统名称/layout.ejs这里写布局代码blog/themes/volantis/layout/_third-party/comments/评论系统名称/script.ejs这里要写加载 js 的代码收录更多评论系统 可以通过在 front-matter 设置 config 实现在特定页面修改评论系统的相关配置。 支持的有(按字母顺序): discuss, giscus, gitalk, twikoo, waline front-matter---gitalk: config: id: /233/--- 站内搜索blog/_config.volantis.ymlsearch: enable: true service: hexo # hexo js: https://cdn.jsdelivr.net/xxxxxxxx/js/search/hexo.js 默认配置为 Hexo 搜索，但是需要安装插件才能使用： npm i -S hexo-generator-json-content 原 google, algolia, azure, baidu 站内搜索 系祖传代码, 且文档丢失, 不便后续维护 在 5.0 版本移除 插件库概述Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭，无需进行设置。 幻灯片背景(视差滚动效果)jquery.backstretch 在 5.0 版本 移除, 被 parallax 替代 blog/_config.volantis.ymlplugins: ... parallax: enable: true position: cover # cover: sticky on the cover. fixed: Fixed as background for the site. shuffle: true # shuffle playlist duration: 10000 # Duration (ms) fade: 1500 # fade duration (ms) (Not more than 1500) images: # For personal use only. At your own risk if used for commercial purposes !!! - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg ... 幻灯片背景图片显示的位置可以选择粘贴在封面上，跟随封面一起滑动，也可以选择固定作为网页背景图片。 highlight.jsblog/_config.volantis.ymlplugins: ... # 代码高亮 code_highlight: highlightjs # highlightjs or prismjs # highlight.js highlightjs: copy_code: true # 如果开启 js, hexo.config.highlight.enable 需要设置为 false js: #https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/highlight.min.js # Please set hexo.config.highlight.enable = false !!! css: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/styles/default.min.css # more: https://www.jsdelivr.com/package/npm/highlight.js?path=styles 如果需要使用 highlight.js 进行语法高亮，请将站点配置文件中的 highlight.enable 设置为 false 否则不会加载插件。您可以在 94 种 语法高亮主题 中挑选喜爱的主题，然后替换上面的 css 链接。 如果您使用 highlight.js 请确保没有使用 hexo 官方的 codeblock 标签，否则会报错。 经测试，使用 highlight.js 的情况下，部分容器内的代码可能仍然会被渲染甚至报错。 APlayer 音乐播放器blog/_config.volantis.ymlplugins: ... # APlayer is only available in mainland China. # APlayer config: https://github.com/metowolf/MetingJS aplayer: enable: true js: aplayer: https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js meting: https://cdn.jsdelivr.net/npm/meting@2.0/dist/Meting.min.js # Required server: netease # netease, tencent, kugou, xiami, baidu type: playlist # song, playlist, album, search, artist id: 3175833810 # song id / playlist id / album id / search keyword # Optional fixed: false # enable fixed mode theme: '#1BCDFC' # main color autoplay: false # audio autoplay order: list # player play order, values: 'list', 'random' loop: all # player loop play, values: 'all', 'one', 'none' volume: 0.7 # default volume, notice that player will remember user setting, default volume will not work after user set volume themselves list_max_height: 320px # list max height list_folded: true APlayer播放器只可以在中国大陆地区使用。相关文档： APlayer | MetingJS 暗黑模式blog/_config.volantis.ymlplugins: ... # 暗黑模式 darkmode # 开关按钮：在 navbar.menu 中添加： # - name: 暗黑模式 # 可自定义 # icon: fas fa-moon # 可自定义 # toggle: darkmode darkmode: enable: true 结束支持blog/_config.volantis.ymlplugins: ... # 旧版 Internet Explorer 淘汰行动 # https://www.microsoft.com/zh-cn/WindowsForBusiness/End-of-IE-support # 本主题不支持Internet Explorer的任何版本!!! killOldVersionsOfIE: enable: true # 禁用JavaScript提示 # 本页面需要浏览器支持（启用）JavaScript # 主题中的某些插件必须启用JavaScript才能正常工作，例如开启scrollreveal如果禁用JavaScript会导致卡片消失 killNoScript: enable: true Artitalkblog/_config.volantis.ymlplugins: ... # Artitalk https://artitalk.js.org # 配置过程请参考：https://artitalk.js.org/doc.html # 使用过旧版本的请修改Leancloud shuoshuo class部分列名：https://artitalk.js.org/release.html # 除appID和appKEY外均为选填项 artitalk: # Set `plugins: ["artitalk"]` to enable in front-matter # 不支持 Pjax # 配置项按照yml格式继续填写即可 appId: ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI # your appID appKey: nHXLd3N3Jgh460t2iRQKWAtr # your appKEY # serverURL: #leancloud绑定的api访问域名，使用国际版的话不需要填写 # lang: # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语 # pageSize: #每页说说的显示数量 # shuoPla: #在编辑说说的输入框中的占位符 # avatarPla: #自定义头像url的输入框的占位符 # motion: #加载动画的开关，1为开，0为关，默认为开 # bgImg: #说说输入框背景图片url # color1: #说说背景颜色1&按钮颜色1 # color2: #说说背景颜色2&按钮颜色2 # color3: #说说字体颜色 # cssUrl: #自定义css接口 BBtalkblog/_config.volantis.ymlplugins: ... # BBtalk https://bb.js.org bbtalk: # Set `plugins: ["bbtalk"]` to enable in front-matter # 支持 Pjax js: https://cdn.jsdelivr.net/npm/bbtalk@0.1.5/dist/bbtalk.min.js # BBtalk.js appId: 0KzOX4vC7Jsk6vzUGNeEiUaI-gzGzoHsz # your appID appKey: HwCiWuxfpvKiLm4teCUgTIba # your appKEY serverURLs: https://bbapi.heson10.com # Request Api 域名 Tidioblog/_config.volantis.ymlplugins: ... # 聊天功能 chat_service: tidio # tidio or gitter # Tidio # https://www.tidio.com/ tidio: id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 友链朋友圈blog/_config.volantis.ymlplugins: ... # 友链朋友圈 hexo-circle-of-friends # https://github.com/Rock-Candy-Tea/hexo-circle-of-friends # https://fcircle-doc.js.cool/ fcircle: # Set `plugins: ["fcircle"]` to enable in front-matter # 支持 Pjax api: https://fcircle-api.example.com/ # api 地址 message: 与主机通讯中…… # 占位文字 css: volantis-static/libs/fcircle/fcircle.css js: volantis-static/libs/fcircle/fcircle.js 消息提示blog/_config.volantis.ymlplugins: ... # 消息提示 # izitoast@1.4.0 message: enable: true css: volantis-static/libs/izitoast/dist/css/iziToast.min.css js: volantis-static/libs/izitoast/dist/js/iziToast.min.js icon: # 默认图标，支持对图标添加颜色，可选值：see：/source/css/_style/_plugins/fontcolor.styl default: fa-solid fa-info-circle light-blue quection: fa-solid fa-question-circle light-blue time: # 默认持续时间 default: 5000 quection: 20000 position: 'topRight' # 弹出位置 可选值：topRight, bottomRight, bottomLeft, topLeft, topCenter, bottomCenter, center transitionIn: 'bounceInLeft' # 弹窗打开动画 可选值：bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX transitionOut: 'fadeOutRight' # 弹窗关闭动画 可选值：fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX titleColor: 'var(--color-text)' # 标题颜色 messageColor: 'var(--color-text)' # 消息颜色 backgroundColor: 'var(--color-card)' # 默认背景色 zindex: 2147483647 # 层级 copyright: # 是否在复制时弹出版权提示，影响范围：ctrl+c、代码块复制按钮、右键复制选项 enable: true title: '知识共享许可协议' message: '请遵守 CC BY-NC-SA 4.0 协议。' icon: 'far fa-copyright light-blue' aplayer: # 是否开启音乐通知；播放、暂停、失败 时的图标 enable: true play: fa-solid fa-play pause: fa-solid fa-pause rightmenu: enable: true # 是否开启右键模块的消息通知 notice: true # 唤醒原右键菜单的通知 轮播标签使用方法参见：swiper blog/_config.volantis.ymlswiper: enable: true css: https://unpkg.com/swiper@6/swiper-bundle.min.css js: https://unpkg.com/swiper@6/swiper-bundle.min.js"},{"title":"进阶设定","date":"2024-03-28T06:49:50.094Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/advanced-settings/index.html","permalink":"https://volantis.js.org/v6/advanced-settings/","excerpt":"","text":"设置子模块 将主题添加为子模块 开始前需要确认不存在 themes/volantis 文件夹, 如果有, 请自行删除.sshhttpsgit submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantisgit submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis 多人协同默认的作者信息在主题配置文件中设置： blog/themes/volantis/_config.yml# 文章布局article: ... body: ... meta_library: author: avatar: name: 请设置文章作者 url: / Volantis 支持多个作者在一个站点发布文章，其他作者信息需要写在数据文件中，例如： blog/source/_data/author.ymlJon: name: Jon Snow avatar: https://cn.bing.com/th?id=AMMS_fc8f99fd41ebd737a71c4e13806db9a0&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=2&pid=16.1 url: https://gameofthrones.fandom.com/wiki/Jon_SnowDany: name: Daenerys Targaryen avatar: https://tse1-mm.cn.bing.net/th?id=OIP.Yax4wLzIFbcBVUa_RsKywQHaLH&w=80&h=80&c=8&rs=1&qlt=90&dpr=2&pid=3.1&rm=2 url: https://gameofthrones.fandom.com/wiki/Daenerys_Targaryen 在文章的 front-matter 中新增 author 即可： ---title: Jon Snow | Game of Thrones Wiki | Fandomauthor: Jon--- 内容安全策略(CSP)blog/_config.volantis.yml# 内容安全策略( CSP ) meta 标签 http-equiv="Content-Security-Policy"# https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP# https://content-security-policy.com/# 也可以设为 false 在 HTTP 标头中设置 https://volantis.js.org/v6/advanced-settings/#设置-HTTP-响应标头csp: enable: true content: " default-src 'self' https:; block-all-mixed-content; base-uri 'self' https:; form-action 'self' https:; worker-src 'self' https:; connect-src 'self' https: *; img-src 'self' data: https: *; media-src 'self' https: *; font-src 'self' data: https: *; frame-src 'self' https: *; manifest-src 'self' https: *; child-src https:; script-src 'self' https: 'unsafe-inline' *; style-src 'self' https: 'unsafe-inline' *; " # 可以使用自动程序替换默认的 'unsafe-inline' 和 * 生成更严格的内容安全策略. # 另可以参考官网之前的 gulp 方案.（CSP Level 3 ：Safari 15.4+ Chrome 59+ Firefox 58+ Edge 79+） # gulpfile.js https://gist.github.com/MHuiG/e50ce64fd94f641f679a0736fef925e4 设置 HTTP 响应标头以 Cloudflare 为例， 在 规则 > 转换规则 > HTTP 响应头修改 中，可以添加以下设置： 内容安全策略( CSP ) Content-Security-Policy: default-src 'self' https:; block-all-mixed-content; base-uri 'self' https:; form-action 'self' https:; worker-src 'self' https:; connect-src 'self' https: *; img-src 'self' data: https: *; media-src 'self' https: *; font-src 'self' data: https: *; frame-src 'self' https: *; manifest-src 'self' https: *; child-src https:; script-src 'self' https: 'unsafe-inline' *; style-src 'self' https: 'unsafe-inline' *; Doc for Content-Security-Policy 不允许在 frame 中展示 x-frame-options: DENY Doc for X-Frame-Options 为网站提速加载速度 减少不必要的 js 插件，例如字数统计、动态背景。 查找并解决拖慢速度的资源，以 Chrome 浏览器为例： 页面中点击右键，选择「检查」。 在右边的窗口中「Network」选项卡，并勾选「Disable cache」。 刷新网页，查看加载速度慢的资源。 3.1. 加载缓慢的图片，建议使用 CDN。 3.2. 加载缓慢的可以不用的 js 插件，建议舍弃。 3.3. 加载缓慢却必须使用的 js 插件，建议下载并自己上传至 CDN。 运行速度 访问具有动态特效背景（如雪花、粒子等）的网站时，手机很快会发烫变卡，笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。 优化 SEORobotsblog/_config.volantis.ymlseo: # When there are no keywords in the article's front-matter, use tags as keywords. use_tags_as_keywords: true # When there is no description in the article's front-matter, use excerpt as the description. use_excerpt_as_description: true robots: home_first_page: index,follow home_other_pages: noindex,follow archive: noindex,follow category: noindex,follow tag: noindex,follow # robots can be written in front-matter 在 front-matter 中，可以设置 keywords、description、robots 和 seo_title。其中 seo_title 仅仅用作网页标题，优先级高于 title。 文章内部不要使用 H1 标题。 通过死链检测工具检查并删除无法访问的链接。 安装 SEO 优化插件： hexo-autonofollowhttps://github.com/liuzc/hexo-autonofollow hexo-generator-seo-friendly-sitemaphttps://github.com/ludoviclefevre/hexo-generator-seo-friendly-sitemap 页面不要堆砌关键词，不要频繁更改路径。 Open Graphblog/_config.volantis.yml# https://ogp.me/# https://hexo.io/zh-cn/docs/helpers#open-graphopen_graph: image: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/android-chrome-192x192.png twitter_card: summary # summary_large_image , summary #twitter_id: #twitter_site: Structured Datablog/_config.volantis.yml# SEO 入门文档: https://developers.google.com/search/docs# https://schema.org.cn/# 结构化数据用于更改搜索结果的显示效果# 目前内置的结构化数据: blogposting, breadcrumblist, organization, person, website# 目前内置的富媒体搜索结果: 路径(面包屑导航), 徽标(Logo), 站点链接搜索框(SearchAction)# https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data# 富媒体搜索结果测试: https://search.google.com/test/rich-resultsstructured_data: enable: true # 以下是覆盖配置, 默认配置见 scripts/helpers/structured-data/lib/config.js data: person: sns: - https://github.com/volantis-x logo: path: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/android-chrome-192x192.png width: 192 height: 192 使用 CDN对于大部分将博客 deploy 到 GitHub 的用户来说，直接加载本地资源速度比较慢，可以使用 jsdelivr 为开源项目提供的 CDN 服务。 开启方法blog/_config.volantis.ymlcdn_system: # CDN 优先级 从高到低排序 写入 priority 列表即表示启用(enable) priority: [custom, local, cdnjs, npm, static] # ======================================================================== # cdn数据配置文件见 "theme/_cdn.yml", 可以在 source/_data/cdn.yml 覆盖 theme/_cdn.yml # 变量说明： # 以下变量只能在 `prefix` 中使用。 # ${site_root} 站点根目录 一般是 "/" # 以下变量只能在 `format` 中使用。 # ${prefix} CDN 链接前缀 # ${name} package 名称 见 "theme/_cdn.yml" # ${version} package 版本 见 "theme/_cdn.yml" # ${file} 文件路径 见 "theme/_cdn.yml" # ${min_file} 文件路径 ${file} 后添加 .min. (jsdelivr、cdnjs 官方自带压缩) # ${timestamp} Hexo运行时的时间戳(eg：1661246702300), 可用于静态资源版本控制 format: ${prefix}${file}?v=${timestamp} system_config: # 自定义配置 使用 "theme/_cdn.yml" 中的名称作为配置项的键 custom: #volantis_style: /css/style.css #volantis_app: /js/app.js # 主题 /js与/css目录 （一般放在本地，可以在此处配置站点CDN）,"theme/_cdn.yml" 中以 "volantis_" 开头的名称 # Tip: 在本配置文件中 匹配以 "volantis-local" 开头的链接路径替换为该格式的前缀开头 prefix local: # CDN 链接前缀 prefix: ${site_root} # local CDN 格式 format: ${prefix}${file} # npm # https://www.npmjs.com/ # Tip: 在本配置文件中 匹配以 "volantis-npm" 开头的链接路径替换为该格式的前缀开头 prefix npm: # CDN 链接前缀 prefix: https://unpkg.com # npm CDN 格式 format: ${prefix}/${name}@${version}/${file} # volantis static 静态资源文件 npm 包 CDN 地址 # https://github.com/volantis-x/volantis-static # Tip: 在本配置文件中 匹配以 "volantis-static" 开头的链接路径替换为该格式的前缀开头 prefix static: # CDN 链接前缀 prefix: https://unpkg.com/volantis-static@0.0.1660614606622 # volantis-static CDN 格式 format: ${prefix}/libs/${name}/${file} # cdnjs # https://cdnjs.com/ # Tip: 在本配置文件中 匹配以 "volantis-cdnjs" 开头的链接路径替换为该格式的前缀开头 prefix cdnjs: # CDN 链接前缀 prefix: https://cdnjs.cloudflare.com/ajax/libs # cdnjs CDN 格式 format: ${prefix}/${name}/${version}/${min_file} # ======================================================================== 如果你需要对样式进行 DIY，可以只关闭 style 文件的 CDN。 从V5版本开始，首屏样式采用硬编码的方式写在HTML中。首屏样式内含 cover navbar search 的样式，其他样式放入/css/style.css异步加载。 如果你需要对样式进行 DIY，请注意首屏渲染和异步延迟加载的差异。 自定义 CDN如果你把对应的文件上传到自己的 CDN 服务器，可以把对应的链接改为自己的 CDN 链接。 尝试使用 gulp 压缩静态文件安装压缩工具npm install -g gulpnpm install --save-dev gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-terser gulp-sourcemaps gulp 配置文件参考文档： gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-terser gulp-sourcemaps gulp 配置文件 https://github.com/volantis-x/community/blob/main/gulpfile.js 运行 gulpgulp 尝试使用 babel 转换兼容 ES6如果想要兼容旧版浏览器，可以尝试使用 gulp-babel 将 ES6 转换为 ES5。 安装 gulp-babel 工具npm install -g gulpnpm install --save-dev gulp-babel @babel/core @babel/preset-env gulp 配置文件参考文档： gulp gulp-babel gulp 配置文件 https://github.com/volantis-x/community/blob/main/gulpfile.jsgulp.src(['./public/**/*.js', '!./public/**/*.min.js', '!./public/{lib,lib/**}', '!./public/{libs,libs/**}', '!./public/{media,media/**}']) .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(gulp.dest('./public')) 运行 gulpgulp 安装 Service Worker 服务方案一 安装插件安装 hexo-offline-popup 或者 hexo-offline 插件，初次加载速度不变，后期切换页面和刷新网页速度越来越快。 方案二 使用 workbox 自定义配置 step 1. 修改 blog/_config.yml 文件。 blog/_config.yml# 全局导入import: body_end: - <script>"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(n){n.onupdatefound=function(){var e=n.installing;e.onstatechange=function(){switch(e.state){case"installed":navigator.serviceWorker.controller?console.log("Updated serviceWorker."):console.log("serviceWorker Sucess!");break;case"redundant":console.log("The installing service worker became redundant.")}}}}).catch(function(e){console.log("Error during service worker registration:",e)}); </script> step 2. 在 blog/source 中创建 sw.js 文件。 https://gist.github.com/MHuiG/a423c0a953ed5645840a651c33dcd60c 如果你使用了此方案，修改静态文件后发布网页一定要修改缓存版本号。 方案三 参考官网 volantis-sw.jsvolantis-sw.js discussions/791 安装「相关文章」插件 安装插件 npm i -S hexo-related-popular-posts 插件的自定义配置方法： hexo-related-popular-postshttps://github.com/tea3/hexo-related-popular-posts 如果您使用了头图，可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图： blog/_config.ymlpopularPosts: eyeCatchImageAttributeName: headimg 注意需要升级到 5.0.1 及以上版本才可以支持自定义头图，详见 #29 分析与统计数据统计PV 和 UV支持 不蒜子 的访问统计，在配置文件中设置。 blog/_config.volantis.ymlplugins: busuanzi: enable: true 我们还支持以下评论系统提供的访问统计: waline、twikoo、discuss、artalk 如需使用它们，请开启对应评论系统的相关设置，此时将接管含评论页面的 PV 量统计。 推广：杜老师自建国内不蒜子统计平台：4H8G，60G，下行 500M，上行 50M，阿里 CDN。 字数和阅读时长 安装以下插件：npm i --save hexo-wordcount 修改配置文件，将 wordcount 插件打开blog/_config.volantis.ymlplugins: ... # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount wordcount: enable: #true 然后修改配置文件，将 wordcount 写入需要显示的 meta 位置：blog/_config.volantis.yml# 文章布局article: ... # 文章详情页面的文章卡片本体布局方案 body: # 文章顶部信息 # 从 meta_library 中取 top_meta: [..., wordcount, ...] ... # 文章底部信息 # 从 meta_library 中取 bottom_meta: [..., wordcount, ...] 数据分析百度统计blog/_config.ymlbaidu_analytics_key: 百度统计的key Google Analyticsblog/_config.ymlgoogle_analytics_key: Google Analytics Key 腾讯前端性能监控blog/_config.ymltencent_aegis_id: 上报 id 51LA统计blog/_config.ymlv6_51_la: 应用id 灵雀监控blog/_config.ymlperf_51_la: 应用id CNZZ 统计请参考 ZYMIN 的这篇教程： Hexo hexo+ejs+material x 添加CNZZ统计代码https://zymin.cn/arcticle/hexo+ejs+material.html 更多进阶玩法详见 @TRHX 的这篇博客： Hexo 博客主题个性化https://www.itbob.cn/article/003/ 内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。 主题官网 #进阶玩法https://volantis.js.org/categories/进阶玩法/"},{"title":"开发文档","date":"2024-03-28T06:49:50.098Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/development-api/index.html","permalink":"https://volantis.js.org/v6/development-api/","excerpt":"","text":" Volantis6 Development API for Volantis 样式文件说明/source/css/Readme.md 全局变量volantis我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。 源码参考：layout/_partial/scripts/global.ejs VolantisApp我们提供了全局变量 VolantisApp 和一些全局函数等主题开发调用接口。 源码参考：/source/js/app.js PjaxPjax 重载区域划分接口我们提供了可以实现Pjax重载区域灵活划分的开发接口。 源码参考：layout/_plugins/pjax/index.ejs <pjax></pjax> 标签所有被 <pjax></pjax> 标签包裹的所有元素将被pjax重载。 请检查并确保 pjax 标签必须存在于所有页面 否则 pjax error. <pjax> <!--我是将被pjax重载的内容 begin--> <div> <div></div> <script></script> </div> <!--我是将被pjax重载的内容 end--></pjax> 使用案例：/layout/_partial/scripts/index.ejs script[data-pjax]所有含有 data-pjax 标记的 script 标签将被pjax重载。 <script data-pjax>我是将被pjax重载的内容</script> .pjax-reload script所有在 pjax-reload Class元素内部的 script 标签将被pjax重载。 <div class="pjax-reload"> <div> <div>我不是将被pjax重载的内容</div> <script>我是将被pjax重载的内容</script> </div></div> Pjax 回调方法我们提供了灵活的 Pjax 回调方法。 源码参考： layout/_partial/scripts/global.ejs layout/_plugins/pjax/index.ejs 使用案例：layout/_plugins/pjax/animate.ejs 中括号[]里面的内容表示选项是可选的，可以不填。下同，不再赘述。 volantis.pjax.push 在Pjax请求完成后触发。使用 volantis.pjax.push(callBack[,"callBackName"]) 传入pjax:complete回调函数。 callBack是回调函数,必填。 "callBackName" string类型 默认值是回调函数的函数名，选填。 volantis.pjax.send 在Pjax请求开始后触发。使用 volantis.pjax.send(callBack[,"callBackName"]) 传入pjax:send回调函数。 callBack是回调函数,必填。 "callBackName" string类型 默认值是回调函数的函数名，选填。 volantis.pjax.error 在Pjax请求失败后触发。使用 volantis.pjax.error(callBack[,"callBackName"]) 传入pjax:error回调函数。 callBack是回调函数,必填。 "callBackName" string类型 默认值是回调函数的函数名，选填。 暗黑模式我们提供了暗黑模式灵活的开发接口。 源码参考： layout/_partial/scripts/global.ejs layout/_plugins/darkmode/script.ejs 暗黑模式样式详见：/source/css/Readme.md 当前模式调用 volantis.dark.mode 查看当前模式。返回值为字符串 dark 或者 light。 暗黑模式触发器调用 volantis.dark.toggle() 触发切换亮黑模式。 暗黑模式触发器回调函数调用 volantis.dark.push(callBack[,"callBackName"]) 传入触发器回调函数. 使用案例：layout/_plugins/comments/utterances/script.ejs Message 消息提示我们在 iziToast 的基础上封装了一个简单的消息提示： 源码参考： 源码参考：/source/js/app.js VolantisApp.message(title, message, option, done);VolantisApp.question(title, message, option, success, cancel, done); title：标题（必填），字符串（String） message：内容（必填），字符串（String） option：配置项，对象(Object) done：完成时回调，函数(Function) success：确认时回调，函数(Function) cancel: 取消时回调，函数(Function) option 可选参数： icon, // Fontawesome 图标 time, // 持续时间 position, // 弹出位置 transitionIn, // 弹窗打开动画 transitionOut, // 弹窗关闭动画 messageColor, // 消息颜色 titleColor, // 标题颜色 backgroundColor, // 默认背景色 zindex // 层级 option 配置优先级大于配置文件设置值。 使用范例： // 同样弹窗VolantisApp.message('这里是标题', '这里是弹窗内容');// 居中弹窗VolantisApp.message('系统提示', '这里是 Volantis 主题站，欢迎访问。', { icon: 'fad fa-smile-wink light-blue', position: 'topCenter', transitionIn:'bounceInDown', transitionOut: 'fadeOutDown', time: 10000});// 询问弹窗VolantisApp.question('问卷调查', '你是否喜欢 Volantis 主题', {}, () => { alert('谢谢支持')}, () => { console.log('再接再厉')}); 如果以上两个接口仍然不能满足您的需求，可以参考 iziToast 的内容直接调用 iziToast 动态加载脚本源码参考： layout/_partial/scripts/global.ejs volantis.js("src", cb)volantis.css("src") src String类型 加载脚本URL cb 可选 可以传入onload回调函数 或者 JSON对象 例如: volantis.js("src", ()=>{}) 或 volantis.js("src", {defer:true,onload:()=>{}}) 返回 Promise 对象 如下方法同步加载资源，这利于处理文件资源之间的依赖关系，例如：APlayer 需要在 MetingJS 之前加载 (async () => { await volantis.js("...theme.plugins.aplayer.js.aplayer...") await volantis.js("...theme.plugins.aplayer.js.meting...")})(); 使用案例：layout/_plugins/aplayer/script.ejs 由于返回的是 Promise 对象，也可以采用以下方式实现加载完成后调用回调函数： volantis.js("https://cdn.jsdelivr.net/npm/jquery").then(()=>{ console.log("我在脚本加载完成后调用")}) 按需加载的插件源码参考： layout/_partial/scripts/global.ejs jQueryvolantis.import.jQuery().then(()=>{ // 依赖 jQuery 的代码段 // ..... // .....}) requestAnimationFrame1、requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。 2、在隐藏或不可见的元素中，requestAnimationFrame 将不会进行重绘或回流，这当然就意味着更少的的 cpu，gpu 和内存使用量。 volantis.requestAnimationFrame(() => { // 包含 DOM 操作的代码段 // ......... // .........}) Layout Helper向目标元素动态注入 HTML volantis.layoutHelper(helper, html, opt) helper：Helper id（必填），字符串（String） html：HTML（必填），字符串（String） opt：配置项，对象(Object) opt 可选参数： clean, // 清除 Layout Helper 原有的所有内容, 默认 false pjax, // 支持 pjax, 默认 true helper 可选参数： page-plugins, // 页面插件 Layout, 位于 layout/_partial/article.ejs comments, // 评论 Layout, 位于 layout/_plugins/comments/index.ejs // 向 page-plugins 入口动态注入 id 为 artitalk_main 的 div, 不启用 pjax, 不清除 Layout Helper 原有的内容volantis.layoutHelper("page-plugins",`<div id="artitalk_main"></div>`, { pjax:false, clean:false }) 滚动事件处理源码参考：layout/_partial/scripts/global.ejs 获取滚动条距离顶部的距离volantis.scroll.getScrollTop() 获取滚动方向volantis.scroll.del volantis.scroll.del 中存储了一个数值, 该数值检测一定时间间隔内滚动条滚动的位移, 数值的检测频率是浏览器的刷新频率. 数值为正数时, 表示向下滚动. 数值为负数时, 表示向上滚动. 滚动事件回调函数使用 volantis.scroll.push(callBack[,"callBackName"]) 传入滚动事件回调函数, 当页面滚动时触发回调函数。 volantis.scroll.push(()=>{ if (volantis.scroll.del > 0) { console.log("向下滚动"); } else { console.log("向上滚动"); }}) 使用 volantis.scroll.unengine.push(callBack[,"callBackName"]) 传入非滚动事件回调函数, 当页面没有滚动时触发回调函数。 使用 volantis.scroll.unengine.remove("callBackName") 移除名称为 "callBackName" 的非滚动事件回调函数。 触发页面滚动至目标元素位置// 滚动到目标 Dom 元素 "ele" 位置volantis.scroll.to(ele, option) ele：Dom 元素（必填） option 可选参数： top, // 类型 Float,文档中的纵轴坐标, 默认值 ele.getBoundingClientRect().top + document.documentElement.scrollTop addTop, // 类型 Float,向上面的 top 参数中 添加补偿值. behavior, // 类型 String, 表示滚动行为, 支持参数 smooth (平滑滚动), instant (瞬间滚动) observer, // 类型 Boolean, 是否启用监视器,默认值 false, 监视器用于监视元素是否滚动到指定位置 目前用于处理 toc 部分 lazyload 引起的 cls 导致的定位失败问题. observerDic, // 类型 Float, 监视器监视距离, 默认值 25. 例如: volantis.scroll.to(document.getElementById("locationID"),{addTop: - volantis.dom.header.offsetHeight - 10, behavior: 'instant'}) 对本地文件使用CDN源码参考： /scripts/events/lib/cdn.js 生成的CDN链接可使用 theme.cdn.[keyword] 回调。 Custom Files 自定义文件在不修改主题原始源代码的情况下添加自定义内容 注入点我们提供了一些注入点接口: let points={ styles:[ "first", "style", "dark", "darkVar", ], views:[ "headBegin", "headEnd", "header", "side", "topMeta", "bottomMeta", "footer", "postEnd", "bodyBegin", "bodyEnd", ]} 样式注入点 first: 向 theme/source/css/first.styl 文件末尾注入自定义内容, 该文件中包含首屏样式,首屏样式采用硬编码的方式写在HTML中。首屏样式内含 cover navbar search 的样式. style: 向 theme/source/css/style.styl 文件末尾注入自定义内容, 该文件中包含异步延迟加载的样式,除首屏样式,其他样式放入此处异步加载. dark: 向 theme/source/css/_style/_plugins/_dark/dark_plugins.styl 文件末尾注入自定义内容, 该文件中包含异步暗黑模式样式 的 强制覆盖样式. darkVar: 向 theme/source/css/_style/_plugins/_dark/dark_async.styl 调用函数 async_dark() 末尾注入自定义内容, 该文件中包含异步暗黑模式样式 的 暗黑模式 CSS 变量. 布局视图注入点 headBegin: 向 theme/layout/_partial/head.ejs 文件 <head> 标签开头注入自定义内容. headEnd: 向 theme/layout/_partial/head.ejs 文件 <head> 标签末尾注入自定义内容. header: 向 theme/layout/_partial/header.ejs 文件 导航栏 .nav-main 末尾注入自定义内容. side: 向 theme/layout/_partial/side.ejs 文件 侧边栏 #l_side 末尾注入自定义内容. topMeta: 向 theme/layout/_partial/meta.ejs 文件 topMetas 末尾注入自定义内容. bottomMeta: 向 theme/layout/_partial/meta.ejs 文件 bottomMetas 末尾注入自定义内容. footer: 向 theme/layout/_partial/footer.ejs 文件 <footer> 标签末尾注入自定义内容. postEnd: 向 theme/layout/_partial/article.ejs 文件 <article> 标签末尾注入自定义内容. bodyBegin: 向 theme/layout/layout.ejs 文件 <body> 标签开头注入自定义内容. bodyEnd: 向 theme/layout/layout.ejs 文件 <body> 标签末尾注入自定义内容. blog/source/_volantis/ 文件夹一般的, 创建 blog/source/_volantis/ 文件夹并在此文件夹下创建与注入点同名同扩展名的文件,用以写入注入点自定义内容. blog/source/_volantis/ ├─ first.styl ├─ style.styl ├─ dark.styl ├─ darkVar.styl ├─ headBegin.ejs ├─ headEnd.ejs ├─ header.ejs ├─ topMeta.ejs ├─ bottomMeta.ejs ├─ postEnd.ejs ├─ bodyBegin.ejs └─ bodyEnd.ejs 当然,你仍然可以修改主题配置文件将自定义布局或样式放置在特定位置.以下是默认配置,该配置已隐藏. blog/_config.volantis.ymlcustom_files: first: source/_volantis/first.styl style: source/_volantis/style.styl dark: source/_volantis/dark.styl darkVar: source/_volantis/darkVar.styl headBegin: source/_volantis/headBegin.ejs headEnd: source/_volantis/headEnd.ejs header: source/_volantis/header.ejs topMeta: source/_volantis/topMeta.ejs bottomMeta: source/_volantis/bottomMeta.ejs postEnd: source/_volantis/postEnd.ejs bodyBegin: source/_volantis/bodyBegin.ejs bodyEnd: source/_volantis/bodyEnd.ejs 示例: blog/source/_volantis/darkVar.stylbody --color-site-body: blue !important theme_inject 过滤器使用 Hexo 过滤器 theme_inject ，可以将所需的自定义内容添加到任何注入点。 如果您的代码很简单，建议您编写脚本，您只需要把 JavaScript 文件放到 scripts 文件夹，在启动时就会自动载入。您可以直接在 blog 文件夹下创建 scripts 文件夹. hexo.extend.filter.register('theme_inject', function(injects) { // ...}); 对于注入布局视图: // The name of same `injectPoint` suggest be unique. If same, it will override low priority configurations.// `locals` and `options` is the same as partial https://hexo.io/docs/helpers#partial.// `order` defines the order of injection, which by default depends on the priority of injection.hexo.extend.filter.register('theme_inject', function(injects) { // it will put code from this filePath into injectPoint. injects.[injectPoint].file(name, filePath, [locals, options, order]); // it will put raw string as code into injectPoint. injects.[injectPoint].raw(name, raw, [locals, options, order]);}); 对于注入样式: hexo.extend.filter.register('theme_inject', function(injects) { // it will put styleFile into injectPoint. injects.[injectPoint].push(styleFile);}); Examples以文件的形式向 theme/css/style.styl 文件末尾注入自定义样式 blog/scripts/example-1.jshexo.extend.filter.register('theme_inject', function(injects) { injects.style.push('source/_data/mystyle.styl');}); 以文本的形式向 <body> 标签末尾注入自定义脚本内容 blog/scripts/example-2.jshexo.extend.filter.register('theme_inject', function(injects) { injects.bodyEnd.raw('load-custom-js', '<script src="js-path-or-cdn.js"></script>');}); 以文件的形式向侧栏注入自定义布局视图内容 blog/scripts/example-3.jshexo.extend.filter.register('theme_inject', function(injects) { injects.side.file('my-favourite-food', 'source/_data/my-favourite-food.ejs');}); 插件系统我们还支持 hexo 的插件系统，无需修改核心模块的源代码即可轻松扩展功能。你可以参考 https://hexo.io/docs/plugins.html#Plugin 学习如何创建插件。 请注意，以上是主题开发文档，不是使用文档！"},{"title":"FAQ","date":"2024-03-28T06:49:50.106Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/faq/index.html","permalink":"https://volantis.js.org/v6/faq/","excerpt":"","text":" Volantis6 FAQ List For Volantis 6 这是什么？我在哪里？我也不知道 我这里出现了故障，需要先做什么？ Troubleshooting any problem without the error log is like driving with your eyes closed. 在没有错误日志的情况下诊断任何问题无异于闭眼开车 控制台报错 SyntaxError: Unexpected token '.'SyntaxError: Unexpected token '.' at new Script (vm.js:88:7) at createScript (vm.js:263:10) at runInThisContext (vm.js:311:10) node.js 版本过低，请升级至 v16.x 及以上版本！ 配置和使用 volantis 6.x 之前请确保 node.js 升级至 v16.x 及以上版本！ 我应该使用哪个版本？使用最新的版本 如何在魔改主题的情况下还能兼顾更新？使用 Custom Files 自定义文件 和 Development API for Volantis. 使用 Hexo Theme Plus 替换掉在 layout 文件夹下的主题文件. 使用 Hexo 插件系统 在 blog 目录根下创建 scripts 文件夹编写脚本. 如何更新主题？RTFM 如何修改 favicon？RTFM 文档为什么和配置文件不一样？以配置文件为准，文档更新的不是非常及时 如何设置主页的背景图？主题有俩种背景图片设置方式 background 仅能设置一张背景图，且背景图范围仅为 cover 区域 parallax 可以设置一张或更多的背景图，当 position 取值为 cover 时，背景图仅为 cover 区域，具有视差滚动效果。position 取值为 fixed 时，背景图固定在整个页面，不具有视差滚动效果。 原 parallax 和 backstretch 已合并为 parallax注意：背景图配置只能生效一个 volantis-x/community/issues/115#issuecomment-907983622 到哪里查找 fontawesome 图标？ https://fontawesome.com/icons 为什么无法正常显示 aplayer？可能是网易云 API 崩溃了 图片怎么添加灯箱放大效果？使用 gallery 标签 控制台有一个奇怪的 Warning？(node:7973) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency(Use `node --trace-warnings ...` to show where the warning was created)(node:7973) Warning: Accessing non-existent property 'column' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'column' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency 我想把它命名为 Warning-738. volantis-x/hexo-theme-volantis/discussions/738 5.0 的友情链接页有啥变化？volantis-x/hexo-theme-volantis/discussions/734 如何正确渲染多行 MathJax 公式？使用 pandoc 正确渲染多行 MathJax 公式 或者直接放图片... 为什么文章会被截断？ What is the answer to Life, the Universe, and Everything?42 上面没有我要找的答案？尝试 打开搜索 或 常见问题与反馈渠道"},{"title":"","date":"2024-03-28T06:49:50.110Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/getting-started/index.html","permalink":"https://volantis.js.org/v6/getting-started/","excerpt":"","text":" Volantis6 A Wonderful Theme for Hexo Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。 示例博客/examples/ 所有的 Volantis 用户都可以按照格式自行创建 Issue 来将自己的博客添加到官网的示例博客页面中。 准备工作能力条件环境配置条件自建博客需要一定的相关知识，在开始前，请务必确保您会使用 markdown 语法，掌握简单的 git 知识，最最重要的是，遇到困难知道该怎么寻求解决： 翻阅和搜索文档 搜索 issues 中是否有解决办法 新建 issue 并按照要求进行操作，详尽地描述您遇到的问题 如果您没有使用过 Hexo 也不要着急，可以先通读一遍 Hexo 中文文档，要想使用地得心应手，最好参照团队提供的开源项目的源码进行搭建： Demo 源码 ｜ 官网源码如果您从旧版本更新或着其它主题迁移，请确保环境版本不要太低，否则会产生兼容性问题。 Hexo: 5.4 ~ 6.xhexo-cli: 4.3 ~ latestnode.js: 16.x LTS ~ latest LTSnpm: 8.x ~ latest LTS 配置和使用 volantis 6.x 之前请确保 node.js 升级至 v16.x 及以上版本！ FAQ List For Volantis 6/v6/faq/ 快速体验如果您已经具备环境配置条件，可以在终端中输入下面这行代码，稍等片刻即可尝鲜体验： git clone https://github.com/volantis-x/demo.git && cd demo && npm i && hexo s 下载与安装volantis 6.x 目前正处于 「alpha 阶段」 volantis 5.x 目前正处于 「stable 阶段」 volantis 4.x 目前正处于 「EOL(End of Life) 阶段」 Tips: volantis 开发发布周期 volantis 开发发布周期依次经过: 「alpha 阶段」=>「beta 阶段」=>「rc 阶段」=>「stable 阶段」=>「EOL 阶段」rc 阶段的测试版本和 stable 阶段的正式版本 我们统称为 「稳定版本」 , 只有 「稳定版本」 发布到 npmalpha 阶段的开发测试版本 和 beta 阶段的测试版本 我们统称为 「小白鼠测试版本」, 「小白鼠测试版本」 仅存在于 Github 仓库的 dev 分支 和 Github 仓库的 6.0 分支 安装或更新 「稳定版本」 全新博客安装从其它主题迁移第 1/2 步：修改站点配置文件在 blog/_config.yml 文件中找到并修改：theme: volantis第 2/2 步：下载主题在终端中输入：npm i hexo-theme-volantis 如果您是 Mac 用户，可以使用脚本完成全部流程 在博客路径打开终端，下载安装并应用主题：curl -s https://volantis.js.org/start | bash这行命令将会自动检测并安装所需环境，初始化博客，然后下载安装并应用主题。脚本详细使用方法：#blog脚本 第 1/3 步：修改站点配置文件在 blog/_config.yml 文件中找到并修改：theme: volantis第 2/3 步：下载主题如果您已经升级到 Hexo 5.0.2 及以上，可以直接使用 npm 命令安装：npm i hexo-theme-volantis对于旧版本，需要下载主题源码到 themes/ 文件夹：git clone https://github.com/volantis-x/hexo-theme-volantis themes/volantis如果您无法访问 GitHub 可以使用国内镜像源：git clone https://e.coding.net/volantis-x/p/hexo-theme-volantis.git themes/volantis第 3/3 步：检查并安装依赖安装 Hexo 搜索的依赖包：npm i hexo-generator-json-content安装 Stylus 渲染器：npm i hexo-renderer-stylus 安装或更新 「小白鼠测试版本」 第 1/3 步：修改站点配置文件在 blog/_config.yml 文件中找到并修改：theme: volantis第 2/3 步：将主题仓库添加为子模块 将主题添加为子模块 开始前需要确认不存在 themes/volantis 文件夹, 如果有, 请自行删除.sshhttpsgit submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantisgit submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis 第 3/3 步：将主题仓库切换为 6.0 分支在终端中输入：cd themes/volantisgit checkout 6.0第 n/n 步：更新主题在终端中输入：git pull 版本更新注意事项使用主题的时候，尽量 fork 主题到自己的 GitHub，然后进行修改并使用。这样做的好处是：当主题进行重要更新的时候可以根据需要拉取合并代码，使自己 DIY 的主题能够通过更新获取 BUG 修复或者新特性。 如果不懂请自行搜索关键词：fork 更新 实用小技巧所有需要写在主题配置文件中的配置都可以写在站点配置文件的 theme_config: 中，在 Hexo 5.0 后，还可以写在 _config.volantis.yml 文件中，详见 Hexo 官方文档：覆盖主题配置https://hexo.io/zh-cn/docs/configuration#覆盖主题配置也可以直接查看本站源码中站点配置文件的写法：_config.volantis.yml 请对照 更新日志 进行更新. 如何正确地更新主题/how-to-update/ 许可协议本主题采用 MIT开源许可协议 ，永久无限制免费使用。 MIT开源许可协议被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。被授权人可根据程式的需要修改授权条款为适当的内容。在软件和软件的所有副本中都必须包含版权声明和许可声明。 配置与使用配置与使用/v6/site-settings/"},{"title":"页面配置","date":"2024-03-28T06:49:50.114Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/page-settings/index.html","permalink":"https://volantis.js.org/v6/page-settings/","excerpt":"","text":"页面布局模板布局模板 取值 含义 page 独立页面 post 文章页面 docs 文档页面 category 分类页面 tag 标签页面 friends 友链页面 list 列表页面 page & post & docs这三种页面相同，但是有以下细微区别： post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 和 docs 不会。 post 文章末尾最多可以显示「参考资料」、「相关文章」、「版权标识」、「打赏」四个模块。 docs 文章末尾最多可以显示「参考资料」一个模块。 除了归档页面是自动生成的，其它独立页面都需要手动创建 md 文件。 归档页面归档页面是自动生成的，并且初始化的时候已经生成，路径如下： blog/_config.yml# Directoryarchive_dir: archives 关于页面Create file if not exists: source/about/index.md---layout: docsseo_title: 关于bottom_meta: falsesidebar: []twikoo: placeholder: 有什么想对我说的呢？---下面写关于自己的内容 分类页面Create file if not exists: source/categories/index.md---layout: categoryindex: truetitle: 所有分类--- 标签页面Create file if not exists: source/tags/index.md---layout: tagindex: truetitle: 所有标签--- 列表页面Create file if not exists: source/mylist/index.md---layout: listgroup: mylistindex: true--- 结果就是筛选出所有文章中 front-matter 部分含有 group: mylist 的文章。 友链页面创建页面文件Create file if not exists: source/friends/index.md---layout: friends # 必须title: 我的朋友们 # 可选，这是友链页的标题---这里写友链上方的内容。<!-- more -->这里可以写友链页面下方的文字备注，例如自己的友链规范、示例等。 插入友链数据可以 选择布局方案 或 使用友链标签 选择布局方案在主题配置文件中找到以下内容： pages: # 友链页面配置 friends: layout_scheme: traditional # simple: 简单布局, traditional: 传统布局 目前提供2种布局方案： simple: 简单布局，只有头像和标题。 traditional: 传统布局，是 Volantis 旧版本的风格。 以上2种友链的数据源写在以下路径，如果没有请自行创建： blog/source/_data/friends.yml 内容格式为： blog/source/_data/friends.yml- group: # 分组标题 description: # 分组描述 items: - title: # 名称 avatar: # 头像 url: # 链接 screenshot: # 截图 keywords: # 关键词 description: # 描述 - title: # 名称 avatar: # 头像 url: # 链接 screenshot: # 截图 keywords: # 关键词 description: # 描述 不同的布局方式，会用到一部分的字段，一般来说，title、avatar 和 url 都是必须的。这些数据被转成 HTML 标签插入到友链页面的 <!-- more --> 部分。 Volantis 4.x 新增的网站卡片标签的样式 sites 网站卡片布局 在5.0版本移除 被 sites标签 friends标签 contributors标签 替代 issues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代 使用友链标签使用 友链标签 您可以在任何位置插入友链，支持静态数据和动态数据, 关于如何使用 友链标签 插入友链，详见： volantis 主题文档 #友链标签/v6/tag-plugins/#友链标签 404页面Create file if not exists: source/404.md---cover: truerobots: noindex,nofollowsitemap: falseseo_title: 404 Not Foundbottom_meta: falsesidebar: []twikoo: path: /404.html placeholder: 请留言告诉我您要访问哪个页面找不到了---{% p logo center huge, 404 %}{% p center bold, 很抱歉，您访问的页面不存在 %}{% p center small, 可能是输入地址有误或该地址已被删除 %} front-matterfront-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter 字段 含义 值类型 默认值 layout 布局模版 String - title 页面标题 String - seo_title 网页标题 String page.title short_title 页面标题（在group列表中显示） String page.title date 创建时间 Date 文件创建时间 updated 更新日期 Date 文件修改时间 link 外部文章网址 String - music 内部音乐控件 [Object] - robots robots String - keywords 页面关键词 String - description 页面描述、摘要 String - cover 是否显示封面 Bool true top_meta 是否显示文章或页面顶部的meta信息 Bool true bottom_meta 是否显示文章或页面底部的meta信息 Bool true sidebar 页面侧边栏 Bool, Array theme.layout.*.sidebar body 页面主体元素 Array theme.layout.on_page.body thumbnail 缩略图 String false icons 图标 Array [] pin 是否置顶 Bool false headimg 文章头图 url - readmore 阅读更多按钮 Bool - layout:post 时特有的字段： 字段 含义 值类型 默认值 author 文章作者 [Object] config.author categories 分类 String, Array - tags 标签 String, Array - toc 是否生成目录 Bool true music 字段 是否必须 值类型 server 是 netease, tencent, kugou, xiami, baidu type 是 song, playlist, album, search, artist id 是 song id / playlist id / album id / search keyword 文章置顶在 front-matter 中设置以下值： front-matterpin: true 文章分类多个分类有两种关系，一种是层级（等同于文件夹），一种是并列（等同于标签）。 多级分类： front-matter---categories: [分类A, 分类B]--- 或者 front-matter---categories: - 分类A - 分类B--- 并列分类 front-mattercategories: - [分类A] - [分类B] 多级+并列分类 front-mattercategories: - [分类A, 分类B] - [分类C, 分类D] 文章摘要在文章中插入 <!-- more -->，前面的部分即为摘要。 某篇文章源码---title: xxxdate: 2020-02-21---这是摘要<!-- more -->这是正文 注意： <!-- more --> 前后一定要有空行，不然可能导致显示错位。 设置文章作者Volantis 支持多个作者在一个站点发布文章，其他作者信息需要写在数据文件中，例如： blog/source/_data/author.ymlJon: name: Jon Snow avatar: https://cn.bing.com/th?id=AMMS_fc8f99fd41ebd737a71c4e13806db9a0&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=2&pid=16.1 url: https://gameofthrones.fandom.com/wiki/Jon_SnowDany: name: Daenerys Targaryen avatar: https://tse1-mm.cn.bing.net/th?id=OIP.Yax4wLzIFbcBVUa_RsKywQHaLH&w=80&h=80&c=8&rs=1&qlt=90&dpr=2&pid=3.1&rm=2 url: https://gameofthrones.fandom.com/wiki/Daenerys_Targaryen 在文章的 front-matter 中新增 author 即可： front-matter---title: Jon Snow | Game of Thrones Wiki | Fandomauthor: Jon--- 引入外部文章利用 link，搭配自定义的文章作者信息，你可以在文章列表中显示外部文章或者网址，例如： blog/source/_data/author.ymlxaoxuu: name: xaoxuu avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png url: https://xaoxuu.com front-matter---layout: postdate: 2017-07-05title: [转]如何搭建基于Hexo的独立博客categories: [Dev, Hexo]tags: - Hexoauthor: xaoxuulink: https://xaoxuu.com/blog/2017-07-05-hexo-blog/---![](https://img.vim-cn.com/d9/a9af7dc49fc0af8ca3e6dd2450a2f7095a87db.png) 置顶对于任何文章或者页面，设置 pin: true 即可置顶在首页。 front-matter---pin: true--- 这会导致一个小问题：首页 post 卡片数量多于设定值，如果有强迫症希望每一个分页数量一致，可以安装插件来实现，详见：#421 不显示阅读更多对于任何文章或者页面，默认在有摘要的情况下，会显示阅读更多按钮，设置 readmore: false 即可隐藏阅读更多按钮 front-matter---readmore: false--- 不归档存放在 _posts 文件夹下的文章一般都会出现在归档页，如果某篇文章不希望出现在归档页面： front-matter---archive: false--- 页面自定义布局显示迷你音乐播放器标题右边显示迷你音乐播放器，支持的字段有：server、type、id。 front-matter---music: server: netease # netease, tencent, kugou, xiami, baidu type: song # song, playlist, album, search, artist id: 16846091 # song id / playlist id / album id / search keyword--- 实际效果见： #contributors 显示 meta 标签文章顶部和底部的日期、分类、更新日期、标签、分享等属于 meta 标签。 front-matter---top_meta: falsebottom_meta: false--- 如果一个页面没有 title 则不会显示 top_meta ，像404、关于页面就可以完全隐藏： front-matter---seo_title: 关于top_meta: falsebottom_meta: false--- 标题右边显示缩略图front-matter---thumbnail: https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png--- 缩略图仅在文章列表和文章页面显示，不会在归档页面显示。 标题右边显示图标front-matter---icons: [fas fa-fire red, fas fa-star green]--- 图标仅在归档页面中显示，可以用来标注热门文章。 可以通过 red / blue / green / yellow / orange / theme / accent 来设置图标的颜色 是否要显示封面如果某个页面需要封面，可以这样写： front-matter---cover: true--- 显示侧边栏通过自由设置边栏卡片来删减对应页面的冗余信息，提高有价值的信息在页面中的权重。 如果某个页面不需要侧边栏，可以这样写： front-matter---sidebar: []--- 某个页面想指定显示某几个侧边栏，就这样写: front-matter---sidebar: [grid, toc, tags] # 放置任何你想要显示的侧边栏部件--- 关闭评论front-matter---comments: false--- 页面插件 (page plugins)在 front-matter 中配置页面插件 front-matter---plugins: - mathjax - katex - artitalk - bbtalk - fcircle - gitter - indent - snackbar: oldversion--- 说说页面以 Artitalk页面 为例: 创建页面文件Create file if not exists: source/artitalk/index.md---seo_title: 说说comments: falseplugins: - artitalk # - bbtalk # - fcircle--- 配置Artitalk在主题配置文件中找到以下内容 # Artitalk https://artitalk.js.org# 配置过程请参考：https://artitalk.js.org/doc.html# 使用过旧版本的请修改Leancloud shuoshuo class部分列名：https://artitalk.js.org/release.html# 除appID和appKEY外均为选填项artitalk: # Set `plugins: ["artitalk"]` to enable in front-matter # 不支持 Pjax # 配置项按照yml格式继续填写即可 appId: # your appID appKey: # your appKEY # serverURL: #leancloud绑定的api访问域名，使用国际版的话不需要填写 # lang: # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语 # pageSize: #每页说说的显示数量 # shuoPla: #在编辑说说的输入框中的占位符 # avatarPla: #自定义头像url的输入框的占位符 # motion: #加载动画的开关，1为开，0为关，默认为开 # bgImg: #说说输入框背景图片url # color1: #说说背景颜色1&按钮颜色1 # color2: #说说背景颜色2&按钮颜色2 # color3: #说说字体颜色 # cssUrl: #自定义css接口 渲染公式默认是不渲染的，如果文章内有公式，需要在 front-matter 中设置开启。即便开启了，文章列表中也不会进行渲染，请注意不要把公式写在文章开头。 example.md:---title: 渲染公式（MathJax）date: 2020-02-23plugins: - mathjax---添加一段描述性文字<!-- more -->$$t+1=2$$$$\\mbox{积累因子}=\\begin{cases}1+ni & \\mbox{单利}\\\\\\\\(1+i)^n & \\mbox{复利}\\end{cases}$$$$\\begin{equation}\\sum_{i=0}^n F_i \\cdot \\phi (H, p_i) - \\sum_{i=1}^n a_i \\cdot ( \\tilde{x_i}, \\tilde{y_i}) + b_i \\cdot ( \\tilde{x_i}^2 , \\tilde{y_i}^2 )\\end{equation}$$$$\\begin{equation}\\beta^*(D) = \\mathop{argmin} \\limits_{\\beta} \\lambda {||\\beta||}^2 + \\sum_{i=1}^n max(0, 1 - y_i f_{\\beta}(x_i))\\end{equation}$$ 查看公式渲染效果 $$t+1=2$$$$\\mbox{积累因子}=\\begin{cases}1+ni & \\mbox{单利}\\\\(1+i)^n & \\mbox{复利}\\end{cases}$$$$\\begin{equation}\\sum_{i=0}^n F_i \\cdot \\phi (H, p_i) - \\sum_{i=1}^n a_i \\cdot ( \\tilde{x_i}, \\tilde{y_i}) + b_i \\cdot ( \\tilde{x_i}^2 , \\tilde{y_i}^2 )\\end{equation}$$$$\\begin{equation}\\beta^*(D) = \\mathop{argmin} \\limits_{\\beta} \\lambda {||\\beta||}^2 + \\sum_{i=1}^n max(0, 1 - y_i f_{\\beta}(x_i))\\end{equation}$$ 如果公式仍无法正确渲染可以阅读 @MicDZ 的这篇文章： 在Material-X上使用KaTeXhttps://www.micdz.cn/article/katex-on-volantis/ 页面 gitter页面配置 front-matter---plugins: - gitter--- 配置 gitter在主题配置文件中找到以下内容 plugins: .... # Gitter # https://gitter.im gitter: room: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 文章页首行缩进front-matter---plugins: - indent--- Snackbar (页面通知)配置数据源数据源写在以下路径，如果没有请自行创建： blog/source/_data/notification.yml 内容格式为： blog/source/_data/notification.ymloldversion: title: 过期的文档 message: 这份文档过于久远，如果您使用的是新版的主题，请查看新版本的文档。 position: bottom # bottom (底部通知), right (右侧通知，会自动消失) theme: warning # default, warning cache: false # 是否记住选项（下次不再弹出） buttons: - title: 查看新版文档 url: /getting-started/ dismiss: false # 点击了是否关闭底部横幅 配置 front-matterfront-matter---plugins: - snackbar: oldversion---"},{"title":"站点配置","date":"2024-03-28T06:49:50.118Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/site-settings/index.html","permalink":"https://volantis.js.org/v6/site-settings/","excerpt":"","text":"博客根目录下的 _config.yml 文件通常负责站点相关配置、第三方 npm 插件相关的配置。 网站标题blog/_config.yml# 网站标题title: my blog 网站图标简单方式完全自定义文件导入blog/_config.yml# 网站图标，更多尺寸等图标请使用 import 方式批量导入favicon: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.icoblog/_config.ymlimport: head_begin: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/browserconfig.xml"> - <meta name="theme-color" content="#ffffff"> - <link rel="apple-touch-icon" sizes="180x180" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon.ico"> - <meta name="apple-mobile-web-app-title" content="Volantis"> - <meta name="application-name" content="Volantis"> - <meta name="msapplication-TileColor" content="#f4f4f4"> - <meta name="msapplication-TileImage" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"> - '<meta name="theme-color" content="#f4f4f4" media="(prefers-color-scheme: light)">' - '<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">' head_end: body_begin: body_end:blog/source/_volantis/headBegin.ejs<meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-config" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/browserconfig.xml"><meta name="theme-color" content="#ffffff"><link rel="apple-touch-icon" sizes="180x180" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-16x16.png"><link rel="manifest" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/site.webmanifest"><link rel="mask-icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"><link rel="shortcut icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon.ico"><meta name="apple-mobile-web-app-title" content="Volantis"><meta name="application-name" content="Volantis"><meta name="msapplication-TileColor" content="#f4f4f4"><meta name="msapplication-TileImage" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"><meta name="theme-color" content="#f4f4f4" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)"> 多语言设置blog/_config.ymllanguage: - zh-CN - en - zh-TW 对应的翻译文件路径： themes/volantis/languages/ 导入外部文件Volantis 用户可以在不修改主题文件的情况下向 head 和 body 中添加各种标签。 代码片段注入的位置： head_begin: 注入在 <head> 之后 head_end: 注入在 </head> 之前 body_begin: 注入在 <body> 之后 body_end: 注入在 </body> 之前 blog/_config.ymlimport: head_begin: - <meta name="theme-color" content="#ffffff"> head_end: - <meta name="hello" content="world"> body_begin: - <script></script> body_end: - <script></script> 如果您注入的内容较多，不方便放置在 _config.yml 文件内，你可以将其导入至文件中，对应结构为： 注入点 注入文件 head_begin blog/source/_volantis/headBegin.ejs head_end blog/source/_volantis/headEnd.ejs body_begin blog/source/_volantis/ bodyBegin.ejs body_end blog/source/_volantis/bodyEnd.ejs 更多Hexo 官方文档 #配置https://hexo.io/zh-cn/docs/configuration"},{"title":"标签插件","date":"2024-03-28T06:49:50.118Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/tag-plugins/index.html","permalink":"https://volantis.js.org/v6/tag-plugins/","excerpt":"","text":"为了兼容老用户，旧的标签插件在重构之前依然沿用旧的格式，即 command + 空格 作为参数分隔符，而部分新增标签插件是 空格 + 英文竖线 + 空格 ，请注意区分。 我们也在探索哪种分隔符既简单又不容易引起冲突，所以可能存在多种格式，具体以对应文档描述为准。 5.0 版本起临时实验使用英文双冒号 ( :: ) 作为分隔符，之前版本的分隔符写法向下兼容 6.0 版本的分隔符最终计划使用 stellar 的分隔符，之前版本的分隔符写法没有兼容计划 text效果源码带 下划线 的文本；带 着重号 的文本；带 波浪线 的文本；带 删除线 的文本 键盘样式的文本：⌘ + D 密码样式的文本：这里没有验证码带 {% u 下划线 %} 的文本；带 {% emp 着重号 %} 的文本；带 {% wavy 波浪线 %} 的文本；带 {% del 删除线 %} 的文本键盘样式的文本：{% kbd ⌘ %} + {% kbd D %}密码样式的文本：{% psw 这里没有验证码 %} span语法效果源码参数本插件最后更新于 5.0 版本{% span 样式参数::文本内容 %}各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。 超大号文字： Volantis A Wonderful Theme for Hexo各种颜色的标签，包括：{% span red::红色 %}、{% span yellow::黄色 %}、{% span green::绿色 %}、{% span cyan::青色 %}、{% span blue::蓝色 %}、{% span gray::灰色 %}。超大号文字：{% span center logo large::Volantis %} {% span center small::A Wonderful Theme for Hexo %} 属性 可选值 字体 logo, code 颜色 red, yellow, green, cyan, blue, gray 大小 small, h4, h3, h2, h1, large, huge, ultra 对齐方向 left, center, right p参数效果源码参数本插件最后更新于 5.0 版本{% p 样式参数::文本内容 %}红色 黄色 绿色 青色 蓝色 灰色 Volantis A Wonderful Theme for Hexo{% p red::红色 %}{% p yellow::黄色 %}{% p green::绿色 %}{% p cyan::青色 %}{% p blue::蓝色 %}{% p gray::灰色 %}{% p center logo large::Volantis %}{% p center small::A Wonderful Theme for Hexo %} 属性 可选值 字体 logo, code 颜色 red, yellow, green, cyan, blue, gray 大小 small, h4, h3, h2, h1, large, huge, ultra 对齐方向 left, center, right noteNoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。 最后更新于 5.0 版本{% note 样式参数::文本内容 %} 演示效果经典用法可以在配置文件中设置默认样式，为简单的一句话提供最的简便写法。 note quote 适合引用一段话 note info 默认主题色，适合中性的信息 note warning 默认黄色，适合警告性的信息 note error/danger 默认红色，适合危险性的信息 note done/success 默认绿色，适合正确操作的信息 更多图标这些都是默认样式，可以手动加上颜色： note radiation 默认样式 note radiation yellow 可以加上颜色 note bug red 说明还存在的一些故障 note link green 可以放置一些链接 note paperclip blue 放置一些附件链接 note todo 待办事项 note guide clear 可以加上一段向导 note download 可以放置下载链接 note message gray 一段消息 note up 可以说明如何进行更新 note undo light 可以说明如何撤销或者回退 上述示例的源码example:#### 经典用法{% note::可以在配置文件中设置默认样式，为简单的一句话提供最的简便写法。 %}{% note quote::note quote 适合引用一段话 %}{% note info::note info 默认主题色，适合中性的信息 %}{% note warning::note warning 默认黄色，适合警告性的信息 %}{% note danger::note error/danger 默认红色，适合危险性的信息 %}{% note success::note done/success 默认绿色，适合正确操作的信息 %}#### 更多图标这些都是默认样式，可以手动加上颜色：{% note radiation::note radiation 默认样式 %}{% note radiation yellow::note radiation yellow 可以加上颜色 %}{% note bug red::note bug red 说明还存在的一些故障 %}{% note link green::note link green 可以放置一些链接 %}{% note paperclip blue::note paperclip blue 放置一些附件链接 %}{% note todo::note todo 待办事项 %}{% note guide clear::note guide clear 可以加上一段向导 %}{% note download::note download 可以放置下载链接 %}{% note message gray::note message gray 一段消息 %}{% note up::note up 可以说明如何进行更新 %}{% note undo light::note undo light 可以说明如何撤销或者回退 %} 可以支持的参数样式参数位置可以写图标和颜色，多个样式参数用空格隔开。 图标彩色的quote, info, warning, done/success, error/danger 灰色的，也可以指定颜色radiation, bug, idea, link, paperclip, todo, message, guide, download, up, undo 颜色指定颜色clear, light, gray, red, yellow, green, cyan, blue noteblockNoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。 最后更新于 5.0 版本{% noteblock 样式参数（可选）::标题（可选） %}文本段落{% endnoteblock %} 演示效果可以在区块中放置一些复杂的结构，支持嵌套。 标题（可选）Windows 10不是為所有人設計,而是為每個人設計嵌套测试： 请坐和放宽，我正在帮你搞定一切... Folding 测试： 点击查看更多 不要说我们没有警告过你我们都有不顺利的时候 上述示例的源码example:{% noteblock::标题（可选） %}Windows 10不是為所有人設計,而是為每個人設計{% noteblock done %}嵌套测试： 请坐和放宽，我正在帮你搞定一切...{% endnoteblock %}{% folding yellow::Folding 测试： 点击查看更多 %}{% note warning::不要说我们没有警告过你 %}{% noteblock bug red %}我们都有不顺利的时候{% endnoteblock %}{% endfolding %}{% endnoteblock %} 可以支持的参数样式参数位置可以写图标和颜色，多个样式参数用空格隔开。 图标彩色的quote, info, warning, done/success, error/danger 灰色的，也可以指定颜色radiation, bug, idea, link, paperclip, todo, message, guide, download, up, undo 颜色指定颜色clear, light, gray, red, yellow, green, cyan, blue checkbox最后更新于 5.0 版本{% checkbox 样式参数（可选）::文本（支持简单md） %} 演示效果 纯文本测试 支持简单的 markdown 语法 支持自定义颜色 绿色 + 默认选中 黄色 + 默认选中 青色 + 默认选中 蓝色 + 默认选中 增加 减少 叉 上述示例的源码example:{% checkbox 纯文本测试 %}{% checkbox checked::支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}{% checkbox red::支持自定义颜色 %}{% checkbox green checked::绿色 + 默认选中 %}{% checkbox yellow checked::黄色 + 默认选中 %}{% checkbox cyan checked::青色 + 默认选中 %}{% checkbox blue checked::蓝色 + 默认选中 %}{% checkbox plus green checked::增加 %}{% checkbox minus yellow checked::减少 %}{% checkbox times red checked::叉 %} 可以支持的参数颜色red, yellow, green, cyan, blue 样式plus, minus, times 选中状态checked radio最后更新于 5.0 版本{% checkbox 样式参数（可选）::文本（支持简单md） %} 演示效果 纯文本测试 支持简单的 markdown 语法 支持自定义颜色 绿色 黄色 青色 蓝色 上述示例的源码example:{% radio 纯文本测试 %}{% radio checked::支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}{% radio red::支持自定义颜色 %}{% radio green::绿色 %}{% radio yellow::黄色 %}{% radio cyan::青色 %}{% radio blue::蓝色 %} 可以支持的参数颜色red, yellow, green, cyan, blue 选中状态checked timeline最后更新于 3.0 版本{% timeline 时间线标题（可选） %}{% timenode 时间节点（标题） %}正文内容{% endtimenode %}{% timenode 时间节点（标题） %}正文内容{% endtimenode %}{% endtimeline %} 演示效果 2020-07-24 2.6.6 -> 3.0 如果有 hexo-lazyload-image 插件，需要删除并重新安装最新版本，设置 lazyload.isSPA: true。2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 use_cdn: true 则需要删除。2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。2.x 版本的置顶 top: true 改为了 pin: true，并且同样适用于 layout: page 的页面。如果使用了 hexo-offline 插件，建议卸载，3.0 版本默认开启了 pjax 服务。 2020-05-15 2.6.3 -> 2.6.6 不需要额外处理。 2020-04-20 2.6.2 -> 2.6.3 全局搜索 seotitle 并替换为 seo_title。group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。group 组件的列表名优先显示文章的 short_title 其次是 title。 上述示例的源码example:{% timeline %}{% timenode 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) %}1. 如果有 `hexo-lazyload-image` 插件，需要删除并重新安装最新版本，设置 `lazyload.isSPA: true`。2. 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 `use_cdn: true` 则需要删除。3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。4. 2.x 版本的置顶 `top: true` 改为了 `pin: true`，并且同样适用于 `layout: page` 的页面。5. 如果使用了 `hexo-offline` 插件，建议卸载，3.0 版本默认开启了 pjax 服务。{% endtimenode %}{% timenode 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) %}不需要额外处理。{% endtimenode %}{% timenode 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) %}1. 全局搜索 `seotitle` 并替换为 `seo_title`。2. group 组件的索引规则有变，使用 group 组件的文章内，`group: group_name` 对应的组件名必须是 `group_name`。2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`。{% endtimenode %}{% endtimeline %} link最后更新于 5.0 版本{% link 标题::链接::图片链接（可选） %} 演示效果如何参与项目https://volantis.js.org/contributors/ 上述示例的源码example:{% link 如何参与项目::https://volantis.js.org/contributors/::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets@master/logo/256/safari.png %} button这个页面的标签将会在不久后重构 基础按钮请将您的 Volantis 升级至 2.4 版本以上使用。 语法格式参数列表示例写法示例效果{% btn 样式参数（可选）::标题::链接::图标（可选） %} 可选的参数可以省略，但是前后顺序不能乱。样式参数 regular, large, center 图标 第1个或者第2个参数包含 fa- 的那个被识别为图标。example.md:不设置任何参数的 {% btn 按钮:: / %} 适合融入段落中。regular 按钮适合独立于段落之外：{% btn regular::示例博客::https://xaoxuu.com::fas fa-play-circle %}large 按钮更具有强调作用，建议搭配 center 使用：{% btn center large::开始使用::https://volantis.js.org/v3/getting-started/::fas fa-download %}行内按钮 不设置任何参数的 按钮 适合融入段落中。 空心按钮 示例博客 示例博客 示例博客 示例博客 居中： 开始使用 实心按钮 示例博客 示例博客 示例博客 示例博客 居中： 开始使用 富文本按钮请将您的 Volantis 升级至 2.3 版本以上使用。 语法格式参数列表示例写法示例效果{% btns 样式参数 %}{% cell 标题::链接::图片或者图标 %}{% cell 标题::链接::图片或者图标 %}{% endbtns %}样式参数位置可以写图片样式、布局方式，多个样式参数用空格隔开。 圆角样式 默认为方形 rounded, circle 布局方式 默认为自动宽度，适合视野内只有一两个的情况。 参数 含义 wide 宽一点的按钮 fill 填充布局，自动铺满至少一行，多了会换行。 center 居中，按钮之间是固定间距。 around 居中分散 grid2 等宽最多2列，屏幕变窄会适当减少列数。 grid3 等宽最多3列，屏幕变窄会适当减少列数。 grid4 等宽最多4列，屏幕变窄会适当减少列数。 grid5 等宽最多5列，屏幕变窄会适当减少列数。 增加文字样式 可以在容器内增加 <b>标题</b> 和 <p>描述文字</p>如果需要显示类似「团队成员」之类的一组含有头像的链接： example.md:{% btns circle grid5 %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% endbtns %} 或者含有图标的按钮： example.md:{% btns rounded grid5 %}{% cell 下载源码::/::fas fa-download %}{% cell 查看文档::/::fas fa-book-open %}{% endbtns %} 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中 example.md:{% btns circle center grid5 %}<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'> <i class='fab fa-apple'></i> <b>心率管家</b> {% p red::专业版 %} <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'></a><a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'> <i class='fab fa-apple'></i> <b>心率管家</b> {% p green::免费版 %} <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'></a>{% endbtns %}如果需要显示类似「团队成员」之类的一组含有头像的链接： xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu 或者含有图标的按钮： 下载源码 查看文档 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中 心率管家 专业版 心率管家 免费版 ghcard最后更新于 5.0 版本{% ghcard 用户名::其它参数（可选） %}{% ghcard 用户名/仓库::其它参数（可选） %} 用户信息卡片 上述示例的源码： example:| {% ghcard xaoxuu %} | {% ghcard xaoxuu::theme=vue %} || -- | -- || {% ghcard xaoxuu::theme=buefy %} | {% ghcard xaoxuu::theme=solarized-light %} || {% ghcard xaoxuu::theme=onedark %} | {% ghcard xaoxuu::theme=solarized-dark %} || {% ghcard xaoxuu::theme=algolia %} | {% ghcard xaoxuu::theme=calm %} | 仓库信息卡片 上述示例的源码： example:| {% ghcard volantis-x/hexo-theme-volantis %} | {% ghcard volantis-x/hexo-theme-volantis::theme=vue %} || -- | -- || {% ghcard volantis-x/hexo-theme-volantis::theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis::theme=solarized-light %} || {% ghcard volantis-x/hexo-theme-volantis::theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis::theme=solarized-dark %} || {% ghcard volantis-x/hexo-theme-volantis::theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis::theme=calm %} | 更多参数选择GitHub 卡片 API 参数https://github-readme-stats.xaoxuu.com site网站卡片可以显示网站截图、logo、标题、描述，使用方法和 友链标签 一模一样，唯一的区别是数据文件名称为 sites.yml，可以和友链数据混用，通过分组过滤实现不一样的效果。 最后更新于 5.0 版本{% sites [筛选方式]:[组名] %} 演示效果xaoxuu开发者MHuiG划水Colsrch开发者inkss摸鱼 上述示例的源码example{% sites only:community_team %} 可以支持的参数数据按组筛选支持分组（白名单模式和黑名单模式）显示: // 显示 communtiy_team{% sites only:communtiy_team %}// 除了 communtiy_team 别的都显示{% sites not:community_team %}// 多个分组使用 `,` 分隔{% sites only:communtiy_team, communtiy_builder %} dropmenu这个页面的标签将会在不久后重构 下拉菜单请将您的 Volantis 升级至 3.0 版本以上使用。 语法格式示例写法示例效果容器 {% menu 前缀（可省略）::标题::后缀（可省略） %}菜单内容{% endmenu %} 菜单内容 菜单项 {% menuitem 文本::链接::图标 %} 分割线 {% menuitem hr %} 子菜单 {% submenu 嵌套菜单::图标 %}菜单内容{% endsubmenu %}示例1 {% menu 下拉菜单 %}{% menuitem 主题源码::https://github.com/volantis-x/hexo-theme-volantis/::fas fa-file-code %}{% menuitem 更新日志::https://github.com/volantis-x/hexo-theme-volantis/releases/::fas fa-clipboard-list %}{% menuitem hr %}{% submenu 有疑问？::fas fa-question-circle %}{% menuitem 看 FAQ::/faqs/ %}{% menuitem 看 本站源码::https://github.com/volantis-x/volantis-docs/ %}{% menuitem 提 Issue::https://github.com/volantis-x/hexo-theme-volantis/issues/ %}{% endsubmenu %}{% endmenu %} 示例2 {% menu 这个是::下拉菜单 %}（同上）{% endmenu %} 示例3 {% menu 这个是::下拉菜单::的示例效果。 %}（同上）{% endmenu %}示例1 下拉菜单 主题源码 更新日志 有疑问？ 看 FAQ 看 本站源码 提 Issue 示例2 这个是 下拉菜单 主题源码 更新日志 有疑问？ 看 FAQ 看 本站源码 提 Issue 示例3 这个是 下拉菜单 主题源码 更新日志 有疑问？ 看 FAQ 看 本站源码 提 Issue 的示例效果。 tab此插件移植自 NexT #tabs 最后更新于 2.1 版本{% tabs 页面内不重复的ID %}<!-- tab 栏目1 -->内容<!-- endtab --><!-- tab 栏目2 -->内容<!-- endtab -->{% endtabs %} 演示效果栏目1栏目2。。。！！！ 上述示例的源码example:{% tabs tab-id %}<!-- tab 栏目1 -->。。。<!-- endtab --><!-- tab 栏目2 -->！！！<!-- endtab -->{% endtabs %} folding最后更新于 5.0 版本{% folding 参数（可选）::标题 %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endfolding %} 演示效果 查看图片测试 查看默认打开的折叠框 这是一个默认打开的折叠框。 查看代码测试 {% folding green::查看代码测试 %}查看代码测试{% endfolding %} 查看列表测试 hahahehe 查看嵌套测试 查看嵌套测试2 查看嵌套测试3 hahaha 上述示例的源码example:{% folding 查看图片测试 %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endfolding %}{% folding cyan open::查看默认打开的折叠框 %}这是一个默认打开的折叠框。{% endfolding %}{% folding green::查看代码测试 %}{% endfolding %}{% folding yellow::查看列表测试 %}- haha- hehe{% endfolding %}{% folding red::查看嵌套测试 %}{% folding blue::查看嵌套测试2 %}{% folding 查看嵌套测试3 %}hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>{% endfolding %}{% endfolding %}{% endfolding %} 可以支持的参数参数位置可以填写颜色和状态，多个参数用空格隔开。 颜色blue, cyan, green, yellow, red 状态状态填写 open 代表默认打开。 inlineimageInlineimage 标签是一种行内图片标签，可以用来在一段话中间插入表情。 本插件最后更新于 5.0 版本{% inlineimage 图片链接::height=高度（可选） %} 演示效果这是 一段话。 这又是 一段话。 上述示例的源码example:这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif::height=40px %} 一段话。 可以支持的参数高度height=20px imageImage 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。 本插件最后更新于 5.0 版本{% image 链接::width=宽度（可选）::height=高度（可选）::alt=描述（可选）::bg=占位颜色（可选） %} 演示效果添加描述： 每天下课回宿舍的路，没有什么故事。 指定宽度： 指定宽度并添加描述： 每天下课回宿舍的路，没有什么故事。 设置占位背景色： 优化不同宽度浏览的观感 上述示例的源码example:添加描述：{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::alt=每天下课回宿舍的路，没有什么故事。 %}指定宽度：{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px %}指定宽度并添加描述：{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::alt=每天下课回宿舍的路，没有什么故事。 %}设置占位背景色：{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::bg=#1D0C04::alt=优化不同宽度浏览的观感 %} 可以支持的参数图片宽高度example:width=300px::height=32px 图片描述example:alt=图片描述 占位背景色example:bg=#f2f2f2 galleryGallery 标签是一种针对一组图片应用场景的标签。 本插件最后更新于 5.0 版本{% gallery 参数::列数::分组 %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg){% endgallery %} 演示效果一行一个图片 图片描述 一行多个图片（不换行） 图片描述图片描述图片描述 多行多个图片（每行2～8个图片） 上述示例的源码一行一个图片 example.md:{% gallery %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endgallery %} 一行多个图片（不换行） example.md:{% gallery::::one %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg){% endgallery %} 多行多个图片（每行2～8个图片） example.md:{% gallery stretch::6::two %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/007.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/008.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/009.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/010.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/011.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/013.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/014.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/015.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/017.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/018.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/020.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/021.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/022.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/023.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/024.jpg){% endgallery %} 可以支持的参数对齐方向left::center::right 缩放stretch 列数::后面直接写列数，支持 2 ～ 8 列。设定列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。 测试中 设定列数之后 不会产生 累积布局偏移; 没有设定列数 产生了累积布局偏移 分组相同内容的会被归档在一个分组中。 audio本插件最后更新于 2.4 版本{% audio 音频链接 %} 演示效果Your browser does not support the audio tag. 上述示例的源码example:{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %} video本插件最后更新于 5.0 版本{% video 视频链接 %} 演示效果100%宽度 Your browser does not support the video tag. 50%宽度 Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. 25%宽度 Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. 上述示例的源码100%宽度 example.md:{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %} 50%宽度 example.md:{% videos::2 %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% endvideos %} 25%宽度 example.md:{% videos::4 %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% endvideos %} 可以支持的参数对齐方向left::center::right 列数::后面直接写列数，支持 1 ～ 4 列。 frame这是一个能够将图片或者视频套入设备框架中的标签，可以用来更优雅地显示截图、录屏。 本插件最后更新于 5.0 版本{% frame 框架名::img=图片链接::alt=图片描述（可选）::part=top/bottom（可选） %}{% frame 框架名::video=视频链接::part=top/bottom（可选） %} {% frame iphone11::img=https://bu.dusays.com/2020/09/28/baa33914a34ec.jpg::video=https://bu.dusays.com/2020/09/28/39db723f1e200.mp4::part=top %} 在这个示例中同时出现了 img 和 video 那么它就是一个带有封面的视频，在视频加载完成之前会先显示视频封面。 设备框架目前支持的有： iphone11 如果您有以下其它设备框架图(svg)，欢迎 PR 兼容。 android, ipad, macbook, watch 剪裁通过设置 part=top 或者 part=bottom 来显示上半部分或者下半部分，否则将显示完整的框架及其中的图片/视频。 aplayer主题对 APlayer 插件的样式进行了兼容。安装插件： npm i -S hexo-tag-aplayer 使用方法： hexo-tag-aplayerhttps://github.com/MoePlayer/hexo-tag-aplayer issuesissues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代 md在局部渲染外部md文件。 示例写法{% md https://cdn.jsdelivr.net/gh/volantis-x/hexo-theme-volantis/README.md %} md (()=>{ volantis.css(\"https://cdn.bootcdn.net/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css\"); const contentEl = document.getElementById(\"md-0ca2a9e7-6c7c-1517-8b88-390c3c7cc049\"); const loadMarkdown = (url) => { if (!window.fetch) { contentEl.innerHTML = 'Your browser outdated. Please use the latest version of Chrome or Firefox!您的浏览器版本过低，请使用最新版的 Chrome 或 Firefox 浏览器！'; } else { contentEl.innerHTML = 'Loading ... | 加载中。。。'; fetch(url, { method: \"GET\" }) .then((resp) => { return Promise.all([ resp.ok, resp.status, resp.text(), resp.headers, ]); }) .then(([ok, status, data, headers]) => { if (ok) { return { ok, status, data, headers, }; } else { throw new Error(JSON.stringify(json.error)); } }) .then((resp) => { let data = marked.parse(resp.data); contentEl.innerHTML = data; }) .catch((error) => { console.log(error); contentEl.innerHTML = 'There was a problem loading the file!加载文件时出现问题！'; }); }; }; volantis.js(\"https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js\").then(()=>{ loadMarkdown(\"https://cdn.jsdelivr.net/gh/volantis-x/hexo-theme-volantis/README.md?t=\" + new Date().getTime()); })})(); swiper轮播标签默认一张图片是 50% 宽度，通过设置 width:min 设置为 25% 宽度，width:max 设置为 100% 宽度。 最大图片宽度 {% swiper width:max %}![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot11.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot12.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot13.png){% endswiper %} 最小图片宽度 {% swiper width:min %}![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot01.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot02.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot03.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot04.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot05.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot06.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot07.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot08.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot09.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot10.png){% endswiper %} pandown不支持 pjax 的标签插件#pandown/v6/tag-plugins/no-pjax#pandown 友链标签您可以在任何位置插入友链，支持静态数据和动态数据，静态数据需要写在数据文件中： blog/source/_data/friends.ymlvolantis_developer: title: description: items: - title: xaoxuu url: https://github.com/xaoxuu avatar: https://avatars.githubusercontent.com/u/16400144?s=60&v=4 - title: MHuiG url: https://github.com/MHuiG avatar: https://avatars.githubusercontent.com/u/38281581?s=60&v=4 - title: inkss url: https://github.com/inkss avatar: https://avatars.githubusercontent.com/u/31947043?s=60&v=4 - title: Colsrch url: https://github.com/Colsrch avatar: https://avatars.githubusercontent.com/u/58458181?s=60&v=4 - title: Drew233 url: https://github.com/Drew233 avatar: https://avatars.githubusercontent.com/u/47592224?s=60&v=4 - title: Linhk1606 url: https://github.com/Linhk1606 avatar: https://avatars.githubusercontent.com/u/50829219?s=60&v=4 - title: W4J1e url: https://github.com/W4J1e avatar: https://avatars.githubusercontent.com/u/74824162?s=60&v=4community_builder: title: description: items: - title: xaoxuu url: https://github.com/xaoxuu avatar: https://avatars.githubusercontent.com/u/16400144?s=60&v=4 - title: MHuiG url: https://github.com/MHuiG avatar: https://avatars.githubusercontent.com/u/38281581?s=60&v=4 - title: Colsrch url: https://github.com/Colsrch avatar: https://avatars.githubusercontent.com/u/58458181?s=60&v=4 - title: penndu url: https://github.com/penndu avatar: https://avatars.githubusercontent.com/u/46226528?s=60&v=4 - title: heson525 url: https://github.com/heson525 avatar: https://avatars.githubusercontent.com/u/32234343?s=60&v=4 - title: W4J1e url: https://github.com/W4J1e avatar: https://avatars.githubusercontent.com/u/74824162?s=60&v=4 - title: luosiwei-cmd url: https://github.com/luosiwei-cmd avatar: https://avatars.githubusercontent.com/u/61175380?s=60&v=4groupGitHub: title: 来自 GitHub 的朋友 description: '以下友链通过 [GitHub Issue](https://github.com/xaoxuu/friends/issues/) 提交，按 issue 最后更新时间排序：' api: https://issues-api.xaoxuu.com repo: xaoxuu/friends 标题和描述都支持 md 格式，需要写在引号中。如果指定了 api 和 repo 字段，则从 issues 中取第一个 json 代码块数据作为友链。 写法如下{% friends %} 数据按组筛选友链支持分组（白名单模式和黑名单模式）显示： 写法如下// 显示 volantis_developer{% friends only:volantis_developer %}// 显示 volantis_developer 和 community_builder{% friends only:volantis_developer,community_builder %}// 除了 community_builder 别的都显示{% friends not:community_builder %} friends only:volantis_developer xaoxuuMHuiGinkssColsrchDrew233Linhk1606W4J1eericcloseheson525CRainyDayFlexistonMicDZzhaohaihaolixiang810WillyChen123ic3evi1pennduPHIKN1GHTzsStrikecode004AcceptedqinxsXuxuGoodTRHXcofmlunhui1994gyl-coderfi6 实现动态友链可以加载来自 issues 的友链数据，除了需要在 _data/friends.yml 中指定 api 和 repo 外，还需要做一下几件事： 从 xaoxuu/issues-api 作为模板克隆或者 fork 仓库，然后提交一个 issue 进行测试，不出意外的话，仓库中已经配置好了 issue 模板，只需要在模板中指定的位置填写信息就可以了。 提交完 issue 一分钟左右，如果仓库中出现了 output 分支提交，可以点击查看一下文件内容是否已经包含了刚刚提交的 issue 中的数据，如果包含，那么再次回到前端页面刷新就可以看到来自 issue 的友链数据了。 关于自建 Vercel API 如果您想使用自己的 api，请把您刚创建的仓库导入到 Vercel 项目，详见 小冰博客 的教程。 特别感谢小冰博客通过 Vercel 进行加速的方案，解决了原本直接请求 GitHub API 速度过慢的问题。 只显示动态数据如果您不想创建 friends.yml 来设置任何静态数据，可以在标签中设置 api 来只显示动态数据： {% friends api:https://api.vlts.cc/output_data/v2/volantis-x/examples %} 网站卡片标签网站卡片可以显示网站截图、logo、标题、描述，使用方法和友链标签一模一样，唯一的区别是数据文件名称为 sites.yml，可以和友链数据混用，通过分组过滤实现不一样的效果。 示例写法{% sites only:test_demo %} sites only:test_demo volantis-x.js.orgTest Site For Development Hexo 通用标签在文章中使用 <!-- more -->，那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。详见 Hexo 官方文档： Hexo 官方文档 #标签插件https://hexo.io/zh-cn/docs/tag-plugins"},{"title":"不支持 pjax 的标签插件","date":"2024-03-28T06:49:50.122Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/tag-plugins/no-pjax.html","permalink":"https://volantis.js.org/v6/tag-plugins/no-pjax","excerpt":"","text":"这里存放不支持 pjax 的标签插件 如果没有演示效果，多刷新几次即可。 pandown本插件最后更新于 5.0 版本{% pandown 网盘类型::网盘链接::提取码(可为空)::文件名 %} 演示效果volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) 上述示例的源码example:{% pandown baidu::https://example.com::1234::百度网盘 %}{% pandown tx::https://example.com::1234::腾讯微云 %}{% pandown onedrive::https://example.com::1234::onedrive %}{% pandown hc::https://example.com::1234::和彩云 %}{% pandown ty::https://example.com::1234::天翼云 %}{% pandown aliyun::https://example.com::1234::阿里网盘 %}{% pandown 115::https://example.com::1234::115网盘 %}{% pandown jg::https://example.com::1234::坚果云 %}{% pandown 360::https://example.com::1234::360安全云盘 %}{% pandown 123::https://example.com::1234::123网盘 %}{% pandown qn::https://example.com::1234::七牛云 %}{% pandown github::https://example.com::::Github %}{% pandown lz::https://example.com::1234::蓝奏云 %} 可以支持的参数网盘类型baidu, tx, onedrive, hc, ty, aliyun, 115, jg, 360, 123, qn, github, lz 如果里的主题版本不支持或有问题可查看如下文档 原版文档https://www.yt-blog.top/docs/vls-pandown-tags"},{"title":"主题配置","date":"2024-03-28T06:49:50.126Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/theme-settings/index.html","permalink":"https://volantis.js.org/v6/theme-settings/","excerpt":"","text":"创建主题配置文件主题目录下的 _config.yml 文件通常负责主题相关配置，我们强烈建议您使用代替的主题配置文件以防止自己的配置丢失。那么如何使用代替主题配置文件呢？ 第 1/2 步：创建配置文件 在博客根目录的 _config.yml 文件旁边新建一个文件： _config.volantis.yml ，这个文件中的配置信息优先级高于主题文件夹中的配置文件。 第 2/2 步：覆盖自定义配置 当您需要修改某项内容时，例如导航栏菜单，那么您需要在主题配置文件中找到相关内容，复制进自己创建的配置文件中：blog/_config.volantis.ymlnavbar: visiable: auto # always, auto logo: # choose [img] or [icon + title] img: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png icon: title: menu: - name: 博客 icon: fa-solid fa-rss url: /小提示使用「npm i hexo-theme-volantis」方式安装的主题，主题配置文件在「blog/node_modules/hexo-theme-volantis/_config.yml」使用传统方式安装的主题，主题配置文件在「blog/themes/volantis/_config.yml」 自定义主题外观最大布局宽度blog/_config.volantis.ymlcustom_css: ... max_width: 1080px # Sum of body width and sidebar width 网页所呈现的内容的最大宽度，即 body 和 sidebar 的宽度之和。 抗锯齿blog/_config.volantis.ymlcustom_css: ... font_smoothing: true # font-smoothing for webkit 自定义光标样式blog/_config.volantis.ymlcustom_css: ... cursor: enable: true text: volantis-static/media/cursor/text.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/text.png pointer: volantis-static/media/cursor/pointer.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/pointer.png default: volantis-static/media/cursor/left_ptr.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/left_ptr.png not-allowed: volantis-static/media/cursor/circle.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/circle.png zoom-out: volantis-static/media/cursor/zoom-out.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/zoom-out.png zoom-in: volantis-static/media/cursor/zoom-in.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/zoom-in.png grab: volantis-static/media/cursor/openhand.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/openhand.png 导航栏样式您可以设置导航栏的高度以及视觉特效，视觉特效目前可选的有： shadow：卡片阴影。 floatable：当鼠标移动到容器内时，呈现出浮起来的效果。 blur：背景模糊效果（毛玻璃），当浏览器不支持时显示为不透明。 blog/_config.volantis.ymlcustom_css: ... navbar: height: 64px width: auto # auto, max effect: [shadow, blur] # [shadow, floatable, blur] 滚动条样式blog/_config.volantis.ymlcustom_css: ... scrollbar: size: 4px border: 2px color: '#2196f3' hover: '#ff5722' 侧边栏样式视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。 blog/_config.volantis.ymlcustom_css: ... sidebar: effect: [shadow] # [shadow, floatable, blur] 正文区域样式视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。 blog/_config.volantis.ymlcustom_css: ... body: effect: [shadow] # [shadow, floatable, blur] highlight: language: true # show language of codeblock copy_btn: true text_align: # left, right, justify, center h1: left h2: left h3: left h4: left p: justify 布局间距您可以设置几种标题的布局间距 h2/h3/h4、段落间距 line、区块内部的段落间距 inline。 blog/_config.volantis.ymlcustom_css: ... gap: h2: 48px # Spacing above H2 (only px unit) h3: 24px # Spacing above H3 (only px unit) h4: 16px # Spacing above H4 (only px unit) p: 1em # Paragraph spacing between paragraphs line_height: 1.6 # normal, 1.5, 1.75, 2 ... 自定义字体您可以自定义正文和代码字体。 blog/_config.volantis.ymlcustom_css: ... fontfamily: logofont: fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'Varela Round' url: volantis-static/media/fonts/VarelaRound/VarelaRound-Regular.ttf # https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf weight: normal style: normal bodyfont: fontfamily: 'UbuntuMono, "Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'UbuntuMono' url: volantis-static/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf # https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf weight: normal style: normal codefont: fontfamily: 'Menlo, UbuntuMono, Monaco' # name: 'Monaco' # url: volantis-static/media/fonts/Monaco/Monaco.ttf # https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf # weight: normal # style: normal 自定义颜色多彩配色方案 查看所有相关配置 blog/_config.volantis.yml############################### Color Scheme ############################### > start# Accessibility: 背景色和前景色要有足够的对比度 https://web.dev/color-contrast/# https://ant.design/docs/spec/colors-cncolor_scheme: # ------------ # 通用颜色 common: # 主题色 theme: '#3dd9b6' # 链接色 link: '#2092ec' # 按钮色 button: '#44D7B6' # 鼠标放到交互元素上时的色 hover: '#ff5722' # 主题色块内部的文字颜色 inner: '#fff' # 选中区域文字的背景颜色 selection: 'alpha(#2196f3, 0.2)' # ------------ # 亮色主题（默认） light: # 网站背景色 site_bg: '#f4f4f4' # 网站背景上的文字 site_inner: '#fff' # 网站页脚文字 site_footer: '#666' # 卡片背景色 card: '#fff' # 卡片上的普通文字 text: '#444' # 区块和代码块背景色 block: '#f6f6f6' # 代码块高亮时的背景色 codeblock: '#FFF7EA' # 行内代码颜色 inlinecode: '#c74f00' # 文章部分 h1: '#3a3a3a' h2: '#3a3a3a' h3: '#333' h4: '#444' h5: '#555' h6: '#666' p: '#444' # 列表文字 list: '#666' # 列表 hover 时的文字 list_hl: 'mix($color-theme, #000, 80)' # 辅助性文字 meta: '#888' # 版权卡片背景色 copyright_bkg: '#f5f5f5' # ------------ # 暗色主题 # https://www.maijisheji.com/2094.html dark: # 网站最深底色 # Dark Grey 1 site_bd: '#121212' # 网站背景色 # Dark Grey 2 site_bg: '#1f1f1f' # 卡片背景色 # Dark Grey 3 card: '#262626' # 网站背景上的文字 site_inner: '#eeeeeede' # 网站页脚文字 site_footer: '#aaaaaade' # 卡片上的普通文字 text: '#eeeeeede' # 区块和代码块背景色 # Dark Grey 4 block: '#434343' # 代码块高亮时的背景色 # Dark Grey 2 codeblock: '#1f1f1f' # 行内代码颜色 inlinecode: '#D56D28' # 文章部分 高强度文本的不透明度应为87％ 中等重点文字适用于60％ h1: '#FFFFFFde' # Dark Grey 8 h2: '#FFFFFFde' h3: '#FFFFFF99' # Dark Grey 7 h4: '#FFFFFF99' h5: '#FFFFFF99' h6: '#FFFFFF99' p: '#d9d9d9de' # Dark Grey 6 # 列表文字 # Dark Grey 6 list: '#d9d9d9de' # 列表 hover 时的文字 list_hl: 'mix($color-theme, #fff, 80)' # 辅助性文字 # Dark Grey 5 meta: '#bfbfbfde' # 版权卡片背景色 copyright_bkg: '#21252b' # 夜间图片亮度 brightness: 70%############################### Color Scheme ############################### > end 自定义右键菜单右键菜单右键在菜单项上根据配置文件自行生成前端代码，所以统一了一个共用的菜单对象： {id: '', name: '', icon: '', link: '', event: '', group: ''} 同时为了响应不同状态下的右键行为，提出了内置组 （defaultGroup）的概念，相应的对于右键默认提供的功能实现则定义为内置实现（defaultEvent）。 { defaultEvent: ['copyText', 'copyLink', 'copyPaste', 'copyAll', 'copyCut', 'copyImg', 'printMode', 'readMode'], defaultGroup: ['navigation', 'inputBox', 'seletctText', 'elementCheck', 'elementImage', 'articlePage']} 具体来说，内置组对应右键行为，例如 inputBox 代表在输入框下右键行为；内置实现对应自定义右键默认提供的功能实现，例如 readMode 代表了阅读模式。 参数解释plugins/menus 类的组内数据支持对象（单个菜单）或数组（一系列菜单）rightmenus: order: menus.groupName plugins: defaultGroupItem menus: groupName: - {menu} - {menu} groupName1: {menu} 右键菜单加载菜单的具体加载由 order 控制，可供使用的内容为：plugins.[组名], menus.[组名], hr, music 这四大类。 右键菜单排序菜单的排序由 order 字段的先后顺序和组内菜单项的先后顺序决定。 右键菜单类菜单项共分为两大类：plugins 和 menus，前者放置内置组及内置菜单，允许添加/修改组内菜单；后者为用户自建菜单类，允许添加/修改组及组内菜单。一般意义上 plugins 类的组为动态组，根据实际的右键状态进行显示；menus 类中内容由用户添加，菜单项默认显示。 右键菜单项菜单项共六个字段：id, name, icon, link, event, group，具体作用如下： id: 唯一值 name: 用于菜单名称显示 icon: 用于菜单图标显示 link: 跳转链接 event: 事件，当输入内容不为内置事件时，作 JavaScript 代码执行 group: 菜单项所处分组名称 note link/event 二选一，同时出现时仅处理 link。 内置功能内置组 组名 描述 备注 navigation 导航组件，横向排列，共用一行，仅显示图标 原则上支持的数量不限 inputBox 文本输入框相关组件 生效于 input/textarea seletctText 文本选中类组件 生效于右键选中文本，text 为选中的文本 elementCheck 链接判断组件 生效于链接处的右键行为，link 为链接地址 elementImage 图片判断类组件 生效于图片类的右键行为，link 为链接地址 articlePage 文章页面组件 生效于 post.article 页面 note 除 navigation 外的内置组，在显示时会隐藏含 link 属性的菜单项。 内置实现 事件名 描述 备注 copyText 复制文本 复制选中文本 copyLink 复制链接地址 复制 a 或 image 下的链接至剪切板 copyPaste 粘贴文本 需要用户批准相应权限，仅支持粘贴文本至输入框（暂不支持粘贴图片） copyAll 全选文本 选中输入框内的文本内容 copyCut 剪切文本 剪切输入框中选中的文本内容 copyImg 复制图片 支持 Chrome 浏览器，复制图片资源至剪切板 printMode 打印页面 一个调制过样式的打印功能 readMode 阅读模式 一个简单的阅读模式功能 默认设置iconPrefix Fontawesome 图标前缀，音乐类组件使用，参考内容：fa-solid, fa-regular, fa-light, fa-thin, fa-duotone, fa-brands。 articleShowLink 在 articlePage 组显示时（文章页）时依旧显示含 link 属性的菜单项。 musicAlwaysShow 当设定全局音乐播放器时，是否一直显示音乐控制菜单。false：仅当音乐播放时启用。 回调方法volantis.rightmenu.handle 在右键菜单打开时执行。 volantis.rightmenu.handle(callBack[,"callBackName", "setRequestAnimationFrame = true"])。 此外，你还可以在 volantis.mouseEvent 处获得 MouseEvent 信息。 配置文件 blog/_config.volantis.yml ### 自定义右键 新rightmenus: enable: true # 右键菜单项及加载顺序 # 内容示例：plugins.[组名], menus.[组名], hr(分割线，推荐去线留白), music(音乐控制器) order: - plugins.navigation - hr - plugins.inputBox - plugins.seletctText - plugins.elementCheck - plugins.elementImage - menus.link - hr - menus.darkMode - plugins.articlePage - music ############################ # - {id: '', name: '', icon: '', link: '', event: '', group: ''} # id: 唯一值 # name: 用于菜单名称显示 # icon: 用于菜单图标显示 # link: 跳转链接 # event: 事件，当输入内容不为内置事件时，作 JavaScript 代码执行 # group: 菜单项所处分组名称 # 注： # 1. link/event 二选一，同时出现时仅处理 link # 2. 内置事件列表： copyText, copyLink, copyPaste, copyAll, copyCut, copyImg, printMode, readMode # 3. 内置组列表：navigation, inputBox, seletctText, elementCheck, elementImage, articlePage # 4. plugins 列允许自定义组内项目 # 5. menus 列允许自定义组及其内容 # 6. 除 navigation 外的内置组，在显示时会隐藏含 link 属性的菜单项 ########################### # 基础项设置 options: # 图标前缀 fa-solid, fa-regular, fa-light, fa-thin, fa-duotone, fa-brands iconPrefix: fa-solid # 例外，在 articlePage 组显示时（文章页）时依旧显示含 link 属性的菜单项 articleShowLink: false # 当设定全局音乐播放器时，是否一直显示音乐控制菜单。false：仅当音乐播放时启用 musicAlwaysShow: false # 右键内置组，预置实现 plugins: # 导航组件 # 横向排列，共用一行，仅显示图标 (原则上支持的数量不限) navigation: - {id: 'left', name: '转到上一页', icon: 'fa-solid fa-arrow-left', event: 'history.back()', group: 'navigation'} - {id: 'right', name: '转到下一页', icon: 'fa-solid fa-arrow-right', event: 'history.forward()', group: 'navigation'} - {id: 'redo', name: '刷新当前页面', icon: 'fa-solid fa-redo', event: 'window.location.reload()', group: 'navigation'} - {id: 'up', name: '回到顶部', icon: 'fa-solid fa-arrow-up', event: 'VolantisApp.scrolltoElement(volantis.dom.bodyAnchor)', group: 'navigation'} #- {id: 'home', name: '回到首页', icon: 'fa-solid fa-home', link: '/', group: 'navigation'} # 文本输入框相关组件 # 生效于 input/textarea，粘贴、剪切、全选 inputBox: - {id: 'copyPaste', name: '粘贴文本', icon: 'fa-solid fa-paste', event: 'copyPaste', group: 'inputBox'} - {id: 'copyAll', name: '全选文本', icon: 'fa-solid fa-object-ungroup', event: 'copyAll', group: 'inputBox'} - {id: 'copyCut', name: '剪切文本', icon: 'fa-solid fa-cut', event: 'copyCut', group: 'inputBox'} # 文本选中类组件 # 生效于右键选中文本，__text__ 为选中的文本。 seletctText: - {id: 'copyText', name: '复制文本', icon: 'fa-solid fa-copy', event: 'copyText', group: 'seletctText'} - {id: 'searchWord', name: '站内搜索', icon: 'fa-solid fa-search', event: 'OpenSearch(__text__)', group: 'seletctText'} - {id: 'bingSearch', name: '必应搜索', icon: 'fa-solid fa-search', event: 'window.open(`https://cn.bing.com/search?q=${__text__}`)', group: 'seletctText'} #- {id: 'googleSearch', name: '谷歌搜索', icon: 'fa-solid fa-search', event: 'window.open(`https://www.google.com/search?q=${__text__}`)', group: 'seletctText'} # 链接判断组件 # 生效于链接处的右键行为，__link__ 为链接地址 elementCheck: - {id: 'openTab', name: '新标签页打开', icon: 'fa-solid fa-external-link-square-alt', event: 'window.open(__link__)', group: 'elementCheck'} - {id: 'copyLink', name: '复制链接地址', icon: 'fa-solid fa-link', event: 'copyLink', group: 'elementCheck'} # 图片判断类组件 # 生效于图片类的右键行为，__link__ 为链接地址 elementImage: - {id: 'copyImg', name: '复制图片', icon: 'fa-solid fa-image', event: 'copyImg', group: 'elementImage'} - {id: 'googleImg', name: '谷歌识图', icon: 'fa-solid fa-images', event: 'window.open(`https://www.google.com.hk/searchbyimage?image_url=${__link__}`)', group: 'elementImage'} # 文章页面组件 # 生效于 post.article 页面 articlePage: - {id: 'printMode', name: '打印页面', icon: 'fa-solid fa-print', event: 'printMode', group: 'articlePage'} - {id: 'readMode', name: '阅读模式', icon: 'fa-solid fa-book-open', event: 'readMode', group: 'articlePage'} # 右键自定义菜单区域 menus: link: - {id: 'help', name: '常见问题', icon: 'fa-solid fa-question', link: 'https://volantis.js.org/faqs/', group: 'link'} - {id: 'examples', name: '示例博客', icon: 'fa-solid fa-rss', link: 'https://volantis.js.org/examples/', group: 'link'} - {id: 'contributors', name: '加入社区', icon: 'fa-solid fa-fan', link: 'https://volantis.js.org/contributors/', group: 'link'} - hr - {id: 'source_docs', name: '本站源码', icon: 'fa-solid fa-code-branch', link: 'https://github.com/volantis-x/volantis-docs/', group: 'link'} - {id: 'source_theme', name: '主题源码', icon: 'fa-solid fa-code-branch', link: 'https://github.com/volantis-x/hexo-theme-volantis/', group: 'link'} darkMode: - {id: 'darkMode', name: '暗黑模式', icon: 'fa-solid fa-moon', event: 'volantis.dark.toggle()', group: 'darkMode'}### 高级玩法可以利用 Custom Files 自定义文件 功能，实现自定义右键菜单脚本及菜单项控制。 一个在右键菜单中添加 查看上一篇、查看下一篇 菜单项的范例： blog/_config.volantis.ymlblog/source/_volantis/bodyEnd.ejs省略了部分不相关内容rightmenus: order: - menus.prevNext menus: prevNext: - {id: 'prev', name: '查看上一篇', icon: 'fa-solid fa-angles-left', event: "volantis.rightmenu.jump('prev')", group: 'prevNext'} - {id: 'next', name: '查看下一篇', icon: 'fa-solid fa-angles-right', event: "volantis.rightmenu.jump('next')", group: 'prevNext'}为了方便管理，将函数挂在 volantis.rightmenu 对象下<script> volantis.rightmenu.jump = (type) => { const selector = type === 'prev' ? 'article .prev-next a.prev' : 'article .prev-next a.next'; const item = document.querySelector(selector); if(!!item) { if(typeof pjax !== 'undefined') { pjax.loadUrl(item.href) } else { window.location.href = item.href; } } } volantis.rightmenu.handle(() => { const prev = document.querySelector('#prev').parentElement, next = document.querySelector('#next').parentElement, articlePrev = document.querySelector('article .prev-next a.prev p.title'), articleNext = document.querySelector('article .prev-next a.next p.title'); prev.style.display = articlePrev ? 'block' : 'none'; prev.title = articlePrev ? articlePrev.innerText : null; next.style.display = articleNext ? 'block' : 'none'; next.title = articleNext ? articleNext.innerText : null; }, 'prevNext', false) </script> 设置网站导航栏导航栏配置导航栏分为 logo、menu、search 三个区域设置，其中 logo 区域如果设置了图片，则不能显示图标和标题， menu 区域的设置可以写在一个单独的文件中。 blog/_config.volantis.yml############################### Navigation Bar ############################### > start# 注意事项：建议规范全站路径 URL 最后带一个 "/" 例如 "about/"navbar: visiable: auto # always, auto logo: # choose [img] or [icon + title] img: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png icon: title: menu: - name: 博客 icon: fa-solid fa-rss url: / - name: 分类 icon: fa-solid fa-folder-open url: categories/ - name: 标签 icon: fa-solid fa-tags url: tags/ - name: 归档 icon: fa-solid fa-archive url: archives/ - name: 友链 icon: fa-solid fa-link url: friends/ - name: 关于 icon: fa-solid fa-info-circle url: about/ search: Search... # Search bar placeholder############################### Navigation Bar ############################### > end 菜单嵌套导航栏菜单支持嵌套，嵌套的属性名为 rows ，写法示例： ...- name: 更多 icon: fa-solid fa-ellipsis-v rows: - name: 主题源码 url: https://github.com/volantis-x/hexo-theme-volantis/ - name: 更新日志 url: https://github.com/volantis-x/hexo-theme-volantis/releases/ - name: hr - name: 有疑问？ rows: - name: 看 FAQ url: faqs/ - name: 看 本站源码 url: https://github.com/volantis-x/volantis-docs/ - name: 提 Issue url: https://github.com/volantis-x/hexo-theme-volantis/issues/ - name: hr - name: 公告和测试博文 url: archives/ - name: 示例博客 url: examples/ - name: 特别感谢 url: contributors/ 分割线在子菜单中，新增一个只有 name: hr 的“菜单”就会被渲染成一个分割线。 - name: hr 小标题在子菜单中，新增一个只有 name: 小标题内容（也可以有 icon: 小标题的图标）的“菜单”就会被渲染成一个小标题。 ...- name: 近期 icon: fa-solid fa-clock url: / rows: - name: 热门文章 icon: fa-solid fa-fire - name: ProHUD 开源库的设计思路 url: blog/2019-08-27-prohud/ - name: ValueX：实用的安全对象类型转换库 url: blog/2019-08-29-valuex/ - name: 心率管家 App 的设计与开发 url: blog/2019-07-23-heartmate/ 播放器在子菜单中，新增一个 icon: fa-solid fa-compact-disc 的“菜单”就会被渲染成一个 APlayer 播放器。 - name: 背景音乐 icon: fa-solid fa-compact-disc 设置网站页脚您通过 layout 可以自由布局网站页脚内容 aplayer, social, license, info, copyright。 blog/_config.volantis.ymlsite_footer: # layout of footer: [aplayer, social, license, info, copyright] layout: [aplayer, social, license, info, copyright] social: - icon: fas fa-rss url: atom.xml - icon: fas fa-envelope url: mailto:me@xaoxuu.com - icon: fab fa-github url: https://github.com/xaoxuu - icon: fas fa-headphones-alt url: https://music.163.com/#/user/home?id=63035382 copyright: '[Copyright © 2017-2021 XXX](/)' # You can add your own property here. (Support markdown, for example: br: '<br>') br: '<br>' 其中，aplayer 需要在插件部分设置中启用。您可以新增文字属性，用于展示其它文字信息，例如： blog/_config.volantis.ymlsite_footer: layout: [..., br, hello, ...] ... # You can add your own property here. (Support markdown, for example: br: '<br>') br: '<br>' hello: '[Hello World](/)' 网站与文章封面封面高度blog/_config.volantis.ymlcover: height_scheme: full # full, half ... 目前主题提供两种首页封面高度方案，其它页面均为半屏幕高度。 封面布局方案blog/_config.volantis.ymlcover: ... scheme: dock # search (搜索), dock (坞), featured (精选), focus (焦点) ... 布局方案 适合场景 search 注重搜索 dock 入口选项比较多 featured 选项在4个左右 focus 选项在4个左右 默认显示设置blog/_config.volantis.ymlcover: ... display: home: true archive: false others: false # can be written in front-matter 'cover: true' 由于主页、归档是 hexo 自动生成的，您需要在主题配置文件中设置是否显示封面，而其它页面则可以在 front-matter 中通过设置 cover: true/false 来决定显示封面或者不显示封面。 文章布局配置 查看所有相关配置 ############################### Article Layout ############################### > start# 文章布局article: # 文章列表页面的文章卡片布局方案 preview: scheme: landscape # landscape # pin icon for post pin_icon: volantis-static/media/twemoji/assets/svg/1f4cc.svg # https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f4cc.svg # auto generate title if not exist auto_title: true # false, true # auto generate excerpt if not exist auto_excerpt: true # false, true # hide excerpt hide_excerpt: false # show split line or not line_style: solid # hidden, solid, dashed, dotted # show author author: false # true, false # show readmore button readmore: auto # auto, always # 文章详情页面的文章卡片本体布局方案 body: # 文章顶部信息 # 从 meta_library 中取 top_meta: [author, category, date, counter] #启用评论数量需在此添加 # 文章底部信息 # 从 meta_library 中取 bottom_meta: [updated, tags, share] # ---------------- # 文章页脚组件 footer_widget: # ---------------- # 参考资料、相关资料等 (for layout: post/docs) references: title: 参考资料 icon: fa-solid fa-quote-left # 在 front-matter 中: # references: # - title: 某篇文章 # url: https:// # 即可显示此组件。 # ---------------- # 相关文章，需要安装插件 (for layout: post) # npm i hexo-related-popular-posts related_posts: enable: false title: 相关文章 icon: fa-solid fa-bookmark max_count: 5 # 设为空则不使用文章头图 placeholder_img: https://gcore.jsdelivr.net/gh/MHG-LAB/cron@gh-pages/bing/bing.jpg # ---------------- # 版权声明组件 (for layout: post) copyright: enable: false permalink: '本文永久链接是：' content: - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议' - permalink # 自定义版权组件：精细到文章的版权声明 custom: false # 开启后替代上方内容的版权显示 customData: default: type1 # 默认授权声明 ############################# # 你可以在文章的 front-matter 覆盖默认版权声明 # 配置示例（均可选）： # copyright: # type: type3 # 当前文章版权声明类型 # author: 张三 # 本文作者 # ref: # 原文出处 # title: # 原文出处 - 标题 # url: # 原文出处 - 链接 ############################# rules: type1: text: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh#" target="_blank">CC BY-NC-SA 4.0</a> desc: 署名-非商业性使用-相同方式共享 4.0 国际。 type2: text: 禁止转载引用 desc: 除非获得原作者的单独授权，任何第三方不得转载！ type3: text: 原作许可协议 desc: 本文转载自他站，转载或引用本文时，请遵守原作许可协议！ type4: text: 来自互联网 desc: 本文来自互联网，未知来源，侵权请联系删除。 type5: text: 允许规范转载 desc: 转载请保留本文转载地址，著作权归作者所有！ type6: text: 允许付费转载 desc: 您可以联系作者通过付费方式获得授权。 # 还能自行添加更多 # ---------------- # 打赏组件 (for layout: post) donate: enable: false images: - volantis-static/media/org.volantis/blog/qrcode/github@volantis.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png - volantis-static/media/org.volantis/blog/qrcode/github@volantis.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png # meta library meta_library: # 默认文章作者（可在 _data/author.yaml 中增加其他作者，并在 front-matter 中设置） # https://volantis.js.org/advanced-settings/#多人协同 author: avatar: volantis-static/media/org.volantis/blog/favicon/apple-touch-icon.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png name: 请设置文章作者 url: / # 文章创建日期 date: icon: fa-solid fa-calendar-alt title: '发布于：' format: 'll' # 日期格式 http://momentjs.com/docs/ # 文章更新日期 updated: icon: fa-solid fa-edit title: '更新于：' format: 'll' # 日期格式 http://momentjs.com/docs/ # 文章分类 category: icon: fa-solid fa-folder-open # 文章浏览计数 counter: icon: fa-solid fa-eye unit: '次浏览' # waline 文章评论数量 walinecount: icon: fa-solid fa-comment-dots desc: '条评论' # 条评论 # artalk 文章评论数量 artalkcount: icon: fa-solid fa-comment-dots desc: '条评论' # 条评论 # 文章字数和阅读时长 wordcount: icon_wordcount: fa-solid fa-keyboard icon_duration: fa-solid fa-hourglass-half # 文章标签 tags: icon: fa-solid fa-hashtag # 分享 share: - id: qq img: volantis-static/media/org.volantis/logo/128/qq.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png - id: qzone img: volantis-static/media/org.volantis/logo/128/qzone.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png - id: weibo img: volantis-static/media/org.volantis/logo/128/weibo.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png - id: # qrcode # 当id为qrcode时需要安装插件 npm i hexo-helper-qrcode img: # volantis-static/media/org.volantis/logo/128/wechat.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png - id: # telegram img: # volantis-static/media/org.volantis/logo/128/telegram.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/telegram.png############################### Article Layout ############################### > end 其中 top_meta 和 bottom_meta 部分的取值自 meta_library 库。 侧边栏配置侧边栏小组件与 meta 库不同的是：除了现有的 widget ，您可以很轻易地创建自己的 widget ，然后放在需要的地方。此外，您还可以将 widget 写在单独的文件中。 查看所有相关配置 blog/_config.volantis.yml############################### Sidebar ############################### > startsidebar: position: right # left right # 主页、分类、归档等独立页面 for_page: [blogger, category, tagcloud, donate] # layout: docs/post 这类文章页面 for_post: [toc] # 侧边栏组件库 widget_library: # --------------------------------------- # blogger info widget blogger: class: blogger display: [desktop, mobile] # [desktop, mobile] avatar: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png shape: rectangle # circle, rectangle url: /about/ title: subtitle: jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails. social: - icon: fa-solid fa-rss url: /atom.xml - icon: fa-solid fa-envelope url: mailto:me@xxx.com - icon: fab fa-github url: https://github.com/volantis-x/ - icon: fa-solid fa-headphones-alt url: / # --------------------------------------- # toc widget (valid only in articles) toc: class: toc display: [desktop, mobile] # [desktop, mobile] sticky: true header: icon: fa-solid fa-list title: 本文目录 list_number: false min_depth: 2 max_depth: 5 # --------------------------------------- # music music: class: music display: [desktop, mobile] # [desktop, mobile] pjaxReload: false # --------------------------------------- # category widget category: class: category display: [desktop] # [desktop, mobile] header: icon: fa-solid fa-folder-open title: 文章分类 url: /blog/categories/ # --------------------------------------- # tagcloud widget tagcloud: class: tagcloud display: [desktop, mobile] # [desktop, mobile] header: icon: fa-solid fa-tags title: 热门标签 url: /blog/tags/ min_font: 14 max_font: 24 color: true start_color: '#999' end_color: '#555' # --------------------------------------- # qrcode widget qrcode: class: qrcode display: [desktop, mobile] # [desktop, mobile] height: 64px # Automatic height if not set images: - volantis-static/media/org.volantis/blog/qrcode/github@volantis.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png - volantis-static/media/org.volantis/blog/qrcode/github@volantis.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png # --------------------------------------- # webinfo widget webinfo: class: webinfo display: [desktop] header: icon: fa-solid fa-award title: 站点信息 type: article: enable: true text: '文章数目：' unit: '篇' runtime: enable: false data: '2020/01/01' # 填写建站日期 text: '已运行时间：' unit: '天' wordcount: enable: false text: '本站总字数：' # 需要启用 wordcount unit: '字' visitcounter: enable: true siteuv: text: '本站访客数：' unit: '人' sitepv: text: '本站总访问量：' unit: '次' lastupd: enable: true friendlyShow: true # 更友好的时间显示 text: '最后活动时间：' unit: '日' # --------------------------------------- # lastupdate widget lastupdate: class: lastupdate display: [desktop, mobile] header: icon: fa-solid fa-clock WISTERIA title: 最近更新############################### Sidebar ############################### > end 每一个小部件都有 class 和 display，前者代表这个小部件是什么，后者代表这个小部件在什么桌面和移动平台中是否显示，如果在移动平台显示，由于屏幕宽度有限，侧边栏的小部件则会被移动到正文区域下方，因此部分侧边栏小部件便失去意义，建议设置为仅桌面端显示。 小部件名: class: 小部件类别 display: [小部件在桌面端是否显示, 小部件在移动设备是否显示] pjaxReload: true # 是否 pjax 重载 默认 true; 设置为 false 时 确保所有页面都含有该小部件 sticky: true # 是否开启粘性定位，默认 false；设置为 true 时固定在屏幕中 博主信息部件blog/_config.volantis.ymlblogger: class: blogger display: [desktop] # [desktop, mobile] avatar: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png title: subtitle: jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails. social: true 其中，今日诗词 jinrishici 如果设置为一个字符串，这个字符串会变成占位文字，加载失败时显示。如果不需要，就请设置为 jinrishici: false。social 的具体内容请在网站页脚部分设置。 文章目录部件blog/_config.volantis.ymltoc: class: toc display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-list title: 本文目录 list_number: false min_depth: 2 max_depth: 5 这个部件只能放置在侧边栏，并且在文章中有效。在移动设备中预览时，手指向上滑动时，导航栏右边会出现 TOC 按钮，点击即可展开 TOC 部件。如果您需要显示章节序号，请设置 list_number。 min_depth 和 max_depth 代表 TOC 支持的标题层级，最大范围是2～6。 文章分类部件blog/_config.volantis.ymlcategory: class: category display: [desktop] # [desktop, mobile] header: icon: fas fa-folder-open title: 文章分类 url: /blog/categories/ 这个部件可以直接显示所有文章分类，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。 标签云部件blog/_config.volantis.ymltagcloud: class: tagcloud display: [desktop] # [desktop, mobile] header: icon: fas fa-tags title: 热门标签 url: /blog/tags/ min_font: 14 max_font: 24 color: true start_color: '#999' end_color: '#555' 这个部件可以直接显示所有文章的标签，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。 二维码部件blog/_config.volantis.ymldonate: class: qrcode display: [desktop, mobile] # [desktop, mobile] height: 64px # Automatic height if not set images: - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png 您可以放置在文章页脚用于展示打赏图片，也可以放置在侧边栏。 通用文本部件blog/_config.volantis.ymlrepos: class: text display: [desktop] # [desktop, mobile] header: icon: fab fa-github title: 点个赞吧 url: https://github.com/xaoxuu/ content: - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。' - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)' - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)' - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)' 您可以创建用于展示任何文本内容的文本部件。 通用列表部件blog/_config.volantis.ymlwiki-hexo-theme: class: list display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-chevron-left title: Hexo Themes url: /wiki/ rows: - name: Volantis for Hexo url: /wiki/volantis/ - name: Resume for Hexo url: /wiki/resume/ 您可以创建用于展示任何链接列表的列表部件。列表的 rows 中的每一项支持的属性有： name、url、icon、img、avatar，其中 img 是方形图片的链接，avatar 是圆形图片的链接。 组索引这个部件的布局继承自 list 部件，用于展示文章所属的分组的文章列表。请将您的 Volantis 升级至 2.5 版本以上使用。 blog/_config.volantis.ymlgroup-1: class: group display: [desktop, mobile] # [desktop, mobile] header: icon: fab fa-github title: Git url: /wiki/git/ 在文章的 front-matter 中设置： front-mattergroup: group-1order: 16sidebar: [group-1, toc] 「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章，顺序按照 order 从小到大排列。 通用网格部件blog/_config.volantis.ymlfeedback: class: grid display: [desktop, mobile] header: icon: fas fa-headset title: 联系开发者 url: https://github.com/volantis-x/hexo-theme-volantis fixed: true # 固定宽度 rows: - name: 反馈BUG icon: fas fa-bug url: https://github.com/volantis-x/hexo-theme-volantis/issues/ - name: 疑问求助 icon: fas fa-question-circle url: https://github.com/volantis-x/hexo-theme-volantis/issues/ - name: 提个建议 icon: fas fa-lightbulb url: https://github.com/volantis-x/hexo-theme-volantis/issues/ 您可以创建用于展示任何链接列表的网格部件。网格默认根据文字长度自动确定每一个格子的宽度，如果文字长短不一，建议通过设置 fixed: true 来固定宽度，此时文字过长的格子中的文字会换行显示。 通用页面部件blog/_config.volantis.ymltest: class: page display: [desktop, mobile] pid: haha content: excerpt # excerpt, more, content 您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容，可选 excerpt，more，content 分别对应文章的摘要、摘要后面的内容、全文。 音乐部件blog/_config.volantis.ymlmusic: class: music display: [desktop, mobile] # [desktop, mobile] pjaxReload: false 选择评论系统目前共支持 14 款评论系统： artalk, giscus, beaudar, utterances, twikoo, waline, discuss, disqus, disqusjs, gitalk, vssue, livere, isso, hashover blog/_config.volantis.ymlcomments: title: <i class='fas fa-comments'></i> 评论 subtitle: service: giscus GitHub Discussions 系列 giscus A comments system powered by GitHub Discussions. https://giscus.app/blog/_config.volantis.ymlcomments: ... service: giscus ... # giscus # https://giscus.app # https://github.com/laymonage/giscus giscus: # 以下配置按照 yml 格式增删填写即可 # repo: xxx/xxx # repo-id: xxx # category: xxx # category-id: xxx # mapping: "pathname" # reactions-enabled: "1" # emit-metadata: "0" # lang: "zh-CN" # 以上配置按照 yml 格式增删填写即可 theme: light: "light" # https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/light.css dark: "dark" # https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/dark.css GitHub Issues 系列 beaudarutterancesVssueGitalk Beaudar 名称源于粤语“表达”的发音，是 Utterances 的中文版本。 https://beaudar.lipk.org/blog/_config.volantis.ymlcomments: ... service: beaudar ... # beaudar # https://beaudar.lipk.org/ beaudar: repo: xxx/xxx issue-term: pathname issue-number: branch: main position: top order: desc theme: light: github-light dark: github-dark label: ✨💬✨ A lightweight comments widget built on GitHub issues. https://utteranc.es/blog/_config.volantis.ymlcomments: ... service: utterances ... # utterances # https://utteranc.es/ utterances: repo: xxx/xxx issue-term: pathname issue-number: theme: light: github-light dark: github-dark label: ✨💬✨ Vue 驱动的、基于 Issue 的评论插件 https://vssue.js.org/zh/blog/_config.volantis.ymlcomments: ... service: vssue ... vssue: owner: repo: clientId: clientSecret: A modern comment component based on Github Issue and Preact. https://gitalk.github.io/blog/_config.volantis.ymlcomments: ... service: gitalk ... gitalk: clientID: clientSecret: repo: owner: admin: # []clientID 和 clientSecret 的获取方法可自行搜索教程，这里仅简单描述一下步骤：点击 GitHub -> Settings https://github.com/settings/profile点击 Developer settings https://github.com/settings/developers点击 New OAuth App https://github.com/settings/applications/new填写信息：Application name 随便填，我的是：xaoxuu.comHomepage URL 和 Authorization callback URL 都写你的网址，我的是：https://xaoxuu.com可以通过设置 gitalk.id 实现多个页面共用一个评论框。front-matter---gitalk: id: /wiki/volantis/--- Disqus 系列 DisqusDisqusJSIsso Disqus - The #1 way to build an audience on your website. https://disqus.com/blog/_config.volantis.ymlcomments: ... service: disqus ... disqus: shortname:可以通过设置 disqus.path 实现多个页面共用一个评论框。front-matter---disqus: path: /wiki/volantis/--- Render Disqus comments in Mainland China using Disqus API https://github.com/SukkaW/DisqusJSblog/_config.volantis.ymlcomments: ... service: disqusjs ... # DisqusJS # https://github.com/SukkaW/DisqusJS disqusjs: path: # 全局评论地址 # 配置项按照yml格式继续填写即可 除了 [siteName url identifier] 选项 #shortname: #api: #apikey: #admin: #nesting: A commenting server similar to Disqus. https://posativ.org/isso/blog/_config.volantis.ymlcomments: ... service: isso ... isso: url: https://example.com/(path/) src: https://example.com/(path/)js/embed.min.js Valine 衍生系列 Valine 在 5.0 版本被移除,具体原因可参考hexo-theme-next#188#issuecomment-766578906以下是在解决 valine 遗留问题同一时期产生的评论系统故归为一类, 然在其社区issue中也报告了类似的攻击事件(eg: twikoo#157 waline#424 waline#430),故请谨慎选择.discusstwikooWaline 一款简单，安全，免费的评论系统 | A simple, safe, free comment system https://discuss.js.orgblog/_config.volantis.ymlcomments: ... service: discuss ... # Discuss # https://discuss.js.org discuss: serverURLs: # Discuss server address url # https://discuss.js.org/Quick-Start.html#path其中，placeholder 支持在 front-matter 中设置。front-matter---discuss: placeholder: 你觉得xxx怎么样呢？---也可以通过设置 discuss.path 实现多个页面共用一个评论框。front-matter---discuss: path: /--- 一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system. https://twikoo.js.org/blog/_config.volantis.ymlcomments: ... service: twikoo ... twikoo: path: # 全局评论地址 # 其他配置项按照yml格式继续填写即可 除了 [el path] 选项 envId: xxxxxxxxxxxxxxx # 腾讯云环境id其中，placeholder 支持在 front-matter 中设置。front-matter---twikoo: placeholder: 你觉得xxx怎么样呢？---也可以通过设置 twikoo.path 实现多个页面共用一个评论框。front-matter---twikoo: path: /--- 一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system. https://waline.js.org/blog/_config.volantis.ymlcomments: ... service: waline ... # Waline # https://waline.js.org/ waline: path: # 全局评论地址 目前设置全局评论地址后visitor失效,这是waline的问题 placeholder: 快来评论吧~ # 评论占位提示 imageHosting: https://7bu.top/api/upload # 图床api（默认使用去不图床） # 其他配置项按照yml格式继续填写即可 除了 [el path placeholder uploadImage] 选项 serverURL: xxxxxxxxxxxxxxx # Waline 的服务端地址（必填） 测试用地址: https://waline-ruddy.vercel.app ... 可选配置项详见源码其中，placeholder 支持在 front-matter 中设置。front-matter---waline: placeholder: 你觉得xxx怎么样呢？---也可以通过设置 waline.path 实现多个页面共用一个评论框。front-matter---waline: path: /--- Others 其他系列 ArtalkLivereHashoverMore... 一款简洁的自托管评论系统 | A Selfhosted Comment System. https://artalk.js.org/blog/_config.volantis.ymlcomments: ... service: artalk ... artalk: server: http://127.0.0.1:8080/api # 修改为自建的后端服务地址其中，placeholder 支持在 front-matter 中设置。front-matter---artalk: placeholder: 你觉得xxx怎么样呢？---也可以通过设置 artalk.path 实现多个页面共用一个评论框。front-matter---artalk: path: /--- Communication makes better world. https://www.livere.com/blog/_config.volantis.ymlcomments: ... service: livere ... livere: uid: #你的livere的uid在这里查看你的 uid：https://livere.com/insight/myCode，在【代码管理 -> 一般网站】中找到如下这段代码，其中 data-uid 中的内容就是你的 livere_uid。<!-- 来必力City版安装代码 --><div id="lv-container" data-id="city" data-uid="你的livere的uid">... A free and open source PHP comment system designed to allow completely anonymous comments and easy theming. https://www.barkdull.org/software/hashoverblog/_config.volantis.ymlcomments: ... service: hashover ... hashover: src: https://example.com/(path/)comments.phpblog/themes/volantis/layout/_third-party/comments/评论系统名称/layout.ejs这里写布局代码blog/themes/volantis/layout/_third-party/comments/评论系统名称/script.ejs这里要写加载 js 的代码收录更多评论系统 可以通过在 front-matter 设置 config 实现在特定页面修改评论系统的相关配置。 支持的有(按字母顺序): discuss, giscus, gitalk, twikoo, waline front-matter---gitalk: config: id: /233/--- 站内搜索 配置代码 blog/_config.volantis.yml# To use hexo search, you need to install the following plugins:# npm i hexo-generator-json-contentsearch: enable: true service: hexo # hexo, algolia, meilisearch algolia: searchAsYouType: true # If false, triggers the search only on submit. hitsPerPage: 5 # Set the number of hits per page. placeholder: 'Search...' # The placeholder text of the input. meilisearch: placeholder: 'Search...' searchKey: '' indexName: '' hostUrl: '' Hexo 搜索Algolia 搜索MeiliSearch 搜搜 你需要安装 hexo-generator-json-content，并根据它的文档去做相应配置。 修改 主题配置文件。 blog/_config.volantis.ymlsearch: enable: true service: hexo 你需要安装 hexo-algoliasearch 或 hexo-algolia，根据它们的说明文档去做相应的配置。 修改 主题配置文件。 blog/_config.volantis.ymlsearch: enable: true service: algolia 如果你使用 hexo-algoliasearch，请记得配置 fields 参数的 title, permalink 和 content:strip MeiliSearch 为自托管搜索引擎，需要服务器支撑，部署文档详见：Meilisearch Doc。 数据集需要自行上传，可使用 hexo-generator-json-content 生成索引，同时配置修改如下： blog/_config.ymljsonContent: meta: false pages: false posts: title: true path: true text: true uuid: true # <--- 做主键 你需要为文章分配一个唯一 ID 作为主键，此处推荐使用 hexo-uuid 生成。 修改 主题配置文件。 blog/_config.volantis.ymlsearch: enable: true service: meilisearch 原 google, azure, baidu 站内搜索 系祖传代码, 且文档丢失, 不便后续维护 在 5.0 版本移除 插件库概述Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭，无需进行设置。 幻灯片背景(视差滚动效果)jquery.backstretch 在 5.0 版本 移除, 被 parallax 替代 blog/_config.volantis.ymlplugins: ... parallax: enable: true position: cover # cover: sticky on the cover. fixed: Fixed as background for the site. shuffle: true # shuffle playlist duration: 10000 # Duration (ms) fade: 1500 # fade duration (ms) (Not more than 1500) images: # For personal use only. At your own risk if used for commercial purposes !!! - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg ... 幻灯片背景图片显示的位置可以选择粘贴在封面上，跟随封面一起滑动，也可以选择固定作为网页背景图片。 语法高亮blog/_config.volantis.ymlplugins: ... # 代码高亮 code_highlight: highlightjs # highlightjs or prismjs # highlight.js highlightjs: copy_code: true # 如果开启以下配置, hexo.config.highlight.enable 需要设置为 false ; hexo.config.highlight.enable 设置为 true, 则以下配置无效 # # 不再支持 v11.1.0 以下版本 # js: https://unpkg.com/@highlightjs/cdn-assets@11.5.1/highlight.min.js # Please set hexo.config.highlight.enable = false !!! # css: https://unpkg.com/@highlightjs/cdn-assets@11.5.1/styles/default.min.css # # # more: https://www.jsdelivr.com/package/npm/@highlightjs/cdn-assets?path=styles # prismjs # https://prismjs.com/ # https://hexo.io/zh-cn/docs/syntax-highlight#PrismJS prismjs: copy_code: true # Please set hexo.config.highlight.enable = false !!! set hexo.config.prismjs.enable = true !!! js: - https://unpkg.com/prismjs/components/prism-core.min.js - https://unpkg.com/prismjs/plugins/autoloader/prism-autoloader.min.js - https://unpkg.com/prismjs/plugins/line-numbers/prism-line-numbers.min.js css: - https://unpkg.com/prismjs/themes/prism-dark.css - https://unpkg.com/prismjs/plugins/line-numbers/prism-line-numbers.css 如果需要使用 highlight.js 进行语法高亮，请将站点配置文件中的 highlight.enable 设置为 false 否则不会加载插件。您可以在 94 种 语法高亮主题 中挑选喜爱的主题，然后替换上面的 css 链接。 如果您使用 highlight.js 请确保没有使用 hexo 官方的 codeblock 标签，否则会报错。 经测试，使用 highlight.js 的情况下，部分容器内的代码可能仍然会被渲染甚至报错。 APlayer 音乐播放器blog/_config.volantis.ymlplugins: ... # APlayer is only available in mainland China. # APlayer config: https://github.com/metowolf/MetingJS aplayer: enable: true # Required server: netease # netease, tencent, kugou, xiami, baidu type: playlist # song, playlist, album, search, artist id: 3175833810 # song id / playlist id / album id / search keyword # Optional fixed: false # enable fixed mode theme: '#1BCDFC' # main color autoplay: false # audio autoplay order: list # player play order, values: 'list', 'random' loop: all # player loop play, values: 'all', 'one', 'none' volume: 0.7 # default volume, notice that player will remember user setting, default volume will not work after user set volume themselves list_max_height: 320px # list max height list_folded: true autoHide: true # hide automaticaly APlayer播放器只可以在中国大陆地区使用。相关文档： APlayer | MetingJS 暗黑模式blog/_config.volantis.ymlplugins: ... # 暗黑模式 darkmode # 开关按钮：在 navbar.menu 中添加： # - name: 暗黑模式 # 可自定义 # icon: fas fa-moon # 可自定义 # toggle: darkmode darkmode: enable: true 结束支持blog/_config.volantis.ymlplugins: ... # 旧版 Internet Explorer 淘汰行动 # https://www.microsoft.com/zh-cn/WindowsForBusiness/End-of-IE-support # 本主题不支持Internet Explorer的任何版本!!! killOldVersionsOfIE: enable: true # 禁用JavaScript提示 # 本页面需要浏览器支持（启用）JavaScript # 主题中的某些插件必须启用JavaScript才能正常工作，例如开启scrollreveal如果禁用JavaScript会导致卡片消失 killNoScript: enable: true Artitalkblog/_config.volantis.ymlplugins: ... # Artitalk https://artitalk.js.org # 配置过程请参考：https://artitalk.js.org/doc.html # 使用过旧版本的请修改Leancloud shuoshuo class部分列名：https://artitalk.js.org/release.html # 除appID和appKEY外均为选填项 artitalk: # Set `plugins: ["artitalk"]` to enable in front-matter # 不支持 Pjax # 配置项按照yml格式继续填写即可 appId: ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI # your appID appKey: nHXLd3N3Jgh460t2iRQKWAtr # your appKEY # serverURL: #leancloud绑定的api访问域名，使用国际版的话不需要填写 # lang: # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语 # pageSize: #每页说说的显示数量 # shuoPla: #在编辑说说的输入框中的占位符 # avatarPla: #自定义头像url的输入框的占位符 # motion: #加载动画的开关，1为开，0为关，默认为开 # bgImg: #说说输入框背景图片url # color1: #说说背景颜色1&按钮颜色1 # color2: #说说背景颜色2&按钮颜色2 # color3: #说说字体颜色 # cssUrl: #自定义css接口 BBtalkblog/_config.volantis.ymlplugins: ... # BBtalk https://bb.js.org bbtalk: # Set `plugins: ["bbtalk"]` to enable in front-matter # 支持 Pjax js: https://cdn.jsdelivr.net/npm/bbtalk@0.1.5/dist/bbtalk.min.js # BBtalk.js appId: 0KzOX4vC7Jsk6vzUGNeEiUaI-gzGzoHsz # your appID appKey: HwCiWuxfpvKiLm4teCUgTIba # your appKEY serverURLs: https://bbapi.heson10.com # Request Api 域名 Tidioblog/_config.volantis.ymlplugins: ... # 聊天功能 chat_service: tidio # tidio or gitter # Tidio # https://www.tidio.com/ tidio: id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 友链朋友圈blog/_config.volantis.ymlplugins: ... # 友链朋友圈 hexo-circle-of-friends # https://github.com/Rock-Candy-Tea/hexo-circle-of-friends # https://fcircle-doc.js.cool/ fcircle: # Set `plugins: ["fcircle"]` to enable in front-matter # 支持 Pjax private_api_url: https://fcircle-api.example.com/ # api 地址 page_turning_number: 10 # 点击加载更多时，一次最多加载几篇文章，默认10 error_img: https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c # 头像加载失败时，默认头像地址 sort_rule: updated # 进入页面时第一次的排序规则,可选值：created/updated app: https://unpkg.com/imgscdn@1.1.33/fcircle/app.min.js # app.min.js的url bundle: https://unpkg.com/imgscdn@1.1.33/fcircle/bundle.js # bundle.js的url 消息提示blog/_config.volantis.ymlplugins: ... # 消息提示 # izitoast message: enable: true icon: # 默认图标，支持对图标添加颜色，可选值：see：/source/css/_style/_plugins/fontcolor.styl default: fa-solid fa-info-circle light-blue quection: fa-solid fa-question-circle light-blue time: # 默认持续时间 default: 5000 quection: 20000 position: 'topRight' # 弹出位置 可选值：topRight, bottomRight, bottomLeft, topLeft, topCenter, bottomCenter, center transitionIn: 'bounceInLeft' # 弹窗打开动画 可选值：bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX transitionOut: 'fadeOutRight' # 弹窗关闭动画 可选值：fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX titleColor: 'var(--color-text)' # 标题颜色 messageColor: 'var(--color-text)' # 消息颜色 backgroundColor: 'var(--color-card)' # 默认背景色 zindex: 2147483647 # 层级 copyright: # 是否在复制时弹出版权提示，影响范围：ctrl+c、代码块复制按钮、右键复制选项 enable: true title: '知识共享许可协议' message: '请遵守 CC BY-NC-SA 4.0 协议。' icon: 'far fa-copyright light-blue' aplayer: # 是否开启音乐通知；播放、暂停、失败 时的图标 enable: true play: fa-solid fa-play pause: fa-solid fa-pause rightmenu: enable: true # 是否开启右键模块的消息通知 notice: true # 唤醒原右键菜单的通知 轮播标签使用方法参见：swiper blog/_config.volantis.yml# swiper# https://www.swiper.com.cn/swiper: enable: true"}],"posts":[{"title":"提升部署在vercel或netlify的网站在中国的访问速度和稳定性","slug":"blogs/2024-03-15-enhanced-FaaS-in-cn","date":"2024-03-15T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2024-03-15-enhanced-FaaS-in-cn/","link":"https://xingpingcn.top/enhanced-faas-in-cn.html","permalink":"https://volantis.js.org/blogs/2024-03-15-enhanced-FaaS-in-cn/","excerpt":"enhanced-FaaS-in-Chinahttps://github.com/xingpingcn/enhanced-FaaS-in-China 如果你的网站部署在vercel，则把cname记录改为： vercel-cname.xingpingcn.top 如果你的网站部署在netlify，则把cname记录改为： netlify-cname.xingpingcn.top 如果你的网站部署在netlify和vercel上，则把cname记录改为： verlify-cname.xingpingcn.top 使用此dns解析建议：先把cname记录改为官方提供的url，等ssl/tls证书生成之后再把cname记录改为verlify-cname.xingpingcn.top","text":"enhanced-FaaS-in-Chinahttps://github.com/xingpingcn/enhanced-FaaS-in-China 如果你的网站部署在vercel，则把cname记录改为： vercel-cname.xingpingcn.top 如果你的网站部署在netlify，则把cname记录改为： netlify-cname.xingpingcn.top 如果你的网站部署在netlify和vercel上，则把cname记录改为： verlify-cname.xingpingcn.top 使用此dns解析建议：先把cname记录改为官方提供的url，等ssl/tls证书生成之后再把cname记录改为verlify-cname.xingpingcn.top","categories":[],"tags":[],"author":"xingpingcn"},{"title":"免费通过NS1利用监控宝平台实现实时基于不同运营商的故障转移","slug":"blogs/2023-11-08-NS1-failover","date":"2023-11-18T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2023-11-08-NS1-failover/","link":"https://xingpingcn.top/%E5%85%8D%E8%B4%B9%E9%80%9A%E8%BF%87NS1%E5%88%A9%E7%94%A8%E7%9B%91%E6%8E%A7%E5%AE%9D%E5%B9%B3%E5%8F%B0%E5%AE%9E%E7%8E%B0%E5%AE%9E%E6%97%B6%E5%9F%BA%E4%BA%8E%E4%B8%8D%E5%90%8C%E8%BF%90%E8%90%A5%E5%95%86%E7%9A%84%E6%95%85%E9%9A%9C%E8%BD%AC%E7%A7%BB.html","permalink":"https://volantis.js.org/blogs/2023-11-08-NS1-failover/","excerpt":"本教程用到的资源全部都是免费且可持续使用的。NS1.com这个权威DNS服务器能根据ASN、国家或省份、DNS轮询（可加权）等方式解析域名，并且提供了API去控制某个解析（answer）是否响应。监控宝能实时监控网站（通过HTTP、PING、DNS方式等）并输出警告（webhook、Email、短信等），最高监控频率为2分钟。亚马逊的AWS Lambda是一个FaaS平台（serverless），可以作为连接NS1.com和监控宝之间的桥梁，当监控宝检测到网站速度变慢的时候发送信息到AWS Lambda，AWS Lambda得到信息后再传递给NS1.com，速度恢复的时候也是同样的操作。为什么要夹在一个AWS Lambda呢？这是因为监控宝发送的格式是固定的，并不能直接接入到NS1.com。","text":"本教程用到的资源全部都是免费且可持续使用的。NS1.com这个权威DNS服务器能根据ASN、国家或省份、DNS轮询（可加权）等方式解析域名，并且提供了API去控制某个解析（answer）是否响应。监控宝能实时监控网站（通过HTTP、PING、DNS方式等）并输出警告（webhook、Email、短信等），最高监控频率为2分钟。亚马逊的AWS Lambda是一个FaaS平台（serverless），可以作为连接NS1.com和监控宝之间的桥梁，当监控宝检测到网站速度变慢的时候发送信息到AWS Lambda，AWS Lambda得到信息后再传递给NS1.com，速度恢复的时候也是同样的操作。为什么要夹在一个AWS Lambda呢？这是因为监控宝发送的格式是固定的，并不能直接接入到NS1.com。","categories":[],"tags":[],"author":"xingpingcn"},{"title":"使用freecdn-js提高hexo博客的cdn稳定性","slug":"blogs/2023-10-01-enhanced-cdn","date":"2023-10-01T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2023-10-01-enhanced-cdn/","link":"https://xingpingcn.top/%E4%BD%BF%E7%94%A8freecdn-js%E6%8F%90%E9%AB%98hexo%E5%8D%9A%E5%AE%A2%E7%9A%84cdn%E7%A8%B3%E5%AE%9A%E6%80%A7.html","permalink":"https://volantis.js.org/blogs/2023-10-01-enhanced-cdn/","excerpt":"由于cdn.jsdelivr.net在国内不太稳定，替代的jsd.cdn.zzko.cn稳定性稍好，但是也不是100%稳定，因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求，但是我的文件（图片、js等）储存在GitHub图床，而freecdn-js本身需要被加速的文件的hash，因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的，所以写了一个正则脚本来提取cdn的链接。","text":"由于cdn.jsdelivr.net在国内不太稳定，替代的jsd.cdn.zzko.cn稳定性稍好，但是也不是100%稳定，因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求，但是我的文件（图片、js等）储存在GitHub图床，而freecdn-js本身需要被加速的文件的hash，因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的，所以写了一个正则脚本来提取cdn的链接。","categories":[],"tags":[],"author":"xingpingcn"},{"title":"为hexo博客添加自适应图片占位图（配合lazyload）","slug":"blogs/2023-09-03-lazyload","date":"2023-09-03T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2023-09-03-lazyload/","link":"https://www.xingpingcn.top/%E4%B8%BAhexo%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0%E8%87%AA%E9%80%82%E5%BA%94%E5%9B%BE%E7%89%87%E5%8D%A0%E4%BD%8D%E5%9B%BE.html","permalink":"https://volantis.js.org/blogs/2023-09-03-lazyload/","excerpt":"我们要得到的结果如封面所示 由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。","text":"我们要得到的结果如封面所示 由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。","categories":[{"name":"hexo折腾","slug":"hexo折腾","permalink":"https://volantis.js.org/categories/hexo%E6%8A%98%E8%85%BE/"}],"tags":[{"name":"volantis","slug":"volantis","permalink":"https://volantis.js.org/tags/volantis/"}],"author":"xingpingcn"},{"title":"Hexo Volantis Snippets的vscode扩展","slug":"blogs/2023-05-10-hexo-volantis-snippets","date":"2023-05-10T00:00:00.000Z","updated":"2023-05-10T00:00:00.000Z","comments":true,"path":"blogs/2023-05-10-hexo-volantis-snippets/","link":"https://www.qdovo.com/2023/05/10/hexo-volantis-snippets/","permalink":"https://volantis.js.org/blogs/2023-05-10-hexo-volantis-snippets/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"lovelyJason"},{"title":"Aplayer采用本地音源","slug":"blogs/2023-1-18-LocalMusic","date":"2023-01-18T00:00:00.000Z","updated":"2023-01-18T00:00:00.000Z","comments":true,"path":"blogs/2023-1-18-LocalMusic/","link":"https://blog.dearxuan.com/2023/01/07/Volantis%E9%AD%94%E6%94%B9%E6%95%99%E7%A8%8B/#aplayer%E9%87%87%E7%94%A8%E6%9C%AC%E5%9C%B0%E9%9F%B3%E6%BA%90%E9%80%9A%E7%94%A8","permalink":"https://volantis.js.org/blogs/2023-1-18-LocalMusic/","excerpt":"通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题 新的代码仅向metingjs增加了本地音源功能,原有功能保持不变","text":"通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题 新的代码仅向metingjs增加了本地音源功能,原有功能保持不变","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"DearXuan"},{"title":"Volantis魔改教程","slug":"blogs/2023-01-07-VolantisModify","date":"2023-01-07T00:00:00.000Z","updated":"2023-01-17T00:00:00.000Z","comments":true,"path":"blogs/2023-01-07-VolantisModify/","link":"https://blog.dearxuan.com/2023/01/07/Volantis%E9%AD%94%E6%94%B9%E6%95%99%E7%A8%8B/","permalink":"https://volantis.js.org/blogs/2023-01-07-VolantisModify/","excerpt":"暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等 部分内容非Volantis主题也适用 !function(){var l,n,i,r;function a(e){for(var t=document.createDocumentFragment(),l=0;l","text":"暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等 部分内容非Volantis主题也适用 !function(){var l,n,i,r;function a(e){for(var t=document.createDocumentFragment(),l=0;l","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"DearXuan"},{"title":"volantis使用php实现Gitee友链","slug":"blogs/2022-12-26-GiteeFriendsLink","date":"2022-12-26T00:00:00.000Z","updated":"2022-12-26T00:00:00.000Z","comments":true,"path":"blogs/2022-12-26-GiteeFriendsLink/","link":"https://blog.dearxuan.com/2022/12/26/volantis%E4%BD%BF%E7%94%A8php%E5%AE%9E%E7%8E%B0Gitee%E5%8F%8B%E9%93%BE/","permalink":"https://volantis.js.org/blogs/2022-12-26-GiteeFriendsLink/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"DearXuan"},{"title":"配置Volantis 主题遇到的问题和解决","slug":"blogs/2022-12-06-experience","date":"2022-12-06T00:00:00.000Z","updated":"2022-12-06T00:00:00.000Z","comments":true,"path":"blogs/2022-12-06-experience/","link":"https://mengfanjun020906.github.io/2022/12/06/%E7%BB%99%E8%87%AA%E5%B7%B1%E7%9A%84hexo%E5%8D%9A%E5%AE%A2%E4%B8%AA%E6%80%A7%E5%8C%96Volantis%E4%B8%BB%E9%A2%98/","permalink":"https://volantis.js.org/blogs/2022-12-06-experience/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"MengFanjun"},{"title":"volantis新版暗黑模式动画","slug":"blogs/2022-08-18-darkmode-new","date":"2022-08-18T00:00:00.000Z","updated":"2022-08-18T00:00:00.000Z","comments":true,"path":"blogs/2022-08-18-darkmode-new/","link":"https://blog.dearxuan.com/2022/08/18/volantis%E4%B8%BB%E9%A2%98%E8%87%AA%E5%AE%9A%E4%B9%89-%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F%E5%8A%A8%E7%94%BB-2022%E6%96%B0%E7%89%88/","permalink":"https://volantis.js.org/blogs/2022-08-18-darkmode-new/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"DearXuan"},{"title":"好看的网盘链接","slug":"blogs/2022-07-09-pandownjs","date":"2022-05-05T12:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2022-07-09-pandownjs/","link":"https://www.yt-blog.top/20220505/1200/pandown-js/","permalink":"https://volantis.js.org/blogs/2022-07-09-pandownjs/","excerpt":"这不是Node.js包！ 这是个javascript的小工具？ ↑↑↑和上次一样的开头↑↑↑","text":"这不是Node.js包！ 这是个javascript的小工具？ ↑↑↑和上次一样的开头↑↑↑","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"cysn"},{"title":"Volantis 多背景图的优化方案","slug":"blogs/2021-11-29-parallax","date":"2021-11-29T00:00:00.000Z","updated":"2022-04-20T00:00:00.000Z","comments":true,"path":"blogs/2021-11-29-parallax/","link":"https://blog.dearxuan.com/2021/11/29/volantis%E5%A4%9A%E8%83%8C%E6%99%AF%E5%9B%BE%E7%9A%84%E4%BC%98%E5%8C%96%E6%96%B9%E6%A1%88/","permalink":"https://volantis.js.org/blogs/2021-11-29-parallax/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"DearXuan"},{"title":"网站自定义字体及推荐","slug":"blogs/2021-09-02-inkss-font","date":"2021-09-02T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2021-09-02-inkss-font/","link":"https://inkss.cn/post/bbb93a9b/","permalink":"https://volantis.js.org/blogs/2021-09-02-inkss-font/","excerpt":"统计一下目前使用的自定义字体及调用。 Volantis 主题可直接参考使用。","text":"统计一下目前使用的自定义字体及调用。 Volantis 主题可直接参考使用。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"inkss"},{"title":"Volantis主题自定义-暗黑模式动画","slug":"blogs/2021-8-29-darkmode","date":"2021-08-25T00:00:00.000Z","updated":"2021-08-25T00:00:00.000Z","comments":true,"path":"blogs/2021-8-29-darkmode/","link":"https://blog.dearxuan.com/2021/08/25/Volantis%E4%B8%BB%E9%A2%98%E8%87%AA%E5%AE%9A%E4%B9%89%E2%80%94%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F%E5%8A%A8%E7%94%BB/","permalink":"https://volantis.js.org/blogs/2021-8-29-darkmode/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"DearXuan"},{"title":"Volantis 主题个性化修改合集","slug":"blogs/2021-08-15-inkss-theme","date":"2021-08-15T00:00:00.000Z","updated":"2021-08-15T00:00:00.000Z","comments":true,"path":"blogs/2021-08-15-inkss-theme/","link":"https://inkss.cn/post/610620a9/","permalink":"https://volantis.js.org/blogs/2021-08-15-inkss-theme/","excerpt":"","text":"","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"inkss"},{"title":"给博客添加捐赠小部件—sponsor-page","slug":"blogs/2021-08-13-sponsor-page","date":"2021-08-13T00:00:00.000Z","updated":"2021-08-13T00:00:00.000Z","comments":true,"path":"blogs/2021-08-13-sponsor-page/","link":"https://kelecn.top/posts/34795/","permalink":"https://volantis.js.org/blogs/2021-08-13-sponsor-page/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"kelecn"},{"title":"使用 pandoc 正确渲染多行 MathJax 公式","slug":"blogs/2021-4-18-pandoc-renderer","date":"2021-04-18T00:00:00.000Z","updated":"2021-04-18T00:00:00.000Z","comments":true,"path":"blogs/2021-4-18-pandoc-renderer/","link":"https://shiraha.cn/2021/use-pandoc-to-render-multiline-formulas-correctly/","permalink":"https://volantis.js.org/blogs/2021-4-18-pandoc-renderer/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"Nanami"},{"title":"为volantis添加瀑布流相册","slug":"blogs/2021-4-14-photos","date":"2021-04-14T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2021-4-14-photos/","link":"https://web.archive.org/web/20220410080025/https://goopher.tk/posts/7.html","permalink":"https://volantis.js.org/blogs/2021-4-14-photos/","excerpt":"经过折腾，目前相册功能可用了，就是还不支持分类和懒加载，等后续完善吧。","text":"经过折腾，目前相册功能可用了，就是还不支持分类和懒加载，等后续完善吧。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"GOOPHER"},{"title":"为volantis添加hls.js以在Chrome上播放m3u8视频","slug":"blogs/2021-4-1-hls","date":"2021-04-01T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2021-4-1-hls/","link":"https://web.archive.org/web/20220410080048/https://goopher.tk/posts/4.html","permalink":"https://volantis.js.org/blogs/2021-4-1-hls/","excerpt":"在文章中插入m3u8视频的时候，由于Chrome等浏览器原生播放不了这种格式，所以需要添加hls.js等让其支持播放，如果你也遇到了这样的问题就来看看吧。","text":"在文章中插入m3u8视频的时候，由于Chrome等浏览器原生播放不了这种格式，所以需要添加hls.js等让其支持播放，如果你也遇到了这样的问题就来看看吧。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"GOOPHER"},{"title":"volantis主题修改代码高亮样式","slug":"blogs/2021-3-31-highlightjs","date":"2021-03-31T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2021-3-31-highlightjs/","link":"https://web.archive.org/web/20220410080207/https://goopher.tk/posts/3.html","permalink":"https://volantis.js.org/blogs/2021-3-31-highlightjs/","excerpt":"在使用主题内的highlightjs的时候，你是否也遇到了它不换行、没有行号等问题？点进来看看吧。","text":"在使用主题内的highlightjs的时候，你是否也遇到了它不换行、没有行号等问题？点进来看看吧。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"GOOPHER"},{"title":"为volantis主题添加图片轮播和热门文章","slug":"blogs/2021-2-30-slider","date":"2021-03-30T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2021-2-30-slider/","link":"https://web.archive.org/web/20220410080335/https://goopher.tk/posts/1.html","permalink":"https://volantis.js.org/blogs/2021-2-30-slider/","excerpt":"这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的，由我将新的轮播模板迁移至主题内，由inkss大佬完善。在这感谢两位大佬，如果你也需要轮播插件，就进来看看吧。","text":"这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的，由我将新的轮播模板迁移至主题内，由inkss大佬完善。在这感谢两位大佬，如果你也需要轮播插件，就进来看看吧。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"GOOPHER"},{"title":"使用volantis更优雅地展示截图/录屏","slug":"blogs/2021-3-7-framei8","date":"2021-03-07T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2021-3-7-framei8/","link":"https://web.archive.org/web/20220410080247/https://goopher.tk/posts/24004.html","permalink":"https://volantis.js.org/blogs/2021-3-7-framei8/","excerpt":"我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。","text":"我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"GOOPHER"},{"title":"通过CoolPush实时推送hexo评论到QQ","slug":"blogs/2020-12-17-comments-push","date":"2020-12-17T00:00:00.000Z","updated":"2020-12-17T00:00:00.000Z","comments":true,"path":"blogs/2020-12-17-comments-push/","link":"https://hin.cool/posts/cpush.html","permalink":"https://volantis.js.org/blogs/2020-12-17-comments-push/","excerpt":"","text":"","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"W4J1e"},{"title":"哔哔！换个姿势在静态博客上发短博文（volantis适配版）","slug":"blogs/2020-10-09-bb-on-volantis","date":"2020-10-09T00:00:00.000Z","updated":"2020-10-09T00:00:00.000Z","comments":true,"path":"blogs/2020-10-09-bb-on-volantis/","link":"https://archive.vn/I55RS","permalink":"https://volantis.js.org/blogs/2020-10-09-bb-on-volantis/","excerpt":"要在静态博客上发送短博文，不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk，已经有短博文的那种体验了，而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。","text":"要在静态博客上发送短博文，不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk，已经有短博文的那种体验了，而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"Heson"},{"title":"Hexo 标签函数 list_tags 用法详解","slug":"blogs/2020-09-24-list-tags","date":"2020-09-24T00:00:00.000Z","updated":"2020-09-24T00:00:00.000Z","comments":true,"path":"blogs/2020-09-24-list-tags/","link":"https://archive.vn/EVrO6","permalink":"https://volantis.js.org/blogs/2020-09-24-list-tags/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"Heson"},{"title":"如何给博客添加弹窗通知","slug":"blogs/2020-09-03-message-prompt","date":"2020-09-03T00:00:00.000Z","updated":"2020-09-04T00:00:00.000Z","comments":true,"path":"blogs/2020-09-03-message-prompt/","link":"https://colsrch.cn/posts/72bb5148/","permalink":"https://volantis.js.org/blogs/2020-09-03-message-prompt/","excerpt":"","text":"","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"Colsrch"},{"title":"博客访问速度提升：最佳线路分流","slug":"blogs/2020-08-31-hexospeed","date":"2020-08-31T00:00:00.000Z","updated":"2020-08-31T00:00:00.000Z","comments":true,"path":"blogs/2020-08-31-hexospeed/","link":"https://colsrch.cn/posts/56951997/","permalink":"https://volantis.js.org/blogs/2020-08-31-hexospeed/","excerpt":"","text":"","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"Colsrch"},{"title":"静态博客使用 Issues API 发布动态、友链、书签","slug":"blogs/2020-08-28-issue-api","date":"2020-08-28T00:00:00.000Z","updated":"2020-08-28T00:00:00.000Z","comments":true,"path":"blogs/2020-08-28-issue-api/","link":"https://xaoxuu.com/blog/20200823/","permalink":"https://volantis.js.org/blogs/2020-08-28-issue-api/","excerpt":"","text":"","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"xaoxuu"},{"title":"给 Hexo Volantis 主题添加图片轮播功能","slug":"blogs/2020-08-21-main-banner","date":"2020-08-21T00:00:00.000Z","updated":"2020-08-22T00:00:00.000Z","comments":true,"path":"blogs/2020-08-21-main-banner/","link":"https://archive.vn/vRZgj","permalink":"https://volantis.js.org/blogs/2020-08-21-main-banner/","excerpt":"","text":"","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"Heson"},{"title":"Volantis 主题部署 Pjax","slug":"blogs/2020-05-17-inkss-pjax","date":"2020-05-17T00:00:00.000Z","updated":"2020-08-07T00:00:00.000Z","comments":true,"path":"blogs/2020-05-17-inkss-pjax/","link":"https://inkss.cn/post/76993423/","permalink":"https://volantis.js.org/blogs/2020-05-17-inkss-pjax/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"inkss"}],"categories":[{"name":"hexo折腾","slug":"hexo折腾","permalink":"https://volantis.js.org/categories/hexo%E6%8A%98%E8%85%BE/"},{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"},{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[{"name":"volantis","slug":"volantis","permalink":"https://volantis.js.org/tags/volantis/"}]}