@mhg/volantis-community/content.json

Volantis Community

{"meta":{"title":"Volantis","subtitle":"","description":"Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。","author":"Volantis Team","url":"https://volantis.js.org","root":"/"},"pages":[{"title":"","date":"2023-11-03T04:02:43.955Z","updated":"2023-11-03T04:02:27.000Z","comments":true,"path":"404.html","permalink":"https://volantis.js.org/404","excerpt":"","text":"404 很抱歉，您访问的页面不存在 可能是输入地址有误或该地址已被删除"},{"title":"鸣谢项目和社区贡献者","date":"2023-11-03T04:02:44.207Z","updated":"2023-11-03T04:02:27.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":"2023-11-03T04:02:44.211Z","updated":"2023-11-03T04:02:27.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":"2023-11-03T04:02:44.215Z","updated":"2023-11-03T04:02:27.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":"2023-11-03T04:02:44.259Z","updated":"2023-11-03T04:02:27.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":"2023-11-03T04:02:44.203Z","updated":"2023-11-03T04:02:27.000Z","comments":true,"path":"blog/categories/index.html","permalink":"https://volantis.js.org/blog/categories/","excerpt":"","text":""},{"title":"所有标签","date":"2023-11-03T04:02:44.203Z","updated":"2023-11-03T04:02:27.000Z","comments":true,"path":"blog/tags/index.html","permalink":"https://volantis.js.org/blog/tags/","excerpt":"","text":""},{"title":"进阶设定","date":"2023-11-03T04:02:44.411Z","updated":"2023-11-03T04:02:27.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":"2023-11-03T04:02:44.415Z","updated":"2023-11-03T04:02:27.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":"2023-11-03T04:02:44.427Z","updated":"2023-11-03T04:02:27.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":"2023-11-03T04:02:44.431Z","updated":"2023-11-03T04:02:27.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":"2023-11-03T04:02:44.435Z","updated":"2023-11-03T04:02:27.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":"2023-11-03T04:02:44.435Z","updated":"2023-11-03T04:02:27.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/