diff --git a/404.html b/404.html index fc278b6be..f12a29cee 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -404 Not Found - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

很抱歉，您访问的页面不存在

可能是输入地址有误或该地址已被删除

评论

\ No newline at end of file +404 Not Found - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

很抱歉，您访问的页面不存在

可能是输入地址有误或该地址已被删除

评论

\ No newline at end of file diff --git a/archives/2013/12/index.html b/archives/2013/12/index.html index 1f20f86d6..3855817ae 100644 --- a/archives/2013/12/index.html +++ b/archives/2013/12/index.html @@ -1 +1 @@ -归档：2013/12 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

This is a image test post.

测试 设定列数
























This is a image test post.

测试 没有设定列数


截屏2020-03-1317.25.10.png

截屏2020-03-1317.27.42.png

截屏2020-03-1317.28.02.png

This is a image test post.

This post doesn't have a title. Make sure it's accessible.

The following contents should be invisible in home/archive page.

This post contains 4 photos:

  • Widescreen wallpaper
  • Portrait photo
  • Dual widescreen wallpaper
  • Small photo

All photos should be displayed properly.

This post is used for testing tag plugins. See docs for more info.

Block Quote

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Quote from a book

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Quote from Twitter

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Quote from an article on the web

Every interaction is both precious and an opportunity to delight.

Seth Godin `http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html` Welcome to Island Marketing

Code Block

Normal code block

alert('Hello World!');

With caption

Array.map
array.map(callback[, thisArg])

With caption and URL

.compactUnderscore.js
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]

With marked lines

Line 1,7-8,10 should be marked with different color.

const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Note: Theme's style should support .highlight.line.marked (recommend to use the selection or current line color).

Gist

jsFiddle

Pullquote

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

This is a link post without a title. The title should be the link with or without protocol. Clicking on the link should open Google in a new tab or window.

This is a Japanese test post.

私は昨日ついにその助力家というのの上よりするたなけれ。

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

がたを知っないはずも同時に九月をいよいよたありた。

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum

This is a Chinese test post.

善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。

以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？

就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。

國新故。

工步他始能詩的，裝進分星海演意學值例道……於財型目古香亮自和這乎？化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不？

From 亂數假文產生器 - Chinese Lorem Ipsum

This post has a long title. Make sure the title displayed right.

This is a link post. Clicking on the link should open Google in a new tab or window.


1 / 2

\ No newline at end of file +归档：2013/12 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

This is a image test post.

测试 设定列数
























This is a image test post.

测试 没有设定列数


截屏2020-03-1317.25.10.png

截屏2020-03-1317.27.42.png

截屏2020-03-1317.28.02.png

This is a image test post.

This post doesn't have a title. Make sure it's accessible.

The following contents should be invisible in home/archive page.

This post contains 4 photos:

  • Widescreen wallpaper
  • Portrait photo
  • Dual widescreen wallpaper
  • Small photo

All photos should be displayed properly.

This post is used for testing tag plugins. See docs for more info.

Block Quote

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Quote from a book

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Quote from Twitter

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Quote from an article on the web

Every interaction is both precious and an opportunity to delight.

Seth Godin `http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html` Welcome to Island Marketing

Code Block

Normal code block

alert('Hello World!');

With caption

Array.map
array.map(callback[, thisArg])

With caption and URL

.compactUnderscore.js
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]

With marked lines

Line 1,7-8,10 should be marked with different color.

const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Note: Theme's style should support .highlight.line.marked (recommend to use the selection or current line color).

Pullquote

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

This is a link post without a title. The title should be the link with or without protocol. Clicking on the link should open Google in a new tab or window.

This is a Japanese test post.

私は昨日ついにその助力家というのの上よりするたなけれ。

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

がたを知っないはずも同時に九月をいよいよたありた。

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum

This is a Chinese test post.

善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。

以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？

就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。

國新故。

工步他始能詩的，裝進分星海演意學值例道……於財型目古香亮自和這乎？化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不？

From 亂數假文產生器 - Chinese Lorem Ipsum

This post has a long title. Make sure the title displayed right.

This is a link post. Clicking on the link should open Google in a new tab or window.


1 / 2

\ No newline at end of file diff --git a/archives/2013/12/page/2/index.html b/archives/2013/12/page/2/index.html index e1b9ddbd0..515b9b798 100644 --- a/archives/2013/12/page/2/index.html +++ b/archives/2013/12/page/2/index.html @@ -1 +1 @@ -归档：2013/12 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don't forget to redefine the style by yourself.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet.

List Types

Definition List (dl)

Definition List Title
This is a definition list division.

Ordered List (ol)

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List (ul)

  • List Item 1
  • List Item 2
  • List Item 3

Checkbox List (ul)

  • List Item 1 unchecked
  • List Item 2 checked
  • List Item 3 checked

Table

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Misc Stuff - abbr, acronym, sub, sup, kbd, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE. Use Crtl + C to stop.

Welcome to Hexo! This is your very first post. Check documentation to learn how to use.


2 / 2

\ No newline at end of file +归档：2013/12 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don't forget to redefine the style by yourself.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet.

List Types

Definition List (dl)

Definition List Title
This is a definition list division.

Ordered List (ol)

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List (ul)

  • List Item 1
  • List Item 2
  • List Item 3

Checkbox List (ul)

  • List Item 1 unchecked
  • List Item 2 checked
  • List Item 3 checked

Table

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Misc Stuff - abbr, acronym, sub, sup, kbd, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE. Use Crtl + C to stop.

Welcome to Hexo! This is your very first post. Check documentation to learn how to use.


2 / 2

\ No newline at end of file diff --git a/archives/2013/index.html b/archives/2013/index.html index 7768bdcaf..43bd52e0b 100644 --- a/archives/2013/index.html +++ b/archives/2013/index.html @@ -1 +1 @@ -归档：2013 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

This is a image test post.

测试 设定列数
























This is a image test post.

测试 没有设定列数


截屏2020-03-1317.25.10.png

截屏2020-03-1317.27.42.png

截屏2020-03-1317.28.02.png

This is a image test post.

This post doesn't have a title. Make sure it's accessible.

The following contents should be invisible in home/archive page.

This post contains 4 photos:

  • Widescreen wallpaper
  • Portrait photo
  • Dual widescreen wallpaper
  • Small photo

All photos should be displayed properly.

This post is used for testing tag plugins. See docs for more info.

Block Quote

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Quote from a book

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Quote from Twitter

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Quote from an article on the web

Every interaction is both precious and an opportunity to delight.

Seth Godin `http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html` Welcome to Island Marketing

Code Block

Normal code block

alert('Hello World!');

With caption

Array.map
array.map(callback[, thisArg])

With caption and URL

.compactUnderscore.js
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]

With marked lines

Line 1,7-8,10 should be marked with different color.

const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Note: Theme's style should support .highlight.line.marked (recommend to use the selection or current line color).

Gist

jsFiddle

Pullquote

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

This is a link post without a title. The title should be the link with or without protocol. Clicking on the link should open Google in a new tab or window.

This is a Japanese test post.

私は昨日ついにその助力家というのの上よりするたなけれ。

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

がたを知っないはずも同時に九月をいよいよたありた。

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum

This is a Chinese test post.

善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。

以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？

就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。

國新故。

工步他始能詩的，裝進分星海演意學值例道……於財型目古香亮自和這乎？化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不？

From 亂數假文產生器 - Chinese Lorem Ipsum

This post has a long title. Make sure the title displayed right.

This is a link post. Clicking on the link should open Google in a new tab or window.


1 / 2

\ No newline at end of file +归档：2013 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

This is a image test post.

测试 设定列数
























This is a image test post.

测试 没有设定列数


截屏2020-03-1317.25.10.png

截屏2020-03-1317.27.42.png

截屏2020-03-1317.28.02.png

This is a image test post.

This post doesn't have a title. Make sure it's accessible.

The following contents should be invisible in home/archive page.

This post contains 4 photos:

  • Widescreen wallpaper
  • Portrait photo
  • Dual widescreen wallpaper
  • Small photo

All photos should be displayed properly.

This post is used for testing tag plugins. See docs for more info.

Block Quote

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Quote from a book

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Quote from Twitter

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Quote from an article on the web

Every interaction is both precious and an opportunity to delight.

Seth Godin `http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html` Welcome to Island Marketing

Code Block

Normal code block

alert('Hello World!');

With caption

Array.map
array.map(callback[, thisArg])

With caption and URL

.compactUnderscore.js
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]

With marked lines

Line 1,7-8,10 should be marked with different color.

const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Note: Theme's style should support .highlight.line.marked (recommend to use the selection or current line color).

Pullquote

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

This is a link post without a title. The title should be the link with or without protocol. Clicking on the link should open Google in a new tab or window.

This is a Japanese test post.

私は昨日ついにその助力家というのの上よりするたなけれ。

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

がたを知っないはずも同時に九月をいよいよたありた。

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum

This is a Chinese test post.

善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。

以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？

就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。

國新故。

工步他始能詩的，裝進分星海演意學值例道……於財型目古香亮自和這乎？化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不？

From 亂數假文產生器 - Chinese Lorem Ipsum

This post has a long title. Make sure the title displayed right.

This is a link post. Clicking on the link should open Google in a new tab or window.


1 / 2

\ No newline at end of file diff --git a/archives/2013/page/2/index.html b/archives/2013/page/2/index.html index e2700816e..4fb458419 100644 --- a/archives/2013/page/2/index.html +++ b/archives/2013/page/2/index.html @@ -1 +1 @@ -归档：2013 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don't forget to redefine the style by yourself.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet.

List Types

Definition List (dl)

Definition List Title
This is a definition list division.

Ordered List (ol)

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List (ul)

  • List Item 1
  • List Item 2
  • List Item 3

Checkbox List (ul)

  • List Item 1 unchecked
  • List Item 2 checked
  • List Item 3 checked

Table

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Misc Stuff - abbr, acronym, sub, sup, kbd, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE. Use Crtl + C to stop.

Welcome to Hexo! This is your very first post. Check documentation to learn how to use.


2 / 2

\ No newline at end of file +归档：2013 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don't forget to redefine the style by yourself.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet.

List Types

Definition List (dl)

Definition List Title
This is a definition list division.

Ordered List (ol)

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List (ul)

  • List Item 1
  • List Item 2
  • List Item 3

Checkbox List (ul)

  • List Item 1 unchecked
  • List Item 2 checked
  • List Item 3 checked

Table

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Misc Stuff - abbr, acronym, sub, sup, kbd, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE. Use Crtl + C to stop.

Welcome to Hexo! This is your very first post. Check documentation to learn how to use.


2 / 2

\ No newline at end of file diff --git a/archives/2017/10/index.html b/archives/2017/10/index.html index fa9d93c48..abb4d2e76 100644 --- a/archives/2017/10/index.html +++ b/archives/2017/10/index.html @@ -1 +1 @@ -归档：2017/10 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。


开始使用
\ No newline at end of file +归档：2017/10 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。


开始使用
\ No newline at end of file diff --git a/archives/2017/index.html b/archives/2017/index.html index bfc06ab00..4f6023eeb 100644 --- a/archives/2017/index.html +++ b/archives/2017/index.html @@ -1 +1 @@ -归档：2017 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。


开始使用
\ No newline at end of file +归档：2017 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。


开始使用
\ No newline at end of file diff --git a/archives/2018/07/index.html b/archives/2018/07/index.html index 8f0d856bd..d2f47712a 100644 --- a/archives/2018/07/index.html +++ b/archives/2018/07/index.html @@ -1 +1 @@ -归档：2018/7 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

Markdown Style test

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.

\ No newline at end of file +归档：2018/7 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

Markdown Style test

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.

\ No newline at end of file diff --git a/archives/2018/index.html b/archives/2018/index.html index 33c1db62d..c5599c75e 100644 --- a/archives/2018/index.html +++ b/archives/2018/index.html @@ -1 +1 @@ -归档：2018 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

Markdown Style test

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.

\ No newline at end of file +归档：2018 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

Markdown Style test

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.

\ No newline at end of file diff --git a/archives/2019/07/index.html b/archives/2019/07/index.html index 0b14657cd..c9a27a7aa 100644 --- a/archives/2019/07/index.html +++ b/archives/2019/07/index.html @@ -1 +1 @@ -归档：2019/7 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org

\ No newline at end of file +归档：2019/7 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org

\ No newline at end of file diff --git a/archives/2019/index.html b/archives/2019/index.html index 5f6f82cb2..44ce73cee 100644 --- a/archives/2019/index.html +++ b/archives/2019/index.html @@ -1 +1 @@ -归档：2019 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org

\ No newline at end of file +归档：2019 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org

\ No newline at end of file diff --git a/archives/2020/02/index.html b/archives/2020/02/index.html index 22fdc7e9e..ee98895f8 100644 --- a/archives/2020/02/index.html +++ b/archives/2020/02/index.html @@ -1 +1 @@ -归档：2020/2 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

由于功能未完全兼容，如果想率先使用，尽量不要改主题配置文件。

  • 不能使用封面
  • mathjax
  • 有折叠框的页面，折叠框打开之后目录高亮位置不对应
  • 很多未知问题

感谢 @inkss 发布的这篇教程 《Hexo 博客部署 Pjax 局部刷新》
当所有兼容性问题解决或妥协之后，pjax 分支会合并入 master。

主题原名「Material X」,最初由「Material-Flow」改编，现已完全没有材质化设计的影子了。风格偏向简约风技术类博客，最大的特点是自由。现更名为「Volantis」，取自权力的游戏地名。

主题经过几年迭代，现已高度模块化和可定制化，功能相对完善，适合用作文档。原来的 文档主题 将不再维护和更新。

现在使用的文档页面源码是： volantis-docs

使用 GitHub Issue

由于 Valine 匿名评论不适合追踪和解决问题，因此决定暂时关闭评论区。
为了精准高效解决问题，请前往 GitHub Issue

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面，查看是否有解决方案。
  3. 访问在线示例，查看是否具有相同第问题。
    3.1. 如果在线示例表示正常，则说明自己配置有误，检查开发环境、主题配置是否正确。如果检查不出问题，提Issue询问。
    3.2. 如果在线示例也存在相同问题，则说明存在BUG，请提Issue反馈。
  4. 如果在线示例没有相关内容，下载示例博客源码，修改运行本地预览，进行第3步判断操作。

主版本号.子版本号.修订版本号

主题从2017年至今，已经经历了相当多的大版本迭代和数不尽的小版本更新，但是版本号的更新一直没有遵循规范。从下次更新开始，将遵循下述的规范：

  • 主版本号： 较大改动、框架调整或重构
  • 子版本号： 较小或局部的功能性更新
  • 修订版本号： 修复BUG或无关紧要的细节调整

心率管家 App（仅iOS端），专业版不定期限免，欢迎下载体验。

如果您看到的时候已经过了限免期，可以先下载免费版使用。为了吸引 app 推荐类网站的爬虫进行推荐，专业版的价格通常在0元到68元之间浮动变化的。

心率管家

专业版

 心率管家

免费版

\ No newline at end of file +归档：2020/2 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

由于功能未完全兼容，如果想率先使用，尽量不要改主题配置文件。

  • 不能使用封面
  • mathjax
  • 有折叠框的页面，折叠框打开之后目录高亮位置不对应
  • 很多未知问题

感谢 @inkss 发布的这篇教程 《Hexo 博客部署 Pjax 局部刷新》
当所有兼容性问题解决或妥协之后，pjax 分支会合并入 master。

主题原名「Material X」,最初由「Material-Flow」改编，现已完全没有材质化设计的影子了。风格偏向简约风技术类博客，最大的特点是自由。现更名为「Volantis」，取自权力的游戏地名。

主题经过几年迭代，现已高度模块化和可定制化，功能相对完善，适合用作文档。原来的 文档主题 将不再维护和更新。

现在使用的文档页面源码是： volantis-docs

使用 GitHub Issue

由于 Valine 匿名评论不适合追踪和解决问题，因此决定暂时关闭评论区。
为了精准高效解决问题，请前往 GitHub Issue

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面，查看是否有解决方案。
  3. 访问在线示例，查看是否具有相同第问题。
    3.1. 如果在线示例表示正常，则说明自己配置有误，检查开发环境、主题配置是否正确。如果检查不出问题，提Issue询问。
    3.2. 如果在线示例也存在相同问题，则说明存在BUG，请提Issue反馈。
  4. 如果在线示例没有相关内容，下载示例博客源码，修改运行本地预览，进行第3步判断操作。

主版本号.子版本号.修订版本号

主题从2017年至今，已经经历了相当多的大版本迭代和数不尽的小版本更新，但是版本号的更新一直没有遵循规范。从下次更新开始，将遵循下述的规范：

  • 主版本号： 较大改动、框架调整或重构
  • 子版本号： 较小或局部的功能性更新
  • 修订版本号： 修复BUG或无关紧要的细节调整

心率管家 App（仅iOS端），专业版不定期限免，欢迎下载体验。

如果您看到的时候已经过了限免期，可以先下载免费版使用。为了吸引 app 推荐类网站的爬虫进行推荐，专业版的价格通常在0元到68元之间浮动变化的。

心率管家

专业版

 心率管家

免费版

\ No newline at end of file diff --git a/archives/2020/03/index.html b/archives/2020/03/index.html index 9e732c485..6be51b178 100644 --- a/archives/2020/03/index.html +++ b/archives/2020/03/index.html @@ -1 +1 @@ -归档：2020/3 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

本次更新内容非常多，主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户，请您卸载掉旧的样式渲染插件，并安装新的：

  1. 卸载 less

    npm uninstall hexo-renderer-less --save

  2. 安装 stylus

    npm install hexo-renderer-stylus --save

Beta6
  • 导航栏N级菜单支持分割线和小标题，详见我的个人博客。

5、测试Tomcat是否配置成功：打开浏览器，输入在地址栏中输入： http://localhost:8080 的运行结果如下图即为即为配置成功！（因为Tomcat已经在运行再次打开会报错）

相关 Issue： #164

结论：存在这篇文章的情况下能够成功 deploy ，说明这不是主题的 BUG。

markdwon 解析插件为 hexo-renderer-marked 时此插件默认会自动识别 URL ，且原文链接前后没有空格，所以链接前后增加一个空格或者在根目录配置文件中设置 autolink: false 都可以避免 deploy 报错。
插件：hexo-renderer-marked

\ No newline at end of file +归档：2020/3 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

本次更新内容非常多，主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户，请您卸载掉旧的样式渲染插件，并安装新的：

  1. 卸载 less

    npm uninstall hexo-renderer-less --save

  2. 安装 stylus

    npm install hexo-renderer-stylus --save

Beta6
  • 导航栏N级菜单支持分割线和小标题，详见我的个人博客。

5、测试Tomcat是否配置成功：打开浏览器，输入在地址栏中输入： http://localhost:8080 的运行结果如下图即为即为配置成功！（因为Tomcat已经在运行再次打开会报错）

相关 Issue： #164

结论：存在这篇文章的情况下能够成功 deploy ，说明这不是主题的 BUG。

markdwon 解析插件为 hexo-renderer-marked 时此插件默认会自动识别 URL ，且原文链接前后没有空格，所以链接前后增加一个空格或者在根目录配置文件中设置 autolink: false 都可以避免 deploy 报错。
插件：hexo-renderer-marked

\ No newline at end of file diff --git a/archives/2020/04/index.html b/archives/2020/04/index.html index 9ab2683e4..66338c3ae 100644 --- a/archives/2020/04/index.html +++ b/archives/2020/04/index.html @@ -1 +1 @@ -归档：2020/4 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

由于主题目前仍处于青少年阶段，更新迭代速度比较快，所以不会保留旧版本的文档，如果需要查看旧版本的文档，请下载主题文档的源码，回退到旧版本，本地运行查看。

  • 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时，即最终会同时维护3个大版本的文档。
  • 当主题稳定后会提供英文文档。
\ No newline at end of file +归档：2020/4 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

由于主题目前仍处于青少年阶段，更新迭代速度比较快，所以不会保留旧版本的文档，如果需要查看旧版本的文档，请下载主题文档的源码，回退到旧版本，本地运行查看。

  • 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时，即最终会同时维护3个大版本的文档。
  • 当主题稳定后会提供英文文档。
\ No newline at end of file diff --git a/archives/2020/05/index.html b/archives/2020/05/index.html index ce2d07605..6a1d2395b 100644 --- a/archives/2020/05/index.html +++ b/archives/2020/05/index.html @@ -1 +1 @@ -归档：2020/5 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

本篇文章记录了我对 Volantis 主题做 Pjax 兼容的种种，大抵算是种记录吧~

\ No newline at end of file +归档：2020/5 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

本篇文章记录了我对 Volantis 主题做 Pjax 兼容的种种，大抵算是种记录吧~

\ No newline at end of file diff --git a/archives/2020/08/index.html b/archives/2020/08/index.html index a62663fcd..40982af54 100644 --- a/archives/2020/08/index.html +++ b/archives/2020/08/index.html @@ -1 +1 @@ -归档：2020/8 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

博客访问速度提升：最佳线路分流

静态博客使用 Issues API 发布动态、友链、书签

由于发布 issue 的成本远远低于发布一次博客更新（即便是使用了持续集成），可以用 issue 来简化每个独立博客都必备的友链系统，也可以通过 issue 来快速发布动态资讯，弥补静态博客必须更新静态文件才能更新内容的缺点。此功能已经集成到了主题中，使用非常方便。

很多网站首页都会有图片轮播效果，给网站的首页加上图片轮播的效果，可以很好的起到广告的作用也可以起到推荐优秀内容的作用。来吧，下面是给 Volantis 主题加上首页图片轮播的效果。

\ No newline at end of file +归档：2020/8 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

博客访问速度提升：最佳线路分流

静态博客使用 Issues API 发布动态、友链、书签

由于发布 issue 的成本远远低于发布一次博客更新（即便是使用了持续集成），可以用 issue 来简化每个独立博客都必备的友链系统，也可以通过 issue 来快速发布动态资讯，弥补静态博客必须更新静态文件才能更新内容的缺点。此功能已经集成到了主题中，使用非常方便。

很多网站首页都会有图片轮播效果，给网站的首页加上图片轮播的效果，可以很好的起到广告的作用也可以起到推荐优秀内容的作用。来吧，下面是给 Volantis 主题加上首页图片轮播的效果。

\ No newline at end of file diff --git a/archives/2020/09/index.html b/archives/2020/09/index.html index aebdd13f4..6c0dfb7af 100644 --- a/archives/2020/09/index.html +++ b/archives/2020/09/index.html @@ -1 +1 @@ -归档：2020/9 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

Hexo 标签函数 list_tags 用法详解

对官方文档标签文档的一个补充，以volantis主题标签调用为例，展示不同用法下的标签示例。

如何给博客添加弹窗通知

\ No newline at end of file +归档：2020/9 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

Hexo 标签函数 list_tags 用法详解

对官方文档标签文档的一个补充，以volantis主题标签调用为例，展示不同用法下的标签示例。

如何给博客添加弹窗通知

\ No newline at end of file diff --git a/archives/2020/10/index.html b/archives/2020/10/index.html index 194cace1c..a83195f29 100644 --- a/archives/2020/10/index.html +++ b/archives/2020/10/index.html @@ -1 +1 @@ -归档：2020/10 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

哔哔！换个姿势在静态博客上发短博文（volantis适配版）

要在静态博客上发送短博文，不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk，已经有短博文的那种体验了，而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。

\ No newline at end of file +归档：2020/10 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

哔哔！换个姿势在静态博客上发短博文（volantis适配版）

要在静态博客上发送短博文，不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk，已经有短博文的那种体验了，而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。

\ No newline at end of file diff --git a/archives/2020/12/index.html b/archives/2020/12/index.html index 98f088df4..36b16bad9 100644 --- a/archives/2020/12/index.html +++ b/archives/2020/12/index.html @@ -1 +1 @@ -归档：2020/12 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

\ No newline at end of file +归档：2020/12 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

\ No newline at end of file diff --git a/archives/2020/index.html b/archives/2020/index.html index d10f29baf..f4f2e03be 100644 --- a/archives/2020/index.html +++ b/archives/2020/index.html @@ -1 +1 @@ -归档：2020 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

通过CoolPush实时推送hexo评论到QQ

哔哔！换个姿势在静态博客上发短博文（volantis适配版）

要在静态博客上发送短博文，不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk，已经有短博文的那种体验了，而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。

Hexo 标签函数 list_tags 用法详解

对官方文档标签文档的一个补充，以volantis主题标签调用为例，展示不同用法下的标签示例。

如何给博客添加弹窗通知

博客访问速度提升：最佳线路分流

静态博客使用 Issues API 发布动态、友链、书签

由于发布 issue 的成本远远低于发布一次博客更新（即便是使用了持续集成），可以用 issue 来简化每个独立博客都必备的友链系统，也可以通过 issue 来快速发布动态资讯，弥补静态博客必须更新静态文件才能更新内容的缺点。此功能已经集成到了主题中，使用非常方便。

很多网站首页都会有图片轮播效果，给网站的首页加上图片轮播的效果，可以很好的起到广告的作用也可以起到推荐优秀内容的作用。来吧，下面是给 Volantis 主题加上首页图片轮播的效果。

本篇文章记录了我对 Volantis 主题做 Pjax 兼容的种种，大抵算是种记录吧~

由于主题目前仍处于青少年阶段，更新迭代速度比较快，所以不会保留旧版本的文档，如果需要查看旧版本的文档，请下载主题文档的源码，回退到旧版本，本地运行查看。

  • 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时，即最终会同时维护3个大版本的文档。
  • 当主题稳定后会提供英文文档。

本次更新内容非常多，主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户，请您卸载掉旧的样式渲染插件，并安装新的：

  1. 卸载 less

    npm uninstall hexo-renderer-less --save

  2. 安装 stylus

    npm install hexo-renderer-stylus --save

1 / 2

\ No newline at end of file +归档：2020 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

通过CoolPush实时推送hexo评论到QQ

哔哔！换个姿势在静态博客上发短博文（volantis适配版）

要在静态博客上发送短博文，不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk，已经有短博文的那种体验了，而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。

Hexo 标签函数 list_tags 用法详解

对官方文档标签文档的一个补充，以volantis主题标签调用为例，展示不同用法下的标签示例。

如何给博客添加弹窗通知

博客访问速度提升：最佳线路分流

静态博客使用 Issues API 发布动态、友链、书签

由于发布 issue 的成本远远低于发布一次博客更新（即便是使用了持续集成），可以用 issue 来简化每个独立博客都必备的友链系统，也可以通过 issue 来快速发布动态资讯，弥补静态博客必须更新静态文件才能更新内容的缺点。此功能已经集成到了主题中，使用非常方便。

很多网站首页都会有图片轮播效果，给网站的首页加上图片轮播的效果，可以很好的起到广告的作用也可以起到推荐优秀内容的作用。来吧，下面是给 Volantis 主题加上首页图片轮播的效果。

本篇文章记录了我对 Volantis 主题做 Pjax 兼容的种种，大抵算是种记录吧~

由于主题目前仍处于青少年阶段，更新迭代速度比较快，所以不会保留旧版本的文档，如果需要查看旧版本的文档，请下载主题文档的源码，回退到旧版本，本地运行查看。

  • 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时，即最终会同时维护3个大版本的文档。
  • 当主题稳定后会提供英文文档。

本次更新内容非常多，主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户，请您卸载掉旧的样式渲染插件，并安装新的：

  1. 卸载 less

    npm uninstall hexo-renderer-less --save

  2. 安装 stylus

    npm install hexo-renderer-stylus --save

1 / 2

\ No newline at end of file diff --git a/archives/2020/page/2/index.html b/archives/2020/page/2/index.html index 9518017cf..c66ad1409 100644 --- a/archives/2020/page/2/index.html +++ b/archives/2020/page/2/index.html @@ -1 +1 @@ -归档：2020 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

Beta6
  • 导航栏N级菜单支持分割线和小标题，详见我的个人博客。

5、测试Tomcat是否配置成功：打开浏览器，输入在地址栏中输入： http://localhost:8080 的运行结果如下图即为即为配置成功！（因为Tomcat已经在运行再次打开会报错）

相关 Issue： #164

结论：存在这篇文章的情况下能够成功 deploy ，说明这不是主题的 BUG。

markdwon 解析插件为 hexo-renderer-marked 时此插件默认会自动识别 URL ，且原文链接前后没有空格，所以链接前后增加一个空格或者在根目录配置文件中设置 autolink: false 都可以避免 deploy 报错。
插件：hexo-renderer-marked

由于功能未完全兼容，如果想率先使用，尽量不要改主题配置文件。

  • 不能使用封面
  • mathjax
  • 有折叠框的页面，折叠框打开之后目录高亮位置不对应
  • 很多未知问题

感谢 @inkss 发布的这篇教程 《Hexo 博客部署 Pjax 局部刷新》
当所有兼容性问题解决或妥协之后，pjax 分支会合并入 master。

主题原名「Material X」,最初由「Material-Flow」改编，现已完全没有材质化设计的影子了。风格偏向简约风技术类博客，最大的特点是自由。现更名为「Volantis」，取自权力的游戏地名。

主题经过几年迭代，现已高度模块化和可定制化，功能相对完善，适合用作文档。原来的 文档主题 将不再维护和更新。

现在使用的文档页面源码是： volantis-docs

使用 GitHub Issue

由于 Valine 匿名评论不适合追踪和解决问题，因此决定暂时关闭评论区。
为了精准高效解决问题，请前往 GitHub Issue

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面，查看是否有解决方案。
  3. 访问在线示例，查看是否具有相同第问题。
    3.1. 如果在线示例表示正常，则说明自己配置有误，检查开发环境、主题配置是否正确。如果检查不出问题，提Issue询问。
    3.2. 如果在线示例也存在相同问题，则说明存在BUG，请提Issue反馈。
  4. 如果在线示例没有相关内容，下载示例博客源码，修改运行本地预览，进行第3步判断操作。

主版本号.子版本号.修订版本号

主题从2017年至今，已经经历了相当多的大版本迭代和数不尽的小版本更新，但是版本号的更新一直没有遵循规范。从下次更新开始，将遵循下述的规范：

  • 主版本号： 较大改动、框架调整或重构
  • 子版本号： 较小或局部的功能性更新
  • 修订版本号： 修复BUG或无关紧要的细节调整

心率管家 App（仅iOS端），专业版不定期限免，欢迎下载体验。

如果您看到的时候已经过了限免期，可以先下载免费版使用。为了吸引 app 推荐类网站的爬虫进行推荐，专业版的价格通常在0元到68元之间浮动变化的。

心率管家

专业版

 心率管家

免费版


2 / 2

\ No newline at end of file +归档：2020 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

Beta6
  • 导航栏N级菜单支持分割线和小标题，详见我的个人博客。

5、测试Tomcat是否配置成功：打开浏览器，输入在地址栏中输入： http://localhost:8080 的运行结果如下图即为即为配置成功！（因为Tomcat已经在运行再次打开会报错）

相关 Issue： #164

结论：存在这篇文章的情况下能够成功 deploy ，说明这不是主题的 BUG。

markdwon 解析插件为 hexo-renderer-marked 时此插件默认会自动识别 URL ，且原文链接前后没有空格，所以链接前后增加一个空格或者在根目录配置文件中设置 autolink: false 都可以避免 deploy 报错。
插件：hexo-renderer-marked

由于功能未完全兼容，如果想率先使用，尽量不要改主题配置文件。

  • 不能使用封面
  • mathjax
  • 有折叠框的页面，折叠框打开之后目录高亮位置不对应
  • 很多未知问题

感谢 @inkss 发布的这篇教程 《Hexo 博客部署 Pjax 局部刷新》
当所有兼容性问题解决或妥协之后，pjax 分支会合并入 master。

主题原名「Material X」,最初由「Material-Flow」改编，现已完全没有材质化设计的影子了。风格偏向简约风技术类博客，最大的特点是自由。现更名为「Volantis」，取自权力的游戏地名。

主题经过几年迭代，现已高度模块化和可定制化，功能相对完善，适合用作文档。原来的 文档主题 将不再维护和更新。

现在使用的文档页面源码是： volantis-docs

使用 GitHub Issue

由于 Valine 匿名评论不适合追踪和解决问题，因此决定暂时关闭评论区。
为了精准高效解决问题，请前往 GitHub Issue

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面，查看是否有解决方案。
  3. 访问在线示例，查看是否具有相同第问题。
    3.1. 如果在线示例表示正常，则说明自己配置有误，检查开发环境、主题配置是否正确。如果检查不出问题，提Issue询问。
    3.2. 如果在线示例也存在相同问题，则说明存在BUG，请提Issue反馈。
  4. 如果在线示例没有相关内容，下载示例博客源码，修改运行本地预览，进行第3步判断操作。

主版本号.子版本号.修订版本号

主题从2017年至今，已经经历了相当多的大版本迭代和数不尽的小版本更新，但是版本号的更新一直没有遵循规范。从下次更新开始，将遵循下述的规范：

  • 主版本号： 较大改动、框架调整或重构
  • 子版本号： 较小或局部的功能性更新
  • 修订版本号： 修复BUG或无关紧要的细节调整

心率管家 App（仅iOS端），专业版不定期限免，欢迎下载体验。

如果您看到的时候已经过了限免期，可以先下载免费版使用。为了吸引 app 推荐类网站的爬虫进行推荐，专业版的价格通常在0元到68元之间浮动变化的。

心率管家

专业版

 心率管家

免费版


2 / 2

\ No newline at end of file diff --git a/archives/2021/03/index.html b/archives/2021/03/index.html index 5f67719e7..573e147ae 100644 --- a/archives/2021/03/index.html +++ b/archives/2021/03/index.html @@ -1 +1 @@ -归档：2021/3 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

在使用主题内的highlightjs的时候，你是否也遇到了它不换行、没有行号等问题？点进来看看吧。

这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的，由我将新的轮播模板迁移至主题内，由inkss大佬完善。在这感谢两位大佬，如果你也需要轮播插件，就进来看看吧。

我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。

\ No newline at end of file +归档：2021/3 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

在使用主题内的highlightjs的时候，你是否也遇到了它不换行、没有行号等问题？点进来看看吧。

这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的，由我将新的轮播模板迁移至主题内，由inkss大佬完善。在这感谢两位大佬，如果你也需要轮播插件，就进来看看吧。

我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。

\ No newline at end of file diff --git a/archives/2021/04/index.html b/archives/2021/04/index.html index b9d7323d8..fc1e01334 100644 --- a/archives/2021/04/index.html +++ b/archives/2021/04/index.html @@ -1 +1 @@ -归档：2021/4 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

关于更换 Markdown 渲染器以正确渲染 MathJax 公式的一些考据

经过折腾，目前相册功能可用了，就是还不支持分类和懒加载，等后续完善吧。

在文章中插入m3u8视频的时候，由于Chrome等浏览器原生播放不了这种格式，所以需要添加hls.js等让其支持播放，如果你也遇到了这样的问题就来看看吧。

\ No newline at end of file +归档：2021/4 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

关于更换 Markdown 渲染器以正确渲染 MathJax 公式的一些考据

经过折腾，目前相册功能可用了，就是还不支持分类和懒加载，等后续完善吧。

在文章中插入m3u8视频的时候，由于Chrome等浏览器原生播放不了这种格式，所以需要添加hls.js等让其支持播放，如果你也遇到了这样的问题就来看看吧。

\ No newline at end of file diff --git a/archives/2021/08/index.html b/archives/2021/08/index.html index c5081cd4d..a3f7f1330 100644 --- a/archives/2021/08/index.html +++ b/archives/2021/08/index.html @@ -1 +1 @@ -归档：2021/8 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

为暗黑模式的切换增加动画

Volantis 主题个性化修改合集

记录了与 Volantis 主题相关的修改合集。

给博客添加捐赠小部件—sponsor-page

sponsor-page 是一个开源的捐赠按钮样式，可以用于美化我们的博客。

\ No newline at end of file +归档：2021/8 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

为暗黑模式的切换增加动画

Volantis 主题个性化修改合集

记录了与 Volantis 主题相关的修改合集。

给博客添加捐赠小部件—sponsor-page

sponsor-page 是一个开源的捐赠按钮样式，可以用于美化我们的博客。

\ No newline at end of file diff --git a/archives/2021/09/index.html b/archives/2021/09/index.html index cb5f0484f..ebe9dce76 100644 --- a/archives/2021/09/index.html +++ b/archives/2021/09/index.html @@ -1 +1 @@ -归档：2021/9 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

统计一下目前使用的自定义字体及调用。

Volantis 主题可直接参考使用。

\ No newline at end of file +归档：2021/9 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

统计一下目前使用的自定义字体及调用。

Volantis 主题可直接参考使用。

\ No newline at end of file diff --git a/archives/2021/11/index.html b/archives/2021/11/index.html index 8d3f66445..e33c56e7e 100644 --- a/archives/2021/11/index.html +++ b/archives/2021/11/index.html @@ -1 +1 @@ -归档：2021/11 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

优化背景图较多时的网页加载速度

\ No newline at end of file +归档：2021/11 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

优化背景图较多时的网页加载速度

\ No newline at end of file diff --git a/archives/2021/index.html b/archives/2021/index.html index 0a9d703c0..7ea318d77 100644 --- a/archives/2021/index.html +++ b/archives/2021/index.html @@ -1 +1 @@ -归档：2021 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

优化背景图较多时的网页加载速度

统计一下目前使用的自定义字体及调用。

Volantis 主题可直接参考使用。

为暗黑模式的切换增加动画

Volantis 主题个性化修改合集

记录了与 Volantis 主题相关的修改合集。

给博客添加捐赠小部件—sponsor-page

sponsor-page 是一个开源的捐赠按钮样式，可以用于美化我们的博客。

关于更换 Markdown 渲染器以正确渲染 MathJax 公式的一些考据

经过折腾，目前相册功能可用了，就是还不支持分类和懒加载，等后续完善吧。

在文章中插入m3u8视频的时候，由于Chrome等浏览器原生播放不了这种格式，所以需要添加hls.js等让其支持播放，如果你也遇到了这样的问题就来看看吧。

在使用主题内的highlightjs的时候，你是否也遇到了它不换行、没有行号等问题？点进来看看吧。

这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的，由我将新的轮播模板迁移至主题内，由inkss大佬完善。在这感谢两位大佬，如果你也需要轮播插件，就进来看看吧。


1 / 2

\ No newline at end of file +归档：2021 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

优化背景图较多时的网页加载速度

统计一下目前使用的自定义字体及调用。

Volantis 主题可直接参考使用。

为暗黑模式的切换增加动画

Volantis 主题个性化修改合集

记录了与 Volantis 主题相关的修改合集。

给博客添加捐赠小部件—sponsor-page

sponsor-page 是一个开源的捐赠按钮样式，可以用于美化我们的博客。

关于更换 Markdown 渲染器以正确渲染 MathJax 公式的一些考据

经过折腾，目前相册功能可用了，就是还不支持分类和懒加载，等后续完善吧。

在文章中插入m3u8视频的时候，由于Chrome等浏览器原生播放不了这种格式，所以需要添加hls.js等让其支持播放，如果你也遇到了这样的问题就来看看吧。

在使用主题内的highlightjs的时候，你是否也遇到了它不换行、没有行号等问题？点进来看看吧。

这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的，由我将新的轮播模板迁移至主题内，由inkss大佬完善。在这感谢两位大佬，如果你也需要轮播插件，就进来看看吧。


1 / 2

\ No newline at end of file diff --git a/archives/2021/page/2/index.html b/archives/2021/page/2/index.html index 2ff366c6e..67f96f450 100644 --- a/archives/2021/page/2/index.html +++ b/archives/2021/page/2/index.html @@ -1 +1 @@ -归档：2021 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。


2 / 2

\ No newline at end of file +归档：2021 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。


2 / 2

\ No newline at end of file diff --git a/archives/2022/05/index.html b/archives/2022/05/index.html index eb146dc8d..e5c91e2ff 100644 --- a/archives/2022/05/index.html +++ b/archives/2022/05/index.html @@ -1 +1 @@ -归档：2022/5 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

这不是Node.js包！

这是个javascript的小工具？

↑↑↑和上次一样的开头↑↑↑

\ No newline at end of file +归档：2022/5 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

这不是Node.js包！

这是个javascript的小工具？

↑↑↑和上次一样的开头↑↑↑

\ No newline at end of file diff --git a/archives/2022/08/index.html b/archives/2022/08/index.html index ed34543c7..0ce61023d 100644 --- a/archives/2022/08/index.html +++ b/archives/2022/08/index.html @@ -1 +1 @@ -归档：2022/8 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

为暗黑模式的切换增加动画

\ No newline at end of file +归档：2022/8 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

为暗黑模式的切换增加动画

\ No newline at end of file diff --git a/archives/2022/12/index.html b/archives/2022/12/index.html index 5f49aa057..84527554e 100644 --- a/archives/2022/12/index.html +++ b/archives/2022/12/index.html @@ -1 +1 @@ -归档：2022/12 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

添加Gitee动态友链

本篇文章记录了我对 Volantis 主题一路磕磕碰碰的个性化配置，希望为接下来要去配置的新手避个坑

\ No newline at end of file +归档：2022/12 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

添加Gitee动态友链

本篇文章记录了我对 Volantis 主题一路磕磕碰碰的个性化配置，希望为接下来要去配置的新手避个坑

\ No newline at end of file diff --git a/archives/2022/index.html b/archives/2022/index.html index a97f841cb..39e0ce51a 100644 --- a/archives/2022/index.html +++ b/archives/2022/index.html @@ -1 +1 @@ -归档：2022 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

添加Gitee动态友链

本篇文章记录了我对 Volantis 主题一路磕磕碰碰的个性化配置，希望为接下来要去配置的新手避个坑

为暗黑模式的切换增加动画

这不是Node.js包！

这是个javascript的小工具？

↑↑↑和上次一样的开头↑↑↑

\ No newline at end of file +归档：2022 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

添加Gitee动态友链

本篇文章记录了我对 Volantis 主题一路磕磕碰碰的个性化配置，希望为接下来要去配置的新手避个坑

为暗黑模式的切换增加动画

这不是Node.js包！

这是个javascript的小工具？

↑↑↑和上次一样的开头↑↑↑

\ No newline at end of file diff --git a/archives/2023/01/index.html b/archives/2023/01/index.html index 0021da914..d0eeb42cb 100644 --- a/archives/2023/01/index.html +++ b/archives/2023/01/index.html @@ -1 +1 @@ -归档：2023/1 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题

新的代码仅向metingjs增加了本地音源功能,原有功能保持不变

暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等

部分内容非Volantis主题也适用

\ No newline at end of file +归档：2023/1 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题

新的代码仅向metingjs增加了本地音源功能,原有功能保持不变

暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等

部分内容非Volantis主题也适用

\ No newline at end of file diff --git a/archives/2023/09/index.html b/archives/2023/09/index.html index ae3f15f1b..5f4aa502f 100644 --- a/archives/2023/09/index.html +++ b/archives/2023/09/index.html @@ -1 +1 @@ -归档：2023/9 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

为hexo博客添加自适应图片占位图（配合lazyload）

我们要得到的结果如封面所示

由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。

\ No newline at end of file +归档：2023/9 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

为hexo博客添加自适应图片占位图（配合lazyload）

我们要得到的结果如封面所示

由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。

\ No newline at end of file diff --git a/archives/2023/10/index.html b/archives/2023/10/index.html index 15c37becb..37b8a7d38 100644 --- a/archives/2023/10/index.html +++ b/archives/2023/10/index.html @@ -1 +1 @@ -归档：2023/10 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

由于cdn.jsdelivr.net在国内不太稳定，替代的jsd.cdn.zzko.cn稳定性稍好，但是也不是100%稳定，因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求，但是我的文件（图片、js等）储存在GitHub图床，而freecdn-js本身需要被加速的文件的hash，因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的，所以写了一个正则脚本来提取cdn的链接。

\ No newline at end of file +归档：2023/10 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

由于cdn.jsdelivr.net在国内不太稳定，替代的jsd.cdn.zzko.cn稳定性稍好，但是也不是100%稳定，因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求，但是我的文件（图片、js等）储存在GitHub图床，而freecdn-js本身需要被加速的文件的hash，因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的，所以写了一个正则脚本来提取cdn的链接。

\ No newline at end of file diff --git a/archives/2023/index.html b/archives/2023/index.html index f75c1a9b3..6e9cf3c27 100644 --- a/archives/2023/index.html +++ b/archives/2023/index.html @@ -1 +1 @@ -归档：2023 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

由于cdn.jsdelivr.net在国内不太稳定，替代的jsd.cdn.zzko.cn稳定性稍好，但是也不是100%稳定，因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求，但是我的文件（图片、js等）储存在GitHub图床，而freecdn-js本身需要被加速的文件的hash，因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的，所以写了一个正则脚本来提取cdn的链接。

为hexo博客添加自适应图片占位图（配合lazyload）

我们要得到的结果如封面所示

由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。

通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题

新的代码仅向metingjs增加了本地音源功能,原有功能保持不变

暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等

部分内容非Volantis主题也适用

\ No newline at end of file +归档：2023 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

由于cdn.jsdelivr.net在国内不太稳定，替代的jsd.cdn.zzko.cn稳定性稍好，但是也不是100%稳定，因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求，但是我的文件（图片、js等）储存在GitHub图床，而freecdn-js本身需要被加速的文件的hash，因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的，所以写了一个正则脚本来提取cdn的链接。

为hexo博客添加自适应图片占位图（配合lazyload）

我们要得到的结果如封面所示

由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。

通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题

新的代码仅向metingjs增加了本地音源功能,原有功能保持不变

暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等

部分内容非Volantis主题也适用

\ No newline at end of file diff --git a/archives/index.html b/archives/index.html index 9f15a12cc..22b75a98a 100644 --- a/archives/index.html +++ b/archives/index.html @@ -1 +1 @@ -归档 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

2023

使用freecdn-js提高hexo博客的cdn稳定性
为hexo博客添加自适应图片占位图（配合lazyload）
Aplayer采用本地音源
Volantis魔改教程

2022

volantis使用php实现Gitee友链
配置Volantis 主题遇到的问题和解决
volantis新版暗黑模式动画
好看的网盘链接

2021

Volantis 多背景图的优化方案
网站自定义字体及推荐
Volantis主题自定义-暗黑模式动画
Volantis 主题个性化修改合集
给博客添加捐赠小部件—sponsor-page
使用 pandoc 正确渲染多行 MathJax 公式
为volantis添加瀑布流相册
为volantis添加hls.js以在Chrome上播放m3u8视频
volantis主题修改代码高亮样式
为volantis主题添加图片轮播和热门文章
使用volantis更优雅地展示截图/录屏

2020

通过CoolPush实时推送hexo评论到QQ
哔哔！换个姿势在静态博客上发短博文（volantis适配版）
Hexo 标签函数 list_tags 用法详解
如何给博客添加弹窗通知
博客访问速度提升：最佳线路分流
静态博客使用 Issues API 发布动态、友链、书签
给 Hexo Volantis 主题添加图片轮播功能
Volantis 主题部署 Pjax
关于主题与文档的更新  
新版本「2.0」正式版发布
新版本「2.0」测试版发布
测试「文章内链接作文本的话无法生成静态文件」
新增 pjax 开发分支
主题更名为「Volantis」
主题文档网页更新并开源
已关闭评论区
版本命名规范化
心率测量工具限免活动  

2019

Code Highlight Style test  

2018

Markdown Style test  

2017

Volantis for Hexo

2013

Images
2013-12-25
Excerpts
Gallery Post
Tag Plugins
www.google.com
日本語テスト
中文測試
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
Link Post
Elements
Hello World
\ No newline at end of file +归档 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

2023

使用freecdn-js提高hexo博客的cdn稳定性
为hexo博客添加自适应图片占位图（配合lazyload）
Aplayer采用本地音源
Volantis魔改教程

2022

volantis使用php实现Gitee友链
配置Volantis 主题遇到的问题和解决
volantis新版暗黑模式动画
好看的网盘链接

2021

Volantis 多背景图的优化方案
网站自定义字体及推荐
Volantis主题自定义-暗黑模式动画
Volantis 主题个性化修改合集
给博客添加捐赠小部件—sponsor-page
使用 pandoc 正确渲染多行 MathJax 公式
为volantis添加瀑布流相册
为volantis添加hls.js以在Chrome上播放m3u8视频
volantis主题修改代码高亮样式
为volantis主题添加图片轮播和热门文章
使用volantis更优雅地展示截图/录屏

2020

通过CoolPush实时推送hexo评论到QQ
哔哔！换个姿势在静态博客上发短博文（volantis适配版）
Hexo 标签函数 list_tags 用法详解
如何给博客添加弹窗通知
博客访问速度提升：最佳线路分流
静态博客使用 Issues API 发布动态、友链、书签
给 Hexo Volantis 主题添加图片轮播功能
Volantis 主题部署 Pjax
关于主题与文档的更新  
新版本「2.0」正式版发布
新版本「2.0」测试版发布
测试「文章内链接作文本的话无法生成静态文件」
新增 pjax 开发分支
主题更名为「Volantis」
主题文档网页更新并开源
已关闭评论区
版本命名规范化
心率测量工具限免活动  

2019

Code Highlight Style test  

2018

Markdown Style test  

2017

Volantis for Hexo

2013

Images
2013-12-25
Excerpts
Gallery Post
Tag Plugins
www.google.com
日本語テスト
中文測試
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
Link Post
Elements
Hello World
\ No newline at end of file diff --git a/archives/page/2/index.html b/archives/page/2/index.html index 432b7b5b9..1dc0517e9 100644 --- a/archives/page/2/index.html +++ b/archives/page/2/index.html @@ -1 +1 @@ -归档 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

2023

使用freecdn-js提高hexo博客的cdn稳定性
为hexo博客添加自适应图片占位图（配合lazyload）
Aplayer采用本地音源
Volantis魔改教程

2022

volantis使用php实现Gitee友链
配置Volantis 主题遇到的问题和解决
volantis新版暗黑模式动画
好看的网盘链接

2021

Volantis 多背景图的优化方案
网站自定义字体及推荐
Volantis主题自定义-暗黑模式动画
Volantis 主题个性化修改合集
给博客添加捐赠小部件—sponsor-page
使用 pandoc 正确渲染多行 MathJax 公式
为volantis添加瀑布流相册
为volantis添加hls.js以在Chrome上播放m3u8视频
volantis主题修改代码高亮样式
为volantis主题添加图片轮播和热门文章
使用volantis更优雅地展示截图/录屏

2020

通过CoolPush实时推送hexo评论到QQ
哔哔！换个姿势在静态博客上发短博文（volantis适配版）
Hexo 标签函数 list_tags 用法详解
如何给博客添加弹窗通知
博客访问速度提升：最佳线路分流
静态博客使用 Issues API 发布动态、友链、书签
给 Hexo Volantis 主题添加图片轮播功能
Volantis 主题部署 Pjax
关于主题与文档的更新  
新版本「2.0」正式版发布
新版本「2.0」测试版发布
测试「文章内链接作文本的话无法生成静态文件」
新增 pjax 开发分支
主题更名为「Volantis」
主题文档网页更新并开源
已关闭评论区
版本命名规范化
心率测量工具限免活动  

2019

Code Highlight Style test  

2018

Markdown Style test  

2017

Volantis for Hexo

2013

Images
2013-12-25
Excerpts
Gallery Post
Tag Plugins
www.google.com
日本語テスト
中文測試
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
Link Post
Elements
Hello World
\ No newline at end of file +归档 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

2023

使用freecdn-js提高hexo博客的cdn稳定性
为hexo博客添加自适应图片占位图（配合lazyload）
Aplayer采用本地音源
Volantis魔改教程

2022

volantis使用php实现Gitee友链
配置Volantis 主题遇到的问题和解决
volantis新版暗黑模式动画
好看的网盘链接

2021

Volantis 多背景图的优化方案
网站自定义字体及推荐
Volantis主题自定义-暗黑模式动画
Volantis 主题个性化修改合集
给博客添加捐赠小部件—sponsor-page
使用 pandoc 正确渲染多行 MathJax 公式
为volantis添加瀑布流相册
为volantis添加hls.js以在Chrome上播放m3u8视频
volantis主题修改代码高亮样式
为volantis主题添加图片轮播和热门文章
使用volantis更优雅地展示截图/录屏

2020

通过CoolPush实时推送hexo评论到QQ
哔哔！换个姿势在静态博客上发短博文（volantis适配版）
Hexo 标签函数 list_tags 用法详解
如何给博客添加弹窗通知
博客访问速度提升：最佳线路分流
静态博客使用 Issues API 发布动态、友链、书签
给 Hexo Volantis 主题添加图片轮播功能
Volantis 主题部署 Pjax
关于主题与文档的更新  
新版本「2.0」正式版发布
新版本「2.0」测试版发布
测试「文章内链接作文本的话无法生成静态文件」
新增 pjax 开发分支
主题更名为「Volantis」
主题文档网页更新并开源
已关闭评论区
版本命名规范化
心率测量工具限免活动  

2019

Code Highlight Style test  

2018

Markdown Style test  

2017

Volantis for Hexo

2013

Images
2013-12-25
Excerpts
Gallery Post
Tag Plugins
www.google.com
日本語テスト
中文測試
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
Link Post
Elements
Hello World
\ No newline at end of file diff --git a/archives/page/3/index.html b/archives/page/3/index.html index 888c29d95..8228f9787 100644 --- a/archives/page/3/index.html +++ b/archives/page/3/index.html @@ -1 +1 @@ -归档 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

2023

使用freecdn-js提高hexo博客的cdn稳定性
为hexo博客添加自适应图片占位图（配合lazyload）
Aplayer采用本地音源
Volantis魔改教程

2022

volantis使用php实现Gitee友链
配置Volantis 主题遇到的问题和解决
volantis新版暗黑模式动画
好看的网盘链接

2021

Volantis 多背景图的优化方案
网站自定义字体及推荐
Volantis主题自定义-暗黑模式动画
Volantis 主题个性化修改合集
给博客添加捐赠小部件—sponsor-page
使用 pandoc 正确渲染多行 MathJax 公式
为volantis添加瀑布流相册
为volantis添加hls.js以在Chrome上播放m3u8视频
volantis主题修改代码高亮样式
为volantis主题添加图片轮播和热门文章
使用volantis更优雅地展示截图/录屏

2020

通过CoolPush实时推送hexo评论到QQ
哔哔！换个姿势在静态博客上发短博文（volantis适配版）
Hexo 标签函数 list_tags 用法详解
如何给博客添加弹窗通知
博客访问速度提升：最佳线路分流
静态博客使用 Issues API 发布动态、友链、书签
给 Hexo Volantis 主题添加图片轮播功能
Volantis 主题部署 Pjax
关于主题与文档的更新  
新版本「2.0」正式版发布
新版本「2.0」测试版发布
测试「文章内链接作文本的话无法生成静态文件」
新增 pjax 开发分支
主题更名为「Volantis」
主题文档网页更新并开源
已关闭评论区
版本命名规范化
心率测量工具限免活动  

2019

Code Highlight Style test  

2018

Markdown Style test  

2017

Volantis for Hexo

2013

Images
2013-12-25
Excerpts
Gallery Post
Tag Plugins
www.google.com
日本語テスト
中文測試
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
Link Post
Elements
Hello World
\ No newline at end of file +归档 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

2023

使用freecdn-js提高hexo博客的cdn稳定性
为hexo博客添加自适应图片占位图（配合lazyload）
Aplayer采用本地音源
Volantis魔改教程

2022

volantis使用php实现Gitee友链
配置Volantis 主题遇到的问题和解决
volantis新版暗黑模式动画
好看的网盘链接

2021

Volantis 多背景图的优化方案
网站自定义字体及推荐
Volantis主题自定义-暗黑模式动画
Volantis 主题个性化修改合集
给博客添加捐赠小部件—sponsor-page
使用 pandoc 正确渲染多行 MathJax 公式
为volantis添加瀑布流相册
为volantis添加hls.js以在Chrome上播放m3u8视频
volantis主题修改代码高亮样式
为volantis主题添加图片轮播和热门文章
使用volantis更优雅地展示截图/录屏

2020

通过CoolPush实时推送hexo评论到QQ
哔哔！换个姿势在静态博客上发短博文（volantis适配版）
Hexo 标签函数 list_tags 用法详解
如何给博客添加弹窗通知
博客访问速度提升：最佳线路分流
静态博客使用 Issues API 发布动态、友链、书签
给 Hexo Volantis 主题添加图片轮播功能
Volantis 主题部署 Pjax
关于主题与文档的更新  
新版本「2.0」正式版发布
新版本「2.0」测试版发布
测试「文章内链接作文本的话无法生成静态文件」
新增 pjax 开发分支
主题更名为「Volantis」
主题文档网页更新并开源
已关闭评论区
版本命名规范化
心率测量工具限免活动  

2019

Code Highlight Style test  

2018

Markdown Style test  

2017

Volantis for Hexo

2013

Images
2013-12-25
Excerpts
Gallery Post
Tag Plugins
www.google.com
日本語テスト
中文測試
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
Link Post
Elements
Hello World
\ No newline at end of file diff --git a/archives/page/4/index.html b/archives/page/4/index.html index 0f18ab6d3..1107c8a84 100644 --- a/archives/page/4/index.html +++ b/archives/page/4/index.html @@ -1 +1 @@ -归档 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

2023

使用freecdn-js提高hexo博客的cdn稳定性
为hexo博客添加自适应图片占位图（配合lazyload）
Aplayer采用本地音源
Volantis魔改教程

2022

volantis使用php实现Gitee友链
配置Volantis 主题遇到的问题和解决
volantis新版暗黑模式动画
好看的网盘链接

2021

Volantis 多背景图的优化方案
网站自定义字体及推荐
Volantis主题自定义-暗黑模式动画
Volantis 主题个性化修改合集
给博客添加捐赠小部件—sponsor-page
使用 pandoc 正确渲染多行 MathJax 公式
为volantis添加瀑布流相册
为volantis添加hls.js以在Chrome上播放m3u8视频
volantis主题修改代码高亮样式
为volantis主题添加图片轮播和热门文章
使用volantis更优雅地展示截图/录屏

2020

通过CoolPush实时推送hexo评论到QQ
哔哔！换个姿势在静态博客上发短博文（volantis适配版）
Hexo 标签函数 list_tags 用法详解
如何给博客添加弹窗通知
博客访问速度提升：最佳线路分流
静态博客使用 Issues API 发布动态、友链、书签
给 Hexo Volantis 主题添加图片轮播功能
Volantis 主题部署 Pjax
关于主题与文档的更新  
新版本「2.0」正式版发布
新版本「2.0」测试版发布
测试「文章内链接作文本的话无法生成静态文件」
新增 pjax 开发分支
主题更名为「Volantis」
主题文档网页更新并开源
已关闭评论区
版本命名规范化
心率测量工具限免活动  

2019

Code Highlight Style test  

2018

Markdown Style test  

2017

Volantis for Hexo

2013

Images
2013-12-25
Excerpts
Gallery Post
Tag Plugins
www.google.com
日本語テスト
中文測試
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
Link Post
Elements
Hello World
\ No newline at end of file +归档 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

2023

使用freecdn-js提高hexo博客的cdn稳定性
为hexo博客添加自适应图片占位图（配合lazyload）
Aplayer采用本地音源
Volantis魔改教程

2022

volantis使用php实现Gitee友链
配置Volantis 主题遇到的问题和解决
volantis新版暗黑模式动画
好看的网盘链接

2021

Volantis 多背景图的优化方案
网站自定义字体及推荐
Volantis主题自定义-暗黑模式动画
Volantis 主题个性化修改合集
给博客添加捐赠小部件—sponsor-page
使用 pandoc 正确渲染多行 MathJax 公式
为volantis添加瀑布流相册
为volantis添加hls.js以在Chrome上播放m3u8视频
volantis主题修改代码高亮样式
为volantis主题添加图片轮播和热门文章
使用volantis更优雅地展示截图/录屏

2020

通过CoolPush实时推送hexo评论到QQ
哔哔！换个姿势在静态博客上发短博文（volantis适配版）
Hexo 标签函数 list_tags 用法详解
如何给博客添加弹窗通知
博客访问速度提升：最佳线路分流
静态博客使用 Issues API 发布动态、友链、书签
给 Hexo Volantis 主题添加图片轮播功能
Volantis 主题部署 Pjax
关于主题与文档的更新  
新版本「2.0」正式版发布
新版本「2.0」测试版发布
测试「文章内链接作文本的话无法生成静态文件」
新增 pjax 开发分支
主题更名为「Volantis」
主题文档网页更新并开源
已关闭评论区
版本命名规范化
心率测量工具限免活动  

2019

Code Highlight Style test  

2018

Markdown Style test  

2017

Volantis for Hexo

2013

Images
2013-12-25
Excerpts
Gallery Post
Tag Plugins
www.google.com
日本語テスト
中文測試
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
Link Post
Elements
Hello World
\ No newline at end of file diff --git a/archives/page/5/index.html b/archives/page/5/index.html index 215e2f0a3..423b09cd7 100644 --- a/archives/page/5/index.html +++ b/archives/page/5/index.html @@ -1 +1 @@ -归档 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

2023

使用freecdn-js提高hexo博客的cdn稳定性
为hexo博客添加自适应图片占位图（配合lazyload）
Aplayer采用本地音源
Volantis魔改教程

2022

volantis使用php实现Gitee友链
配置Volantis 主题遇到的问题和解决
volantis新版暗黑模式动画
好看的网盘链接

2021

Volantis 多背景图的优化方案
网站自定义字体及推荐
Volantis主题自定义-暗黑模式动画
Volantis 主题个性化修改合集
给博客添加捐赠小部件—sponsor-page
使用 pandoc 正确渲染多行 MathJax 公式
为volantis添加瀑布流相册
为volantis添加hls.js以在Chrome上播放m3u8视频
volantis主题修改代码高亮样式
为volantis主题添加图片轮播和热门文章
使用volantis更优雅地展示截图/录屏

2020

通过CoolPush实时推送hexo评论到QQ
哔哔！换个姿势在静态博客上发短博文（volantis适配版）
Hexo 标签函数 list_tags 用法详解
如何给博客添加弹窗通知
博客访问速度提升：最佳线路分流
静态博客使用 Issues API 发布动态、友链、书签
给 Hexo Volantis 主题添加图片轮播功能
Volantis 主题部署 Pjax
关于主题与文档的更新  
新版本「2.0」正式版发布
新版本「2.0」测试版发布
测试「文章内链接作文本的话无法生成静态文件」
新增 pjax 开发分支
主题更名为「Volantis」
主题文档网页更新并开源
已关闭评论区
版本命名规范化
心率测量工具限免活动  

2019

Code Highlight Style test  

2018

Markdown Style test  

2017

Volantis for Hexo

2013

Images
2013-12-25
Excerpts
Gallery Post
Tag Plugins
www.google.com
日本語テスト
中文測試
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
Link Post
Elements
Hello World
\ No newline at end of file +归档 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

2023

使用freecdn-js提高hexo博客的cdn稳定性
为hexo博客添加自适应图片占位图（配合lazyload）
Aplayer采用本地音源
Volantis魔改教程

2022

volantis使用php实现Gitee友链
配置Volantis 主题遇到的问题和解决
volantis新版暗黑模式动画
好看的网盘链接

2021

Volantis 多背景图的优化方案
网站自定义字体及推荐
Volantis主题自定义-暗黑模式动画
Volantis 主题个性化修改合集
给博客添加捐赠小部件—sponsor-page
使用 pandoc 正确渲染多行 MathJax 公式
为volantis添加瀑布流相册
为volantis添加hls.js以在Chrome上播放m3u8视频
volantis主题修改代码高亮样式
为volantis主题添加图片轮播和热门文章
使用volantis更优雅地展示截图/录屏

2020

通过CoolPush实时推送hexo评论到QQ
哔哔！换个姿势在静态博客上发短博文（volantis适配版）
Hexo 标签函数 list_tags 用法详解
如何给博客添加弹窗通知
博客访问速度提升：最佳线路分流
静态博客使用 Issues API 发布动态、友链、书签
给 Hexo Volantis 主题添加图片轮播功能
Volantis 主题部署 Pjax
关于主题与文档的更新  
新版本「2.0」正式版发布
新版本「2.0」测试版发布
测试「文章内链接作文本的话无法生成静态文件」
新增 pjax 开发分支
主题更名为「Volantis」
主题文档网页更新并开源
已关闭评论区
版本命名规范化
心率测量工具限免活动  

2019

Code Highlight Style test  

2018

Markdown Style test  

2017

Volantis for Hexo

2013

Images
2013-12-25
Excerpts
Gallery Post
Tag Plugins
www.google.com
日本語テスト
中文測試
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
Link Post
Elements
Hello World
\ No newline at end of file diff --git a/archives/page/6/index.html b/archives/page/6/index.html index a0d1ac802..b661d9ba1 100644 --- a/archives/page/6/index.html +++ b/archives/page/6/index.html @@ -1 +1 @@ -归档 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

2023

使用freecdn-js提高hexo博客的cdn稳定性
为hexo博客添加自适应图片占位图（配合lazyload）
Aplayer采用本地音源
Volantis魔改教程

2022

volantis使用php实现Gitee友链
配置Volantis 主题遇到的问题和解决
volantis新版暗黑模式动画
好看的网盘链接

2021

Volantis 多背景图的优化方案
网站自定义字体及推荐
Volantis主题自定义-暗黑模式动画
Volantis 主题个性化修改合集
给博客添加捐赠小部件—sponsor-page
使用 pandoc 正确渲染多行 MathJax 公式
为volantis添加瀑布流相册
为volantis添加hls.js以在Chrome上播放m3u8视频
volantis主题修改代码高亮样式
为volantis主题添加图片轮播和热门文章
使用volantis更优雅地展示截图/录屏

2020

通过CoolPush实时推送hexo评论到QQ
哔哔！换个姿势在静态博客上发短博文（volantis适配版）
Hexo 标签函数 list_tags 用法详解
如何给博客添加弹窗通知
博客访问速度提升：最佳线路分流
静态博客使用 Issues API 发布动态、友链、书签
给 Hexo Volantis 主题添加图片轮播功能
Volantis 主题部署 Pjax
关于主题与文档的更新  
新版本「2.0」正式版发布
新版本「2.0」测试版发布
测试「文章内链接作文本的话无法生成静态文件」
新增 pjax 开发分支
主题更名为「Volantis」
主题文档网页更新并开源
已关闭评论区
版本命名规范化
心率测量工具限免活动  

2019

Code Highlight Style test  

2018

Markdown Style test  

2017

Volantis for Hexo

2013

Images
2013-12-25
Excerpts
Gallery Post
Tag Plugins
www.google.com
日本語テスト
中文測試
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
Link Post
Elements
Hello World
\ No newline at end of file +归档 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

2023

使用freecdn-js提高hexo博客的cdn稳定性
为hexo博客添加自适应图片占位图（配合lazyload）
Aplayer采用本地音源
Volantis魔改教程

2022

volantis使用php实现Gitee友链
配置Volantis 主题遇到的问题和解决
volantis新版暗黑模式动画
好看的网盘链接

2021

Volantis 多背景图的优化方案
网站自定义字体及推荐
Volantis主题自定义-暗黑模式动画
Volantis 主题个性化修改合集
给博客添加捐赠小部件—sponsor-page
使用 pandoc 正确渲染多行 MathJax 公式
为volantis添加瀑布流相册
为volantis添加hls.js以在Chrome上播放m3u8视频
volantis主题修改代码高亮样式
为volantis主题添加图片轮播和热门文章
使用volantis更优雅地展示截图/录屏

2020

通过CoolPush实时推送hexo评论到QQ
哔哔！换个姿势在静态博客上发短博文（volantis适配版）
Hexo 标签函数 list_tags 用法详解
如何给博客添加弹窗通知
博客访问速度提升：最佳线路分流
静态博客使用 Issues API 发布动态、友链、书签
给 Hexo Volantis 主题添加图片轮播功能
Volantis 主题部署 Pjax
关于主题与文档的更新  
新版本「2.0」正式版发布
新版本「2.0」测试版发布
测试「文章内链接作文本的话无法生成静态文件」
新增 pjax 开发分支
主题更名为「Volantis」
主题文档网页更新并开源
已关闭评论区
版本命名规范化
心率测量工具限免活动  

2019

Code Highlight Style test  

2018

Markdown Style test  

2017

Volantis for Hexo

2013

Images
2013-12-25
Excerpts
Gallery Post
Tag Plugins
www.google.com
日本語テスト
中文測試
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.
Link Post
Elements
Hello World
\ No newline at end of file diff --git a/atom.xml b/atom.xml index bcc325e39..e20a0e073 100644 --- a/atom.xml +++ b/atom.xml @@ -6,7 +6,7 @@ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z https://volantis.js.org/ @@ -21,7 +21,7 @@ https://volantis.js.org/blogs/2023-10-01-enhanced-cdn/ 2023-10-01T00:00:00.000Z - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z 由于cdn.jsdelivr.net在国内不太稳定，替代的jsd.cdn.zzko.cn稳定性稍好，但是也不是100%稳定，因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求，但是我的文件（图片、js等）储存在GitHub图床，而freecdn-js本身需要被加速的文件的hash，因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的，所以写了一个正则脚本来提取cdn的链接。

]]> @@ -38,7 +38,7 @@ https://volantis.js.org/blogs/2023-09-03-lazyload/ 2023-09-03T00:00:00.000Z - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z 我们要得到的结果如封面所示

由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。

]]> @@ -154,7 +154,7 @@ https://volantis.js.org/blogs/2022-07-09-pandownjs/ 2022-05-05T12:00:00.000Z - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z 这不是Node.js包！

这是个javascript的小工具？

↑↑↑和上次一样的开头↑↑↑

]]> @@ -202,7 +202,7 @@ https://volantis.js.org/blogs/2021-09-02-inkss-font/ 2021-09-02T00:00:00.000Z - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z

统计一下目前使用的自定义字体及调用。

Volantis 主题可直接参考使用。

]]> @@ -299,7 +299,7 @@ https://volantis.js.org/blogs/2021-4-14-photos/ 2021-04-14T00:00:00.000Z - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z 经过折腾，目前相册功能可用了，就是还不支持分类和懒加载，等后续完善吧。

]]> @@ -318,7 +318,7 @@ https://volantis.js.org/blogs/2021-4-1-hls/ 2021-04-01T00:00:00.000Z - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z 在文章中插入m3u8视频的时候，由于Chrome等浏览器原生播放不了这种格式，所以需要添加hls.js等让其支持播放，如果你也遇到了这样的问题就来看看吧。

]]> @@ -337,7 +337,7 @@ https://volantis.js.org/blogs/2021-3-31-highlightjs/ 2021-03-31T00:00:00.000Z - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z 在使用主题内的highlightjs的时候，你是否也遇到了它不换行、没有行号等问题？点进来看看吧。

]]> @@ -356,7 +356,7 @@ https://volantis.js.org/blogs/2021-2-30-slider/ 2021-03-30T00:00:00.000Z - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z 这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的，由我将新的轮播模板迁移至主题内，由inkss大佬完善。在这感谢两位大佬，如果你也需要轮播插件，就进来看看吧。

]]> @@ -375,7 +375,7 @@ https://volantis.js.org/blogs/2021-3-7-framei8/ 2021-03-07T00:00:00.000Z - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z 我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。

]]> diff --git a/blog/categories/index.html b/blog/categories/index.html index 937865b67..85c50576d 100644 --- a/blog/categories/index.html +++ b/blog/categories/index.html @@ -1 +1 @@ -文章分类 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

\ No newline at end of file +文章分类 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

\ No newline at end of file diff --git a/blog/tags/index.html b/blog/tags/index.html index 1a1c2e0e0..5fb548da9 100644 --- a/blog/tags/index.html +++ b/blog/tags/index.html @@ -1 +1 @@ -所有标签 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

\ No newline at end of file +所有标签 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

\ No newline at end of file diff --git a/blogs/2020-05-17-inkss-pjax/index.html b/blogs/2020-05-17-inkss-pjax/index.html index dcac8504f..d885494bd 100644 --- a/blogs/2020-05-17-inkss-pjax/index.html +++ b/blogs/2020-05-17-inkss-pjax/index.html @@ -1 +1 @@ -Volantis 主题部署 Pjax - Volantis
\ No newline at end of file +Volantis 主题部署 Pjax - Volantis
\ No newline at end of file diff --git a/blogs/2020-08-21-main-banner/index.html b/blogs/2020-08-21-main-banner/index.html index 6be862088..12d29caf9 100644 --- a/blogs/2020-08-21-main-banner/index.html +++ b/blogs/2020-08-21-main-banner/index.html @@ -1 +1 @@ -给 Hexo Volantis 主题添加图片轮播功能 - Volantis
\ No newline at end of file +给 Hexo Volantis 主题添加图片轮播功能 - Volantis
\ No newline at end of file diff --git a/blogs/2020-08-28-issue-api/index.html b/blogs/2020-08-28-issue-api/index.html index 2715c0c43..f9d892976 100644 --- a/blogs/2020-08-28-issue-api/index.html +++ b/blogs/2020-08-28-issue-api/index.html @@ -1 +1 @@ -静态博客使用 Issues API 发布动态、友链、书签 - Volantis
\ No newline at end of file +静态博客使用 Issues API 发布动态、友链、书签 - Volantis
\ No newline at end of file diff --git a/blogs/2020-08-31-hexospeed/index.html b/blogs/2020-08-31-hexospeed/index.html index 381cfaea0..2a4ce270e 100644 --- a/blogs/2020-08-31-hexospeed/index.html +++ b/blogs/2020-08-31-hexospeed/index.html @@ -1 +1 @@ -博客访问速度提升：最佳线路分流 - Volantis
\ No newline at end of file +博客访问速度提升：最佳线路分流 - Volantis
\ No newline at end of file diff --git a/blogs/2020-09-03-message-prompt/index.html b/blogs/2020-09-03-message-prompt/index.html index 33dc5b575..01ea5c328 100644 --- a/blogs/2020-09-03-message-prompt/index.html +++ b/blogs/2020-09-03-message-prompt/index.html @@ -1 +1 @@ -如何给博客添加弹窗通知 - Volantis
\ No newline at end of file +如何给博客添加弹窗通知 - Volantis
\ No newline at end of file diff --git a/blogs/2020-09-24-list-tags/index.html b/blogs/2020-09-24-list-tags/index.html index 1f513e3ee..721995fee 100644 --- a/blogs/2020-09-24-list-tags/index.html +++ b/blogs/2020-09-24-list-tags/index.html @@ -1 +1 @@ -Hexo 标签函数 list_tags 用法详解 - Volantis
\ No newline at end of file +Hexo 标签函数 list_tags 用法详解 - Volantis
\ No newline at end of file diff --git a/blogs/2020-10-09-bb-on-volantis/index.html b/blogs/2020-10-09-bb-on-volantis/index.html index 8c9edde6f..ef45566a6 100644 --- a/blogs/2020-10-09-bb-on-volantis/index.html +++ b/blogs/2020-10-09-bb-on-volantis/index.html @@ -1 +1 @@ -哔哔！换个姿势在静态博客上发短博文（volantis适配版） - Volantis

哔哔！换个姿势在静态博客上发短博文（volantis适配版）

进阶玩法

发布于：2020年10月9日

要在静态博客上发送短博文，不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk，已经有短博文的那种体验了，而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。

去源站阅读

本页文档最后更新于：2020年10月9日

评论

\ No newline at end of file +哔哔！换个姿势在静态博客上发短博文（volantis适配版） - Volantis

哔哔！换个姿势在静态博客上发短博文（volantis适配版）

进阶玩法

发布于：2020年10月9日

要在静态博客上发送短博文，不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk，已经有短博文的那种体验了，而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。

去源站阅读

本页文档最后更新于：2020年10月9日

评论

\ No newline at end of file diff --git a/blogs/2020-12-17-comments-push/index.html b/blogs/2020-12-17-comments-push/index.html index 950609e4f..550955a3d 100644 --- a/blogs/2020-12-17-comments-push/index.html +++ b/blogs/2020-12-17-comments-push/index.html @@ -1 +1 @@ -通过CoolPush实时推送hexo评论到QQ - Volantis
\ No newline at end of file +通过CoolPush实时推送hexo评论到QQ - Volantis
\ No newline at end of file diff --git a/blogs/2021-08-13-sponsor-page/index.html b/blogs/2021-08-13-sponsor-page/index.html index 53b02a418..f627e444c 100644 --- a/blogs/2021-08-13-sponsor-page/index.html +++ b/blogs/2021-08-13-sponsor-page/index.html @@ -1 +1 @@ -给博客添加捐赠小部件—sponsor-page - Volantis
\ No newline at end of file +给博客添加捐赠小部件—sponsor-page - Volantis
\ No newline at end of file diff --git a/blogs/2021-08-15-inkss-theme/index.html b/blogs/2021-08-15-inkss-theme/index.html index 241a0c6b0..92917d477 100644 --- a/blogs/2021-08-15-inkss-theme/index.html +++ b/blogs/2021-08-15-inkss-theme/index.html @@ -1 +1 @@ -Volantis 主题个性化修改合集 - Volantis
\ No newline at end of file +Volantis 主题个性化修改合集 - Volantis
\ No newline at end of file diff --git a/blogs/2021-09-02-inkss-font/index.html b/blogs/2021-09-02-inkss-font/index.html index e9c3d7c78..11e5d2439 100644 --- a/blogs/2021-09-02-inkss-font/index.html +++ b/blogs/2021-09-02-inkss-font/index.html @@ -1,9 +1,9 @@ 网站自定义字体及推荐 - Volantis

网站自定义字体及推荐

进阶玩法

发布于：2021年9月2日

统计一下目前使用的自定义字体及调用。

Volantis 主题可直接参考使用。

去源站阅读

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/blogs/2021-11-29-parallax/index.html b/blogs/2021-11-29-parallax/index.html index 21b65f47e..278a5fa42 100644 --- a/blogs/2021-11-29-parallax/index.html +++ b/blogs/2021-11-29-parallax/index.html @@ -1 +1 @@ -Volantis 多背景图的优化方案 - Volantis
\ No newline at end of file +Volantis 多背景图的优化方案 - Volantis
\ No newline at end of file diff --git a/blogs/2021-2-30-slider/index.html b/blogs/2021-2-30-slider/index.html index 156e78a5a..ae53202bf 100644 --- a/blogs/2021-2-30-slider/index.html +++ b/blogs/2021-2-30-slider/index.html @@ -1 +1 @@ -为volantis主题添加图片轮播和热门文章 - Volantis
\ No newline at end of file +为volantis主题添加图片轮播和热门文章 - Volantis
\ No newline at end of file diff --git a/blogs/2021-3-31-highlightjs/index.html b/blogs/2021-3-31-highlightjs/index.html index 49323cea0..0be3dd8d6 100644 --- a/blogs/2021-3-31-highlightjs/index.html +++ b/blogs/2021-3-31-highlightjs/index.html @@ -1 +1 @@ -volantis主题修改代码高亮样式 - Volantis
\ No newline at end of file +volantis主题修改代码高亮样式 - Volantis
\ No newline at end of file diff --git a/blogs/2021-3-7-framei8/index.html b/blogs/2021-3-7-framei8/index.html index 9f42bddcc..0aee6b570 100644 --- a/blogs/2021-3-7-framei8/index.html +++ b/blogs/2021-3-7-framei8/index.html @@ -1 +1 @@ -使用volantis更优雅地展示截图/录屏 - Volantis

使用volantis更优雅地展示截图/录屏

进阶玩法

发布于：2021年3月7日

我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。

去源站阅读

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +使用volantis更优雅地展示截图/录屏 - Volantis

使用volantis更优雅地展示截图/录屏

进阶玩法

发布于：2021年3月7日

我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。

去源站阅读

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/blogs/2021-4-1-hls/index.html b/blogs/2021-4-1-hls/index.html index 0ad5d0136..1de9240d9 100644 --- a/blogs/2021-4-1-hls/index.html +++ b/blogs/2021-4-1-hls/index.html @@ -1 +1 @@ -为volantis添加hls.js以在Chrome上播放m3u8视频 - Volantis
\ No newline at end of file +为volantis添加hls.js以在Chrome上播放m3u8视频 - Volantis
\ No newline at end of file diff --git a/blogs/2021-4-14-photos/index.html b/blogs/2021-4-14-photos/index.html index c0425e7ce..bfc4f3754 100644 --- a/blogs/2021-4-14-photos/index.html +++ b/blogs/2021-4-14-photos/index.html @@ -1 +1 @@ -为volantis添加瀑布流相册 - Volantis
\ No newline at end of file +为volantis添加瀑布流相册 - Volantis
\ No newline at end of file diff --git a/blogs/2021-4-18-pandoc-renderer/index.html b/blogs/2021-4-18-pandoc-renderer/index.html index 8e6353f16..f978e33c0 100644 --- a/blogs/2021-4-18-pandoc-renderer/index.html +++ b/blogs/2021-4-18-pandoc-renderer/index.html @@ -1 +1 @@ -使用 pandoc 正确渲染多行 MathJax 公式 - Volantis
\ No newline at end of file +使用 pandoc 正确渲染多行 MathJax 公式 - Volantis
\ No newline at end of file diff --git a/blogs/2021-8-29-darkmode/index.html b/blogs/2021-8-29-darkmode/index.html index 00bbbf4b8..57cda2141 100644 --- a/blogs/2021-8-29-darkmode/index.html +++ b/blogs/2021-8-29-darkmode/index.html @@ -1 +1 @@ -Volantis主题自定义-暗黑模式动画 - Volantis
\ No newline at end of file +Volantis主题自定义-暗黑模式动画 - Volantis
\ No newline at end of file diff --git a/blogs/2022-07-09-pandownjs/index.html b/blogs/2022-07-09-pandownjs/index.html index 6844af4aa..3ba500480 100644 --- a/blogs/2022-07-09-pandownjs/index.html +++ b/blogs/2022-07-09-pandownjs/index.html @@ -3,7 +3,7 @@ ↑↑↑和上次一样的开头↑↑↑ - - Volantis Team - Volantis">

好看的网盘链接

进阶玩法

发布于：2022年5月5日

这不是Node.js包！

这是个javascript的小工具？

↑↑↑和上次一样的开头↑↑↑

去源站阅读

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/blogs/2022-08-18-darkmode-new/index.html b/blogs/2022-08-18-darkmode-new/index.html index 8d3651984..723fdd74b 100644 --- a/blogs/2022-08-18-darkmode-new/index.html +++ b/blogs/2022-08-18-darkmode-new/index.html @@ -1 +1 @@ -volantis新版暗黑模式动画 - Volantis
\ No newline at end of file +volantis新版暗黑模式动画 - Volantis
\ No newline at end of file diff --git a/blogs/2022-12-06-experience/index.html b/blogs/2022-12-06-experience/index.html index 9cb5f6313..6a9c03a81 100644 --- a/blogs/2022-12-06-experience/index.html +++ b/blogs/2022-12-06-experience/index.html @@ -1 +1 @@ -配置Volantis 主题遇到的问题和解决 - Volantis
\ No newline at end of file +配置Volantis 主题遇到的问题和解决 - Volantis
\ No newline at end of file diff --git a/blogs/2022-12-26-GiteeFriendsLink/index.html b/blogs/2022-12-26-GiteeFriendsLink/index.html index dc1d5ad74..00e385a49 100644 --- a/blogs/2022-12-26-GiteeFriendsLink/index.html +++ b/blogs/2022-12-26-GiteeFriendsLink/index.html @@ -1 +1 @@ -volantis使用php实现Gitee友链 - Volantis
\ No newline at end of file +volantis使用php实现Gitee友链 - Volantis
\ No newline at end of file diff --git a/blogs/2023-01-07-VolantisModify/index.html b/blogs/2023-01-07-VolantisModify/index.html index 25c22c857..cefc478d8 100644 --- a/blogs/2023-01-07-VolantisModify/index.html +++ b/blogs/2023-01-07-VolantisModify/index.html @@ -1,4 +1,4 @@ -Volantis魔改教程 - Volantis

Volantis魔改教程

开发心得

发布于：2023年1月7日

暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等

部分内容非Volantis主题也适用

去源站阅读

本页文档最后更新于：2023年1月17日

评论

\ No newline at end of file diff --git a/blogs/2023-09-03-lazyload/index.html b/blogs/2023-09-03-lazyload/index.html index 87f64b28a..f2d7ba282 100644 --- a/blogs/2023-09-03-lazyload/index.html +++ b/blogs/2023-09-03-lazyload/index.html @@ -1,4 +1,4 @@ -为hexo博客添加自适应图片占位图（配合lazyload） - Volantis

为hexo博客添加自适应图片占位图（配合lazyload）

hexo折腾

发布于：2023年9月3日

我们要得到的结果如封面所示

由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。

去源站阅读

本页文档最后更新于：2023年11月3日

volantis

评论

\ No newline at end of file diff --git a/blogs/2023-1-18-LocalMusic/index.html b/blogs/2023-1-18-LocalMusic/index.html index ce1ee0a0d..cada9df8c 100644 --- a/blogs/2023-1-18-LocalMusic/index.html +++ b/blogs/2023-1-18-LocalMusic/index.html @@ -1,4 +1,4 @@ -Aplayer采用本地音源 - Volantis

Aplayer采用本地音源

开发心得

发布于：2023年1月18日

通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题

新的代码仅向metingjs增加了本地音源功能,原有功能保持不变

去源站阅读

本页文档最后更新于：2023年1月18日

评论

\ No newline at end of file diff --git a/blogs/2023-10-01-enhanced-cdn/index.html b/blogs/2023-10-01-enhanced-cdn/index.html index 3737b0469..25472c11a 100644 --- a/blogs/2023-10-01-enhanced-cdn/index.html +++ b/blogs/2023-10-01-enhanced-cdn/index.html @@ -1 +1 @@ -使用freecdn-js提高hexo博客的cdn稳定性 - Volantis

使用freecdn-js提高hexo博客的cdn稳定性

发布于：2023年10月1日

由于cdn.jsdelivr.net在国内不太稳定，替代的jsd.cdn.zzko.cn稳定性稍好，但是也不是100%稳定，因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求，但是我的文件（图片、js等）储存在GitHub图床，而freecdn-js本身需要被加速的文件的hash，因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的，所以写了一个正则脚本来提取cdn的链接。

去源站阅读

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +使用freecdn-js提高hexo博客的cdn稳定性 - Volantis

使用freecdn-js提高hexo博客的cdn稳定性

发布于：2023年10月1日

由于cdn.jsdelivr.net在国内不太稳定，替代的jsd.cdn.zzko.cn稳定性稍好，但是也不是100%稳定，因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求，但是我的文件（图片、js等）储存在GitHub图床，而freecdn-js本身需要被加速的文件的hash，因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的，所以写了一个正则脚本来提取cdn的链接。

去源站阅读

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git "a/categories/hexo\346\212\230\350\205\276/index.html" "b/categories/hexo\346\212\230\350\205\276/index.html" index 306edab0a..40f43d7b9 100644 --- "a/categories/hexo\346\212\230\350\205\276/index.html" +++ "b/categories/hexo\346\212\230\350\205\276/index.html" @@ -1 +1 @@ -分类：hexo折腾 - Volantis
为hexo博客添加自适应图片占位图（配合lazyload）

我们要得到的结果如封面所示

由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。

\ No newline at end of file +分类：hexo折腾 - Volantis
为hexo博客添加自适应图片占位图（配合lazyload）

我们要得到的结果如封面所示

由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。

\ No newline at end of file diff --git "a/categories/\345\256\230\346\226\271\350\265\204\350\256\257/index.html" "b/categories/\345\256\230\346\226\271\350\265\204\350\256\257/index.html" index da67b6cd2..f154ed1bc 100644 --- "a/categories/\345\256\230\346\226\271\350\265\204\350\256\257/index.html" +++ "b/categories/\345\256\230\346\226\271\350\265\204\350\256\257/index.html" @@ -1 +1 @@ -分类：官方资讯 - Volantis


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。


开始使用

由于主题目前仍处于青少年阶段，更新迭代速度比较快，所以不会保留旧版本的文档，如果需要查看旧版本的文档，请下载主题文档的源码，回退到旧版本，本地运行查看。

  • 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时，即最终会同时维护3个大版本的文档。
  • 当主题稳定后会提供英文文档。

本次更新内容非常多，主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户，请您卸载掉旧的样式渲染插件，并安装新的：

  1. 卸载 less

    npm uninstall hexo-renderer-less --save

  2. 安装 stylus

    npm install hexo-renderer-stylus --save

Beta6
  • 导航栏N级菜单支持分割线和小标题，详见我的个人博客。

由于功能未完全兼容，如果想率先使用，尽量不要改主题配置文件。

  • 不能使用封面
  • mathjax
  • 有折叠框的页面，折叠框打开之后目录高亮位置不对应
  • 很多未知问题

感谢 @inkss 发布的这篇教程 《Hexo 博客部署 Pjax 局部刷新》
当所有兼容性问题解决或妥协之后，pjax 分支会合并入 master。

主题原名「Material X」,最初由「Material-Flow」改编，现已完全没有材质化设计的影子了。风格偏向简约风技术类博客，最大的特点是自由。现更名为「Volantis」，取自权力的游戏地名。

主题经过几年迭代，现已高度模块化和可定制化，功能相对完善，适合用作文档。原来的 文档主题 将不再维护和更新。

现在使用的文档页面源码是： volantis-docs

使用 GitHub Issue

由于 Valine 匿名评论不适合追踪和解决问题，因此决定暂时关闭评论区。
为了精准高效解决问题，请前往 GitHub Issue

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面，查看是否有解决方案。
  3. 访问在线示例，查看是否具有相同第问题。
    3.1. 如果在线示例表示正常，则说明自己配置有误，检查开发环境、主题配置是否正确。如果检查不出问题，提Issue询问。
    3.2. 如果在线示例也存在相同问题，则说明存在BUG，请提Issue反馈。
  4. 如果在线示例没有相关内容，下载示例博客源码，修改运行本地预览，进行第3步判断操作。

主版本号.子版本号.修订版本号

主题从2017年至今，已经经历了相当多的大版本迭代和数不尽的小版本更新，但是版本号的更新一直没有遵循规范。从下次更新开始，将遵循下述的规范：

  • 主版本号： 较大改动、框架调整或重构
  • 子版本号： 较小或局部的功能性更新
  • 修订版本号： 修复BUG或无关紧要的细节调整

心率管家 App（仅iOS端），专业版不定期限免，欢迎下载体验。

如果您看到的时候已经过了限免期，可以先下载免费版使用。为了吸引 app 推荐类网站的爬虫进行推荐，专业版的价格通常在0元到68元之间浮动变化的。

心率管家

专业版

 心率管家

免费版

\ No newline at end of file +分类：官方资讯 - Volantis


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。


开始使用

由于主题目前仍处于青少年阶段，更新迭代速度比较快，所以不会保留旧版本的文档，如果需要查看旧版本的文档，请下载主题文档的源码，回退到旧版本，本地运行查看。

  • 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时，即最终会同时维护3个大版本的文档。
  • 当主题稳定后会提供英文文档。

本次更新内容非常多，主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户，请您卸载掉旧的样式渲染插件，并安装新的：

  1. 卸载 less

    npm uninstall hexo-renderer-less --save

  2. 安装 stylus

    npm install hexo-renderer-stylus --save

Beta6
  • 导航栏N级菜单支持分割线和小标题，详见我的个人博客。

由于功能未完全兼容，如果想率先使用，尽量不要改主题配置文件。

  • 不能使用封面
  • mathjax
  • 有折叠框的页面，折叠框打开之后目录高亮位置不对应
  • 很多未知问题

感谢 @inkss 发布的这篇教程 《Hexo 博客部署 Pjax 局部刷新》
当所有兼容性问题解决或妥协之后，pjax 分支会合并入 master。

主题原名「Material X」,最初由「Material-Flow」改编，现已完全没有材质化设计的影子了。风格偏向简约风技术类博客，最大的特点是自由。现更名为「Volantis」，取自权力的游戏地名。

主题经过几年迭代，现已高度模块化和可定制化，功能相对完善，适合用作文档。原来的 文档主题 将不再维护和更新。

现在使用的文档页面源码是： volantis-docs

使用 GitHub Issue

由于 Valine 匿名评论不适合追踪和解决问题，因此决定暂时关闭评论区。
为了精准高效解决问题，请前往 GitHub Issue

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面，查看是否有解决方案。
  3. 访问在线示例，查看是否具有相同第问题。
    3.1. 如果在线示例表示正常，则说明自己配置有误，检查开发环境、主题配置是否正确。如果检查不出问题，提Issue询问。
    3.2. 如果在线示例也存在相同问题，则说明存在BUG，请提Issue反馈。
  4. 如果在线示例没有相关内容，下载示例博客源码，修改运行本地预览，进行第3步判断操作。

主版本号.子版本号.修订版本号

主题从2017年至今，已经经历了相当多的大版本迭代和数不尽的小版本更新，但是版本号的更新一直没有遵循规范。从下次更新开始，将遵循下述的规范：

  • 主版本号： 较大改动、框架调整或重构
  • 子版本号： 较小或局部的功能性更新
  • 修订版本号： 修复BUG或无关紧要的细节调整

心率管家 App（仅iOS端），专业版不定期限免，欢迎下载体验。

如果您看到的时候已经过了限免期，可以先下载免费版使用。为了吸引 app 推荐类网站的爬虫进行推荐，专业版的价格通常在0元到68元之间浮动变化的。

心率管家

专业版

 心率管家

免费版

\ No newline at end of file diff --git "a/categories/\345\274\200\345\217\221\345\277\203\345\276\227/index.html" "b/categories/\345\274\200\345\217\221\345\277\203\345\276\227/index.html" index f75daa2b0..91b465847 100644 --- "a/categories/\345\274\200\345\217\221\345\277\203\345\276\227/index.html" +++ "b/categories/\345\274\200\345\217\221\345\277\203\345\276\227/index.html" @@ -1 +1 @@ -分类：开发心得 - Volantis

通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题

新的代码仅向metingjs增加了本地音源功能,原有功能保持不变

暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等

部分内容非Volantis主题也适用

添加Gitee动态友链

本篇文章记录了我对 Volantis 主题一路磕磕碰碰的个性化配置，希望为接下来要去配置的新手避个坑

为暗黑模式的切换增加动画

优化背景图较多时的网页加载速度

为暗黑模式的切换增加动画

给博客添加捐赠小部件—sponsor-page

sponsor-page 是一个开源的捐赠按钮样式，可以用于美化我们的博客。

关于更换 Markdown 渲染器以正确渲染 MathJax 公式的一些考据

Hexo 标签函数 list_tags 用法详解

对官方文档标签文档的一个补充，以volantis主题标签调用为例，展示不同用法下的标签示例。


1 / 2

\ No newline at end of file +分类：开发心得 - Volantis

通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题

新的代码仅向metingjs增加了本地音源功能,原有功能保持不变

暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等

部分内容非Volantis主题也适用

添加Gitee动态友链

本篇文章记录了我对 Volantis 主题一路磕磕碰碰的个性化配置，希望为接下来要去配置的新手避个坑

为暗黑模式的切换增加动画

优化背景图较多时的网页加载速度

为暗黑模式的切换增加动画

给博客添加捐赠小部件—sponsor-page

sponsor-page 是一个开源的捐赠按钮样式，可以用于美化我们的博客。

关于更换 Markdown 渲染器以正确渲染 MathJax 公式的一些考据

Hexo 标签函数 list_tags 用法详解

对官方文档标签文档的一个补充，以volantis主题标签调用为例，展示不同用法下的标签示例。


1 / 2

\ No newline at end of file diff --git "a/categories/\345\274\200\345\217\221\345\277\203\345\276\227/page/2/index.html" "b/categories/\345\274\200\345\217\221\345\277\203\345\276\227/page/2/index.html" index 6f01a6c6b..94ab6983f 100644 --- "a/categories/\345\274\200\345\217\221\345\277\203\345\276\227/page/2/index.html" +++ "b/categories/\345\274\200\345\217\221\345\277\203\345\276\227/page/2/index.html" @@ -1 +1 @@ -分类：开发心得 - Volantis

本篇文章记录了我对 Volantis 主题做 Pjax 兼容的种种，大抵算是种记录吧~


2 / 2

\ No newline at end of file +分类：开发心得 - Volantis

本篇文章记录了我对 Volantis 主题做 Pjax 兼容的种种，大抵算是种记录吧~


2 / 2

\ No newline at end of file diff --git "a/categories/\350\277\233\351\230\266\347\216\251\346\263\225/index.html" "b/categories/\350\277\233\351\230\266\347\216\251\346\263\225/index.html" index 45694eec7..e4599fda7 100644 --- "a/categories/\350\277\233\351\230\266\347\216\251\346\263\225/index.html" +++ "b/categories/\350\277\233\351\230\266\347\216\251\346\263\225/index.html" @@ -1 +1 @@ -分类：进阶玩法 - Volantis

这不是Node.js包！

这是个javascript的小工具？

↑↑↑和上次一样的开头↑↑↑

统计一下目前使用的自定义字体及调用。

Volantis 主题可直接参考使用。

Volantis 主题个性化修改合集

记录了与 Volantis 主题相关的修改合集。

经过折腾，目前相册功能可用了，就是还不支持分类和懒加载，等后续完善吧。

在文章中插入m3u8视频的时候，由于Chrome等浏览器原生播放不了这种格式，所以需要添加hls.js等让其支持播放，如果你也遇到了这样的问题就来看看吧。

在使用主题内的highlightjs的时候，你是否也遇到了它不换行、没有行号等问题？点进来看看吧。

这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的，由我将新的轮播模板迁移至主题内，由inkss大佬完善。在这感谢两位大佬，如果你也需要轮播插件，就进来看看吧。

我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。

通过CoolPush实时推送hexo评论到QQ

哔哔！换个姿势在静态博客上发短博文（volantis适配版）

要在静态博客上发送短博文，不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk，已经有短博文的那种体验了，而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。


1 / 2

\ No newline at end of file +分类：进阶玩法 - Volantis

这不是Node.js包！

这是个javascript的小工具？

↑↑↑和上次一样的开头↑↑↑

统计一下目前使用的自定义字体及调用。

Volantis 主题可直接参考使用。

Volantis 主题个性化修改合集

记录了与 Volantis 主题相关的修改合集。

经过折腾，目前相册功能可用了，就是还不支持分类和懒加载，等后续完善吧。

在文章中插入m3u8视频的时候，由于Chrome等浏览器原生播放不了这种格式，所以需要添加hls.js等让其支持播放，如果你也遇到了这样的问题就来看看吧。

在使用主题内的highlightjs的时候，你是否也遇到了它不换行、没有行号等问题？点进来看看吧。

这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的，由我将新的轮播模板迁移至主题内，由inkss大佬完善。在这感谢两位大佬，如果你也需要轮播插件，就进来看看吧。

我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。

通过CoolPush实时推送hexo评论到QQ

哔哔！换个姿势在静态博客上发短博文（volantis适配版）

要在静态博客上发送短博文，不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk，已经有短博文的那种体验了，而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。


1 / 2

\ No newline at end of file diff --git "a/categories/\350\277\233\351\230\266\347\216\251\346\263\225/page/2/index.html" "b/categories/\350\277\233\351\230\266\347\216\251\346\263\225/page/2/index.html" index 22acf28ab..e41eab754 100644 --- "a/categories/\350\277\233\351\230\266\347\216\251\346\263\225/page/2/index.html" +++ "b/categories/\350\277\233\351\230\266\347\216\251\346\263\225/page/2/index.html" @@ -1 +1 @@ -分类：进阶玩法 - Volantis
如何给博客添加弹窗通知

博客访问速度提升：最佳线路分流

静态博客使用 Issues API 发布动态、友链、书签

由于发布 issue 的成本远远低于发布一次博客更新（即便是使用了持续集成），可以用 issue 来简化每个独立博客都必备的友链系统，也可以通过 issue 来快速发布动态资讯，弥补静态博客必须更新静态文件才能更新内容的缺点。此功能已经集成到了主题中，使用非常方便。

很多网站首页都会有图片轮播效果，给网站的首页加上图片轮播的效果，可以很好的起到广告的作用也可以起到推荐优秀内容的作用。来吧，下面是给 Volantis 主题加上首页图片轮播的效果。


2 / 2

\ No newline at end of file +分类：进阶玩法 - Volantis
如何给博客添加弹窗通知

博客访问速度提升：最佳线路分流

静态博客使用 Issues API 发布动态、友链、书签

由于发布 issue 的成本远远低于发布一次博客更新（即便是使用了持续集成），可以用 issue 来简化每个独立博客都必备的友链系统，也可以通过 issue 来快速发布动态资讯，弥补静态博客必须更新静态文件才能更新内容的缺点。此功能已经集成到了主题中，使用非常方便。

很多网站首页都会有图片轮播效果，给网站的首页加上图片轮播的效果，可以很好的起到广告的作用也可以起到推荐优秀内容的作用。来吧，下面是给 Volantis 主题加上首页图片轮播的效果。


2 / 2

\ No newline at end of file diff --git a/content.json b/content.json index f35c50b0e..2759f277e 100644 --- a/content.json +++ b/content.json @@ -1 +1 @@ -{"meta":{"title":"Volantis","subtitle":"","description":"Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。","author":"Volantis Team","url":"https://volantis.js.org","root":"/"},"pages":[{"title":"","date":"2023-11-03T06:18:14.024Z","updated":"2023-11-03T06:17:58.000Z","comments":true,"path":"404.html","permalink":"https://volantis.js.org/404","excerpt":"","text":"404 很抱歉，您访问的页面不存在 可能是输入地址有误或该地址已被删除"},{"title":"鸣谢项目和社区贡献者","date":"2023-11-03T06:18:14.256Z","updated":"2023-11-03T06:17:58.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-03T06:18:14.260Z","updated":"2023-11-03T06:17:58.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-03T06:18:14.264Z","updated":"2023-11-03T06:17:58.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-03T06:18:14.304Z","updated":"2023-11-03T06:17:58.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-03T06:18:14.252Z","updated":"2023-11-03T06:17:58.000Z","comments":true,"path":"blog/categories/index.html","permalink":"https://volantis.js.org/blog/categories/","excerpt":"","text":""},{"title":"所有标签","date":"2023-11-03T06:18:14.256Z","updated":"2023-11-03T06:17:58.000Z","comments":true,"path":"blog/tags/index.html","permalink":"https://volantis.js.org/blog/tags/","excerpt":"","text":""},{"title":"进阶设定","date":"2023-11-03T06:18:14.444Z","updated":"2023-11-03T06:17:58.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-03T06:18:14.448Z","updated":"2023-11-03T06:17:58.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-03T06:18:14.460Z","updated":"2023-11-03T06:17:58.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-03T06:18:14.464Z","updated":"2023-11-03T06:17:58.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-03T06:18:14.468Z","updated":"2023-11-03T06:17:58.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-03T06:18:14.468Z","updated":"2023-11-03T06:17:58.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":"2023-11-03T06:18:14.472Z","updated":"2023-11-03T06:17:58.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-7128da15-5226-fff7-8406-6616a156bde6\"); 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 的友链数据了。 关于自建&nbsp;Vercel&nbsp;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":"2023-11-03T06:18:14.476Z","updated":"2023-11-03T06:17:58.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: ... 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":"2023-11-03T06:18:14.480Z","updated":"2023-11-03T06:17:58.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":"2023-11-03T06:18:14.484Z","updated":"2023-11-03T06:17:58.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":"","date":"2023-11-03T06:18:14.496Z","updated":"2023-11-03T06:17:58.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":"FAQ","date":"2023-11-03T06:18:14.492Z","updated":"2023-11-03T06:17:58.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":"2023-11-03T06:18:14.500Z","updated":"2023-11-03T06:17:58.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":"2023-11-03T06:18:14.504Z","updated":"2023-11-03T06:17:58.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":"2023-11-03T06:18:14.508Z","updated":"2023-11-03T06:17:58.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-fe55d9a0-d581-18e3-a1c4-8d74c8f57e9b\"); 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 的友链数据了。 关于自建&nbsp;Vercel&nbsp;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":"2023-11-03T06:18:14.512Z","updated":"2023-11-03T06:17:58.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":"2023-11-03T06:18:14.516Z","updated":"2023-11-03T06:17:58.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":"使用freecdn-js提高hexo博客的cdn稳定性","slug":"blogs/2023-10-01-enhanced-cdn","date":"2023-10-01T00:00:00.000Z","updated":"2023-11-03T06:17:58.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":"2023-11-03T06:17:58.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":"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":"2023-11-03T06:17:58.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":"2023-11-03T06:17:58.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":"2023-11-03T06:17:58.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":"2023-11-03T06:17:58.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":"2023-11-03T06:17:58.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":"2023-11-03T06:17:58.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":"2023-11-03T06:17:58.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/"}]} \ No newline at end of file +{"meta":{"title":"Volantis","subtitle":"","description":"Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。","author":"Volantis Team","url":"https://volantis.js.org","root":"/"},"pages":[{"title":"","date":"2023-11-03T06:18:48.941Z","updated":"2023-11-03T06:18:37.000Z","comments":true,"path":"404.html","permalink":"https://volantis.js.org/404","excerpt":"","text":"404 很抱歉，您访问的页面不存在 可能是输入地址有误或该地址已被删除"},{"title":"鸣谢项目和社区贡献者","date":"2023-11-03T06:18:49.141Z","updated":"2023-11-03T06:18:37.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-03T06:18:49.145Z","updated":"2023-11-03T06:18:37.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-03T06:18:49.141Z","updated":"2023-11-03T06:18:37.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-03T06:18:49.133Z","updated":"2023-11-03T06:18:37.000Z","comments":true,"path":"blog/categories/index.html","permalink":"https://volantis.js.org/blog/categories/","excerpt":"","text":""},{"title":"如何正确地更新主题","date":"2023-11-03T06:18:49.177Z","updated":"2023-11-03T06:18:37.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-03T06:18:49.137Z","updated":"2023-11-03T06:18:37.000Z","comments":true,"path":"blog/tags/index.html","permalink":"https://volantis.js.org/blog/tags/","excerpt":"","text":""},{"title":"进阶设定","date":"2023-11-03T06:18:49.301Z","updated":"2023-11-03T06:18:37.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-03T06:18:49.305Z","updated":"2023-11-03T06:18:37.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-03T06:18:49.313Z","updated":"2023-11-03T06:18:37.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-03T06:18:49.317Z","updated":"2023-11-03T06:18:37.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-03T06:18:49.321Z","updated":"2023-11-03T06:18:37.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-03T06:18:49.325Z","updated":"2023-11-03T06:18:37.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":"2023-11-03T06:18:49.325Z","updated":"2023-11-03T06:18:37.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-23c26f91-50b0-1b41-86bc-0412476d12ef\"); 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 的友链数据了。 关于自建&nbsp;Vercel&nbsp;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":"2023-11-03T06:18:49.333Z","updated":"2023-11-03T06:18:37.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":"2023-11-03T06:18:49.337Z","updated":"2023-11-03T06:18:37.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":"2023-11-03T06:18:49.345Z","updated":"2023-11-03T06:18:37.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":"2023-11-03T06:18:49.329Z","updated":"2023-11-03T06:18:37.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: ... 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":"2023-11-03T06:18:49.349Z","updated":"2023-11-03T06:18:37.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":"2023-11-03T06:18:49.353Z","updated":"2023-11-03T06:18:37.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":"2023-11-03T06:18:49.353Z","updated":"2023-11-03T06:18:37.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":"不支持 pjax 的标签插件","date":"2023-11-03T06:18:49.361Z","updated":"2023-11-03T06:18:37.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":"2023-11-03T06:18:49.357Z","updated":"2023-11-03T06:18:37.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-0a53fe7e-962c-6966-8a80-c5454a475221\"); 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 的友链数据了。 关于自建&nbsp;Vercel&nbsp;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":"2023-11-03T06:18:49.365Z","updated":"2023-11-03T06:18:37.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":"使用freecdn-js提高hexo博客的cdn稳定性","slug":"blogs/2023-10-01-enhanced-cdn","date":"2023-10-01T00:00:00.000Z","updated":"2023-11-03T06:18:37.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":"2023-11-03T06:18:37.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":"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":"2023-11-03T06:18:37.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":"2023-11-03T06:18:37.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":"2023-11-03T06:18:37.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":"2023-11-03T06:18:37.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":"2023-11-03T06:18:37.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":"2023-11-03T06:18:37.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":"2023-11-03T06:18:37.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/"}]} \ No newline at end of file diff --git a/contributors/index.html b/contributors/index.html index 0241a9d45..cdccf89e6 100644 --- a/contributors/index.html +++ b/contributors/index.html @@ -1,7 +1,7 @@ 鸣谢项目和社区贡献者 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

鸣谢项目和社区贡献者

发布于：2023年11月3日

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 主题部署 Pjax
date: 2020-05-17
updated: 2020-08-07
categories: [开发心得]
author: inkss
link: 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://gcore.jsdelivr.net/gh/inkss/common@1.4.2/hexo/img/static/avatar.jpg
  url: https://inkss.cn

注意事项

  1. 文章存放在 _posts/blogs/ 目录中，且文件名格式为「年-月-日-文章话题」。
  2. 鼓励原创文章，摘要部分300字符以内。如果想不出摘要可以不写，不要在摘要里重复一遍文章标题。
  3. 最好选择一个文章分类，如果现有的分类中没有合适的，可以自己新增。
  4. 如果有文章头图，请确保图片内最多只有一个单词或短语，图片不清晰或者与文章无关的话不建议使用。
  5. 不仅限于自己的文章，可以在征得文章作者同意的情况下将其链接收录到官网。

在线编辑文档

https://github.com/volantis-x/community/tree/main/source/_posts/blogs

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/examples/index.html b/examples/index.html index cab02f73d..952d254d7 100644 --- a/examples/index.html +++ b/examples/index.html @@ -10,7 +10,7 @@ 使用 Volantis 的博客示例 - - Volantis Team - Volantis">

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

示 例 博 客

社区维护团队的博客

xaoxuu开发者
MHuiG划水
Colsrch开发者
inkss摸鱼
volantis-x.js.orgTest Site For Development

使用 Volantis 的博客示例




如何添加自己的博客链接

第一步：新建 Issue 按照格式填写并提交

{
    "title": "",
    "description": "",
    "screenshot": "",
    "url": "",
    "avatar": "",
    "version": "版本：^4.0"
}

为了提高图片加载速度，建议优化图片尺寸：

  1. 打开 压缩图 上传自己的截图，将图片的高度调整到 360px 后下载。
  2. 将压缩后的图片上传到 ImgURL免费图床 或 去不图床 并使用此图片链接作为截图链接。

第二步：刷新

回来刷新即可生效。

如何更新自己的博客链接

  • 如果是自己创建的 issue ，可以自己修改。
  • 如果是管理员创建的，请自己重新创建一份，然后让管理员删掉旧的。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/faqs/index.html b/faqs/index.html index db59f3ea6..7b79ba824 100644 --- a/faqs/index.html +++ b/faqs/index.html @@ -1,5 +1,5 @@ 常见问题与反馈渠道 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

常见问题与反馈渠道

发布于：2023年11月3日

通常来说，一个全新的工程全部使用默认配置是正常没有故障的。如果无法使用或者效果与示例有较大区别，可以使用 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.yml
url: https://xaoxuu.com
root: /



教程与指南

Hexo 官方文档

请一定要阅读官方文档！

image

可供交流的渠道

解决问题

渠道方式用途
Issues@volantis-x/hexo-theme-volantis和开发者沟通的唯一渠道，用于跟进和解决问题

请不要发送邮件

开源项目的开发者很反感别人不通过正确的途径如 Issues 而是通过私人邮件询问开源项目问题，所以一般不会回复此类邮件。

交流

渠道方式用途
论坛@volantis-x/discussions慢，相对正式，方便检索，可以给其他用户参考
QQ群1146399464 (验证码:vlts-2021)非正式，即时通讯，易于斗图；不利于给其他用户参考
Telegramt.me/volantis_x非正式，即时通讯，佛系交流互动
Gitterhexo-theme-volantis/community佛系交流互动
评论区留言佛系交流互动 可以测试、灌水、推广自己的博客。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/how-to-update/index.html b/how-to-update/index.html index b9f682ba8..662ceb58a 100644 --- a/how-to-update/index.html +++ b/how-to-update/index.html @@ -1 +1 @@ -如何正确地更新主题 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

如何正确地更新主题

发布于：2023年11月3日

如何正确地更新主题

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 打开子模块：

博客仓库

image

打开子模块

Snipaste_2020-08-25_09-40-13

如此进入的仓库为您的主题仓库，可以在当前页面中查看到所有提交的历史记录等等。为了避免一些拗口的称呼所带来的不良影响，这里设定如下：将 Fork 的仓库称为 主题仓库 ，将 hexo-theme-volantis 仓库称为 volantis 仓库。

主题仓库

image

在图中，当前 Fork 的主题仓库所处的分支为 master-theme ，图中右侧展示的是个人主题仓库的最后一次提交信息。中间区域，较上部分在写有 master 标记的为 volantis 仓库的分支（您可以通过右侧的 Logo 图片进行区别）。显而易见的，当前主题仓库已经落后 Volantis 仓库，下面我们便需要合并代码到自己的主题仓库中。如果您打开后的界面并没有看到 Volantis 的仓库信息，意味着当前没有添加 Volantis 仓库为远端，您可以按照如下操作添加：

添加 Volantis 远端仓库信息

在左侧面板的 REMOTE 选项卡处，点击加号，进入如下图所示界面，选中 volantis-x/hexo-theme-volantis 后添加即可。

Snipaste_2020-08-25_09-42-16

二、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. 合并操作

image

B. 合并冲突检测

image

C. 选择合适的内容

image

D. 提交内容

image

2. Rebase

简言之，Rebase 将你的所有修改（提交）重新放到了公共分支的最后面，当然后果是可能会经常面临是否强制提交，而且不太适合与 Merge 操作共同使用。以下内容摘抄自：Rebase - 廖雪峰的官方网站

多人在同一个分支上协作时，很容易出现冲突。后 Push 的童鞋不得不先 Pull ，在本地合并，然后才能 Push 成功。

总之看上去很乱，有强迫症的童鞋会问：为什么 Git 的提交历史不能是一条干净的直线？其实是可以做到的！Git 有一种称为 Rebase 的操作，有人把它翻译成“变基”。

Rebase 操作的特点：把分叉的提交历史“整理”成一条直线，看上去更直观。缺点是本地的分叉提交已经被修改过了。

  • Rebase 操作可以把本地未push的分叉提交历史整理成直线；

  • Rebase 的目的是使得我们在查看历史提交的变化时更容易，因为分叉的提交需要三方对比。

三、冲突的产生与避免

冲突一般产生于同一处被不同人修改时，Git 无法自动处理，抛出错误让用户解决。由于主题目前仍处于青少年阶段，更新迭代速度比较快，冲突现象可能会比较明显，下面提供一些思路减少这类情况。

1.首先是配置文件，根据 Hexo 的规则，所有对配置的修改都可以独立出来，无需直接修改主题仓库下的 config.yml ，这里可以参阅：创建主题配置文件。配置类文件是最不该产生冲突的地方。

2.样式文件，根据 css 的覆盖规则，使用样式覆盖比直接修改样式来的欢快，例如主题中的光标便是采用的样式覆盖的思路。

四、代码历史维护

您可以对单个文件进行历史查看操作，以此来对比您所做出的个人修改，最大程度上的避免代码丢失。正所谓熟能生巧，多加操作后主题更新将不再是一件麻烦的事情，末尾愿您一路走来，最终回归创建博客的初心，完结撒花 ★,°:.☆(￣▽￣)/$:.°★ 。

历史记录

image

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +如何正确地更新主题 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

如何正确地更新主题

发布于：2023年11月3日

如何正确地更新主题

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 打开子模块：

博客仓库

image

打开子模块

Snipaste_2020-08-25_09-40-13

如此进入的仓库为您的主题仓库，可以在当前页面中查看到所有提交的历史记录等等。为了避免一些拗口的称呼所带来的不良影响，这里设定如下：将 Fork 的仓库称为 主题仓库 ，将 hexo-theme-volantis 仓库称为 volantis 仓库。

主题仓库

image

在图中，当前 Fork 的主题仓库所处的分支为 master-theme ，图中右侧展示的是个人主题仓库的最后一次提交信息。中间区域，较上部分在写有 master 标记的为 volantis 仓库的分支（您可以通过右侧的 Logo 图片进行区别）。显而易见的，当前主题仓库已经落后 Volantis 仓库，下面我们便需要合并代码到自己的主题仓库中。如果您打开后的界面并没有看到 Volantis 的仓库信息，意味着当前没有添加 Volantis 仓库为远端，您可以按照如下操作添加：

添加 Volantis 远端仓库信息

在左侧面板的 REMOTE 选项卡处，点击加号，进入如下图所示界面，选中 volantis-x/hexo-theme-volantis 后添加即可。

Snipaste_2020-08-25_09-42-16

二、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. 合并操作

image

B. 合并冲突检测

image

C. 选择合适的内容

image

D. 提交内容

image

2. Rebase

简言之，Rebase 将你的所有修改（提交）重新放到了公共分支的最后面，当然后果是可能会经常面临是否强制提交，而且不太适合与 Merge 操作共同使用。以下内容摘抄自：Rebase - 廖雪峰的官方网站

多人在同一个分支上协作时，很容易出现冲突。后 Push 的童鞋不得不先 Pull ，在本地合并，然后才能 Push 成功。

总之看上去很乱，有强迫症的童鞋会问：为什么 Git 的提交历史不能是一条干净的直线？其实是可以做到的！Git 有一种称为 Rebase 的操作，有人把它翻译成“变基”。

Rebase 操作的特点：把分叉的提交历史“整理”成一条直线，看上去更直观。缺点是本地的分叉提交已经被修改过了。

  • Rebase 操作可以把本地未push的分叉提交历史整理成直线；

  • Rebase 的目的是使得我们在查看历史提交的变化时更容易，因为分叉的提交需要三方对比。

三、冲突的产生与避免

冲突一般产生于同一处被不同人修改时，Git 无法自动处理，抛出错误让用户解决。由于主题目前仍处于青少年阶段，更新迭代速度比较快，冲突现象可能会比较明显，下面提供一些思路减少这类情况。

1.首先是配置文件，根据 Hexo 的规则，所有对配置的修改都可以独立出来，无需直接修改主题仓库下的 config.yml ，这里可以参阅：创建主题配置文件。配置类文件是最不该产生冲突的地方。

2.样式文件，根据 css 的覆盖规则，使用样式覆盖比直接修改样式来的欢快，例如主题中的光标便是采用的样式覆盖的思路。

四、代码历史维护

您可以对单个文件进行历史查看操作，以此来对比您所做出的个人修改，最大程度上的避免代码丢失。正所谓熟能生巧，多加操作后主题更新将不再是一件麻烦的事情，末尾愿您一路走来，最终回归创建博客的初心，完结撒花 ★,°:.☆(￣▽￣)/$:.°★ 。

历史记录

image

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/index.html b/index.html index da559d2a6..c37dadaf0 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。


开始使用

由于cdn.jsdelivr.net在国内不太稳定，替代的jsd.cdn.zzko.cn稳定性稍好，但是也不是100%稳定，因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求，但是我的文件（图片、js等）储存在GitHub图床，而freecdn-js本身需要被加速的文件的hash，因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的，所以写了一个正则脚本来提取cdn的链接。

为hexo博客添加自适应图片占位图（配合lazyload）

我们要得到的结果如封面所示

由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。

通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题

新的代码仅向metingjs增加了本地音源功能,原有功能保持不变

暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等

部分内容非Volantis主题也适用

添加Gitee动态友链

本篇文章记录了我对 Volantis 主题一路磕磕碰碰的个性化配置，希望为接下来要去配置的新手避个坑

为暗黑模式的切换增加动画

这不是Node.js包！

这是个javascript的小工具？

↑↑↑和上次一样的开头↑↑↑

优化背景图较多时的网页加载速度

统计一下目前使用的自定义字体及调用。

Volantis 主题可直接参考使用。


1 / 6

\ No newline at end of file +Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。


开始使用

由于cdn.jsdelivr.net在国内不太稳定，替代的jsd.cdn.zzko.cn稳定性稍好，但是也不是100%稳定，因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求，但是我的文件（图片、js等）储存在GitHub图床，而freecdn-js本身需要被加速的文件的hash，因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的，所以写了一个正则脚本来提取cdn的链接。

为hexo博客添加自适应图片占位图（配合lazyload）

我们要得到的结果如封面所示

由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。

通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题

新的代码仅向metingjs增加了本地音源功能,原有功能保持不变

暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等

部分内容非Volantis主题也适用

添加Gitee动态友链

本篇文章记录了我对 Volantis 主题一路磕磕碰碰的个性化配置，希望为接下来要去配置的新手避个坑

为暗黑模式的切换增加动画

这不是Node.js包！

这是个javascript的小工具？

↑↑↑和上次一样的开头↑↑↑

优化背景图较多时的网页加载速度

统计一下目前使用的自定义字体及调用。

Volantis 主题可直接参考使用。


1 / 6

\ No newline at end of file diff --git a/news/2017-10-24/index.html b/news/2017-10-24/index.html index d068ed8c4..ef122f8df 100644 --- a/news/2017-10-24/index.html +++ b/news/2017-10-24/index.html @@ -1 +1 @@ -Volantis for Hexo - Volantis


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。


开始使用

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Volantis for Hexo - Volantis


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。


开始使用

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/news/2020-02-18/index.html b/news/2020-02-18/index.html index 0a698ae6e..b7145df90 100644 --- a/news/2020-02-18/index.html +++ b/news/2020-02-18/index.html @@ -1 +1 @@ -心率测量工具限免活动 - Volantis
\ No newline at end of file +心率测量工具限免活动 - Volantis
\ No newline at end of file diff --git a/news/2020-02-19/index.html b/news/2020-02-19/index.html index 62cfbed22..e06262e12 100644 --- a/news/2020-02-19/index.html +++ b/news/2020-02-19/index.html @@ -1 +1 @@ -版本命名规范化 - Volantis

版本命名规范化

官方资讯

发布于：2020年2月19日

主版本号.子版本号.修订版本号

主题从2017年至今，已经经历了相当多的大版本迭代和数不尽的小版本更新，但是版本号的更新一直没有遵循规范。从下次更新开始，将遵循下述的规范：

  • 主版本号： 较大改动、框架调整或重构
  • 子版本号： 较小或局部的功能性更新
  • 修订版本号： 修复BUG或无关紧要的细节调整

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +版本命名规范化 - Volantis

版本命名规范化

官方资讯

发布于：2020年2月19日

主版本号.子版本号.修订版本号

主题从2017年至今，已经经历了相当多的大版本迭代和数不尽的小版本更新，但是版本号的更新一直没有遵循规范。从下次更新开始，将遵循下述的规范：

  • 主版本号： 较大改动、框架调整或重构
  • 子版本号： 较小或局部的功能性更新
  • 修订版本号： 修复BUG或无关紧要的细节调整

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/news/2020-02-20/index.html b/news/2020-02-20/index.html index b9c220f77..8fc281c16 100644 --- a/news/2020-02-20/index.html +++ b/news/2020-02-20/index.html @@ -1 +1 @@ -已关闭评论区 - Volantis

已关闭评论区

官方资讯

发布于：2020年2月20日

使用 GitHub Issue

由于 Valine 匿名评论不适合追踪和解决问题，因此决定暂时关闭评论区。
为了精准高效解决问题，请前往 GitHub Issue

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面，查看是否有解决方案。
  3. 访问在线示例，查看是否具有相同第问题。
    3.1. 如果在线示例表示正常，则说明自己配置有误，检查开发环境、主题配置是否正确。如果检查不出问题，提Issue询问。
    3.2. 如果在线示例也存在相同问题，则说明存在BUG，请提Issue反馈。
  4. 如果在线示例没有相关内容，下载示例博客源码，修改运行本地预览，进行第3步判断操作。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +已关闭评论区 - Volantis

已关闭评论区

官方资讯

发布于：2020年2月20日

使用 GitHub Issue

由于 Valine 匿名评论不适合追踪和解决问题，因此决定暂时关闭评论区。
为了精准高效解决问题，请前往 GitHub Issue

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面，查看是否有解决方案。
  3. 访问在线示例，查看是否具有相同第问题。
    3.1. 如果在线示例表示正常，则说明自己配置有误，检查开发环境、主题配置是否正确。如果检查不出问题，提Issue询问。
    3.2. 如果在线示例也存在相同问题，则说明存在BUG，请提Issue反馈。
  4. 如果在线示例没有相关内容，下载示例博客源码，修改运行本地预览，进行第3步判断操作。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/news/2020-02-21/index.html b/news/2020-02-21/index.html index 8bdcd9138..17b14286e 100644 --- a/news/2020-02-21/index.html +++ b/news/2020-02-21/index.html @@ -1 +1 @@ -主题文档网页更新并开源 - Volantis
\ No newline at end of file +主题文档网页更新并开源 - Volantis
\ No newline at end of file diff --git a/news/2020-02-22/index.html b/news/2020-02-22/index.html index 6b774bb0e..f5c7279b5 100644 --- a/news/2020-02-22/index.html +++ b/news/2020-02-22/index.html @@ -1 +1 @@ -主题更名为「Volantis」 - Volantis
\ No newline at end of file +主题更名为「Volantis」 - Volantis
\ No newline at end of file diff --git a/news/2020-02-25/index.html b/news/2020-02-25/index.html index 60cae37b1..e039a76b1 100644 --- a/news/2020-02-25/index.html +++ b/news/2020-02-25/index.html @@ -1 +1 @@ -新增 pjax 开发分支 - Volantis
\ No newline at end of file +新增 pjax 开发分支 - Volantis
\ No newline at end of file diff --git a/news/2020-03-06-2.0-beta/index.html b/news/2020-03-06-2.0-beta/index.html index 0749c7556..b5600be9c 100644 --- a/news/2020-03-06-2.0-beta/index.html +++ b/news/2020-03-06-2.0-beta/index.html @@ -2,10 +2,10 @@ 导航栏N级菜单支持分割线和小标题，详见我的个人博客。 - - Volantis Team - Volantis">

新版本「2.0」测试版发布

官方资讯

发布于：2020年3月6日

Beta6
  • 导航栏N级菜单支持分割线和小标题，详见我的个人博客。
Beta5
  • 导航栏二级N级菜单
  • 支持微信二维码分享（需安装二维码生成插件）
Beta4
  • 优化样式
  • 更多样式可以在主题配置文件中自定义
  • 调整主题配置文件
Beta3
  • 优化样式
  • grid 部件新增 fixed: true 参数，用于固定宽度。
Beta2
  • 可以创建多种颜色的折叠框
  • 友链增加分组描述
Beta1
  • 新版本使用 stylus 完全重写了样式。
  • 可在主题配置文件中修改配色、标题等多种样式（需要关闭CDN）。
    已知的BUG有：
  • Container左侧的图标（图片）始终显示不出来，原因未知。
>div.info
  background-color: alpha($color-mac-cyan, 20%)
  border-left: $borderradius-codeblock solid $color-mac-cyan
  border-radius: $borderradius-codeblock
  >:before
    ...(省略无关代码)
    background-size: 16px 16px
    background-position: 4px 4px
    background-repeat: no-repeat
    background-color: $color-mac-cyan
    background-image: url("data:image/svg+xmlbase64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSIxNzkyIiBoZWlnaHQ9IjE3OTIiIHZpZXdCb3g9IjAgMCAxNzkyIDE3OTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyMTYgMTM0NHYxMjhxMCAyNi0xOSA0NXQtNDUgMTloLTUxMnEtMjYgMC00NS0xOXQtMTktNDV2LTEyOHEwLTI2IDE5LTQ1dDQ1LTE5aDY0di0zODRoLTY0cS0yNiAwLTQ1LTE5dC0xOS00NXYtMTI4cTAtMjYgMTktNDV0NDUtMTloMzg0cTI2IDAgNDUgMTl0MTkgNDV2NTc2aDY0cTI2IDAgNDUgMTl0MTkgNDV6bS0xMjgtMTE1MnYxOTJxMCAyNi0xOSA0NXQtNDUgMTloLTI1NnEtMjYgMC00NS0xOXQtMTktNDV2LTE5MnEwLTI2IDE5LTQ1dDQ1LTE5aDI1NnEyNiAwIDQ1IDE5dDE5IDQ1eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==")

我试过把url里面的内容换成网络图片的URL是可以正常显示的。
源码在： themes/volantis/source/css/_third-party/container.styl

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/news/2020-03-10-2.0/index.html b/news/2020-03-10-2.0/index.html index 76705715e..668e7fecc 100644 --- a/news/2020-03-10-2.0/index.html +++ b/news/2020-03-10-2.0/index.html @@ -4,7 +4,7 @@ npm uninstall hexo-renderer-less --save 安装 stylus -npm install hexo-renderer-s... - Volantis Team - Volantis">

新版本「2.0」正式版发布

官方资讯

发布于：2020年3月10日

本次更新内容非常多，主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户，请您卸载掉旧的样式渲染插件，并安装新的：

  1. 卸载 less

    npm uninstall hexo-renderer-less --save

  2. 安装 stylus

    npm install hexo-renderer-stylus --save

新功能

导航栏

导航栏获得了史诗级的增强，可以设置N级子菜单。考虑到实用性，不太建议使用过多或者过深的菜单（超出屏幕的部分无法被看到）。

样式设置

现在可以在主题配置文件中设置更多的样式：

  • 最大布局宽度
  • 导航栏高度、特效（阴影、毛玻璃、鼠标hover时浮起）
  • 卡片特效（阴影、毛玻璃、鼠标hover时浮起）
  • 代码框是否显示语言
  • 标题和正文文本布局（靠左、靠右、居中）
  • 正文字体
  • 代码字体
  • 各部分颜色

封面

封面可以在主题配置文件中设置在首页、归档页面、其它页面默认是否显示。
封面中可以同时显示logo图片、标题、副标题了。

小部件

grid小部件可以设置 fixed: true 来固定网格宽度（适合文字长短不一的场景）。

其它

可以设置「评论」的标题和副标题。
可以创建多种颜色的折叠框。
友链增加分组描述。

功能调整与优化

样式渲染器

使用 stylus 重写了所有样式，无需安装less插件了。相较于1.7.4，css文件体积缩小了19.75%。

主题配置文件

  • 主题配置文件经过了较大改动，使得层级结构更加清晰。
  • 优化了二维码（微信）分享的使用体验

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/news/2020-04-04/index.html b/news/2020-04-04/index.html index 1fc62b890..61d7e4ec2 100644 --- a/news/2020-04-04/index.html +++ b/news/2020-04-04/index.html @@ -2,7 +2,7 @@ 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时，即最终会同时维护3个大版本的文档。 当主题稳定后会提供英文文档。 - - Volantis Team - Volantis">

关于主题与文档的更新

官方资讯

发布于：2020年4月4日

由于主题目前仍处于青少年阶段，更新迭代速度比较快，所以不会保留旧版本的文档，如果需要查看旧版本的文档，请下载主题文档的源码，回退到旧版本，本地运行查看。

  • 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时，即最终会同时维护3个大版本的文档。
  • 当主题稳定后会提供英文文档。
去源站阅读

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/page-sitemap.xml b/page-sitemap.xml index 5b62372c9..548271fc3 100644 --- a/page-sitemap.xml +++ b/page-sitemap.xml @@ -11,7 +11,7 @@ https://volantis.js.org/contributors/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -19,8 +19,8 @@ - https://volantis.js.org/examples/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/faqs/ + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -28,8 +28,8 @@ - https://volantis.js.org/faqs/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/examples/ + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -37,8 +37,8 @@ - https://volantis.js.org/how-to-update/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/blog/categories/ + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -46,8 +46,8 @@ - https://volantis.js.org/blog/categories/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/how-to-update/ + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -56,7 +56,7 @@ https://volantis.js.org/blog/tags/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -65,7 +65,7 @@ https://volantis.js.org/v4/advanced-settings/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -74,7 +74,7 @@ https://volantis.js.org/v4/getting-started/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -83,7 +83,7 @@ https://volantis.js.org/v4/page-settings/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -92,7 +92,7 @@ https://volantis.js.org/v4/site-settings/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -101,7 +101,7 @@ https://volantis.js.org/v4/tag-plugins/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -109,8 +109,8 @@ - https://volantis.js.org/v4/theme-settings/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/v5/advanced-settings/ + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -118,8 +118,8 @@ - https://volantis.js.org/v5/advanced-settings/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/v4/theme-settings/ + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -128,7 +128,7 @@ https://volantis.js.org/v5/development-api/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -137,7 +137,7 @@ https://volantis.js.org/v5/faq/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -146,7 +146,7 @@ https://volantis.js.org/v5/getting-started/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -155,7 +155,7 @@ https://volantis.js.org/v5/page-settings/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -164,7 +164,7 @@ https://volantis.js.org/v5/site-settings/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -173,7 +173,7 @@ https://volantis.js.org/v5/tag-plugins/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -181,8 +181,8 @@ - https://volantis.js.org/v5/theme-settings/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/v6/advanced-settings/ + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -190,8 +190,8 @@ - https://volantis.js.org/v6/advanced-settings/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/v6/development-api/ + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -199,8 +199,8 @@ - https://volantis.js.org/v6/development-api/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/v6/faq/ + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -208,8 +208,8 @@ - https://volantis.js.org/v6/getting-started/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/v5/theme-settings/ + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -217,8 +217,8 @@ - https://volantis.js.org/v6/faq/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/v6/getting-started/ + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -227,7 +227,7 @@ https://volantis.js.org/v6/page-settings/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -236,7 +236,7 @@ https://volantis.js.org/v6/site-settings/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -244,8 +244,8 @@ - https://volantis.js.org/v6/tag-plugins/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/v6/tag-plugins/no-pjax + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -253,8 +253,8 @@ - https://volantis.js.org/v6/tag-plugins/no-pjax - 2023-11-03T06:17:58.000Z + https://volantis.js.org/v6/tag-plugins/ + 2023-11-03T06:18:37.000Z weekly 0.8 @@ -263,7 +263,7 @@ https://volantis.js.org/v6/theme-settings/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.8 diff --git a/page/2/index.html b/page/2/index.html index 1aa1d5ee2..135af0723 100644 --- a/page/2/index.html +++ b/page/2/index.html @@ -1 +1 @@ -Volantis

为暗黑模式的切换增加动画

Volantis 主题个性化修改合集

记录了与 Volantis 主题相关的修改合集。

给博客添加捐赠小部件—sponsor-page

sponsor-page 是一个开源的捐赠按钮样式，可以用于美化我们的博客。

关于更换 Markdown 渲染器以正确渲染 MathJax 公式的一些考据

经过折腾，目前相册功能可用了，就是还不支持分类和懒加载，等后续完善吧。

在文章中插入m3u8视频的时候，由于Chrome等浏览器原生播放不了这种格式，所以需要添加hls.js等让其支持播放，如果你也遇到了这样的问题就来看看吧。

在使用主题内的highlightjs的时候，你是否也遇到了它不换行、没有行号等问题？点进来看看吧。

这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的，由我将新的轮播模板迁移至主题内，由inkss大佬完善。在这感谢两位大佬，如果你也需要轮播插件，就进来看看吧。

我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。

通过CoolPush实时推送hexo评论到QQ


2 / 6

\ No newline at end of file +Volantis

为暗黑模式的切换增加动画

Volantis 主题个性化修改合集

记录了与 Volantis 主题相关的修改合集。

给博客添加捐赠小部件—sponsor-page

sponsor-page 是一个开源的捐赠按钮样式，可以用于美化我们的博客。

关于更换 Markdown 渲染器以正确渲染 MathJax 公式的一些考据

经过折腾，目前相册功能可用了，就是还不支持分类和懒加载，等后续完善吧。

在文章中插入m3u8视频的时候，由于Chrome等浏览器原生播放不了这种格式，所以需要添加hls.js等让其支持播放，如果你也遇到了这样的问题就来看看吧。

在使用主题内的highlightjs的时候，你是否也遇到了它不换行、没有行号等问题？点进来看看吧。

这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的，由我将新的轮播模板迁移至主题内，由inkss大佬完善。在这感谢两位大佬，如果你也需要轮播插件，就进来看看吧。

我在主题文档中看到了frame标签，可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架，想要使用其他的框架就得对齐修改，我经过折腾基本实现了，写下了这篇文章。

通过CoolPush实时推送hexo评论到QQ


2 / 6

\ No newline at end of file diff --git a/page/3/index.html b/page/3/index.html index 33894d926..87813a699 100644 --- a/page/3/index.html +++ b/page/3/index.html @@ -1 +1 @@ -Volantis
哔哔！换个姿势在静态博客上发短博文（volantis适配版）

要在静态博客上发送短博文，不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk，已经有短博文的那种体验了，而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。

Hexo 标签函数 list_tags 用法详解

对官方文档标签文档的一个补充，以volantis主题标签调用为例，展示不同用法下的标签示例。

如何给博客添加弹窗通知

博客访问速度提升：最佳线路分流

静态博客使用 Issues API 发布动态、友链、书签

由于发布 issue 的成本远远低于发布一次博客更新（即便是使用了持续集成），可以用 issue 来简化每个独立博客都必备的友链系统，也可以通过 issue 来快速发布动态资讯，弥补静态博客必须更新静态文件才能更新内容的缺点。此功能已经集成到了主题中，使用非常方便。

很多网站首页都会有图片轮播效果，给网站的首页加上图片轮播的效果，可以很好的起到广告的作用也可以起到推荐优秀内容的作用。来吧，下面是给 Volantis 主题加上首页图片轮播的效果。

本篇文章记录了我对 Volantis 主题做 Pjax 兼容的种种，大抵算是种记录吧~

由于主题目前仍处于青少年阶段，更新迭代速度比较快，所以不会保留旧版本的文档，如果需要查看旧版本的文档，请下载主题文档的源码，回退到旧版本，本地运行查看。

  • 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时，即最终会同时维护3个大版本的文档。
  • 当主题稳定后会提供英文文档。

本次更新内容非常多，主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户，请您卸载掉旧的样式渲染插件，并安装新的：

  1. 卸载 less

    npm uninstall hexo-renderer-less --save

  2. 安装 stylus

    npm install hexo-renderer-stylus --save

Beta6
  • 导航栏N级菜单支持分割线和小标题，详见我的个人博客。

3 / 6

\ No newline at end of file +Volantis
哔哔！换个姿势在静态博客上发短博文（volantis适配版）

要在静态博客上发送短博文，不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk，已经有短博文的那种体验了，而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是：发文不是很方便，需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥，换个舒服的姿势》，顿时感觉爱了，这就是我梦寐以求发送短博文的姿势。

Hexo 标签函数 list_tags 用法详解

对官方文档标签文档的一个补充，以volantis主题标签调用为例，展示不同用法下的标签示例。

如何给博客添加弹窗通知

博客访问速度提升：最佳线路分流

静态博客使用 Issues API 发布动态、友链、书签

由于发布 issue 的成本远远低于发布一次博客更新（即便是使用了持续集成），可以用 issue 来简化每个独立博客都必备的友链系统，也可以通过 issue 来快速发布动态资讯，弥补静态博客必须更新静态文件才能更新内容的缺点。此功能已经集成到了主题中，使用非常方便。

很多网站首页都会有图片轮播效果，给网站的首页加上图片轮播的效果，可以很好的起到广告的作用也可以起到推荐优秀内容的作用。来吧，下面是给 Volantis 主题加上首页图片轮播的效果。

本篇文章记录了我对 Volantis 主题做 Pjax 兼容的种种，大抵算是种记录吧~

由于主题目前仍处于青少年阶段，更新迭代速度比较快，所以不会保留旧版本的文档，如果需要查看旧版本的文档，请下载主题文档的源码，回退到旧版本，本地运行查看。

  • 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时，即最终会同时维护3个大版本的文档。
  • 当主题稳定后会提供英文文档。

本次更新内容非常多，主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户，请您卸载掉旧的样式渲染插件，并安装新的：

  1. 卸载 less

    npm uninstall hexo-renderer-less --save

  2. 安装 stylus

    npm install hexo-renderer-stylus --save

Beta6
  • 导航栏N级菜单支持分割线和小标题，详见我的个人博客。

3 / 6

\ No newline at end of file diff --git a/page/4/index.html b/page/4/index.html index c4fcda34d..3a10434bf 100644 --- a/page/4/index.html +++ b/page/4/index.html @@ -1 +1 @@ -Volantis

5、测试Tomcat是否配置成功：打开浏览器，输入在地址栏中输入： http://localhost:8080 的运行结果如下图即为即为配置成功！（因为Tomcat已经在运行再次打开会报错）

相关 Issue： #164

结论：存在这篇文章的情况下能够成功 deploy ，说明这不是主题的 BUG。

markdwon 解析插件为 hexo-renderer-marked 时此插件默认会自动识别 URL ，且原文链接前后没有空格，所以链接前后增加一个空格或者在根目录配置文件中设置 autolink: false 都可以避免 deploy 报错。
插件：hexo-renderer-marked

由于功能未完全兼容，如果想率先使用，尽量不要改主题配置文件。

  • 不能使用封面
  • mathjax
  • 有折叠框的页面，折叠框打开之后目录高亮位置不对应
  • 很多未知问题

感谢 @inkss 发布的这篇教程 《Hexo 博客部署 Pjax 局部刷新》
当所有兼容性问题解决或妥协之后，pjax 分支会合并入 master。

主题原名「Material X」,最初由「Material-Flow」改编，现已完全没有材质化设计的影子了。风格偏向简约风技术类博客，最大的特点是自由。现更名为「Volantis」，取自权力的游戏地名。

主题经过几年迭代，现已高度模块化和可定制化，功能相对完善，适合用作文档。原来的 文档主题 将不再维护和更新。

现在使用的文档页面源码是： volantis-docs

使用 GitHub Issue

由于 Valine 匿名评论不适合追踪和解决问题，因此决定暂时关闭评论区。
为了精准高效解决问题，请前往 GitHub Issue

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面，查看是否有解决方案。
  3. 访问在线示例，查看是否具有相同第问题。
    3.1. 如果在线示例表示正常，则说明自己配置有误，检查开发环境、主题配置是否正确。如果检查不出问题，提Issue询问。
    3.2. 如果在线示例也存在相同问题，则说明存在BUG，请提Issue反馈。
  4. 如果在线示例没有相关内容，下载示例博客源码，修改运行本地预览，进行第3步判断操作。

主版本号.子版本号.修订版本号

主题从2017年至今，已经经历了相当多的大版本迭代和数不尽的小版本更新，但是版本号的更新一直没有遵循规范。从下次更新开始，将遵循下述的规范：

  • 主版本号： 较大改动、框架调整或重构
  • 子版本号： 较小或局部的功能性更新
  • 修订版本号： 修复BUG或无关紧要的细节调整

心率管家 App（仅iOS端），专业版不定期限免，欢迎下载体验。

如果您看到的时候已经过了限免期，可以先下载免费版使用。为了吸引 app 推荐类网站的爬虫进行推荐，专业版的价格通常在0元到68元之间浮动变化的。

心率管家

专业版

 心率管家

免费版

Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org

Markdown Style test

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.


4 / 6

\ No newline at end of file +Volantis

5、测试Tomcat是否配置成功：打开浏览器，输入在地址栏中输入： http://localhost:8080 的运行结果如下图即为即为配置成功！（因为Tomcat已经在运行再次打开会报错）

相关 Issue： #164

结论：存在这篇文章的情况下能够成功 deploy ，说明这不是主题的 BUG。

markdwon 解析插件为 hexo-renderer-marked 时此插件默认会自动识别 URL ，且原文链接前后没有空格，所以链接前后增加一个空格或者在根目录配置文件中设置 autolink: false 都可以避免 deploy 报错。
插件：hexo-renderer-marked

由于功能未完全兼容，如果想率先使用，尽量不要改主题配置文件。

  • 不能使用封面
  • mathjax
  • 有折叠框的页面，折叠框打开之后目录高亮位置不对应
  • 很多未知问题

感谢 @inkss 发布的这篇教程 《Hexo 博客部署 Pjax 局部刷新》
当所有兼容性问题解决或妥协之后，pjax 分支会合并入 master。

主题原名「Material X」,最初由「Material-Flow」改编，现已完全没有材质化设计的影子了。风格偏向简约风技术类博客，最大的特点是自由。现更名为「Volantis」，取自权力的游戏地名。

主题经过几年迭代，现已高度模块化和可定制化，功能相对完善，适合用作文档。原来的 文档主题 将不再维护和更新。

现在使用的文档页面源码是： volantis-docs

使用 GitHub Issue

由于 Valine 匿名评论不适合追踪和解决问题，因此决定暂时关闭评论区。
为了精准高效解决问题，请前往 GitHub Issue

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面，查看是否有解决方案。
  3. 访问在线示例，查看是否具有相同第问题。
    3.1. 如果在线示例表示正常，则说明自己配置有误，检查开发环境、主题配置是否正确。如果检查不出问题，提Issue询问。
    3.2. 如果在线示例也存在相同问题，则说明存在BUG，请提Issue反馈。
  4. 如果在线示例没有相关内容，下载示例博客源码，修改运行本地预览，进行第3步判断操作。

主版本号.子版本号.修订版本号

主题从2017年至今，已经经历了相当多的大版本迭代和数不尽的小版本更新，但是版本号的更新一直没有遵循规范。从下次更新开始，将遵循下述的规范：

  • 主版本号： 较大改动、框架调整或重构
  • 子版本号： 较小或局部的功能性更新
  • 修订版本号： 修复BUG或无关紧要的细节调整

心率管家 App（仅iOS端），专业版不定期限免，欢迎下载体验。

如果您看到的时候已经过了限免期，可以先下载免费版使用。为了吸引 app 推荐类网站的爬虫进行推荐，专业版的价格通常在0元到68元之间浮动变化的。

心率管家

专业版

 心率管家

免费版

Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org

Markdown Style test

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.


4 / 6

\ No newline at end of file diff --git a/page/5/index.html b/page/5/index.html index 4d34e3c7f..604727d18 100644 --- a/page/5/index.html +++ b/page/5/index.html @@ -1 +1 @@ -Volantis

This is a image test post.

测试 设定列数
























This is a image test post.

测试 没有设定列数


截屏2020-03-1317.25.10.png

截屏2020-03-1317.27.42.png

截屏2020-03-1317.28.02.png

This is a image test post.

This post doesn't have a title. Make sure it's accessible.

The following contents should be invisible in home/archive page.

This post contains 4 photos:

  • Widescreen wallpaper
  • Portrait photo
  • Dual widescreen wallpaper
  • Small photo

All photos should be displayed properly.

This post is used for testing tag plugins. See docs for more info.

Block Quote

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Quote from a book

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Quote from Twitter

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Quote from an article on the web

Every interaction is both precious and an opportunity to delight.

Seth Godin `http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html` Welcome to Island Marketing

Code Block

Normal code block

alert('Hello World!');

With caption

Array.map
array.map(callback[, thisArg])

With caption and URL

.compactUnderscore.js
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]

With marked lines

Line 1,7-8,10 should be marked with different color.

const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Note: Theme's style should support .highlight.line.marked (recommend to use the selection or current line color).

Gist

jsFiddle

Pullquote

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

This is a link post without a title. The title should be the link with or without protocol. Clicking on the link should open Google in a new tab or window.

This is a Japanese test post.

私は昨日ついにその助力家というのの上よりするたなけれ。

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

がたを知っないはずも同時に九月をいよいよたありた。

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum

This is a Chinese test post.

善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。

以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？

就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。

國新故。

工步他始能詩的，裝進分星海演意學值例道……於財型目古香亮自和這乎？化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不？

From 亂數假文產生器 - Chinese Lorem Ipsum

This post has a long title. Make sure the title displayed right.

This is a link post. Clicking on the link should open Google in a new tab or window.


5 / 6

\ No newline at end of file +Volantis

This is a image test post.

测试 设定列数
























This is a image test post.

测试 没有设定列数


截屏2020-03-1317.25.10.png

截屏2020-03-1317.27.42.png

截屏2020-03-1317.28.02.png

This is a image test post.

This post doesn't have a title. Make sure it's accessible.

The following contents should be invisible in home/archive page.

This post contains 4 photos:

  • Widescreen wallpaper
  • Portrait photo
  • Dual widescreen wallpaper
  • Small photo

All photos should be displayed properly.

This post is used for testing tag plugins. See docs for more info.

Block Quote

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Quote from a book

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Quote from Twitter

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Quote from an article on the web

Every interaction is both precious and an opportunity to delight.

Seth Godin `http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html` Welcome to Island Marketing

Code Block

Normal code block

alert('Hello World!');

With caption

Array.map
array.map(callback[, thisArg])

With caption and URL

.compactUnderscore.js
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]

With marked lines

Line 1,7-8,10 should be marked with different color.

const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Note: Theme's style should support .highlight.line.marked (recommend to use the selection or current line color).

Pullquote

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

This is a link post without a title. The title should be the link with or without protocol. Clicking on the link should open Google in a new tab or window.

This is a Japanese test post.

私は昨日ついにその助力家というのの上よりするたなけれ。

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

がたを知っないはずも同時に九月をいよいよたありた。

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum

This is a Chinese test post.

善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。

以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？

就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。

國新故。

工步他始能詩的，裝進分星海演意學值例道……於財型目古香亮自和這乎？化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不？

From 亂數假文產生器 - Chinese Lorem Ipsum

This post has a long title. Make sure the title displayed right.

This is a link post. Clicking on the link should open Google in a new tab or window.


5 / 6

\ No newline at end of file diff --git a/page/6/index.html b/page/6/index.html index 499fe0dbc..795c1388a 100644 --- a/page/6/index.html +++ b/page/6/index.html @@ -1 +1 @@ -Volantis

The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don't forget to redefine the style by yourself.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet.

List Types

Definition List (dl)

Definition List Title
This is a definition list division.

Ordered List (ol)

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List (ul)

  • List Item 1
  • List Item 2
  • List Item 3

Checkbox List (ul)

  • List Item 1 unchecked
  • List Item 2 checked
  • List Item 3 checked

Table

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Misc Stuff - abbr, acronym, sub, sup, kbd, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE. Use Crtl + C to stop.

Welcome to Hexo! This is your very first post. Check documentation to learn how to use.


6 / 6

\ No newline at end of file +Volantis

The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don't forget to redefine the style by yourself.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet.

List Types

Definition List (dl)

Definition List Title
This is a definition list division.

Ordered List (ol)

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List (ul)

  • List Item 1
  • List Item 2
  • List Item 3

Checkbox List (ul)

  • List Item 1 unchecked
  • List Item 2 checked
  • List Item 3 checked

Table

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Misc Stuff - abbr, acronym, sub, sup, kbd, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE. Use Crtl + C to stop.

Welcome to Hexo! This is your very first post. Check documentation to learn how to use.


6 / 6

\ No newline at end of file diff --git a/post-sitemap.xml b/post-sitemap.xml index 4113813f7..2836526d8 100644 --- a/post-sitemap.xml +++ b/post-sitemap.xml @@ -10,23 +10,23 @@ https://volantis.js.org/blogs/2021-09-02-inkss-font/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 - https://volantis.js.org/blogs/2021-2-30-slider/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/blogs/2021-3-31-highlightjs/ + 2023-11-03T06:18:37.000Z weekly 0.6 - https://volantis.js.org/blogs/2021-3-31-highlightjs/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/blogs/2021-2-30-slider/ + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -34,7 +34,7 @@ https://volantis.js.org/blogs/2021-3-7-framei8/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -42,7 +42,7 @@ https://volantis.js.org/blogs/2021-4-1-hls/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -50,7 +50,7 @@ https://volantis.js.org/blogs/2021-4-14-photos/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -58,7 +58,7 @@ https://volantis.js.org/blogs/2022-07-09-pandownjs/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -66,7 +66,7 @@ https://volantis.js.org/blogs/2023-09-03-lazyload/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -74,7 +74,7 @@ https://volantis.js.org/blogs/2023-10-01-enhanced-cdn/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -82,7 +82,7 @@ https://volantis.js.org/news/2017-10-24/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -90,7 +90,7 @@ https://volantis.js.org/news/2020-02-18/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -98,7 +98,7 @@ https://volantis.js.org/news/2020-02-19/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -106,7 +106,7 @@ https://volantis.js.org/news/2020-02-20/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -114,7 +114,7 @@ https://volantis.js.org/news/2020-02-21/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -122,7 +122,7 @@ https://volantis.js.org/news/2020-02-22/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -130,7 +130,7 @@ https://volantis.js.org/news/2020-02-25/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -138,7 +138,7 @@ https://volantis.js.org/news/2020-03-06-2.0-beta/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -146,7 +146,7 @@ https://volantis.js.org/news/2020-03-10-2.0/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -154,7 +154,7 @@ https://volantis.js.org/news/2020-04-04/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -162,23 +162,23 @@ https://volantis.js.org/test/2020-03-06-test-url/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 - https://volantis.js.org/test/code-highlight/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/test/elements/ + 2023-11-03T06:18:37.000Z weekly 0.6 - https://volantis.js.org/test/elements/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/test/code-highlight/ + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -186,7 +186,7 @@ https://volantis.js.org/test/excerpts/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -194,7 +194,7 @@ https://volantis.js.org/test/gallery-post/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -226,7 +226,7 @@ https://volantis.js.org/test/hello-world/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -234,7 +234,7 @@ https://volantis.js.org/test/images/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -242,7 +242,7 @@ https://volantis.js.org/test/link-post-without-title/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -250,7 +250,7 @@ https://volantis.js.org/test/link-post/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 @@ -258,47 +258,47 @@ https://volantis.js.org/test/long-title/ - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z weekly 0.6 - https://volantis.js.org/test/markdown/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/test/no-title/ + 2023-11-03T06:18:37.000Z weekly 0.6 - https://volantis.js.org/test/no-title/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/test/tag-plugins/ + 2023-11-03T06:18:37.000Z weekly 0.6 - https://volantis.js.org/test/tag-plugins/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/test/markdown/ + 2023-11-03T06:18:37.000Z weekly 0.6 - https://volantis.js.org/test/%E4%B8%AD%E6%96%87%E6%B8%AC%E8%A9%A6/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/test/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%86%E3%82%B9%E3%83%88/ + 2023-11-03T06:18:37.000Z weekly 0.6 - https://volantis.js.org/test/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%86%E3%82%B9%E3%83%88/ - 2023-11-03T06:17:58.000Z + https://volantis.js.org/test/%E4%B8%AD%E6%96%87%E6%B8%AC%E8%A9%A6/ + 2023-11-03T06:18:37.000Z weekly 0.6 diff --git a/sitemap.xml b/sitemap.xml index eb0154c78..169437f30 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -4,12 +4,12 @@ https://volantis.js.org/post-sitemap.xml - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z https://volantis.js.org/page-sitemap.xml - 2023-11-03T06:17:58.000Z + 2023-11-03T06:18:37.000Z diff --git a/tags/bar/index.html b/tags/bar/index.html index 3dd6926ef..6be0774bc 100644 --- a/tags/bar/index.html +++ b/tags/bar/index.html @@ -1 +1 @@ -标签：Bar - Volantis
Markdown Style test

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.

\ No newline at end of file +标签：Bar - Volantis
Markdown Style test

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.

\ No newline at end of file diff --git a/tags/foo/index.html b/tags/foo/index.html index 31b7a5a1f..0471ab215 100644 --- a/tags/foo/index.html +++ b/tags/foo/index.html @@ -1 +1 @@ -标签：Foo - Volantis
Markdown Style test

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.

\ No newline at end of file +标签：Foo - Volantis
Markdown Style test

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.

\ No newline at end of file diff --git a/tags/volantis/index.html b/tags/volantis/index.html index 47bf5df6c..af9bb2329 100644 --- a/tags/volantis/index.html +++ b/tags/volantis/index.html @@ -1 +1 @@ -标签：volantis - Volantis
为hexo博客添加自适应图片占位图（配合lazyload）

我们要得到的结果如封面所示

由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。

\ No newline at end of file +标签：volantis - Volantis
为hexo博客添加自适应图片占位图（配合lazyload）

我们要得到的结果如封面所示

由于博客采用了图片懒加载（lazyload）插件，在加载dom后和图片加载成功之前，图片占位图为1px的像素，图片加载成功之后，则会把布局撑开，造成布局抖动。如果把和要加载的图片（本博客所有图片都放在了GitHub图床上，所以要用到image-size库访问远程图片）一样大小的占位图替代1px大小的占位图，则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中，这需要修改在生成hexo博客时会用到的fancybox.js（或许每个主题用到的文件里都不一样，但最终都会使用hexo.extend.tag.register()方法；本博客使用volantis主题）。

\ No newline at end of file diff --git a/test/2020-03-06-test-url/index.html b/test/2020-03-06-test-url/index.html index 133597dfe..b765080fe 100644 --- a/test/2020-03-06-test-url/index.html +++ b/test/2020-03-06-test-url/index.html @@ -1 +1 @@ -测试「文章内链接作文本的话无法生成静态文件」 - Volantis

测试「文章内链接作文本的话无法生成静态文件」

发布于：2020年3月6日

5、测试Tomcat是否配置成功：打开浏览器，输入在地址栏中输入： http://localhost:8080 的运行结果如下图即为即为配置成功！（因为Tomcat已经在运行再次打开会报错）

相关 Issue： #164

结论：存在这篇文章的情况下能够成功 deploy ，说明这不是主题的 BUG。

markdwon 解析插件为 hexo-renderer-marked 时此插件默认会自动识别 URL ，且原文链接前后没有空格，所以链接前后增加一个空格或者在根目录配置文件中设置 autolink: false 都可以避免 deploy 报错。
插件：hexo-renderer-marked

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +测试「文章内链接作文本的话无法生成静态文件」 - Volantis

测试「文章内链接作文本的话无法生成静态文件」

发布于：2020年3月6日

5、测试Tomcat是否配置成功：打开浏览器，输入在地址栏中输入： http://localhost:8080 的运行结果如下图即为即为配置成功！（因为Tomcat已经在运行再次打开会报错）

相关 Issue： #164

结论：存在这篇文章的情况下能够成功 deploy ，说明这不是主题的 BUG。

markdwon 解析插件为 hexo-renderer-marked 时此插件默认会自动识别 URL ，且原文链接前后没有空格，所以链接前后增加一个空格或者在根目录配置文件中设置 autolink: false 都可以避免 deploy 报错。
插件：hexo-renderer-marked

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/test/code-highlight/index.html b/test/code-highlight/index.html index 46148493c..8c264fdfc 100644 --- a/test/code-highlight/index.html +++ b/test/code-highlight/index.html @@ -1 +1 @@ -Code Highlight Style test - Volantis

Code Highlight Style test

发布于：2019年7月25日

Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
#[derive(Debug)]
pub enum State {
    Start,
    Transient,
    Closed,
}

impl From<&'a str> for State {
    fn from(s: &'a str) -> Self {
        match s {
            "start" => State::Start,
            "closed" => State::Closed,
            _ => unreachable!(),
        }
    }
}
[
  {
    "title": "apples",
    "count": [12000, 20000],
    "description": {"text": "...", "sensitive": false}
  },
  {
    "title": "oranges",
    "count": [17500, null],
    "description": {"text": "...", "sensitive": false}
  }
]
class MyClass {
  public static myValue: string;
  constructor(init: string) {
    this.myValue = init;
  }
}
import fs = require("fs");
module MyModule {
  export interface MyInterface extends Other {
    myProperty: any;
  }
}
declare magicNumber number;
myArray.forEach(() => { }); // fat arrow syntax
@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''
<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id='title'>Title</p>
  <!-- here goes the rest of the page -->
</body>
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }

  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export $initHighlight;
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
CREATE TABLE "topic" (
    "id" serial NOT NULL PRIMARY KEY,
    "forum_id" integer NOT NULL,
    "subject" varchar(255) NOT NULL
);
ALTER TABLE "topic"
ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
REFERENCES "forum" ("id");

-- Initials
insert into "topic" ("forum_id", "subject")
values (2, 'D''artagnian');
#import <UIKit/UIKit.h>
#import "Dependency.h"

@protocol WorldDataSource
@optional
- (NSString *)worldName;
@required
- (BOOL)allowsToLive;
@end
// comment
@property (nonatomic, readonly) NSString *title;
- (IBAction) show;
@end
/**
 * @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;

public abstract class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;

  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // wtf!?
      return;
    }
  }
}
import Foundation

@objc class Person: Entity {
  var name: String!
  var age:  Int!

  init(name: String, age: Int) {
    /* /* ... */ */
  }

  // Return a descriptive string for this person
  func description(offset: Int = 0) -> String {
    return "\(name) is \(age + offset) years old"
  }
}
@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute
# Makefile

BUILDDIR      = _build
EXTRAS       ?= $(BUILDDIR)/extras

.PHONY: main clean

main:
    @echo "Building main facility..."
    build_main $(BUILDDIR)

clean:
    rm -rf $(BUILDDIR)/*
package main

import "fmt"

func main() {
    ch := make(chan float64)
    ch <- 1.0e10    // magic number
    x, ok := <- ch
    defer fmt.Println(`exitting now\`)
    go println(len("hello world!"))
    return
}
#!/bin/bash

###### CONFIG
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
BE_VERBOSE=false

if [ "$UID" -ne 0 ]
then
  echo "Superuser rights required"
  exit 2
fi

genApacheConf(){
  echo -e "# Host ${HOME_DIR}$1/$2 :"
}
; boilerplate
[package]
name = "some_name"
authors = ["Author"]
description = "This is \
a description"

[[lib]]
name = ${NAME}
default = True
auto = no
counter = 1_000

长文本测试

#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Code Highlight Style test - Volantis

Code Highlight Style test

发布于：2019年7月25日

Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
#[derive(Debug)]
pub enum State {
    Start,
    Transient,
    Closed,
}

impl From<&'a str> for State {
    fn from(s: &'a str) -> Self {
        match s {
            "start" => State::Start,
            "closed" => State::Closed,
            _ => unreachable!(),
        }
    }
}
[
  {
    "title": "apples",
    "count": [12000, 20000],
    "description": {"text": "...", "sensitive": false}
  },
  {
    "title": "oranges",
    "count": [17500, null],
    "description": {"text": "...", "sensitive": false}
  }
]
class MyClass {
  public static myValue: string;
  constructor(init: string) {
    this.myValue = init;
  }
}
import fs = require("fs");
module MyModule {
  export interface MyInterface extends Other {
    myProperty: any;
  }
}
declare magicNumber number;
myArray.forEach(() => { }); // fat arrow syntax
@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''
<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id='title'>Title</p>
  <!-- here goes the rest of the page -->
</body>
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }

  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export $initHighlight;
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
CREATE TABLE "topic" (
    "id" serial NOT NULL PRIMARY KEY,
    "forum_id" integer NOT NULL,
    "subject" varchar(255) NOT NULL
);
ALTER TABLE "topic"
ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
REFERENCES "forum" ("id");

-- Initials
insert into "topic" ("forum_id", "subject")
values (2, 'D''artagnian');
#import <UIKit/UIKit.h>
#import "Dependency.h"

@protocol WorldDataSource
@optional
- (NSString *)worldName;
@required
- (BOOL)allowsToLive;
@end
// comment
@property (nonatomic, readonly) NSString *title;
- (IBAction) show;
@end
/**
 * @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;

public abstract class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;

  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // wtf!?
      return;
    }
  }
}
import Foundation

@objc class Person: Entity {
  var name: String!
  var age:  Int!

  init(name: String, age: Int) {
    /* /* ... */ */
  }

  // Return a descriptive string for this person
  func description(offset: Int = 0) -> String {
    return "\(name) is \(age + offset) years old"
  }
}
@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute
# Makefile

BUILDDIR      = _build
EXTRAS       ?= $(BUILDDIR)/extras

.PHONY: main clean

main:
    @echo "Building main facility..."
    build_main $(BUILDDIR)

clean:
    rm -rf $(BUILDDIR)/*
package main

import "fmt"

func main() {
    ch := make(chan float64)
    ch <- 1.0e10    // magic number
    x, ok := <- ch
    defer fmt.Println(`exitting now\`)
    go println(len("hello world!"))
    return
}
#!/bin/bash

###### CONFIG
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
BE_VERBOSE=false

if [ "$UID" -ne 0 ]
then
  echo "Superuser rights required"
  exit 2
fi

genApacheConf(){
  echo -e "# Host ${HOME_DIR}$1/$2 :"
}
; boilerplate
[package]
name = "some_name"
authors = ["Author"]
description = "This is \
a description"

[[lib]]
name = ${NAME}
default = True
auto = no
counter = 1_000

长文本测试

#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/test/elements/index.html b/test/elements/index.html index 37d7533ce..1f5369bc1 100644 --- a/test/elements/index.html +++ b/test/elements/index.html @@ -1 +1 @@ -Elements - Volantis

Elements

发布于：2013年12月24日

The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don't forget to redefine the style by yourself.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet.

List Types

Definition List (dl)

Definition List Title
This is a definition list division.

Ordered List (ol)

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List (ul)

  • List Item 1
  • List Item 2
  • List Item 3

Checkbox List (ul)

  • List Item 1 unchecked
  • List Item 2 checked
  • List Item 3 checked

Table

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Misc Stuff - abbr, acronym, sub, sup, kbd, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE. Use Crtl + C to stop.

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Elements - Volantis

Elements

发布于：2013年12月24日

The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don't forget to redefine the style by yourself.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet.

List Types

Definition List (dl)

Definition List Title
This is a definition list division.

Ordered List (ol)

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List (ul)

  • List Item 1
  • List Item 2
  • List Item 3

Checkbox List (ul)

  • List Item 1 unchecked
  • List Item 2 checked
  • List Item 3 checked

Table

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Misc Stuff - abbr, acronym, sub, sup, kbd, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE. Use Crtl + C to stop.

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/test/excerpts/index.html b/test/excerpts/index.html index 2145916c2..0b1e03c67 100644 --- a/test/excerpts/index.html +++ b/test/excerpts/index.html @@ -1 +1 @@ -Excerpts - Volantis

Excerpts

发布于：2013年12月25日

The following contents should be invisible in home/archive page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget urna vitae velit eleifend interdum at ac nisi. In nec ligula lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu cursus erat, ut dapibus quam. Aliquam eleifend dolor vitae libero pharetra adipiscing. Etiam adipiscing dolor a quam tempor, eu convallis nulla varius. Aliquam sollicitudin risus a porta aliquam. Ut nec velit dolor. Proin eget leo lobortis, aliquam est sed, mollis mauris. Fusce vitae leo pretium massa accumsan condimentum. Fusce malesuada gravida lectus vel vulputate. Donec bibendum porta nibh ut aliquam.

Sed lorem felis, congue non fringilla eu, aliquam eu eros. Curabitur orci libero, mollis sed semper vitae, adipiscing in lectus. Aenean non egestas odio. Donec sollicitudin nisi quis lorem gravida, in pharetra mauris fringilla. Duis sit amet faucibus dolor, id aliquam neque. In egestas, odio gravida tempor dictum, mauris felis faucibus purus, sit amet commodo lacus diam vitae est. Ut ut quam eget massa semper sodales. Aenean non ipsum cursus, blandit lectus in, ornare odio. Curabitur ultrices porttitor vulputate.

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Excerpts - Volantis

Excerpts

发布于：2013年12月25日

The following contents should be invisible in home/archive page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget urna vitae velit eleifend interdum at ac nisi. In nec ligula lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu cursus erat, ut dapibus quam. Aliquam eleifend dolor vitae libero pharetra adipiscing. Etiam adipiscing dolor a quam tempor, eu convallis nulla varius. Aliquam sollicitudin risus a porta aliquam. Ut nec velit dolor. Proin eget leo lobortis, aliquam est sed, mollis mauris. Fusce vitae leo pretium massa accumsan condimentum. Fusce malesuada gravida lectus vel vulputate. Donec bibendum porta nibh ut aliquam.

Sed lorem felis, congue non fringilla eu, aliquam eu eros. Curabitur orci libero, mollis sed semper vitae, adipiscing in lectus. Aenean non egestas odio. Donec sollicitudin nisi quis lorem gravida, in pharetra mauris fringilla. Duis sit amet faucibus dolor, id aliquam neque. In egestas, odio gravida tempor dictum, mauris felis faucibus purus, sit amet commodo lacus diam vitae est. Ut ut quam eget massa semper sodales. Aenean non ipsum cursus, blandit lectus in, ornare odio. Curabitur ultrices porttitor vulputate.

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/test/gallery-post/index.html b/test/gallery-post/index.html index 545aecb48..9e7741014 100644 --- a/test/gallery-post/index.html +++ b/test/gallery-post/index.html @@ -1 +1 @@ -Gallery Post - Volantis
\ No newline at end of file +Gallery Post - Volantis
\ No newline at end of file diff --git a/test/hello-world/index.html b/test/hello-world/index.html index e64d2011d..a277a2e2a 100644 --- a/test/hello-world/index.html +++ b/test/hello-world/index.html @@ -1 +1 @@ -Hello World - Volantis
\ No newline at end of file +Hello World - Volantis
\ No newline at end of file diff --git a/test/images/index.html b/test/images/index.html index 165ce9775..fb3b1e7f1 100644 --- a/test/images/index.html +++ b/test/images/index.html @@ -1 +1 @@ -Images - Volantis
\ No newline at end of file +Images - Volantis
\ No newline at end of file diff --git a/test/link-post-without-title/index.html b/test/link-post-without-title/index.html index 55d33b009..39cfd7b78 100644 --- a/test/link-post-without-title/index.html +++ b/test/link-post-without-title/index.html @@ -1 +1 @@ -www.google.com - Volantis
\ No newline at end of file +www.google.com - Volantis
\ No newline at end of file diff --git a/test/link-post/index.html b/test/link-post/index.html index 4655a8760..477f2cad5 100644 --- a/test/link-post/index.html +++ b/test/link-post/index.html @@ -1 +1 @@ -Link Post - Volantis
\ No newline at end of file +Link Post - Volantis
\ No newline at end of file diff --git a/test/long-title/index.html b/test/long-title/index.html index edb6b3464..0348df727 100644 --- a/test/long-title/index.html +++ b/test/long-title/index.html @@ -1 +1 @@ -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id. - Volantis
\ No newline at end of file +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id. - Volantis
\ No newline at end of file diff --git a/test/markdown/index.html b/test/markdown/index.html index cd4d3db18..d68504213 100644 --- a/test/markdown/index.html +++ b/test/markdown/index.html @@ -1,3 +1,3 @@ -Markdown Style test - Volantis

Markdown Style test

发布于：2018年7月24日

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.

Headers

# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------

H1

H2

H3

H4

H5
H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

Emphasis

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.

Lists

1. First ordered list item
2. Another item
  * Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
  1. Ordered sub-list
4. And another item.

   You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

   To have a line break without a paragraph, you will need to use two trailing spaces.  
   Note that this line is separate, but within the same paragraph.  
   (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

* Unordered list can use asterisks
- Or minuses
+ Or pluses
- Paragraph In unordered list

  For example like this.

Common Paragraph with some text.
And more text.
  1. First ordered list item
  2. Another item
  • Unordered sub-list.

  1. Actual numbers don't matter, just that it's a number

  2. Ordered sub-list

  3. And another item.

    You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

    To have a line break without a paragraph, you will need to use two trailing spaces.
    Note that this line is separate, but within the same paragraph.
    (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

  • Unordered list can use asterisks
  • Or minuses
  • Or pluses

  • Paragraph In unordered list

    For example like this.

Common Paragraph with some text.
And more text.

Inline HTML

<p>To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p>

To reboot your computer, press ctrl+alt+del.

<dl>
    <dt>Definition list</dt>
    <dd>Is something people use sometimes.</dd>

    <dt>Markdown in HTML</dt>
    <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
Definition list
Is something people use sometimes.
<dt>Markdown in HTML</dt>
+Markdown Style test - Volantis
 
 Markdown Style test
发布于：2018年7月24日
This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.
Headers
# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------
H1
H2
H3
H4
H5
H6
Alternatively, for H1 and H2, an underline-ish style:
Alt-H1
Alt-H2
Emphasis
Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~
Emphasis, aka italics, with asterisks or underscores.
Strong emphasis, aka bold, with asterisks or underscores.
Combined emphasis with asterisks and underscores.
Strikethrough uses two tildes. Scratch this.
Lists
1. First ordered list item
2. Another item
  * Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
  1. Ordered sub-list
4. And another item.

   You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

   To have a line break without a paragraph, you will need to use two trailing spaces.  
   Note that this line is separate, but within the same paragraph.  
   (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

* Unordered list can use asterisks
- Or minuses
+ Or pluses
- Paragraph In unordered list

  For example like this.

Common Paragraph with some text.
And more text.
  1. First ordered list item
  2. Another item
  • Unordered sub-list.
  1. Actual numbers don't matter, just that it's a number
  2. Ordered sub-list
  3. And another item.
    You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
    To have a line break without a paragraph, you will need to use two trailing spaces.
    Note that this line is separate, but within the same paragraph.
    (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
  • Unordered list can use asterisks
  • Or minuses
  • Or pluses
  • Paragraph In unordered list
    For example like this.
Common Paragraph with some text.
And more text.
Inline HTML
<p>To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p>
To reboot your computer, press ctrl+alt+del.
<dl>
    <dt>Definition list</dt>
    <dd>Is something people use sometimes.</dd>

    <dt>Markdown in HTML</dt>
    <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
Definition list
Is something people use sometimes.
<dt>Markdown in HTML</dt>
 <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
-
[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[I'm a relative reference to a repository file](https://gcore.jsdelivr.net/gh/theme-volantis/hexo-theme-volantis/LICENSE)

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself]

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://hexo.io
[1]: https://hexo.io/docs/
[link text itself]: https://hexo.io/api/
I'm an inline-style link
I'm an inline-style link with title
I'm a reference-style link
I'm a relative reference to a repository file
You can use numbers for reference-style link definitions
Or leave it empty and use the link text itself
Some text to show that the reference links can follow later.
Images
hover to see the title text:

Inline-style:

![alt text](https://hexo.io/icon/favicon-196x196.png "Logo Title Text 1")

Reference-style:
![alt text][logo]

[logo]: https://hexo.io/icon/favicon-196x196.png "Logo Title Text 2"
hover to see the title text:
Inline-style:
alt text
Reference-style:
alt text
Code and Syntax Highlighting
Inline code has back-ticks around it.
var s = "JavaScript syntax highlighting";
alert(s);
s = "Python syntax highlighting"
print s
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
Tables
|                |ASCII                          |HTML                         |
|----------------|-------------------------------|-----------------------------|
|Single backticks|`'Isn't this fun?'`            |'Isn't this fun?'            |
|Quotes          |`"Isn't this fun?"`            |"Isn't this fun?"            |
|Dashes          |`-- is en-dash, --- is em-dash`|-- is en-dash, --- is em-dash|
ASCIIHTML
Single backticks'Isn't this fun?''Isn't this fun?'
Quotes"Isn't this fun?""Isn't this fun?"
Dashes-- is en-dash, --- is em-dash-- is en-dash, --- is em-dash
Colons can be used to align columns.
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned |  |
| col 2 is      | centered      |    |
| zebra stripes | are neat      |   
TablesAreCool
col 3 isright-aligned
col 2 iscentered
zebra stripesare neat
The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
MarkdownLessPretty
Stillrendersnicely
123
You can find more information about LaTeX mathematical expressions here.
Blockquotes
Blockquotes are very handy in email to emulate reply text.
This line is part of the same quote.
Quote break.
This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.
Horizontal Rule
Three or more...
---

Hyphens

***

Asterisks

___

Underscores
Hyphens
Asterisks
Underscores
Line Breaks
Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
Here's a line for us to start with.
This line is separated from the one above by two newlines, so it will be a separate paragraph.
This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the same paragraph.
This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.
This is a regular paragraph.
Foo
This is another regular paragraph.
Youtube videos
<a href="https://www.youtube.com/watch?feature=player_embedded&v=ARted4RniaU
" target="_blank"><img src="https://img.youtube.com/vi/ARted4RniaU/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Pure markdown version:

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/ARted4RniaU/0.jpg)](https://www.youtube.com/watch?v=ARted4RniaU)
IMAGE ALT TEXT HERE
Pure markdown version:
IMAGE ALT TEXT HERE
本页文档最后更新于：2023年11月3日
Foo
Bar
 
 评论

\ No newline at end of file
+
[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[I'm a relative reference to a repository file](https://gcore.jsdelivr.net/gh/theme-volantis/hexo-theme-volantis/LICENSE)

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself]

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://hexo.io
[1]: https://hexo.io/docs/
[link text itself]: https://hexo.io/api/

I'm an inline-style link

I'm an inline-style link with title

I'm a reference-style link

I'm a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself

Some text to show that the reference links can follow later.

Images

hover to see the title text:

Inline-style:

![alt text](https://hexo.io/icon/favicon-196x196.png "Logo Title Text 1")

Reference-style:
![alt text][logo]

[logo]: https://hexo.io/icon/favicon-196x196.png "Logo Title Text 2"

hover to see the title text:

Inline-style:

alt text

Reference-style:
alt text

Code and Syntax Highlighting

Inline code has back-ticks around it.

var s = "JavaScript syntax highlighting";
alert(s);
s = "Python syntax highlighting"
print s
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.

Tables

|                |ASCII                          |HTML                         |
|----------------|-------------------------------|-----------------------------|
|Single backticks|`'Isn't this fun?'`            |'Isn't this fun?'            |
|Quotes          |`"Isn't this fun?"`            |"Isn't this fun?"            |
|Dashes          |`-- is en-dash, --- is em-dash`|-- is en-dash, --- is em-dash|
ASCIIHTML
Single backticks'Isn't this fun?''Isn't this fun?'
Quotes"Isn't this fun?""Isn't this fun?"
Dashes-- is en-dash, --- is em-dash-- is en-dash, --- is em-dash

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned |  |
| col 2 is      | centered      |    |
| zebra stripes | are neat      |
TablesAreCool
col 3 isright-aligned
col 2 iscentered
zebra stripesare neat

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
MarkdownLessPretty
Stillrendersnicely
123

You can find more information about LaTeX mathematical expressions here.

Blockquotes

Blockquotes are very handy in email to emulate reply text.
This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Horizontal Rule

Three or more...

---

Hyphens

***

Asterisks

___

Underscores

Hyphens

Asterisks

Underscores

Line Breaks

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the same paragraph.

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

This is a regular paragraph.

Foo

This is another regular paragraph.

Youtube videos

<a href="https://www.youtube.com/watch?feature=player_embedded&v=ARted4RniaU
" target="_blank"><img src="https://img.youtube.com/vi/ARted4RniaU/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Pure markdown version:

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/ARted4RniaU/0.jpg)](https://www.youtube.com/watch?v=ARted4RniaU)

IMAGE ALT TEXT HERE

Pure markdown version:

IMAGE ALT TEXT HERE

本页文档最后更新于：2023年11月3日

Foo

Bar

评论

\ No newline at end of file diff --git a/test/no-title/index.html b/test/no-title/index.html index ebd4ae753..6ec3cdbd5 100644 --- a/test/no-title/index.html +++ b/test/no-title/index.html @@ -1 +1 @@ -Volantis
\ No newline at end of file +Volantis
\ No newline at end of file diff --git a/test/tag-plugins/index.html b/test/tag-plugins/index.html index a23409b5b..126426f7f 100644 --- a/test/tag-plugins/index.html +++ b/test/tag-plugins/index.html @@ -1 +1 @@ -Tag Plugins - Volantis

Tag Plugins

发布于：2013年12月25日

This post is used for testing tag plugins. See docs for more info.

Block Quote

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Quote from a book

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Quote from Twitter

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Quote from an article on the web

Every interaction is both precious and an opportunity to delight.

Seth Godin `http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html` Welcome to Island Marketing

Code Block

Normal code block

alert('Hello World!');

With caption

Array.map
array.map(callback[, thisArg])

With caption and URL

.compactUnderscore.js
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]

With marked lines

Line 1,7-8,10 should be marked with different color.

const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Note: Theme's style should support .highlight.line.marked (recommend to use the selection or current line color).

Gist

jsFiddle

Pullquote

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Tag Plugins - Volantis

Tag Plugins

发布于：2013年12月25日

This post is used for testing tag plugins. See docs for more info.

Block Quote

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Quote from a book

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Quote from Twitter

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Quote from an article on the web

Every interaction is both precious and an opportunity to delight.

Seth Godin `http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html` Welcome to Island Marketing

Code Block

Normal code block

alert('Hello World!');

With caption

Array.map
array.map(callback[, thisArg])

With caption and URL

.compactUnderscore.js
.compact([0, 1, false, 2, ‘’, 3]);
=> [1, 2, 3]

With marked lines

Line 1,7-8,10 should be marked with different color.

const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Note: Theme's style should support .highlight.line.marked (recommend to use the selection or current line color).

Pullquote

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git "a/test/\344\270\255\346\226\207\346\270\254\350\251\246/index.html" "b/test/\344\270\255\346\226\207\346\270\254\350\251\246/index.html" index 290a16a83..d4ef7ddec 100644 --- "a/test/\344\270\255\346\226\207\346\270\254\350\251\246/index.html" +++ "b/test/\344\270\255\346\226\207\346\270\254\350\251\246/index.html" @@ -1 +1 @@ -中文測試 - Volantis

中文測試

发布于：2013年12月24日

This is a Chinese test post.

善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。

以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？

就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。

國新故。

工步他始能詩的，裝進分星海演意學值例道……於財型目古香亮自和這乎？化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不？

From 亂數假文產生器 - Chinese Lorem Ipsum

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +中文測試 - Volantis

中文測試

发布于：2013年12月24日

This is a Chinese test post.

善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。

以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？

就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。

國新故。

工步他始能詩的，裝進分星海演意學值例道……於財型目古香亮自和這乎？化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不？

From 亂數假文產生器 - Chinese Lorem Ipsum

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git "a/test/\346\227\245\346\234\254\350\252\236\343\203\206\343\202\271\343\203\210/index.html" "b/test/\346\227\245\346\234\254\350\252\236\343\203\206\343\202\271\343\203\210/index.html" index 7a30e5cbb..53901099c 100644 --- "a/test/\346\227\245\346\234\254\350\252\236\343\203\206\343\202\271\343\203\210/index.html" +++ "b/test/\346\227\245\346\234\254\350\252\236\343\203\206\343\202\271\343\203\210/index.html" @@ -1 +1 @@ -日本語テスト - Volantis

日本語テスト

发布于：2013年12月24日

This is a Japanese test post.

私は昨日ついにその助力家というのの上よりするたなけれ。

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

がたを知っないはずも同時に九月をいよいよたありた。

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +日本語テスト - Volantis

日本語テスト

发布于：2013年12月24日

This is a Japanese test post.

私は昨日ついにその助力家というのの上よりするたなけれ。

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

がたを知っないはずも同時に九月をいよいよたありた。

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v2/advanced-settings/index.html b/v2/advanced-settings/index.html index bed048287..881c62271 100644 --- a/v2/advanced-settings/index.html +++ b/v2/advanced-settings/index.html @@ -1 +1 @@ -进阶设定 - Volantis

进阶设定

发布于：2023年11月3日

建议有一定基础知识的朋友进行尝试。

将主题添加为子模块
git submodule add https://github.com/volantis-x/hexo-theme-volantis themes/volantis

为网站提速

加载速度

  • 尝试安装 hexo-all-minifier 插件来压缩文件。

  • 减少不必要的 js 插件，例如字数统计、动态背景。

  • 查找并解决拖慢速度的资源，以 Chrome 浏览器为例：

    1. 页面中点击右键，选择「检查」。
    2. 在右边的窗口中「Network」选项卡，并勾选「Disable cache」。
    3. 刷新网页，查看加载速度慢的资源。
      3.1. 加载缓慢的图片，建议使用 CDN。
      3.2. 加载缓慢的可以不用的 js 插件，建议舍弃。
      3.3. 加载缓慢却必须使用的 js 插件，建议下载并自己上传至 jsdelivr。

运行速度

  • 访问具有动态特效背景（如雪花、粒子等）的网站时，手机很快会发烫变卡，笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。

  • 强烈推荐安装 hexo-offline 插件，初次加载速度不变，后期切换页面和刷新网页速度越来越快。

  • 推荐安装图片懒加载插件 hexo-lazyload-image（需同时安装 hexo-fs 依赖库）。

优化 SEO

在 front-matter 中，可以设置 keywords、description、robots 和 seo_title。其中 seo_title 仅仅用作网页标题，优先级高于 title。

使用 CDN

对于大部分将博客 deploy 到 GitHub 的用户来说，直接加载本地资源速度比较慢，可以使用 jsdelivr 为开源项目提供的 CDN 服务。

开启方法

blog/_config.yml
use_cdn: true

如果你需要对样式进行 DIY，可以只关闭 style 文件的 CDN。

自定义 CDN

如果你把对应的文件上传到自己的 CDN 服务器，可以把对应的链接改为自己的 CDN 链接。

安装「相关文章」插件

  1. 安装插件

    npm i -S hexo-related-popular-posts

  2. 在需要显示的位置添加 related_posts 例如放在侧边栏：

    blog/themes/volantis/_config.yml
    layout:
      on_page:
        sidebar: [related_posts]

插件的自定义配置方法： hexo-related-popular-posts

分析与统计

默认支持 不蒜子 的访问统计，可以自行添加百度统计和 Google Analytics。

字数和阅读时长

  1. 安装以下插件：
    npm i --save hexo-wordcount
  2. 修改配置文件，将 wordcount 插件打开
    blog/themes/volantis/_config.yml
    plugins:
      ...
      # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
      wordcount: true
  3. 然后修改配置文件，将 wordcount 写入需要显示的 meta 位置：
    blog/themes/volantis/_config.yml
    # 布局
    layout:
      on_list:
        meta: [..., wordcount, ...]
      on_page:
        meta:
          header: [..., wordcount, ...]
          footer: [..., wordcount, ...]

百度统计

blog/_config.yml
baidu_analytics_key: 百度统计的key

Google Analytics

blog/_config.yml
google_analytics_key: Google Analytics Key

CNZZ 统计

请参考 ZYMIN 的这篇教程：《hexo+ejs+material x 添加CNZZ统计代码》

网站运行时间等

请参考 TRHX 的这篇教程：《Hexo 博客主题个性化》

更多 DIY 玩法

详见 @TRHX 的这篇博客：《Hexo 博客主题个性化》

内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +进阶设定 - Volantis

进阶设定

发布于：2023年11月3日

建议有一定基础知识的朋友进行尝试。

将主题添加为子模块
git submodule add https://github.com/volantis-x/hexo-theme-volantis themes/volantis

为网站提速

加载速度

  • 尝试安装 hexo-all-minifier 插件来压缩文件。

  • 减少不必要的 js 插件，例如字数统计、动态背景。

  • 查找并解决拖慢速度的资源，以 Chrome 浏览器为例：

    1. 页面中点击右键，选择「检查」。
    2. 在右边的窗口中「Network」选项卡，并勾选「Disable cache」。
    3. 刷新网页，查看加载速度慢的资源。
      3.1. 加载缓慢的图片，建议使用 CDN。
      3.2. 加载缓慢的可以不用的 js 插件，建议舍弃。
      3.3. 加载缓慢却必须使用的 js 插件，建议下载并自己上传至 jsdelivr。

运行速度

  • 访问具有动态特效背景（如雪花、粒子等）的网站时，手机很快会发烫变卡，笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。

  • 强烈推荐安装 hexo-offline 插件，初次加载速度不变，后期切换页面和刷新网页速度越来越快。

  • 推荐安装图片懒加载插件 hexo-lazyload-image（需同时安装 hexo-fs 依赖库）。

优化 SEO

在 front-matter 中，可以设置 keywords、description、robots 和 seo_title。其中 seo_title 仅仅用作网页标题，优先级高于 title。

使用 CDN

对于大部分将博客 deploy 到 GitHub 的用户来说，直接加载本地资源速度比较慢，可以使用 jsdelivr 为开源项目提供的 CDN 服务。

开启方法

blog/_config.yml
use_cdn: true

如果你需要对样式进行 DIY，可以只关闭 style 文件的 CDN。

自定义 CDN

如果你把对应的文件上传到自己的 CDN 服务器，可以把对应的链接改为自己的 CDN 链接。

安装「相关文章」插件

  1. 安装插件

    npm i -S hexo-related-popular-posts

  2. 在需要显示的位置添加 related_posts 例如放在侧边栏：

    blog/themes/volantis/_config.yml
    layout:
      on_page:
        sidebar: [related_posts]

插件的自定义配置方法： hexo-related-popular-posts

分析与统计

默认支持 不蒜子 的访问统计，可以自行添加百度统计和 Google Analytics。

字数和阅读时长

  1. 安装以下插件：
    npm i --save hexo-wordcount
  2. 修改配置文件，将 wordcount 插件打开
    blog/themes/volantis/_config.yml
    plugins:
      ...
      # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
      wordcount: true
  3. 然后修改配置文件，将 wordcount 写入需要显示的 meta 位置：
    blog/themes/volantis/_config.yml
    # 布局
    layout:
      on_list:
        meta: [..., wordcount, ...]
      on_page:
        meta:
          header: [..., wordcount, ...]
          footer: [..., wordcount, ...]

百度统计

blog/_config.yml
baidu_analytics_key: 百度统计的key

Google Analytics

blog/_config.yml
google_analytics_key: Google Analytics Key

CNZZ 统计

请参考 ZYMIN 的这篇教程：《hexo+ejs+material x 添加CNZZ统计代码》

网站运行时间等

请参考 TRHX 的这篇教程：《Hexo 博客主题个性化》

更多 DIY 玩法

详见 @TRHX 的这篇博客：《Hexo 博客主题个性化》

内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v2/getting-started/index.html b/v2/getting-started/index.html index c1f09f312..172a07045 100644 --- a/v2/getting-started/index.html +++ b/v2/getting-started/index.html @@ -1 +1 @@ -开始使用 - Volantis

开始使用

发布于：2023年11月3日

A Wonderful Theme for Hexo


Volantis，一个高度模块化和可定制化、功能相对完善的 Hexo 博客主题，既可以用作个人博客，也适合用来搭建文档。

这些是使用了本主题的博客： 示例博客

能力要求

自建博客需要一定的相关知识，在开始前，请务必确保：

已掌握 markdown 语法

已阅读 Hexo 官方文档

会使用终端（命令行），会使用 git

会阅读文档、搜索文档

为了更好地使用，还建议掌握以下知识：

规范地使用 GitHub Issues（解决文档中没有的问题）

GitHub Fork、Pull Request 操作（使主题保持更新）

环境要求

如果您从旧版本更新或着其它主题迁移，请确保环境版本不要太低，否则会产生兼容性问题。

Hexo: 4.2
hexo-cli: 3.1
node.js: 12.16 # LTS版
npm: 6.13

下载与安装

在博客路径打开终端，下载安装并应用主题：

curl -s https://volantis.js.org/start | bash

如果您还没有博客，执行这行命令将会自动检测并安装所需环境，初始化博客，然后下载安装并应用主题。

脚本更多使用方法：#hexo.sh

第1/3步：下载主题源码到 themes/ 文件夹

git clone https://github.com/volantis-x/hexo-theme-volantis themes/volantis

第2/3步：修改站点配置文件

blog/_config.yml
theme: volantis

第3/3步：检查并安装依赖

安装 Hexo 搜索的依赖包：
npm i -S hexo-generator-search hexo-generator-json-content
安装 stylus 渲染器：
npm i -S hexo-renderer-stylus

升级小助手

升级前请查看 更新日志

2.6.3 -> 2.6.6

不需要额外处理。

2.6.2 -> 2.6.3
  1. 全局搜索 seotitle 并替换为 seo_title。
  2. group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
  3. group 组件的列表名优先显示文章的 short_title 其次是 title。

许可协议

本主题采用 MIT开源许可协议 ，永久无限制免费使用。

MIT开源许可协议

被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
被授权人可根据程式的需要修改授权条款为适当的内容。
在软件和软件的所有副本中都必须包含版权声明和许可声明。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +开始使用 - Volantis

开始使用

发布于：2023年11月3日

A Wonderful Theme for Hexo


Volantis，一个高度模块化和可定制化、功能相对完善的 Hexo 博客主题，既可以用作个人博客，也适合用来搭建文档。

这些是使用了本主题的博客： 示例博客

能力要求

自建博客需要一定的相关知识，在开始前，请务必确保：

已掌握 markdown 语法

已阅读 Hexo 官方文档

会使用终端（命令行），会使用 git

会阅读文档、搜索文档

为了更好地使用，还建议掌握以下知识：

规范地使用 GitHub Issues（解决文档中没有的问题）

GitHub Fork、Pull Request 操作（使主题保持更新）

环境要求

如果您从旧版本更新或着其它主题迁移，请确保环境版本不要太低，否则会产生兼容性问题。

Hexo: 4.2
hexo-cli: 3.1
node.js: 12.16 # LTS版
npm: 6.13

下载与安装

在博客路径打开终端，下载安装并应用主题：

curl -s https://volantis.js.org/start | bash

如果您还没有博客，执行这行命令将会自动检测并安装所需环境，初始化博客，然后下载安装并应用主题。

脚本更多使用方法：#hexo.sh

第1/3步：下载主题源码到 themes/ 文件夹

git clone https://github.com/volantis-x/hexo-theme-volantis themes/volantis

第2/3步：修改站点配置文件

blog/_config.yml
theme: volantis

第3/3步：检查并安装依赖

安装 Hexo 搜索的依赖包：
npm i -S hexo-generator-search hexo-generator-json-content
安装 stylus 渲染器：
npm i -S hexo-renderer-stylus

升级小助手

升级前请查看 更新日志

2.6.3 -> 2.6.6

不需要额外处理。

2.6.2 -> 2.6.3
  1. 全局搜索 seotitle 并替换为 seo_title。
  2. group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
  3. group 组件的列表名优先显示文章的 short_title 其次是 title。

许可协议

本主题采用 MIT开源许可协议 ，永久无限制免费使用。

MIT开源许可协议

被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
被授权人可根据程式的需要修改授权条款为适当的内容。
在软件和软件的所有副本中都必须包含版权声明和许可声明。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v2/page-settings/index.html b/v2/page-settings/index.html index 88b365846..9858b8582 100644 --- a/v2/page-settings/index.html +++ b/v2/page-settings/index.html @@ -1 +1 @@ -页面配置 - Volantis

页面配置

发布于：2023年11月3日

如无特殊说明，本页面的配置信息写在 页面 文件的 front-matter 中。

布局模板

取值含义
page独立页面
post文章页面
category分类页面
tag标签页面
links友链页面
list列表页面

page & post

post 页面布局几乎与 page 页面相同，但是有以下细微区别：

  • post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 不会。
  • 主题配置中的 article_footer 只作用于 post，如果 page 也要显示，可以在 front-matter 中设置
    meta:
      article_footer: [xxx]

front-matter

front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter

查看全部取值
字段含义值类型默认值
layout布局模版String-
title页面标题String-
seo_title网页标题Stringpage.title
short_title页面标题（在group列表中显示）Stringpage.title
date创建时间Date文件创建时间
updated更新日期Date文件修改时间
link外部文章网址String-
music内部音乐控件[Object]-
robotsrobotsString-
keywords页面关键词String-
description页面描述、摘要String-
cover是否显示封面Booltrue
meta文章或页面的meta信息Bool, Arraytheme.layout.*.meta
sidebar页面侧边栏Bool, Arraytheme.layout.*.sidebar
body页面主体元素Arraytheme.layout.on_page.body
mathjax是否渲染公式Bool, Stringfalse
thumbnail缩略图Stringfalse
icons图标Array[]

layout:post 时特有的字段：

字段含义值类型默认值
author文章作者[Object]config.author
categories分类String, Array-
tags标签String, Array-
toc是否生成目录Booltrue
top是否置顶Boolfalse

author

字段含义值类型默认值
name作者名Stringconfig.author
avatar头像Stringconfig.avatar
url链接Stringconfig.url

music

字段是否必须值类型
server是netease, tencent, kugou, xiami, baidu
type是song, playlist, album, search, artist
id是song id / playlist id / album id / search keyword

独立页面

除了归档页面是自动生成的，其它独立页面都需要手动创建 md 文件。

归档页面

归档页面是自动生成的，并且初始化的时候已经生成，路径如下：

blog/_config.yml
# Directory
archive_dir: archives

关于页面

Create file if not exists: source/about/index.md
---
layout: page
title: 关于
meta:
  header: []
  footer: []
sidebar: []
valine:
  placeholder: 有什么想对我说的呢？
---

下面写关于自己的内容

分类页面

Create file if not exists: source/categories/index.md
---
layout: category
index: true
title: 所有分类
---

标签页面

Create file if not exists: source/tags/index.md
---
layout: tag
index: true
title: 所有标签
---

列表页面

Create file if not exists: source/mylist/index.md
---
layout: list
group: mylist
index: true
---

结果就是筛选出所有文章中 front-matter 部分含有 group: mylist 的文章。

友链页面

Create file if not exists: source/friends/index.md
---
layout: links     # 必须
title: 我的朋友们   # 可选，这是友链页的标题
links:
  - group: 分组1
    icon: fas fa-user-tie
    desc: 这个分组的描述
    items:
    - name:     # 博客名
      avatar:   # 头像链接
      url:      # 博客链接
      backgroundColor: '#3E74C9' # 卡片背景颜色
      textColor: '#fff'  # 卡片文字颜色
      tags: [标签1, 标签2]    # 标签
      desc: 描述文字
  - group: 分组2
    icon: fas fa-user-tie
    desc: 这个分组的描述
    items:
    - name:     # 博客名
      avatar:   # 头像链接
      url:      # 博客链接
      backgroundColor: '#3E74C9' # 卡片背景颜色
      textColor: '#fff'  # 卡片文字颜色
      tags: [标签1, 标签2]    # 标签
      desc: 描述文字
---

这里写友链上方的内容。

<!-- more -->

这里可以写友链页面下方的文字备注，例如自己的友链规范、示例等。

姓名、头像、链接是必填项，其它选填。

404页面

Create file if not exists: source/404.md
---
layout: page
title: 404 Not Found
body: [article, comments]
meta:
  header: []
  footer: []
sidebar: []
valine:
  path: /404.html
  placeholder: 请留言告诉我您要访问哪个页面找不到了
---
{% p center huge, 404 %}
{% p center bold, 很抱歉，您访问的页面不存在 %}
{% p center small, 可能是输入地址有误或该地址已被删除 %}

页面元素排列

默认是文章+评论：

front-matter
---
body: [article, comments]
---

如果你想把相关文章卡片显示在评论前，可以这样写：

front-matter
---
body: [article, related_posts, comments]
---

如果想全局修改，在主题配置文件中的 layout.on_page.body 中设置。

文章属性

文章置顶

在 front-matter 中设置以下值：

front-matter
top: true

如果想自定义置顶标签的文字，可以直接设置为字符串，例如：

front-matter
top: 近期更新

文章分类

多个分类有两种关系，一种是层级（等同于文件夹），一种是并列（等同于标签）。

多级分类：

front-matter
---
categories: [分类A, 分类B]
---

或者

front-matter
---
categories:
  - 分类A
  - 分类B
---

并列分类

front-matter
categories:
  - [分类A]
  - [分类B]

多级+并列分类

front-matter
categories:
  - [分类A, 分类B]
  - [分类C, 分类D]

文章摘要

在文章中插入 <!-- more -->，前面的部分即为摘要。

某篇文章源码
---
title: xxx
date: 2020-02-21
---

这是摘要

<!-- more -->

这是正文

注意： <!-- more --> 前后一定要有空行，不然可能导致显示错位。

设置文章作者

由于支持多个作者在一个站点发布文章，所以可以设置单独一篇文章的作者：

front-matter
---
author:
  name: 作者
  avatar: https://img.vim-cn.com/a1/d53c11fb5d4fd69529bc805d385fe818feb3f6.png
  url: https://baidu.com
---

显示迷你音乐播放器

标题右边显示迷你音乐播放器，支持的字段有：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 中关闭。

front-matter
---
top_meta: false
bottom_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 来设置图标的颜色

meta 区域显示外链按钮

例如当前文档页面的设置：

front-matter
---
meta:
  footer: [btns]
btns:
  repo: https://github.com/volantis-x/hexo-theme-volantis
  bug: https://github.com/volantis-x/hexo-theme-volantis/issues/
  doubt: https://github.com/volantis-x/hexo-theme-volantis/issues/
  idea: https://github.com/volantis-x/hexo-theme-volantis/issues/
---

按钮的颜色、图标、标题在主题配置文件中设置。

是否要显示封面

如果某个页面需要封面，可以这样写：

front-matter
---
cover: true
---

引入外部文章

利用 link，搭配自定义的文章作者信息，你可以在文章列表中显示外部文章或者网址，例如：

front-matter
---
layout:     post
date:       2017-07-05
title:      [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
  - Hexo
author:
  name: xaoxuu
  avatar: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  url: https://xaoxuu.com
link: https://xaoxuu.com/blog/2017-07-05-hexo-blog/
---

![](https://img.vim-cn.com/d9/a9af7dc49fc0af8ca3e6dd2450a2f7095a87db.png)

显示侧边栏

通过自由设置边栏卡片来删减对应页面的冗余信息，提高有价值的信息在页面中的权重。

如果某个页面不需要侧边栏，可以这样写：

front-matter
---
sidebar: []
---

某个页面想指定显示某几个侧边栏，就这样写:

front-matter
---
sidebar: [grid, toc, tags] # 放置任何你想要显示的侧边栏部件
---

关闭评论

可以

front-matter
---
comments: false
---

也可以

front-matter
---
body: [article]
---

只显示留言板

如果你想创建一个只有留言板的页面

front-matter
---
body: [comments]
---

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +页面配置 - Volantis

页面配置

发布于：2023年11月3日

如无特殊说明，本页面的配置信息写在 页面 文件的 front-matter 中。

布局模板

取值含义
page独立页面
post文章页面
category分类页面
tag标签页面
links友链页面
list列表页面

page & post

post 页面布局几乎与 page 页面相同，但是有以下细微区别：

  • post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 不会。
  • 主题配置中的 article_footer 只作用于 post，如果 page 也要显示，可以在 front-matter 中设置
    meta:
      article_footer: [xxx]

front-matter

front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter

查看全部取值
字段含义值类型默认值
layout布局模版String-
title页面标题String-
seo_title网页标题Stringpage.title
short_title页面标题（在group列表中显示）Stringpage.title
date创建时间Date文件创建时间
updated更新日期Date文件修改时间
link外部文章网址String-
music内部音乐控件[Object]-
robotsrobotsString-
keywords页面关键词String-
description页面描述、摘要String-
cover是否显示封面Booltrue
meta文章或页面的meta信息Bool, Arraytheme.layout.*.meta
sidebar页面侧边栏Bool, Arraytheme.layout.*.sidebar
body页面主体元素Arraytheme.layout.on_page.body
mathjax是否渲染公式Bool, Stringfalse
thumbnail缩略图Stringfalse
icons图标Array[]

layout:post 时特有的字段：

字段含义值类型默认值
author文章作者[Object]config.author
categories分类String, Array-
tags标签String, Array-
toc是否生成目录Booltrue
top是否置顶Boolfalse

author

字段含义值类型默认值
name作者名Stringconfig.author
avatar头像Stringconfig.avatar
url链接Stringconfig.url

music

字段是否必须值类型
server是netease, tencent, kugou, xiami, baidu
type是song, playlist, album, search, artist
id是song id / playlist id / album id / search keyword

独立页面

除了归档页面是自动生成的，其它独立页面都需要手动创建 md 文件。

归档页面

归档页面是自动生成的，并且初始化的时候已经生成，路径如下：

blog/_config.yml
# Directory
archive_dir: archives

关于页面

Create file if not exists: source/about/index.md
---
layout: page
title: 关于
meta:
  header: []
  footer: []
sidebar: []
valine:
  placeholder: 有什么想对我说的呢？
---

下面写关于自己的内容

分类页面

Create file if not exists: source/categories/index.md
---
layout: category
index: true
title: 所有分类
---

标签页面

Create file if not exists: source/tags/index.md
---
layout: tag
index: true
title: 所有标签
---

列表页面

Create file if not exists: source/mylist/index.md
---
layout: list
group: mylist
index: true
---

结果就是筛选出所有文章中 front-matter 部分含有 group: mylist 的文章。

友链页面

Create file if not exists: source/friends/index.md
---
layout: links     # 必须
title: 我的朋友们   # 可选，这是友链页的标题
links:
  - group: 分组1
    icon: fas fa-user-tie
    desc: 这个分组的描述
    items:
    - name:     # 博客名
      avatar:   # 头像链接
      url:      # 博客链接
      backgroundColor: '#3E74C9' # 卡片背景颜色
      textColor: '#fff'  # 卡片文字颜色
      tags: [标签1, 标签2]    # 标签
      desc: 描述文字
  - group: 分组2
    icon: fas fa-user-tie
    desc: 这个分组的描述
    items:
    - name:     # 博客名
      avatar:   # 头像链接
      url:      # 博客链接
      backgroundColor: '#3E74C9' # 卡片背景颜色
      textColor: '#fff'  # 卡片文字颜色
      tags: [标签1, 标签2]    # 标签
      desc: 描述文字
---

这里写友链上方的内容。

<!-- more -->

这里可以写友链页面下方的文字备注，例如自己的友链规范、示例等。

姓名、头像、链接是必填项，其它选填。

404页面

Create file if not exists: source/404.md
---
layout: page
title: 404 Not Found
body: [article, comments]
meta:
  header: []
  footer: []
sidebar: []
valine:
  path: /404.html
  placeholder: 请留言告诉我您要访问哪个页面找不到了
---
{% p center huge, 404 %}
{% p center bold, 很抱歉，您访问的页面不存在 %}
{% p center small, 可能是输入地址有误或该地址已被删除 %}

页面元素排列

默认是文章+评论：

front-matter
---
body: [article, comments]
---

如果你想把相关文章卡片显示在评论前，可以这样写：

front-matter
---
body: [article, related_posts, comments]
---

如果想全局修改，在主题配置文件中的 layout.on_page.body 中设置。

文章属性

文章置顶

在 front-matter 中设置以下值：

front-matter
top: true

如果想自定义置顶标签的文字，可以直接设置为字符串，例如：

front-matter
top: 近期更新

文章分类

多个分类有两种关系，一种是层级（等同于文件夹），一种是并列（等同于标签）。

多级分类：

front-matter
---
categories: [分类A, 分类B]
---

或者

front-matter
---
categories:
  - 分类A
  - 分类B
---

并列分类

front-matter
categories:
  - [分类A]
  - [分类B]

多级+并列分类

front-matter
categories:
  - [分类A, 分类B]
  - [分类C, 分类D]

文章摘要

在文章中插入 <!-- more -->，前面的部分即为摘要。

某篇文章源码
---
title: xxx
date: 2020-02-21
---

这是摘要

<!-- more -->

这是正文

注意： <!-- more --> 前后一定要有空行，不然可能导致显示错位。

设置文章作者

由于支持多个作者在一个站点发布文章，所以可以设置单独一篇文章的作者：

front-matter
---
author:
  name: 作者
  avatar: https://img.vim-cn.com/a1/d53c11fb5d4fd69529bc805d385fe818feb3f6.png
  url: https://baidu.com
---

显示迷你音乐播放器

标题右边显示迷你音乐播放器，支持的字段有：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 中关闭。

front-matter
---
top_meta: false
bottom_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 来设置图标的颜色

meta 区域显示外链按钮

例如当前文档页面的设置：

front-matter
---
meta:
  footer: [btns]
btns:
  repo: https://github.com/volantis-x/hexo-theme-volantis
  bug: https://github.com/volantis-x/hexo-theme-volantis/issues/
  doubt: https://github.com/volantis-x/hexo-theme-volantis/issues/
  idea: https://github.com/volantis-x/hexo-theme-volantis/issues/
---

按钮的颜色、图标、标题在主题配置文件中设置。

是否要显示封面

如果某个页面需要封面，可以这样写：

front-matter
---
cover: true
---

引入外部文章

利用 link，搭配自定义的文章作者信息，你可以在文章列表中显示外部文章或者网址，例如：

front-matter
---
layout:     post
date:       2017-07-05
title:      [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
  - Hexo
author:
  name: xaoxuu
  avatar: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  url: https://xaoxuu.com
link: https://xaoxuu.com/blog/2017-07-05-hexo-blog/
---

![](https://img.vim-cn.com/d9/a9af7dc49fc0af8ca3e6dd2450a2f7095a87db.png)

显示侧边栏

通过自由设置边栏卡片来删减对应页面的冗余信息，提高有价值的信息在页面中的权重。

如果某个页面不需要侧边栏，可以这样写：

front-matter
---
sidebar: []
---

某个页面想指定显示某几个侧边栏，就这样写:

front-matter
---
sidebar: [grid, toc, tags] # 放置任何你想要显示的侧边栏部件
---

关闭评论

可以

front-matter
---
comments: false
---

也可以

front-matter
---
body: [article]
---

只显示留言板

如果你想创建一个只有留言板的页面

front-matter
---
body: [comments]
---

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v2/site-settings/index.html b/v2/site-settings/index.html index 026aaa728..db835d1d9 100644 --- a/v2/site-settings/index.html +++ b/v2/site-settings/index.html @@ -1 +1 @@ -站点配置 - Volantis

站点配置

发布于：2023年11月3日

如无特殊说明，本页面的配置信息写在 博客根目录 的 _config.yml 文件中。

网站标题

blog/_config.yml
# 网站标题
title: my blog

网站图标

blog/_config.yml
# 网站图标，更多尺寸等图标请使用import方式批量导入
favicon: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.ico
blog/_config.yml
import:
  meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    - <meta name="theme-color" content="#ffffff">
  link:
    - <link rel="apple-touch-icon" sizes="180x180" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">

Import

可以在无需修改主题文件的情况下在 head 和 body 中添加各种标签。meta 和 link 对应 head 中的 <meta> 和 <link> 标签。script 可以在 body 末尾导入 js 文件。

blog/_config.yml
import:
  meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    - <meta name="theme-color" content="#ffffff">
  link:
    - <link rel="apple-touch-icon" sizes="180x180" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">
  script:

更多配置

更多请见 Hexo 官方文档：#Hexo配置

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +站点配置 - Volantis

站点配置

发布于：2023年11月3日

如无特殊说明，本页面的配置信息写在 博客根目录 的 _config.yml 文件中。

网站标题

blog/_config.yml
# 网站标题
title: my blog

网站图标

blog/_config.yml
# 网站图标，更多尺寸等图标请使用import方式批量导入
favicon: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.ico
blog/_config.yml
import:
  meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    - <meta name="theme-color" content="#ffffff">
  link:
    - <link rel="apple-touch-icon" sizes="180x180" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">

Import

可以在无需修改主题文件的情况下在 head 和 body 中添加各种标签。meta 和 link 对应 head 中的 <meta> 和 <link> 标签。script 可以在 body 末尾导入 js 文件。

blog/_config.yml
import:
  meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    - <meta name="theme-color" content="#ffffff">
  link:
    - <link rel="apple-touch-icon" sizes="180x180" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">
  script:

更多配置

更多请见 Hexo 官方文档：#Hexo配置

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v2/tag-plugins/index.html b/v2/tag-plugins/index.html index 62faf0288..24e324bf1 100644 --- a/v2/tag-plugins/index.html +++ b/v2/tag-plugins/index.html @@ -1 +1 @@ -标签插件 - Volantis

标签插件

发布于：2023年11月3日

主题原生支持丰富多彩的标签。

文本和段落

Span & P

请将您的 Volantis 升级至 2.5 版本以上使用。

行内文本

{% span 样式参数, 文本内容 %}

独立段落

{% p 样式参数, 文本内容 %}

样式参数位置可以写颜色、大小和对齐方向，多个样式参数用空格隔开。

字体

logo, code

颜色

red, yellow, green, cyan, blue, gray

大小

small, h4, h3, h2, h1, large, huge, ultra

对齐方向

left, center, right

彩色文字

example.md:
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。

超大文字

example.md:
文档「开始」页面中的标题部分就是超大文字。

{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}

彩色文字

在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大文字

文档「开始」页面中的标题部分就是超大文字。

A Wonderful Theme for Hexo

Note & NoteBlock

NoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。请将您的 Volantis 升级至 2.3 版本以上使用。

Note

{% note 样式参数, 文本内容 %}

NoteBlock

{% noteblock 样式参数 %}

文本段落

{% endnoteblock %}

样式参数位置可以写图标和颜色，多个样式参数用空格隔开。

图标

彩色的
quote, info, warning, done/success, error/danger
灰色的，也可以指定颜色
radiation, bug, idea, link, paperclip, todo, msg, guide, download, up, undo

颜色

指定颜色
clear, light, gray, red, yellow, green, cyan, blue

Note

example.md:
{% note, 为简单的一句话提供的简便写法。 %}

{% note success, 支持同样丰富的参数。 %}

NoteBlock

example.md:
可以在区块中放置一些复杂的结构，支持嵌套。

{% noteblock quote %}

{% p subtitle, 小标题 %}

Windows 10不是為所有人設計,而是為每個人設計

{% p subtitle, 嵌套测试 %}
{% noteblock %}
请坐和放宽，我正在帮你搞定一切...
{% endnoteblock %}

{% p subtitle, Folding 测试 %}
{% folding 点击查看更多 %}

{% note warning, 不要说我们没有警告过你 %}
{% noteblock bug red %}
我们都有不顺利的时候
{% endnoteblock %}

{% endfolding %}
{% endnoteblock %}

Note

为简单的一句话提供的简便写法。

支持同样丰富的参数。

NoteBlock

可以在区块中放置一些复杂的结构，支持嵌套。

小标题

Windows 10不是為所有人設計,而是為每個人設計

嵌套测试

请坐和放宽，我正在帮你搞定一切...

Folding 测试

点击查看更多

不要说我们没有警告过你

我们都有不顺利的时候

Checkbox & Radio

请将您的 Volantis 升级至 2.6 版本以上使用。

{% checkbox 样式参数（可选）, 文本（支持简单md） %}

颜色

red, yellow, green, cyan, blue

样式

plus, minus, times

选中状态

checked

Checkbox

example.md:
{% 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, 叉 %}

Radio

example.md:
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

Checkbox

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

Radio

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

按钮和菜单

基础按钮

请将您的 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 %}

不设置任何参数的 按钮 适合融入段落中。

regular 按钮适合独立于段落之外：

示例博客

large 按钮更具有强调作用，建议搭配 center 使用：

开始使用

富文本按钮

请将您的 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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.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://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

如果需要显示类似「团队成员」之类的一组含有头像的链接：

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu

或者含有图标的按钮：

下载源码 查看文档

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

心率管家

专业版

 心率管家

免费版

请将您的 Volantis 升级至 2.4 版本以上使用。

容器

Tab

此插件移植自 NexT #tabs 。请将您的 Volantis 升级至 2.1 版本以上使用。

{% tabs tab-id %}

<!-- tab tab-name -->

![](https://i.loli.net/2020/03/18/f5PQlWisvm9zbgK.jpg)

<!-- endtab -->

<!-- tab tab-name -->

这里面写内容，支持的语法格式有限，请尽量<u>不要</u>写太过复杂的东西。

<!-- endtab -->

{% endtabs %}

tab-id

必填，如果一个页面有多个 tabs 时，tab-id 不能重复。

tab-name

标签文本。

Folding

请将您的 Volantis 升级至 2.3 版本以上使用。

{% folding 参数（可选）, 标题 %}

![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

参数位置可以填写颜色和状态，多个参数用空格隔开。

颜色

blue, cyan, green, yellow, red

状态

状态填写 open 代表默认打开。

{% folding 查看图片测试 %}

![](https://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}
查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试
{% folding green, 查看代码测试 %}

查看代码测试

{% endfolding %}
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

多媒体

包括图片、音频、视频。

Image

Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。请将您的 Volantis 升级至 2.6 版本以上使用。

{% image 链接, width=宽度（可选）, alt=描述（可选） %}

图片宽度

阿拉伯数字 + px

example:
width=300px

图片描述

纯文本，不能包含引号。

example.md:
添加描述：

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, alt=每天下课回宿舍的路，承载了太多记忆。 %}

指定宽度：

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, width=300px %}

指定宽度并添加描述：

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, width=300px, alt=每天下课回宿舍的路，承载了太多记忆。 %}

添加描述：

每天下课回宿舍的路，承载了太多记忆。
每天下课回宿舍的路，承载了太多记忆。

指定宽度：

image

指定宽度并添加描述：

每天下课回宿舍的路，承载了太多记忆。
每天下课回宿舍的路，承载了太多记忆。

Fancybox

Fancybox 标签是一种针对一组图片应用场景的标签。请将您的 Volantis 升级至 2.2 版本以上使用。

{% fancybox 参数, 列数 %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
{% endfancybox %}

对齐方向

left, center, right

缩放

stretch

列数

逗号后面直接写列数，支持 2 ～ 8 列。设定列列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。

一行一个图片

example.md:
{% fancybox %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfancybox %}

一行多个图片（不换行）

example.md:
{% fancybox %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg)
{% endfancybox %}

多行多个图片（每行2～8个图片）

example.md:
{% fancybox stretch, 4 %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
{% endfancybox %}
图片描述
一行多个图片（不换行）
图片描述

图片描述

图片描述
多行多个图片（每行2～8个图片）







Audio

请将您的 Volantis 升级至 2.4 版本以上使用。

example.md:
{% audio 音频链接 %}
example.md:
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

Video

请将您的 Volantis 升级至 2.3 版本以上使用。

单个视频

example.md:
{% video 视频链接 %}

多个视频

example.md:
{% videos 对齐方向, 列数 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% endvideos %}

对齐方向

left, center, right

列数

逗号后面直接写列数，支持 1 ～ 4 列。

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 %}

100%宽度

50%宽度

25%宽度

APlayer

主题对 APlayer 插件的样式进行了兼容。安装插件：

npm i -S hexo-tag-aplayer

官方文档： hexo-tag-aplayer

公式

MathJax公式

默认是不渲染的，如果文章内有公式，需要在 front-matter 中设置开启。

example.md:
---
title: 渲染公式（MathJax）
date: 2020-02-23
mathjax: true # false: 不渲染, true: 渲染, internal: 只在文章内部渲染，文章列表中不渲染
---

$$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上使用KaTeX》。

Hexo 标签

引用块

引用书上的句子

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

代码块

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

指定语言

[rectangle setX: 10 y: 10 width: 20 height: 20];
example.md:
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

附加说明

Array.map
array.map(callback[, thisArg])
example.md:
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

行标、高亮

1
2
3
4
5
6
7
8
n=eval(input())
if n==0:
   print("Hello World")
elif n>0:
   print("He\nll\no \nWo\nrl\nd")
else:
   for c in "Hello World":
   print(c)
example.md:
{% codeblock lang:python line_number:true mark:3,5,8 %}
n=eval(input())
if n==0:
   print("Hello World")
elif n>0:
   print("He\nll\no \nWo\nrl\nd")
else:
   for c in "Hello World":
   print(c)
{% endcodeblock %}

Pull Quote

在文章中插入 Pull quote

example.md:
{% pullquote [class] %}
content
{% endpullquote %}

jsFiddle

在文章中嵌入 jsFiddle

example.md:
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

Gist

在文章中嵌入 Gist，注意：在国内无法加载。

example.md:
{% gist gist_id [filename] %}

iframe

在文章中插入 iframe

example.md:
{% iframe url [width] [height] %}

Image

在文章中插入指定大小的图片。

example.md:
{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

在文章中插入链接，并自动给外部链接添加 target="_blank" 属性。

example.md:
{% link text url [external] [title] %}

Include Code

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的，取决于你在配置文件中 code_dir 的配置。

example.md:
{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}
示例

嵌入 test.js 文件全文

{% include_code lang:javascript test.js %}

只嵌入第 3 行

{% include_code lang:javascript from:3 to:3 test.js %}

嵌入第 5 行至第 8 行

{% include_code lang:javascript from:5 to:8 test.js %}

嵌入第 5 行至文件结束

{% include_code lang:javascript from:5 test.js %}

嵌入第 1 行至第 8 行

{% include_code lang:javascript to:8 test.js %}

引用文章

引用其他文章的链接。

{% post_path filename %}
{% post_link filename [title] [escape] %}
示例

引用这篇文章：主题更名为「Volantis」

example.md:
引用这篇文章：{% post_link news/2020-02-22 %}

文章摘要和截断

在文章中使用 <!-- more -->，那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。

更多请见Hexo官方文档：#标签插件

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +标签插件 - Volantis

标签插件

发布于：2023年11月3日

主题原生支持丰富多彩的标签。

文本和段落

Span & P

请将您的 Volantis 升级至 2.5 版本以上使用。

行内文本

{% span 样式参数, 文本内容 %}

独立段落

{% p 样式参数, 文本内容 %}

样式参数位置可以写颜色、大小和对齐方向，多个样式参数用空格隔开。

字体

logo, code

颜色

red, yellow, green, cyan, blue, gray

大小

small, h4, h3, h2, h1, large, huge, ultra

对齐方向

left, center, right

彩色文字

example.md:
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。

超大文字

example.md:
文档「开始」页面中的标题部分就是超大文字。

{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}

彩色文字

在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大文字

文档「开始」页面中的标题部分就是超大文字。

A Wonderful Theme for Hexo

Note & NoteBlock

NoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。请将您的 Volantis 升级至 2.3 版本以上使用。

Note

{% note 样式参数, 文本内容 %}

NoteBlock

{% noteblock 样式参数 %}

文本段落

{% endnoteblock %}

样式参数位置可以写图标和颜色，多个样式参数用空格隔开。

图标

彩色的
quote, info, warning, done/success, error/danger
灰色的，也可以指定颜色
radiation, bug, idea, link, paperclip, todo, msg, guide, download, up, undo

颜色

指定颜色
clear, light, gray, red, yellow, green, cyan, blue

Note

example.md:
{% note, 为简单的一句话提供的简便写法。 %}

{% note success, 支持同样丰富的参数。 %}

NoteBlock

example.md:
可以在区块中放置一些复杂的结构，支持嵌套。

{% noteblock quote %}

{% p subtitle, 小标题 %}

Windows 10不是為所有人設計,而是為每個人設計

{% p subtitle, 嵌套测试 %}
{% noteblock %}
请坐和放宽，我正在帮你搞定一切...
{% endnoteblock %}

{% p subtitle, Folding 测试 %}
{% folding 点击查看更多 %}

{% note warning, 不要说我们没有警告过你 %}
{% noteblock bug red %}
我们都有不顺利的时候
{% endnoteblock %}

{% endfolding %}
{% endnoteblock %}

Note

为简单的一句话提供的简便写法。

支持同样丰富的参数。

NoteBlock

可以在区块中放置一些复杂的结构，支持嵌套。

小标题

Windows 10不是為所有人設計,而是為每個人設計

嵌套测试

请坐和放宽，我正在帮你搞定一切...

Folding 测试

点击查看更多

不要说我们没有警告过你

我们都有不顺利的时候

Checkbox & Radio

请将您的 Volantis 升级至 2.6 版本以上使用。

{% checkbox 样式参数（可选）, 文本（支持简单md） %}

颜色

red, yellow, green, cyan, blue

样式

plus, minus, times

选中状态

checked

Checkbox

example.md:
{% 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, 叉 %}

Radio

example.md:
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

Checkbox

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

Radio

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

按钮和菜单

基础按钮

请将您的 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 %}

不设置任何参数的 按钮 适合融入段落中。

regular 按钮适合独立于段落之外：

示例博客

large 按钮更具有强调作用，建议搭配 center 使用：

开始使用

富文本按钮

请将您的 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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.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://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

如果需要显示类似「团队成员」之类的一组含有头像的链接：

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu

或者含有图标的按钮：

下载源码 查看文档

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

心率管家

专业版

 心率管家

免费版

请将您的 Volantis 升级至 2.4 版本以上使用。

容器

Tab

此插件移植自 NexT #tabs 。请将您的 Volantis 升级至 2.1 版本以上使用。

{% tabs tab-id %}

<!-- tab tab-name -->

![](https://i.loli.net/2020/03/18/f5PQlWisvm9zbgK.jpg)

<!-- endtab -->

<!-- tab tab-name -->

这里面写内容，支持的语法格式有限，请尽量<u>不要</u>写太过复杂的东西。

<!-- endtab -->

{% endtabs %}

tab-id

必填，如果一个页面有多个 tabs 时，tab-id 不能重复。

tab-name

标签文本。

Folding

请将您的 Volantis 升级至 2.3 版本以上使用。

{% folding 参数（可选）, 标题 %}

![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

参数位置可以填写颜色和状态，多个参数用空格隔开。

颜色

blue, cyan, green, yellow, red

状态

状态填写 open 代表默认打开。

{% folding 查看图片测试 %}

![](https://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}
查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试
{% folding green, 查看代码测试 %}

查看代码测试

{% endfolding %}
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

多媒体

包括图片、音频、视频。

Image

Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。请将您的 Volantis 升级至 2.6 版本以上使用。

{% image 链接, width=宽度（可选）, alt=描述（可选） %}

图片宽度

阿拉伯数字 + px

example:
width=300px

图片描述

纯文本，不能包含引号。

example.md:
添加描述：

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, alt=每天下课回宿舍的路，承载了太多记忆。 %}

指定宽度：

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, width=300px %}

指定宽度并添加描述：

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, width=300px, alt=每天下课回宿舍的路，承载了太多记忆。 %}

添加描述：

每天下课回宿舍的路，承载了太多记忆。
每天下课回宿舍的路，承载了太多记忆。

指定宽度：

image

指定宽度并添加描述：

每天下课回宿舍的路，承载了太多记忆。
每天下课回宿舍的路，承载了太多记忆。

Fancybox

Fancybox 标签是一种针对一组图片应用场景的标签。请将您的 Volantis 升级至 2.2 版本以上使用。

{% fancybox 参数, 列数 %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
{% endfancybox %}

对齐方向

left, center, right

缩放

stretch

列数

逗号后面直接写列数，支持 2 ～ 8 列。设定列列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。

一行一个图片

example.md:
{% fancybox %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfancybox %}

一行多个图片（不换行）

example.md:
{% fancybox %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg)
{% endfancybox %}

多行多个图片（每行2～8个图片）

example.md:
{% fancybox stretch, 4 %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
{% endfancybox %}
图片描述
一行多个图片（不换行）
图片描述

图片描述

图片描述
多行多个图片（每行2～8个图片）







Audio

请将您的 Volantis 升级至 2.4 版本以上使用。

example.md:
{% audio 音频链接 %}
example.md:
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

Video

请将您的 Volantis 升级至 2.3 版本以上使用。

单个视频

example.md:
{% video 视频链接 %}

多个视频

example.md:
{% videos 对齐方向, 列数 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% endvideos %}

对齐方向

left, center, right

列数

逗号后面直接写列数，支持 1 ～ 4 列。

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 %}

100%宽度

50%宽度

25%宽度

APlayer

主题对 APlayer 插件的样式进行了兼容。安装插件：

npm i -S hexo-tag-aplayer

官方文档： hexo-tag-aplayer

公式

MathJax公式

默认是不渲染的，如果文章内有公式，需要在 front-matter 中设置开启。

example.md:
---
title: 渲染公式（MathJax）
date: 2020-02-23
mathjax: true # false: 不渲染, true: 渲染, internal: 只在文章内部渲染，文章列表中不渲染
---

$$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上使用KaTeX》。

Hexo 标签

引用块

引用书上的句子

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

代码块

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

指定语言

[rectangle setX: 10 y: 10 width: 20 height: 20];
example.md:
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

附加说明

Array.map
array.map(callback[, thisArg])
example.md:
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

行标、高亮

1
2
3
4
5
6
7
8
n=eval(input())
if n==0:
   print("Hello World")
elif n>0:
   print("He\nll\no \nWo\nrl\nd")
else:
   for c in "Hello World":
   print(c)
example.md:
{% codeblock lang:python line_number:true mark:3,5,8 %}
n=eval(input())
if n==0:
   print("Hello World")
elif n>0:
   print("He\nll\no \nWo\nrl\nd")
else:
   for c in "Hello World":
   print(c)
{% endcodeblock %}

Pull Quote

在文章中插入 Pull quote

example.md:
{% pullquote [class] %}
content
{% endpullquote %}

jsFiddle

在文章中嵌入 jsFiddle

example.md:
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

Gist

在文章中嵌入 Gist，注意：在国内无法加载。

example.md:
{% gist gist_id [filename] %}

iframe

在文章中插入 iframe

example.md:
{% iframe url [width] [height] %}

Image

在文章中插入指定大小的图片。

example.md:
{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

在文章中插入链接，并自动给外部链接添加 target="_blank" 属性。

example.md:
{% link text url [external] [title] %}

Include Code

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的，取决于你在配置文件中 code_dir 的配置。

example.md:
{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}
示例

嵌入 test.js 文件全文

{% include_code lang:javascript test.js %}

只嵌入第 3 行

{% include_code lang:javascript from:3 to:3 test.js %}

嵌入第 5 行至第 8 行

{% include_code lang:javascript from:5 to:8 test.js %}

嵌入第 5 行至文件结束

{% include_code lang:javascript from:5 test.js %}

嵌入第 1 行至第 8 行

{% include_code lang:javascript to:8 test.js %}

引用文章

引用其他文章的链接。

{% post_path filename %}
{% post_link filename [title] [escape] %}
示例

引用这篇文章：主题更名为「Volantis」

example.md:
引用这篇文章：{% post_link news/2020-02-22 %}

文章摘要和截断

在文章中使用 <!-- more -->，那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。

更多请见Hexo官方文档：#标签插件

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v2/theme-settings/index.html b/v2/theme-settings/index.html index 15c801333..1ec7d41e5 100644 --- a/v2/theme-settings/index.html +++ b/v2/theme-settings/index.html @@ -1 +1 @@ -主题配置 - Volantis

主题配置

发布于：2023年11月3日

如无特殊说明，本页面的配置信息写在 主题 的 config.yml 文件中。

实用小技巧

所有需要写在主题配置文件中的配置都可以写在站点配置文件的 theme_config: 中
详见 Hexo 官方文档 #覆盖主题配置
也可以直接查看本站源码中站点配置文件的写法：_config.yml

主题样式

您可以在主题配置文件中设定一些简单的样式，在开始前，确保没有使用 CDN 服务，否则修改不会生效。

最大布局宽度

blog/themes/volantis/_config.yml
style:
  ...
  max_width: 1080px # Sum of body width and sidebar width

网页所呈现的内容的最大宽度，即 body 和 sidebar 的宽度之和。

导航栏样式

您可以设置导航栏的高度以及视觉特效，视觉特效目前可选的有：

  • shadow：卡片阴影。
  • floatable：当鼠标移动到容器内时，呈现出浮起来的效果。
  • blur：背景模糊效果（毛玻璃），当浏览器不支持时显示为不透明。
blog/themes/volantis/_config.yml
style:
  ...
  navbar:
    height: 64px
    effect: [shadow, blur] # [shadow, floatable, blur]

滚动条样式

blog/themes/volantis/_config.yml
style:
  ...
  scrollbar:
    size: 4px
    border: 2px
    color: '#2196f3'
    hover: '#ff5722'

侧边栏样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。

blog/themes/volantis/_config.yml
style:
  ...
  sidebar:
    effect: [shadow] # [shadow, floatable, blur]

正文区域样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。

blog/themes/volantis/_config.yml
style:
  ...
  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
    note: # style for default note: {% note text %}
      icon: '\f054'
      color: ''

布局间距

您可以设置几种标题的布局间距 h2/h3/h4、段落间距 line、区块内部的段落间距 inline。

blog/themes/volantis/_config.yml
style:
  ...
  gap:
    h2: 48px # Spacing above H2 (only px unit)
    h3: 32px # Spacing above H3 (only px unit)
    h4: 16px # Spacing above H4 (only px unit)
    paragraph: 1rem # Paragraph spacing between paragraphs
    row: .5rem # Paragraph spacing between other elements

自定义字体

您可以自定义正文和代码字体。

blog/themes/volantis/_config.yml
style:
  ...
  fontfamily:
    logofont:
      fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: 'Varela Round'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf
      weight: normal
      style: normal
    bodyfont:
      fontfamily: 'UbuntuMono, "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: 'UbuntuMono'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf
      weight: normal
      style: normal
    codefont:
      fontfamily: 'Menlo, Monaco'
      name: 'Monaco'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf
      weight: normal
      style: normal

颜色样式

blog/themes/volantis/_config.yml
style:
  ...
  color:
    site: '#21232F' # Website background color
    card: '#444' # Card background color
    text: '#fff' # The color of the text on the card.
    theme: '#ff9800' # Main color
    link: '#1BCDFC' # Link color
    hover: '#ff5722' # Link highlight color
    inner: '#333' # Text color inside the button
    block: '#555' # Block color
    inlinecode: yellow # Inline code color
    codeblock: '#555' # Codeblock color
    p: '#ccc' # Paragraph color

设置封面

目前主题提供两种封面方案，全屏封面适用于项目文档，半屏封面适用于个人博客。您可以修改参数决定在任何页面是否显示。

默认显示设置

blog/themes/volantis/_config.yml
cover:
  ...
  display:
    home: true
    archive: false
    others: false # can be written in front-matter 'cover: true'

由于主页、归档是hexo自动生成的，您需要在主题配置文件中设置是否显示封面，而其它页面则可以在 front-matter 中通过设置 cover: true/false 来决定显示封面或者不显示封面。

设置导航栏

导航栏分为 logo、menu、search 三个区域设置，其中 logo 区域如果设置了图片，则不能显示图标和标题， menu 区域的设置可以写在一个单独的文件中。

blog/themes/volantis/_config.yml
navbar:
  logo: # choose [img] or [icon + title]
    img:
    icon:
    title:
  menu:
    # The following can be written in `blog/source/_data/menu.yml`
    - name: 博客
      icon: fas fa-rss
      url: /
    - name: 分类
      icon: fas fa-folder-open
      url: categories/
    - name: 标签
      icon: fas fa-tags
      url: tags/
    - name: 归档
      icon: fas fa-archive
      url: archives/
    - name: 友链
      icon: fas fa-link
      url: friends/
    - name: 关于
      icon: fas fa-info-circle
      url: about/
  search: 搜索   # Search bar placeholder

使用数据文件

建议新建一个文件，专门存放导航栏菜单配置，文件的路径为：

blog/source/_data/menu.yml

文件的内容为：

blog/source/_data/menu.yml
- name: 博客
  icon: fas fa-rss
  url: /
...

菜单嵌套

导航栏菜单支持嵌套，嵌套的属性名为 rows ，写法示例：

blog/source/_data/menu.yml
...
- name: 更多
  icon: fas 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: fas fa-clock
  url: /
  rows:
    - name: 热门文章
      icon: fas 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/

这个示例的实际效果： https://xaoxuu.com

播放器

在子菜单中，新增一个 icon: fas fa-compact-disc 的“菜单”就会被渲染成一个 APlayer 播放器。

- name: 背景音乐
  icon: fas fa-compact-disc

模块化布局

您可以自由决定每个页面是否显示侧边栏，侧边栏显示什么小部件，正文区域显示什么卡片，文章卡片显示什么 meta 信息。

layout:
  # The following can be written in `blog/source/_data/layout.yml`
  # 文章列表（主页、自定义的列表）布局
  on_list:
    # 列表中每一篇文章的meta信息
    meta: [title, author, date, category, top]
    # 列表类页面的侧边栏
    sidebar: [blogger, category, tagcloud, qrcode]
  # 页面布局
  on_page:
    # 文章页面主体元素，你也可以在页面的Front-matter中设置
    body: [article, comments]
    # 默认的meta信息，文章中没有配置则按照这里的配置来显示，设置为false则不显示
    # 其中，title只在header中有效，music和thumbnail无需在这里设置，文章中有则显示
    # 如果tags放置在meta.header中，那么在post列表中不显示（因为卡片下方已经有了）
    meta:
      header: [title, author, category, date, top]
      footer: [updated, tags, btns, share]
    # 文章页面的侧边栏
    sidebar: [qrcode, toc]
  # 文章布局，参数继承自 on_page
  on_post:
    # 文章页脚，自动在每一篇文章末尾添加
    article_footer: [copyright, donate]
  # 其他的页面布局暂时等于 on_list

其中 meta 部分的取值自 meta 库， 其余部分取值自 widget 库， （ body 除了可以从 widget 库中取值外，还可以选择 article 和 comments ）。

请别着急，具体的库配置将在下文详细讲解。

meta 库

meta 即文章的元数据，描述文章的作者、发布时间、更新时间等等信息，Volantis 不替您决定，显示什么图标、如何描述都可以自定义。

查看所有相关配置
blog/themes/volantis/_config.yml
meta:
  # 文章标题
  title: # 暂无配置
  # 默认文章作者（可在front-matter中覆盖）
  author:
    avatar: https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png
    name: Mr. X
    url: https://xaoxuu.com
  # 文章创建日期
  date:
    icon: fas fa-edit
    title: '发布于：'
    format: 'll' # 日期格式 http://momentjs.com/docs/
  # 文章更新日期
  updated:
    icon: fas fa-save
    title: '更新于：'
    format: 'll' # 日期格式 http://momentjs.com/docs/
  # 文章分类
  category:
    icon: fas fa-folder-open
  # 文章置顶
  top:
    icon: fas fa-angle-double-up
  # 文章浏览计数
  counter:
    icon: fas fa-eye
  # 文章字数和阅读时长
  wordcount:
    icon_wordcount: fas fa-keyboard
    icon_duration: fas fa-hourglass-half
  # 文章标签
  tags:
    icon: fas fa-hashtag
  # 分享
  share:
    - id: qq
      img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png
    - id: qzone
      img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png
    - id: weibo
      img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png
    # - id: qrcode # 当id为qrcode时需要安装插件  npm i -S hexo-helper-qrcode
    #   img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png
  # 链接
  btns:
    edit:
      icon: fas fa-edit
      title: 在GitHub上编辑此页
      color: '#888'
    repo: # 源码链接
      icon: fas fa-file-code
      title: 源码
      color: '#508EF2'
    bug: # BUG反馈链接
      icon: fas fa-bug
      title: BUG
      color: '#FE5F58'
    doubt: # 疑问链接
      icon: fas fa-question-circle
      title: 疑问
      color: '#FFBD2B'
    idea: # 建议链接
      icon: fas fa-lightbulb
      title: 建议
      color: '#3DC550'
    faq: # FAQ链接
      icon: fas fa-comments
      title: FAQ
      color: '#29B1C9'
    feedback: # 反馈链接
      icon: fas fa-comment-dots
      title: 反馈
      color: '#1BCDFC'

widget 库

widget 即小部件，大部分小部件都可以放置在侧边栏，一部分已经为正文区域显示做了优化，还有一部分只可以放置在文章页脚部分。与 meta 库不同的是：除了现有的 widget ，您可以很轻易地创建自己的 widget ，然后放在需要的地方。此外，您还可以将 widget 写在单独的文件中。

查看所有相关配置
blog/themes/volantis/_config.yml
widget:
  # The following can be written in `blog/source/_data/widget.yml`
  # ---------------------------------------
  # blogger info widget
  blogger:
    class: blogger
    display: [desktop] # [desktop, mobile]
    avatar: https://gcore.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
  # ---------------------------------------
  # 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] # [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'
  # ---------------------------------------
  # related posts widget
  related_posts:
    class: related_posts # npm i -S hexo-related-popular-posts
    display: [desktop, mobile] # [desktop, mobile]
    header:
      icon: fas fa-bookmark
      title: 相关文章
    max_count: 5
  # ---------------------------------------
  # copyright widget (valid only in articles)
  copyright:
    class: copyright
    display: [desktop, mobile] # [desktop, mobile]
    blockquote: true
    permalink: '本文永久链接是：'
    content:
      - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
      - permalink
  # ---------------------------------------
  # qrcode widget
  donate:
    class: qrcode
    display: [desktop, mobile] # [desktop, mobile]
    height: 64px  # Automatic height if not set
    fancybox: true
    images:
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
  # You can add your own widget here or 'blog/source/_data/widget.yml'
  # class: text, list, grid, qrcode, page, ... see more at https://volantis.js.org/

每一个小部件都有 class 和 display，前者代表这个小部件是什么，后者代表这个小部件在什么桌面和移动平台中是否显示，如果在移动平台显示，由于屏幕宽度有限，侧边栏的小部件则会被移动到正文区域下方，因此部分侧边栏小部件便失去意义，建议设置为仅桌面端显示。

小部件名:
  class: 小部件类别
  display: [小部件在桌面端显示, 小部件在移动设备显示]

博主信息部件

blog/themes/volantis/_config.yml
blogger:
  class: blogger
  display: [desktop] # [desktop, mobile]
  avatar: https://gcore.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/themes/volantis/_config.yml
toc:
  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/themes/volantis/_config.yml
category:
  class: category
  display: [desktop] # [desktop, mobile]
  header:
    icon: fas fa-folder-open
    title: 文章分类
    url: /blog/categories/

这个部件可以直接显示所有文章分类，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。

标签云部件

blog/themes/volantis/_config.yml
tagcloud:
  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/themes/volantis/_config.yml
related_posts:
  class: related_posts # npm i -S hexo-related-popular-posts
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fas fa-bookmark
    title: 相关文章
  max_count: 5

这个小部件建议放置在文章页脚，要使用这个部件，您需要安装插件：

npm i -S hexo-related-popular-posts

值得注意的是，开启了这个功能之后，每次修改文章内容包括 front-matter 之后，都需要重新 hexo s。

文章版权部件

blog/themes/volantis/_config.yml
copyright:
  class: copyright
  display: [desktop, mobile] # [desktop, mobile]
  blockquote: true
  permalink: '本文永久链接是：'
  content:
    - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
    - permalink

这个部件只可以放置在文章页脚。

二维码部件

blog/themes/volantis/_config.yml
donate:
  class: qrcode
  display: [desktop, mobile] # [desktop, mobile]
  height: 64px  # Automatic height if not set
  fancybox: true
  images:
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png

您可以放置在文章页脚用于展示打赏图片，也可以放置在侧边栏。

通用文本部件

blog/themes/volantis/_config.yml
repos:
  class: text
  display: [desktop] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: 点个赞吧
    url: https://github.com/xaoxuu/
  content:
    - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)'

您可以创建用于展示任何文本内容的文本部件。

通用列表部件

blog/themes/volantis/_config.yml
wiki-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/themes/volantis/_config.yml
references:
  class: references # is subclass of list
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fas fa-quote-left
    title: 参考资料

在文章的 front-matter 中设置：

front-matter
references:
  - name: Apple Developer Documentation
    url: https://developer.apple.com/documentation/

组索引

这个部件的布局继承自 list 部件，用于展示文章所属的分组的文章列表。请将您的 Volantis 升级至 2.5 版本以上使用。

blog/themes/volantis/_config.yml
group-1:
  class: group
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fab fa-apple
    title: Developer
    url: /wiki/ios/

在文章的 front-matter 中设置：

front-matter
group: group-1
order: 16
sidebar: [group-1, toc]

「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章，顺序按照 order 从小到大排列。

效果见： https://xaoxuu.com/wiki/git/

通用网格部件

blog/themes/volantis/_config.yml
feedback:
  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/themes/volantis/_config.yml
test:
  class: page
  display: [desktop, mobile]
  pid: haha
  content: excerpt # excerpt, more, content

您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容，可选 excerpt，more，content 分别对应文章的摘要、摘要后面的内容、全文。

部件库文件

部件库中的所有部件都可以写在部件库文件中，您需要创建一个文件在以下路径：

blog/source/_data/widget.yml

文件内容示例：widget.yml

设置网站页脚

您通过 layout 可以自由布局网站页脚内容 aplayer, social, license, info, copyright。

blog/themes/volantis/_config.yml
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/themes/volantis/_config.yml
footer:
  layout: [..., br, hello, ...]
  ...
  # You can add your own property here. (Support markdown, for example: br: '<br>')
  br: '<br>'
  hello: '[Hello World](/)'

SEO

blog/themes/volantis/_config.yml
seo:
  # 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

这部分一般不需要修改。

插件库

Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭，无需进行设置。

幻灯片背景

blog/themes/volantis/_config.yml
plugins:
  ...
  backstretch:
    enable: true
    js: https://unpkg.com/jquery-backstretch@2.1.18/jquery.backstretch.min.js
    position: cover       # cover: sticky on the cover.   fixed: Fixed as background for the site.
    duration: 20000       # 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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg
      ...

幻灯片背景图片显示的位置可以选择粘贴在封面上，跟随封面一起滑动，也可以选择固定作为网页背景图片。

highlight.js

blog/themes/volantis/_config.yml
plugins:
  ...
  highlightjs:
    js: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js
    css: https://unpkg.com/highlight.js@9.18.1/styles/solarized-light.css

如果需要使用 highlight.js 进行语法高亮，请将站点配置文件中的 highlight.enable 设置为 false 否则不会加载插件。您可以在 94 种 语法高亮主题 中挑选喜爱的主题，然后替换上面的 css 链接。

如果您使用 highlight.js 请确保没有使用 hexo 官方的 codeblock 标签，否则会报错。

经测试，使用 highlight.js 的情况下，部分容器内的代码可能仍然会被渲染甚至报错。

APlayer 音乐播放器

blog/themes/volantis/_config.yml
plugins:
  ...
  aplayer:
    enable: true
    js:
      - https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
      - https://unpkg.com/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: 340px # list max height
    list_folded: true

APlayer播放器只可以在中国大陆地区使用。相关文档： APlayer | MetingJS

评论系统

blog/themes/volantis/_config.yml
comments:
  title: <i class='fas fa-comments'></i> 评论
  subtitle:
  service: valine # valine, disqus, gitalk, livere
  valine:
    appId: # your appId
    appKey: # your appKey
    js: https://unpkg.com/valine@1.4/dist/Valine.min.js
    path: # All pages use the same path (share the same comments data)
    meta: nick,mail,link # valine comment header info
    requiredFields: ['nick','mail']
    enableQQ: true # Unstable avatar link
    placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
    avatar: robohash # gravatar style https://valine.js.org/avatar
    pageSize: 10 # comment list page size
    lang: zh-cn
    highlight: true
    visitor: true
    mathJax: false
  disqus:
    shortname:
  gitalk:
    clientID:
    clientSecret:
    repo:
    owner:
    admin: # []
  livere:
    uid:

Disqus

官网： https://disqus.com/

blog/themes/volantis/_config.yml
comments:
  ...
  disqus:
    shortname:

Gitalk

官网： https://github.com/gitalk/gitalk

blog/themes/volantis/_config.yml
comments:
  ...
  gitalk:
    clientID:
    clientSecret:
    repo:
    owner:
    admin: # []

clientID 和 clientSecret 的获取方法可自行搜索教程，这里仅简单描述一下步骤：

  1. 点击 GitHub -> Settings https://github.com/settings/profile
  2. 点击 Developer settings https://github.com/settings/developers
  3. 点击 New OAuth App https://github.com/settings/applications/new
  4. 填写信息：
    Application name 随便填，我的是：xaoxuu.com
    Homepage URL 和 Authorization callback URL 都写你的网址，我的是：https://xaoxuu.com

可以通过设置 gitalk.id 实现多个页面共用一个评论框。

front-matter
---
gitalk:
  id: /wiki/volantis/
---

Valine

官网： https://valine.js.org

blog/themes/volantis/_config.yml
comments:
  ...
  valine:
    appId: # your appId
    appKey: # your appKey
    js: https://unpkg.com/valine@1.4/dist/Valine.min.js
    path: # All pages use the same path (share the same comments data)
    meta: nick,mail,link # valine comment header info
    requiredFields: ['nick','mail']
    enableQQ: true # Unstable avatar link
    placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
    avatar: robohash # gravatar style https://valine.js.org/avatar
    pageSize: 10 # comment list page size
    lang: zh-cn
    highlight: true
    visitor: true
    mathJax: false

其中，placeholder 支持在 front-matter 中设置。

front-matter
---
valine:
  placeholder: 你觉得xxx怎么样呢？
---

也可以通过设置 valine.path 实现多个页面共用一个评论框。

front-matter
---
valine:
  path: /
---

MiniValine

官网： https://github.com/MiniValine/MiniValine/

blog/themes/volantis/_config.yml
comments:
  ...
  minivaline:
    appId: # Your leancloud application appid
    appKey: # Your leancloud application appkey
    placeholder: Write a Comment # Comment box placeholder
    adminEmailMd5: # The MD5 of Admin Email to show Admin Flag.
    math: true # Support MathJax.
    md: true # Support Markdown.
    # MiniValine's display language depends on user's browser or system environment
    # If you want everyone visiting your site to see a uniform language, you can set a force language value
    # Available values: en  | zh-CN | (and many more)
    # More i18n info: https://github.com/MiniValine/minivaline-i18n
    lang:

Livere

官网： https://www.livere.com/

blog/themes/volantis/_config.yml
comments:
  ...
  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">
...

开启搜索功能

blog/themes/volantis/_config.yml
search:
  enable: true
  service: hexo  # hexo, google, algolia, azure, baidu
  js: https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2.6.4/js/search.js
  google:
    apiKey:
    engineId:
  algolia:
    applicationID:
    apiKey:
    indexName:
  azure:
    serviceName:
    indexName:
    queryKey:
  baidu:
    apiId:

默认配置为 Hexo 搜索，但是需要安装插件才能使用：

npm i -S hexo-generator-search hexo-generator-json-content

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +主题配置 - Volantis

主题配置

发布于：2023年11月3日

如无特殊说明，本页面的配置信息写在 主题 的 config.yml 文件中。

实用小技巧

所有需要写在主题配置文件中的配置都可以写在站点配置文件的 theme_config: 中
详见 Hexo 官方文档 #覆盖主题配置
也可以直接查看本站源码中站点配置文件的写法：_config.yml

主题样式

您可以在主题配置文件中设定一些简单的样式，在开始前，确保没有使用 CDN 服务，否则修改不会生效。

最大布局宽度

blog/themes/volantis/_config.yml
style:
  ...
  max_width: 1080px # Sum of body width and sidebar width

网页所呈现的内容的最大宽度，即 body 和 sidebar 的宽度之和。

导航栏样式

您可以设置导航栏的高度以及视觉特效，视觉特效目前可选的有：

  • shadow：卡片阴影。
  • floatable：当鼠标移动到容器内时，呈现出浮起来的效果。
  • blur：背景模糊效果（毛玻璃），当浏览器不支持时显示为不透明。
blog/themes/volantis/_config.yml
style:
  ...
  navbar:
    height: 64px
    effect: [shadow, blur] # [shadow, floatable, blur]

滚动条样式

blog/themes/volantis/_config.yml
style:
  ...
  scrollbar:
    size: 4px
    border: 2px
    color: '#2196f3'
    hover: '#ff5722'

侧边栏样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。

blog/themes/volantis/_config.yml
style:
  ...
  sidebar:
    effect: [shadow] # [shadow, floatable, blur]

正文区域样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。

blog/themes/volantis/_config.yml
style:
  ...
  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
    note: # style for default note: {% note text %}
      icon: '\f054'
      color: ''

布局间距

您可以设置几种标题的布局间距 h2/h3/h4、段落间距 line、区块内部的段落间距 inline。

blog/themes/volantis/_config.yml
style:
  ...
  gap:
    h2: 48px # Spacing above H2 (only px unit)
    h3: 32px # Spacing above H3 (only px unit)
    h4: 16px # Spacing above H4 (only px unit)
    paragraph: 1rem # Paragraph spacing between paragraphs
    row: .5rem # Paragraph spacing between other elements

自定义字体

您可以自定义正文和代码字体。

blog/themes/volantis/_config.yml
style:
  ...
  fontfamily:
    logofont:
      fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: 'Varela Round'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf
      weight: normal
      style: normal
    bodyfont:
      fontfamily: 'UbuntuMono, "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: 'UbuntuMono'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf
      weight: normal
      style: normal
    codefont:
      fontfamily: 'Menlo, Monaco'
      name: 'Monaco'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf
      weight: normal
      style: normal

颜色样式

blog/themes/volantis/_config.yml
style:
  ...
  color:
    site: '#21232F' # Website background color
    card: '#444' # Card background color
    text: '#fff' # The color of the text on the card.
    theme: '#ff9800' # Main color
    link: '#1BCDFC' # Link color
    hover: '#ff5722' # Link highlight color
    inner: '#333' # Text color inside the button
    block: '#555' # Block color
    inlinecode: yellow # Inline code color
    codeblock: '#555' # Codeblock color
    p: '#ccc' # Paragraph color

设置封面

目前主题提供两种封面方案，全屏封面适用于项目文档，半屏封面适用于个人博客。您可以修改参数决定在任何页面是否显示。

默认显示设置

blog/themes/volantis/_config.yml
cover:
  ...
  display:
    home: true
    archive: false
    others: false # can be written in front-matter 'cover: true'

由于主页、归档是hexo自动生成的，您需要在主题配置文件中设置是否显示封面，而其它页面则可以在 front-matter 中通过设置 cover: true/false 来决定显示封面或者不显示封面。

设置导航栏

导航栏分为 logo、menu、search 三个区域设置，其中 logo 区域如果设置了图片，则不能显示图标和标题， menu 区域的设置可以写在一个单独的文件中。

blog/themes/volantis/_config.yml
navbar:
  logo: # choose [img] or [icon + title]
    img:
    icon:
    title:
  menu:
    # The following can be written in `blog/source/_data/menu.yml`
    - name: 博客
      icon: fas fa-rss
      url: /
    - name: 分类
      icon: fas fa-folder-open
      url: categories/
    - name: 标签
      icon: fas fa-tags
      url: tags/
    - name: 归档
      icon: fas fa-archive
      url: archives/
    - name: 友链
      icon: fas fa-link
      url: friends/
    - name: 关于
      icon: fas fa-info-circle
      url: about/
  search: 搜索   # Search bar placeholder

使用数据文件

建议新建一个文件，专门存放导航栏菜单配置，文件的路径为：

blog/source/_data/menu.yml

文件的内容为：

blog/source/_data/menu.yml
- name: 博客
  icon: fas fa-rss
  url: /
...

菜单嵌套

导航栏菜单支持嵌套，嵌套的属性名为 rows ，写法示例：

blog/source/_data/menu.yml
...
- name: 更多
  icon: fas 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: fas fa-clock
  url: /
  rows:
    - name: 热门文章
      icon: fas 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/

这个示例的实际效果： https://xaoxuu.com

播放器

在子菜单中，新增一个 icon: fas fa-compact-disc 的“菜单”就会被渲染成一个 APlayer 播放器。

- name: 背景音乐
  icon: fas fa-compact-disc

模块化布局

您可以自由决定每个页面是否显示侧边栏，侧边栏显示什么小部件，正文区域显示什么卡片，文章卡片显示什么 meta 信息。

layout:
  # The following can be written in `blog/source/_data/layout.yml`
  # 文章列表（主页、自定义的列表）布局
  on_list:
    # 列表中每一篇文章的meta信息
    meta: [title, author, date, category, top]
    # 列表类页面的侧边栏
    sidebar: [blogger, category, tagcloud, qrcode]
  # 页面布局
  on_page:
    # 文章页面主体元素，你也可以在页面的Front-matter中设置
    body: [article, comments]
    # 默认的meta信息，文章中没有配置则按照这里的配置来显示，设置为false则不显示
    # 其中，title只在header中有效，music和thumbnail无需在这里设置，文章中有则显示
    # 如果tags放置在meta.header中，那么在post列表中不显示（因为卡片下方已经有了）
    meta:
      header: [title, author, category, date, top]
      footer: [updated, tags, btns, share]
    # 文章页面的侧边栏
    sidebar: [qrcode, toc]
  # 文章布局，参数继承自 on_page
  on_post:
    # 文章页脚，自动在每一篇文章末尾添加
    article_footer: [copyright, donate]
  # 其他的页面布局暂时等于 on_list

其中 meta 部分的取值自 meta 库， 其余部分取值自 widget 库， （ body 除了可以从 widget 库中取值外，还可以选择 article 和 comments ）。

请别着急，具体的库配置将在下文详细讲解。

meta 库

meta 即文章的元数据，描述文章的作者、发布时间、更新时间等等信息，Volantis 不替您决定，显示什么图标、如何描述都可以自定义。

查看所有相关配置
blog/themes/volantis/_config.yml
meta:
  # 文章标题
  title: # 暂无配置
  # 默认文章作者（可在front-matter中覆盖）
  author:
    avatar: https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png
    name: Mr. X
    url: https://xaoxuu.com
  # 文章创建日期
  date:
    icon: fas fa-edit
    title: '发布于：'
    format: 'll' # 日期格式 http://momentjs.com/docs/
  # 文章更新日期
  updated:
    icon: fas fa-save
    title: '更新于：'
    format: 'll' # 日期格式 http://momentjs.com/docs/
  # 文章分类
  category:
    icon: fas fa-folder-open
  # 文章置顶
  top:
    icon: fas fa-angle-double-up
  # 文章浏览计数
  counter:
    icon: fas fa-eye
  # 文章字数和阅读时长
  wordcount:
    icon_wordcount: fas fa-keyboard
    icon_duration: fas fa-hourglass-half
  # 文章标签
  tags:
    icon: fas fa-hashtag
  # 分享
  share:
    - id: qq
      img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png
    - id: qzone
      img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png
    - id: weibo
      img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png
    # - id: qrcode # 当id为qrcode时需要安装插件  npm i -S hexo-helper-qrcode
    #   img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png
  # 链接
  btns:
    edit:
      icon: fas fa-edit
      title: 在GitHub上编辑此页
      color: '#888'
    repo: # 源码链接
      icon: fas fa-file-code
      title: 源码
      color: '#508EF2'
    bug: # BUG反馈链接
      icon: fas fa-bug
      title: BUG
      color: '#FE5F58'
    doubt: # 疑问链接
      icon: fas fa-question-circle
      title: 疑问
      color: '#FFBD2B'
    idea: # 建议链接
      icon: fas fa-lightbulb
      title: 建议
      color: '#3DC550'
    faq: # FAQ链接
      icon: fas fa-comments
      title: FAQ
      color: '#29B1C9'
    feedback: # 反馈链接
      icon: fas fa-comment-dots
      title: 反馈
      color: '#1BCDFC'

widget 库

widget 即小部件，大部分小部件都可以放置在侧边栏，一部分已经为正文区域显示做了优化，还有一部分只可以放置在文章页脚部分。与 meta 库不同的是：除了现有的 widget ，您可以很轻易地创建自己的 widget ，然后放在需要的地方。此外，您还可以将 widget 写在单独的文件中。

查看所有相关配置
blog/themes/volantis/_config.yml
widget:
  # The following can be written in `blog/source/_data/widget.yml`
  # ---------------------------------------
  # blogger info widget
  blogger:
    class: blogger
    display: [desktop] # [desktop, mobile]
    avatar: https://gcore.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
  # ---------------------------------------
  # 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] # [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'
  # ---------------------------------------
  # related posts widget
  related_posts:
    class: related_posts # npm i -S hexo-related-popular-posts
    display: [desktop, mobile] # [desktop, mobile]
    header:
      icon: fas fa-bookmark
      title: 相关文章
    max_count: 5
  # ---------------------------------------
  # copyright widget (valid only in articles)
  copyright:
    class: copyright
    display: [desktop, mobile] # [desktop, mobile]
    blockquote: true
    permalink: '本文永久链接是：'
    content:
      - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
      - permalink
  # ---------------------------------------
  # qrcode widget
  donate:
    class: qrcode
    display: [desktop, mobile] # [desktop, mobile]
    height: 64px  # Automatic height if not set
    fancybox: true
    images:
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
  # You can add your own widget here or 'blog/source/_data/widget.yml'
  # class: text, list, grid, qrcode, page, ... see more at https://volantis.js.org/

每一个小部件都有 class 和 display，前者代表这个小部件是什么，后者代表这个小部件在什么桌面和移动平台中是否显示，如果在移动平台显示，由于屏幕宽度有限，侧边栏的小部件则会被移动到正文区域下方，因此部分侧边栏小部件便失去意义，建议设置为仅桌面端显示。

小部件名:
  class: 小部件类别
  display: [小部件在桌面端显示, 小部件在移动设备显示]

博主信息部件

blog/themes/volantis/_config.yml
blogger:
  class: blogger
  display: [desktop] # [desktop, mobile]
  avatar: https://gcore.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/themes/volantis/_config.yml
toc:
  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/themes/volantis/_config.yml
category:
  class: category
  display: [desktop] # [desktop, mobile]
  header:
    icon: fas fa-folder-open
    title: 文章分类
    url: /blog/categories/

这个部件可以直接显示所有文章分类，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。

标签云部件

blog/themes/volantis/_config.yml
tagcloud:
  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/themes/volantis/_config.yml
related_posts:
  class: related_posts # npm i -S hexo-related-popular-posts
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fas fa-bookmark
    title: 相关文章
  max_count: 5

这个小部件建议放置在文章页脚，要使用这个部件，您需要安装插件：

npm i -S hexo-related-popular-posts

值得注意的是，开启了这个功能之后，每次修改文章内容包括 front-matter 之后，都需要重新 hexo s。

文章版权部件

blog/themes/volantis/_config.yml
copyright:
  class: copyright
  display: [desktop, mobile] # [desktop, mobile]
  blockquote: true
  permalink: '本文永久链接是：'
  content:
    - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
    - permalink

这个部件只可以放置在文章页脚。

二维码部件

blog/themes/volantis/_config.yml
donate:
  class: qrcode
  display: [desktop, mobile] # [desktop, mobile]
  height: 64px  # Automatic height if not set
  fancybox: true
  images:
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png

您可以放置在文章页脚用于展示打赏图片，也可以放置在侧边栏。

通用文本部件

blog/themes/volantis/_config.yml
repos:
  class: text
  display: [desktop] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: 点个赞吧
    url: https://github.com/xaoxuu/
  content:
    - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)'

您可以创建用于展示任何文本内容的文本部件。

通用列表部件

blog/themes/volantis/_config.yml
wiki-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/themes/volantis/_config.yml
references:
  class: references # is subclass of list
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fas fa-quote-left
    title: 参考资料

在文章的 front-matter 中设置：

front-matter
references:
  - name: Apple Developer Documentation
    url: https://developer.apple.com/documentation/

组索引

这个部件的布局继承自 list 部件，用于展示文章所属的分组的文章列表。请将您的 Volantis 升级至 2.5 版本以上使用。

blog/themes/volantis/_config.yml
group-1:
  class: group
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fab fa-apple
    title: Developer
    url: /wiki/ios/

在文章的 front-matter 中设置：

front-matter
group: group-1
order: 16
sidebar: [group-1, toc]

「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章，顺序按照 order 从小到大排列。

效果见： https://xaoxuu.com/wiki/git/

通用网格部件

blog/themes/volantis/_config.yml
feedback:
  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/themes/volantis/_config.yml
test:
  class: page
  display: [desktop, mobile]
  pid: haha
  content: excerpt # excerpt, more, content

您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容，可选 excerpt，more，content 分别对应文章的摘要、摘要后面的内容、全文。

部件库文件

部件库中的所有部件都可以写在部件库文件中，您需要创建一个文件在以下路径：

blog/source/_data/widget.yml

文件内容示例：widget.yml

设置网站页脚

您通过 layout 可以自由布局网站页脚内容 aplayer, social, license, info, copyright。

blog/themes/volantis/_config.yml
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/themes/volantis/_config.yml
footer:
  layout: [..., br, hello, ...]
  ...
  # You can add your own property here. (Support markdown, for example: br: '<br>')
  br: '<br>'
  hello: '[Hello World](/)'

SEO

blog/themes/volantis/_config.yml
seo:
  # 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

这部分一般不需要修改。

插件库

Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭，无需进行设置。

幻灯片背景

blog/themes/volantis/_config.yml
plugins:
  ...
  backstretch:
    enable: true
    js: https://unpkg.com/jquery-backstretch@2.1.18/jquery.backstretch.min.js
    position: cover       # cover: sticky on the cover.   fixed: Fixed as background for the site.
    duration: 20000       # 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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg
      ...

幻灯片背景图片显示的位置可以选择粘贴在封面上，跟随封面一起滑动，也可以选择固定作为网页背景图片。

highlight.js

blog/themes/volantis/_config.yml
plugins:
  ...
  highlightjs:
    js: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js
    css: https://unpkg.com/highlight.js@9.18.1/styles/solarized-light.css

如果需要使用 highlight.js 进行语法高亮，请将站点配置文件中的 highlight.enable 设置为 false 否则不会加载插件。您可以在 94 种 语法高亮主题 中挑选喜爱的主题，然后替换上面的 css 链接。

如果您使用 highlight.js 请确保没有使用 hexo 官方的 codeblock 标签，否则会报错。

经测试，使用 highlight.js 的情况下，部分容器内的代码可能仍然会被渲染甚至报错。

APlayer 音乐播放器

blog/themes/volantis/_config.yml
plugins:
  ...
  aplayer:
    enable: true
    js:
      - https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
      - https://unpkg.com/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: 340px # list max height
    list_folded: true

APlayer播放器只可以在中国大陆地区使用。相关文档： APlayer | MetingJS

评论系统

blog/themes/volantis/_config.yml
comments:
  title: <i class='fas fa-comments'></i> 评论
  subtitle:
  service: valine # valine, disqus, gitalk, livere
  valine:
    appId: # your appId
    appKey: # your appKey
    js: https://unpkg.com/valine@1.4/dist/Valine.min.js
    path: # All pages use the same path (share the same comments data)
    meta: nick,mail,link # valine comment header info
    requiredFields: ['nick','mail']
    enableQQ: true # Unstable avatar link
    placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
    avatar: robohash # gravatar style https://valine.js.org/avatar
    pageSize: 10 # comment list page size
    lang: zh-cn
    highlight: true
    visitor: true
    mathJax: false
  disqus:
    shortname:
  gitalk:
    clientID:
    clientSecret:
    repo:
    owner:
    admin: # []
  livere:
    uid:

Disqus

官网： https://disqus.com/

blog/themes/volantis/_config.yml
comments:
  ...
  disqus:
    shortname:

Gitalk

官网： https://github.com/gitalk/gitalk

blog/themes/volantis/_config.yml
comments:
  ...
  gitalk:
    clientID:
    clientSecret:
    repo:
    owner:
    admin: # []

clientID 和 clientSecret 的获取方法可自行搜索教程，这里仅简单描述一下步骤：

  1. 点击 GitHub -> Settings https://github.com/settings/profile
  2. 点击 Developer settings https://github.com/settings/developers
  3. 点击 New OAuth App https://github.com/settings/applications/new
  4. 填写信息：
    Application name 随便填，我的是：xaoxuu.com
    Homepage URL 和 Authorization callback URL 都写你的网址，我的是：https://xaoxuu.com

可以通过设置 gitalk.id 实现多个页面共用一个评论框。

front-matter
---
gitalk:
  id: /wiki/volantis/
---

Valine

官网： https://valine.js.org

blog/themes/volantis/_config.yml
comments:
  ...
  valine:
    appId: # your appId
    appKey: # your appKey
    js: https://unpkg.com/valine@1.4/dist/Valine.min.js
    path: # All pages use the same path (share the same comments data)
    meta: nick,mail,link # valine comment header info
    requiredFields: ['nick','mail']
    enableQQ: true # Unstable avatar link
    placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints )
    avatar: robohash # gravatar style https://valine.js.org/avatar
    pageSize: 10 # comment list page size
    lang: zh-cn
    highlight: true
    visitor: true
    mathJax: false

其中，placeholder 支持在 front-matter 中设置。

front-matter
---
valine:
  placeholder: 你觉得xxx怎么样呢？
---

也可以通过设置 valine.path 实现多个页面共用一个评论框。

front-matter
---
valine:
  path: /
---

MiniValine

官网： https://github.com/MiniValine/MiniValine/

blog/themes/volantis/_config.yml
comments:
  ...
  minivaline:
    appId: # Your leancloud application appid
    appKey: # Your leancloud application appkey
    placeholder: Write a Comment # Comment box placeholder
    adminEmailMd5: # The MD5 of Admin Email to show Admin Flag.
    math: true # Support MathJax.
    md: true # Support Markdown.
    # MiniValine's display language depends on user's browser or system environment
    # If you want everyone visiting your site to see a uniform language, you can set a force language value
    # Available values: en  | zh-CN | (and many more)
    # More i18n info: https://github.com/MiniValine/minivaline-i18n
    lang:

Livere

官网： https://www.livere.com/

blog/themes/volantis/_config.yml
comments:
  ...
  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">
...

开启搜索功能

blog/themes/volantis/_config.yml
search:
  enable: true
  service: hexo  # hexo, google, algolia, azure, baidu
  js: https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2.6.4/js/search.js
  google:
    apiKey:
    engineId:
  algolia:
    applicationID:
    apiKey:
    indexName:
  azure:
    serviceName:
    indexName:
    queryKey:
  baidu:
    apiId:

默认配置为 Hexo 搜索，但是需要安装插件才能使用：

npm i -S hexo-generator-search hexo-generator-json-content

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/advanced-settings/index.html b/v3/advanced-settings/index.html index f739cc29e..fb1aec9c5 100644 --- a/v3/advanced-settings/index.html +++ b/v3/advanced-settings/index.html @@ -1 +1 @@ -进阶设定 - Volantis

进阶设定

发布于：2023年11月3日

使用数据文件

有时您可能需要在主题中使用某些资料，而这些资料并不在文章内，并且是需要重复使用的，那么您可以考虑使用 Hexo 3.0 新增的「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件，如此一来您便能在网站中复用这些文件了。

举例来说，在 source/_data 文件夹中新建 menu.yml 文件：

Home: /
Gallery: /gallery/
Archives: /archives/

您就能在模板中使用这些资料：

<% for (var link in site.data.menu) { %>
  <a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>

渲染结果如下 :

<a href="/"> Home </a>
<a href="/gallery/"> Gallery </a>
<a href="/archives/"> Archives </a>

Volantis 的数据文件

source/_data/layout.yml
source/_data/menu.yml
source/_data/widget.yml

设置子模块

将主题添加为子模块
git submodule add git@github.com:theme-volantis/hexo-theme-volantis themes/volantis

or

git submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis

为网站提速

加载速度

  • 尝试安装 hexo-all-minifier 插件来压缩文件。

  • 减少不必要的 js 插件，例如字数统计、动态背景。

  • 查找并解决拖慢速度的资源，以 Chrome 浏览器为例：

    1. 页面中点击右键，选择「检查」。
    2. 在右边的窗口中「Network」选项卡，并勾选「Disable cache」。
    3. 刷新网页，查看加载速度慢的资源。
      3.1. 加载缓慢的图片，建议使用 CDN。
      3.2. 加载缓慢的可以不用的 js 插件，建议舍弃。
      3.3. 加载缓慢却必须使用的 js 插件，建议下载并自己上传至 jsdelivr。

运行速度

  • 访问具有动态特效背景（如雪花、粒子等）的网站时，手机很快会发烫变卡，笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。
  • 推荐安装图片懒加载插件 hexo-lazyload-image（需同时安装 hexo-fs 依赖库）。

优化 SEO

blog/_config.volantis.yml
seo:
  # 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。

使用 CDN

对于大部分将博客 deploy 到 GitHub 的用户来说，直接加载本地资源速度比较慢，可以使用 jsdelivr 为开源项目提供的 CDN 服务。

开启方法

blog/_config.yml
use_cdn: true

如果你需要对样式进行 DIY，可以只关闭 style 文件的 CDN。

自定义 CDN

如果你把对应的文件上传到自己的 CDN 服务器，可以把对应的链接改为自己的 CDN 链接。

安装「相关文章」插件

  1. 安装插件

    npm i -S hexo-related-popular-posts

  2. 在需要显示的位置添加 related_posts 例如放在侧边栏：

    blog/_config.volantis.yml
    layout:
      on_page:
        sidebar: [related_posts]

  3. 插件的自定义配置方法：

    hexo-related-popular-posts

    https://github.com/tea3/hexo-related-popular-posts

分析与统计

默认支持 不蒜子 的访问统计，可以自行添加百度统计和 Google Analytics。

字数和阅读时长

  1. 安装以下插件：
    npm i --save hexo-wordcount
  2. 修改配置文件，将 wordcount 插件打开
    blog/_config.volantis.yml
    plugins:
      ...
      # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
      wordcount: true
  3. 然后修改配置文件，将 wordcount 写入需要显示的 meta 位置：
    blog/_config.volantis.yml
    # 布局
    layout:
      on_list:
        meta: [..., wordcount, ...]
      on_page:
        meta:
          header: [..., wordcount, ...]
          footer: [..., wordcount, ...]

百度统计

blog/_config.yml
baidu_analytics_key: 百度统计的key

Google Analytics

blog/_config.yml
google_analytics_key: Google Analytics Key

CNZZ 统计

请参考 ZYMIN 的这篇教程：

Hexo hexo+ejs+material x 添加CNZZ统计代码

https://zymin.cn/arcticle/hexo+ejs+material.html

更多 DIY 玩法

详见 @TRHX 的这篇博客：

Hexo 博客主题个性化

https://www.itrhx.com/2018/08/27/A04-Hexo-blog-topic-personalization/

内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +进阶设定 - Volantis

进阶设定

发布于：2023年11月3日

使用数据文件

有时您可能需要在主题中使用某些资料，而这些资料并不在文章内，并且是需要重复使用的，那么您可以考虑使用 Hexo 3.0 新增的「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件，如此一来您便能在网站中复用这些文件了。

举例来说，在 source/_data 文件夹中新建 menu.yml 文件：

Home: /
Gallery: /gallery/
Archives: /archives/

您就能在模板中使用这些资料：

<% for (var link in site.data.menu) { %>
  <a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>

渲染结果如下 :

<a href="/"> Home </a>
<a href="/gallery/"> Gallery </a>
<a href="/archives/"> Archives </a>

Volantis 的数据文件

source/_data/layout.yml
source/_data/menu.yml
source/_data/widget.yml

设置子模块

将主题添加为子模块
git submodule add git@github.com:theme-volantis/hexo-theme-volantis themes/volantis

or

git submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis

为网站提速

加载速度

  • 尝试安装 hexo-all-minifier 插件来压缩文件。

  • 减少不必要的 js 插件，例如字数统计、动态背景。

  • 查找并解决拖慢速度的资源，以 Chrome 浏览器为例：

    1. 页面中点击右键，选择「检查」。
    2. 在右边的窗口中「Network」选项卡，并勾选「Disable cache」。
    3. 刷新网页，查看加载速度慢的资源。
      3.1. 加载缓慢的图片，建议使用 CDN。
      3.2. 加载缓慢的可以不用的 js 插件，建议舍弃。
      3.3. 加载缓慢却必须使用的 js 插件，建议下载并自己上传至 jsdelivr。

运行速度

  • 访问具有动态特效背景（如雪花、粒子等）的网站时，手机很快会发烫变卡，笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。
  • 推荐安装图片懒加载插件 hexo-lazyload-image（需同时安装 hexo-fs 依赖库）。

优化 SEO

blog/_config.volantis.yml
seo:
  # 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。

使用 CDN

对于大部分将博客 deploy 到 GitHub 的用户来说，直接加载本地资源速度比较慢，可以使用 jsdelivr 为开源项目提供的 CDN 服务。

开启方法

blog/_config.yml
use_cdn: true

如果你需要对样式进行 DIY，可以只关闭 style 文件的 CDN。

自定义 CDN

如果你把对应的文件上传到自己的 CDN 服务器，可以把对应的链接改为自己的 CDN 链接。

安装「相关文章」插件

  1. 安装插件

    npm i -S hexo-related-popular-posts

  2. 在需要显示的位置添加 related_posts 例如放在侧边栏：

    blog/_config.volantis.yml
    layout:
      on_page:
        sidebar: [related_posts]

  3. 插件的自定义配置方法：

    hexo-related-popular-posts

    https://github.com/tea3/hexo-related-popular-posts

分析与统计

默认支持 不蒜子 的访问统计，可以自行添加百度统计和 Google Analytics。

字数和阅读时长

  1. 安装以下插件：
    npm i --save hexo-wordcount
  2. 修改配置文件，将 wordcount 插件打开
    blog/_config.volantis.yml
    plugins:
      ...
      # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
      wordcount: true
  3. 然后修改配置文件，将 wordcount 写入需要显示的 meta 位置：
    blog/_config.volantis.yml
    # 布局
    layout:
      on_list:
        meta: [..., wordcount, ...]
      on_page:
        meta:
          header: [..., wordcount, ...]
          footer: [..., wordcount, ...]

百度统计

blog/_config.yml
baidu_analytics_key: 百度统计的key

Google Analytics

blog/_config.yml
google_analytics_key: Google Analytics Key

CNZZ 统计

请参考 ZYMIN 的这篇教程：

Hexo hexo+ejs+material x 添加CNZZ统计代码

https://zymin.cn/arcticle/hexo+ejs+material.html

更多 DIY 玩法

详见 @TRHX 的这篇博客：

Hexo 博客主题个性化

https://www.itrhx.com/2018/08/27/A04-Hexo-blog-topic-personalization/

内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/getting-started/index.html b/v3/getting-started/index.html index f5a2d31d9..384070aa1 100644 --- a/v3/getting-started/index.html +++ b/v3/getting-started/index.html @@ -1 +1 @@ -安装与版本更新 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

安装与版本更新

发布于：2023年11月3日

A Wonderful Theme for Hexo 5


Volantis，一个高度模块化和可定制化、功能相对完善的 Hexo 博客主题，既可以用作个人博客，也适合用来搭建文档。

这些是使用了本主题的博客： 示例博客

能力要求 !!!

自建博客需要一定的相关知识，在开始前，请务必确保：

已掌握 markdown 语法

已阅读 Hexo 官方文档

会使用终端（命令行），会使用 git

会阅读文档、搜索文档


为了更好地使用，还建议掌握以下知识：

会阅读源码，知道本站源码在哪里，会参照源码仿写、对比差异

规范地使用 GitHub Issues（解决文档中没有的问题）

GitHub Fork、Pull Request 操作（使主题保持最新）

环境要求

如果您从旧版本更新或着其它主题迁移，请确保环境版本不要太低，否则会产生兼容性问题。

Hexo: 4.2 ~ 5.x
hexo-cli: 3.1 ~ 4.x
node.js: 12.16 ~ latest # 推荐使用 LTS 版
npm: 6.13 ~ latest

下载与安装

第 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/volantis/volantis.git themes/volantis

第 3/3 步：检查并安装依赖

安装 Hexo 搜索的依赖包：

npm i hexo-generator-search hexo-generator-json-content

安装 Stylus 渲染器：

npm i hexo-renderer-stylus

版本更新

请对照 更新日志 进行更新，下面是更新之后需要注意的事项：

2020-08-09 2.6.6 -> 3.0.0

  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 服务。
  6. 欢迎补充

许可协议

本主题采用 MIT开源许可协议 ，永久无限制免费使用。

MIT开源许可协议

被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
被授权人可根据程式的需要修改授权条款为适当的内容。
在软件和软件的所有副本中都必须包含版权声明和许可声明。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +安装与版本更新 - Volantis

Volantis

中文创作者社区

博客

文档

示例

帮助

鸣谢

归档

源码

安装与版本更新

发布于：2023年11月3日

A Wonderful Theme for Hexo 5


Volantis，一个高度模块化和可定制化、功能相对完善的 Hexo 博客主题，既可以用作个人博客，也适合用来搭建文档。

这些是使用了本主题的博客： 示例博客

能力要求 !!!

自建博客需要一定的相关知识，在开始前，请务必确保：

已掌握 markdown 语法

已阅读 Hexo 官方文档

会使用终端（命令行），会使用 git

会阅读文档、搜索文档


为了更好地使用，还建议掌握以下知识：

会阅读源码，知道本站源码在哪里，会参照源码仿写、对比差异

规范地使用 GitHub Issues（解决文档中没有的问题）

GitHub Fork、Pull Request 操作（使主题保持最新）

环境要求

如果您从旧版本更新或着其它主题迁移，请确保环境版本不要太低，否则会产生兼容性问题。

Hexo: 4.2 ~ 5.x
hexo-cli: 3.1 ~ 4.x
node.js: 12.16 ~ latest # 推荐使用 LTS 版
npm: 6.13 ~ latest

下载与安装

第 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/volantis/volantis.git themes/volantis

第 3/3 步：检查并安装依赖

安装 Hexo 搜索的依赖包：

npm i hexo-generator-search hexo-generator-json-content

安装 Stylus 渲染器：

npm i hexo-renderer-stylus

版本更新

请对照 更新日志 进行更新，下面是更新之后需要注意的事项：

2020-08-09 2.6.6 -> 3.0.0

  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 服务。
  6. 欢迎补充

许可协议

本主题采用 MIT开源许可协议 ，永久无限制免费使用。

MIT开源许可协议

被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
被授权人可根据程式的需要修改授权条款为适当的内容。
在软件和软件的所有副本中都必须包含版权声明和许可声明。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/page-settings/body/index.html b/v3/page-settings/body/index.html index 34b84abd6..4b7495488 100644 --- a/v3/page-settings/body/index.html +++ b/v3/page-settings/body/index.html @@ -1 +1 @@ -页面自定义布局 - Volantis

页面自定义布局

发布于：2023年11月3日

正文布局

默认是文章+评论：

front-matter
---
body: [article, comments]
---

如果你想把相关文章卡片显示在评论前，可以这样写：

front-matter
---
body: [article, related_posts, comments]
---

如果想全局修改，在主题配置文件中的 layout.on_page.body 中设置。

显示迷你音乐播放器

标题右边显示迷你音乐播放器，支持的字段有：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 标签。
顶部的为 header，底部的为 footer，取值见主题配置文件中的 meta 库。

front-matter
---
# 默认的meta信息，文章中没有配置则按照这里的配置来显示，设置为false则不显示
# 其中，title只在header中有效，music和thumbnail无需在这里设置，文章中有则显示
# 如果tags放置在meta.header中，那么在post列表中不显示（因为卡片下方已经有了）
meta:
 header: [title, author, date, category, counter, top]
 footer: [updated, tags, share]
---

像404、关于页面就可以完全隐藏：

front-matter
---
meta:
 header: []
 footer: []
---

居中标题模式

如果标题居中且下方不想显示任何 meta 信息，可以这样设置：

front-matter
---
meta:
 header: [centertitle]
---

标题右边显示缩略图

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 来设置图标的颜色

meta 区域显示外链按钮

例如当前文档页面的设置：

front-matter
---
meta:
 footer: [btns]
btns:
 repo: https://github.com/volantis-x/hexo-theme-volantis
 bug: https://github.com/volantis-x/hexo-theme-volantis/issues/
 doubt: https://github.com/volantis-x/hexo-theme-volantis/issues/
 idea: https://github.com/volantis-x/hexo-theme-volantis/issues/
---

按钮的颜色、图标、标题在主题配置文件中设置。

是否要显示封面

如果某个页面需要封面，可以这样写：

front-matter
---
cover: true
---

显示侧边栏

通过自由设置边栏卡片来删减对应页面的冗余信息，提高有价值的信息在页面中的权重。

如果某个页面不需要侧边栏，可以这样写：

front-matter
---
sidebar: []
---

某个页面想指定显示某几个侧边栏，就这样写:

front-matter
---
sidebar: [grid, toc, tags] # 放置任何你想要显示的侧边栏部件
---

关闭评论

默认是 body: [article, comments]，如果某个页面不要评论，只需要去掉 comments 即可。

front-matter
---
body: [article]
---

只显示留言板

如果你想创建一个只有留言板的页面

front-matter
---
body: [comments]
---

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +页面自定义布局 - Volantis

页面自定义布局

发布于：2023年11月3日

正文布局

默认是文章+评论：

front-matter
---
body: [article, comments]
---

如果你想把相关文章卡片显示在评论前，可以这样写：

front-matter
---
body: [article, related_posts, comments]
---

如果想全局修改，在主题配置文件中的 layout.on_page.body 中设置。

显示迷你音乐播放器

标题右边显示迷你音乐播放器，支持的字段有：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 标签。
顶部的为 header，底部的为 footer，取值见主题配置文件中的 meta 库。

front-matter
---
# 默认的meta信息，文章中没有配置则按照这里的配置来显示，设置为false则不显示
# 其中，title只在header中有效，music和thumbnail无需在这里设置，文章中有则显示
# 如果tags放置在meta.header中，那么在post列表中不显示（因为卡片下方已经有了）
meta:
 header: [title, author, date, category, counter, top]
 footer: [updated, tags, share]
---

像404、关于页面就可以完全隐藏：

front-matter
---
meta:
 header: []
 footer: []
---

居中标题模式

如果标题居中且下方不想显示任何 meta 信息，可以这样设置：

front-matter
---
meta:
 header: [centertitle]
---

标题右边显示缩略图

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 来设置图标的颜色

meta 区域显示外链按钮

例如当前文档页面的设置：

front-matter
---
meta:
 footer: [btns]
btns:
 repo: https://github.com/volantis-x/hexo-theme-volantis
 bug: https://github.com/volantis-x/hexo-theme-volantis/issues/
 doubt: https://github.com/volantis-x/hexo-theme-volantis/issues/
 idea: https://github.com/volantis-x/hexo-theme-volantis/issues/
---

按钮的颜色、图标、标题在主题配置文件中设置。

是否要显示封面

如果某个页面需要封面，可以这样写：

front-matter
---
cover: true
---

显示侧边栏

通过自由设置边栏卡片来删减对应页面的冗余信息，提高有价值的信息在页面中的权重。

如果某个页面不需要侧边栏，可以这样写：

front-matter
---
sidebar: []
---

某个页面想指定显示某几个侧边栏，就这样写:

front-matter
---
sidebar: [grid, toc, tags] # 放置任何你想要显示的侧边栏部件
---

关闭评论

默认是 body: [article, comments]，如果某个页面不要评论，只需要去掉 comments 即可。

front-matter
---
body: [article]
---

只显示留言板

如果你想创建一个只有留言板的页面

front-matter
---
body: [comments]
---

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/page-settings/front-matter/index.html b/v3/page-settings/front-matter/index.html index f3c6c961d..5f65ec3a5 100644 --- a/v3/page-settings/front-matter/index.html +++ b/v3/page-settings/front-matter/index.html @@ -1 +1 @@ -front-matter - Volantis

front-matter

发布于：2023年11月3日

front-matter

front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter

字段含义值类型默认值
layout布局模版String-
title页面标题String-
seo_title网页标题Stringpage.title
short_title页面标题（在group列表中显示）Stringpage.title
date创建时间Date文件创建时间
updated更新日期Date文件修改时间
link外部文章网址String-
music内部音乐控件[Object]-
robotsrobotsString-
keywords页面关键词String-
description页面描述、摘要String-
cover是否显示封面Booltrue
meta文章或页面的meta信息Bool, Arraytheme.layout.*.meta
sidebar页面侧边栏Bool, Arraytheme.layout.*.sidebar
body页面主体元素Arraytheme.layout.on_page.body
mathjax是否渲染公式Bool, Stringfalse
thumbnail缩略图Stringfalse
icons图标Array[]
pin是否置顶Boolfalse

layout:post 时特有的字段：

字段含义值类型默认值
author文章作者[Object]config.author
categories分类String, Array-
tags标签String, Array-
toc是否生成目录Booltrue

author

字段含义值类型默认值
name作者名Stringconfig.author
avatar头像Stringconfig.avatar
url链接Stringconfig.url

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-matter
pin: true

文章分类

多个分类有两种关系，一种是层级（等同于文件夹），一种是并列（等同于标签）。

多级分类：

front-matter
---
categories: [分类A, 分类B]
---

或者

front-matter
---
categories:
  - 分类A
  - 分类B
---

并列分类

front-matter
categories:
  - [分类A]
  - [分类B]

多级+并列分类

front-matter
categories:
  - [分类A, 分类B]
  - [分类C, 分类D]

文章摘要

在文章中插入 <!-- more -->，前面的部分即为摘要。

某篇文章源码
---
title: xxx
date: 2020-02-21
---

这是摘要

<!-- more -->

这是正文

注意： <!-- more --> 前后一定要有空行，不然可能导致显示错位。

设置文章作者

由于支持多个作者在一个站点发布文章，所以可以设置单独一篇文章的作者：

front-matter
---
author:
  name: 作者
  avatar: https://img.vim-cn.com/a1/d53c11fb5d4fd69529bc805d385fe818feb3f6.png
  url: https://baidu.com
---

引入外部文章

利用 link，搭配自定义的文章作者信息，你可以在文章列表中显示外部文章或者网址，例如：

front-matter
---
layout:     post
date:       2017-07-05
title:      [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
  - Hexo
author:
  name: xaoxuu
  avatar: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  url: https://xaoxuu.com
link: 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
---

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +front-matter - Volantis

front-matter

发布于：2023年11月3日

front-matter

front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter

字段含义值类型默认值
layout布局模版String-
title页面标题String-
seo_title网页标题Stringpage.title
short_title页面标题（在group列表中显示）Stringpage.title
date创建时间Date文件创建时间
updated更新日期Date文件修改时间
link外部文章网址String-
music内部音乐控件[Object]-
robotsrobotsString-
keywords页面关键词String-
description页面描述、摘要String-
cover是否显示封面Booltrue
meta文章或页面的meta信息Bool, Arraytheme.layout.*.meta
sidebar页面侧边栏Bool, Arraytheme.layout.*.sidebar
body页面主体元素Arraytheme.layout.on_page.body
mathjax是否渲染公式Bool, Stringfalse
thumbnail缩略图Stringfalse
icons图标Array[]
pin是否置顶Boolfalse

layout:post 时特有的字段：

字段含义值类型默认值
author文章作者[Object]config.author
categories分类String, Array-
tags标签String, Array-
toc是否生成目录Booltrue

author

字段含义值类型默认值
name作者名Stringconfig.author
avatar头像Stringconfig.avatar
url链接Stringconfig.url

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-matter
pin: true

文章分类

多个分类有两种关系，一种是层级（等同于文件夹），一种是并列（等同于标签）。

多级分类：

front-matter
---
categories: [分类A, 分类B]
---

或者

front-matter
---
categories:
  - 分类A
  - 分类B
---

并列分类

front-matter
categories:
  - [分类A]
  - [分类B]

多级+并列分类

front-matter
categories:
  - [分类A, 分类B]
  - [分类C, 分类D]

文章摘要

在文章中插入 <!-- more -->，前面的部分即为摘要。

某篇文章源码
---
title: xxx
date: 2020-02-21
---

这是摘要

<!-- more -->

这是正文

注意： <!-- more --> 前后一定要有空行，不然可能导致显示错位。

设置文章作者

由于支持多个作者在一个站点发布文章，所以可以设置单独一篇文章的作者：

front-matter
---
author:
  name: 作者
  avatar: https://img.vim-cn.com/a1/d53c11fb5d4fd69529bc805d385fe818feb3f6.png
  url: https://baidu.com
---

引入外部文章

利用 link，搭配自定义的文章作者信息，你可以在文章列表中显示外部文章或者网址，例如：

front-matter
---
layout:     post
date:       2017-07-05
title:      [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
  - Hexo
author:
  name: xaoxuu
  avatar: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  url: https://xaoxuu.com
link: 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
---

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/page-settings/layout/index.html b/v3/page-settings/layout/index.html index 480dc7326..68365ac57 100644 --- a/v3/page-settings/layout/index.html +++ b/v3/page-settings/layout/index.html @@ -1 +1 @@ -页面布局模板 - Volantis

页面布局模板

发布于：2023年11月3日

布局模板

取值含义
page独立页面
post文章页面
category分类页面
tag标签页面
links友链页面
list列表页面

page & post

post 页面布局几乎与 page 页面相同，但是有以下细微区别：

  • post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 不会。
  • 主题配置中的 article_footer 只作用于 post，如果 page 也要显示，可以在 front-matter 中设置
    meta:
      article_footer: [xxx]

除了归档页面是自动生成的，其它独立页面都需要手动创建 md 文件。

归档页面

归档页面是自动生成的，并且初始化的时候已经生成，路径如下：

blog/_config.yml
# Directory
archive_dir: archives

关于页面

Create file if not exists: source/about/index.md
---
layout: page
title: 关于
meta:
  header: []
  footer: []
sidebar: []
valine:
  placeholder: 有什么想对我说的呢？
---

下面写关于自己的内容

分类页面

Create file if not exists: source/categories/index.md
---
layout: category
index: true
title: 所有分类
---

标签页面

Create file if not exists: source/tags/index.md
---
layout: tag
index: true
title: 所有标签
---

列表页面

Create file if not exists: source/mylist/index.md
---
layout: list
group: mylist
index: true
---

结果就是筛选出所有文章中 front-matter 部分含有 group: mylist 的文章。

友链页面

Create file if not exists: source/friends/index.md
---
layout: links     # 必须
title: 我的朋友们   # 可选，这是友链页的标题
links:
  - group: 分组1
    icon: fas fa-user-tie
    desc: 这个分组的描述
    items:
    - name:     # 博客名
      avatar:   # 头像链接
      url:      # 博客链接
      backgroundColor: '#3E74C9' # 卡片背景颜色
      textColor: '#fff'  # 卡片文字颜色
      tags: [标签1, 标签2]    # 标签
      desc: 描述文字
  - group: 分组2
    icon: fas fa-user-tie
    desc: 这个分组的描述
    items:
    - name:     # 博客名
      avatar:   # 头像链接
      url:      # 博客链接
      backgroundColor: '#3E74C9' # 卡片背景颜色
      textColor: '#fff'  # 卡片文字颜色
      tags: [标签1, 标签2]    # 标签
      desc: 描述文字
---

这里写友链上方的内容。

<!-- more -->

这里可以写友链页面下方的文字备注，例如自己的友链规范、示例等。

姓名、头像、链接是必填项，其它选填。

404页面

Create file if not exists: source/404.md
---
layout: page
title: 404 Not Found
body: [article, comments]
meta:
  header: []
  footer: []
sidebar: []
valine:
  path: /404.html
  placeholder: 请留言告诉我您要访问哪个页面找不到了
---
{% p center huge, 404 %}
{% p center bold, 很抱歉，您访问的页面不存在 %}
{% p center small, 可能是输入地址有误或该地址已被删除 %}

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +页面布局模板 - Volantis

页面布局模板

发布于：2023年11月3日

布局模板

取值含义
page独立页面
post文章页面
category分类页面
tag标签页面
links友链页面
list列表页面

page & post

post 页面布局几乎与 page 页面相同，但是有以下细微区别：

  • post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 不会。
  • 主题配置中的 article_footer 只作用于 post，如果 page 也要显示，可以在 front-matter 中设置
    meta:
      article_footer: [xxx]

除了归档页面是自动生成的，其它独立页面都需要手动创建 md 文件。

归档页面

归档页面是自动生成的，并且初始化的时候已经生成，路径如下：

blog/_config.yml
# Directory
archive_dir: archives

关于页面

Create file if not exists: source/about/index.md
---
layout: page
title: 关于
meta:
  header: []
  footer: []
sidebar: []
valine:
  placeholder: 有什么想对我说的呢？
---

下面写关于自己的内容

分类页面

Create file if not exists: source/categories/index.md
---
layout: category
index: true
title: 所有分类
---

标签页面

Create file if not exists: source/tags/index.md
---
layout: tag
index: true
title: 所有标签
---

列表页面

Create file if not exists: source/mylist/index.md
---
layout: list
group: mylist
index: true
---

结果就是筛选出所有文章中 front-matter 部分含有 group: mylist 的文章。

友链页面

Create file if not exists: source/friends/index.md
---
layout: links     # 必须
title: 我的朋友们   # 可选，这是友链页的标题
links:
  - group: 分组1
    icon: fas fa-user-tie
    desc: 这个分组的描述
    items:
    - name:     # 博客名
      avatar:   # 头像链接
      url:      # 博客链接
      backgroundColor: '#3E74C9' # 卡片背景颜色
      textColor: '#fff'  # 卡片文字颜色
      tags: [标签1, 标签2]    # 标签
      desc: 描述文字
  - group: 分组2
    icon: fas fa-user-tie
    desc: 这个分组的描述
    items:
    - name:     # 博客名
      avatar:   # 头像链接
      url:      # 博客链接
      backgroundColor: '#3E74C9' # 卡片背景颜色
      textColor: '#fff'  # 卡片文字颜色
      tags: [标签1, 标签2]    # 标签
      desc: 描述文字
---

这里写友链上方的内容。

<!-- more -->

这里可以写友链页面下方的文字备注，例如自己的友链规范、示例等。

姓名、头像、链接是必填项，其它选填。

404页面

Create file if not exists: source/404.md
---
layout: page
title: 404 Not Found
body: [article, comments]
meta:
  header: []
  footer: []
sidebar: []
valine:
  path: /404.html
  placeholder: 请留言告诉我您要访问哪个页面找不到了
---
{% p center huge, 404 %}
{% p center bold, 很抱歉，您访问的页面不存在 %}
{% p center small, 可能是输入地址有误或该地址已被删除 %}

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/page-settings/math/index.html b/v3/page-settings/math/index.html index 21314c582..ccc47de42 100644 --- a/v3/page-settings/math/index.html +++ b/v3/page-settings/math/index.html @@ -1 +1 @@ -渲染公式 - Volantis

渲染公式

发布于：2023年11月3日

MathJax

默认是不渲染的，如果文章内有公式，需要在 front-matter 中设置开启。

example.md:
---
title: 渲染公式（MathJax）
date: 2020-02-23
mathjax: true # false: 不渲染, true: 渲染, internal: 只在文章内部渲染，文章列表中不渲染
---

$$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上使用KaTeX

https://www.micdz.cn/article/katex-on-volantis/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +渲染公式 - Volantis

渲染公式

发布于：2023年11月3日

MathJax

默认是不渲染的，如果文章内有公式，需要在 front-matter 中设置开启。

example.md:
---
title: 渲染公式（MathJax）
date: 2020-02-23
mathjax: true # false: 不渲染, true: 渲染, internal: 只在文章内部渲染，文章列表中不渲染
---

$$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上使用KaTeX

https://www.micdz.cn/article/katex-on-volantis/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/site-settings/configuration/index.html b/v3/site-settings/configuration/index.html index 34287aceb..0d1722d79 100644 --- a/v3/site-settings/configuration/index.html +++ b/v3/site-settings/configuration/index.html @@ -1 +1 @@ -站点配置文件 - Volantis

站点配置文件

发布于：2023年11月3日

网站标题

blog/_config.yml
# 网站标题
title: my blog

网站图标

blog/_config.yml
# 网站图标，更多尺寸等图标请使用import方式批量导入
favicon: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.ico
blog/_config.yml
import:
  meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    - <meta name="theme-color" content="#ffffff">
  link:
    - <link rel="apple-touch-icon" sizes="180x180" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">

多语言设置

blog/_config.yml
language:
- zh-CN
- en
- zh-HK
- zh-TW

对应的翻译文件路径： themes/volantis/languages/

Import 导入外部文件

可以在无需修改主题文件的情况下在 head 和 body 中添加各种标签。meta 和 link 对应 head 中的 <meta> 和 <link> 标签。script 可以在 body 末尾导入 js 文件。

blog/_config.yml
import:
  meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    - <meta name="theme-color" content="#ffffff">
  link:
    - <link rel="apple-touch-icon" sizes="180x180" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">
  script:

网站

参数描述
title网站标题
subtitle网站副标题
description网站描述
keywords网站的关键词。支援多个关键词。
author您的名字
language网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

网址

参数描述默认值
url网址
root网站根目录
permalink文章的 永久链接 格式:year/:month/:day/:title/
permalink_defaults永久链接中各部分的默认值
pretty_urls改写 permalink 的值来美化 URL
pretty_urls.trailing_index是否在永久链接中保留尾部的 index.html，设置为 false 时去除true
pretty_urls.trailing_html是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)true

网站存放在子目录

如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

例如：

# 比如，一个页面的永久链接是 http://example.com/foo/bar/index.html
pretty_urls:
  trailing_index: false
# 此时页面的永久链接会变为 http://example.com/foo/bar/

目录

参数描述默认值
source_dir资源文件夹，这个文件夹用来存放内容。source
public_dir公共文件夹，这个文件夹用于存放生成的站点文件。public
tag_dir标签文件夹tags
archive_dir归档文件夹archives
category_dir分类文件夹categories
code_dirInclude code 文件夹，source_dir 下的子目录downloads/code
i18n_dir国际化（i18n）文件夹:lang
skip_render跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式 来匹配路径。

例如：

skip_render: "mypage/**/*"
# 将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
# 你也可以用这种方法来跳过对指定文章文件的渲染
skip_render: "_posts/test-post.md"
# 这将会忽略对 'test-post.md' 的渲染

提示

如果您刚刚开始接触 Hexo，通常没有必要修改这一部分的值。

文章

参数描述默认值
new_post_name新文章的文件名称:title.md
default_layout预设布局post
auto_spacing在中文和英文之间加入空格false
titlecase把标题转换为 title casefalse
external_link在新标签中打开链接true
external_link.enable在新标签中打开链接true
external_link.field对整个网站（site）生效或仅对文章（post）生效site
external_link.exclude需要排除的域名。主域名和子域名如 www 需分别配置[]
filename_case把文件名称转换为 (1) 小写或 (2) 大写0
render_drafts显示草稿false
post_asset_folder启动 Asset 文件夹false
relative_link把链接改为与根目录的相对位址false
future显示未来的文章true
highlight代码块的设置, see Highlight.js section for usage guide
prismjs代码块的设置, see PrismJS section for usage guide

相对地址

默认情况下，Hexo 生成的超链接都是绝对地址。例如，如果您的网站域名为 example.com,您有一篇文章名为 hello，那么绝对链接可能像这样：http://example.com/hello.html，它是绝对于域名的。相对链接像这样：/hello.html，也就是说，无论用什么域名访问该站点，都没有关系，这在进行反向代理时可能用到。通常情况下，建议使用绝对地址。

分类 & 标签

参数描述默认值
default_category默认分类uncategorized
category_map分类别名
tag_map标签别名

日期 / 时间格式

Hexo 使用 Moment.js 来解析和显示时间。

参数描述默认值
date_format日期格式YYYY-MM-DD
time_format时间格式HH:mm:ss
updated_option当 Front Matter 中没有指定 updated 时 updated 的取值mtime

updated_option

updated_option 控制了当 Front Matter 中没有指定 updated 时，updated 如何取值：

  • mtime: 使用文件的最后修改时间。这是从 Hexo 3.0.0 开始的默认行为。
  • date: 使用 date 作为 updated 的值。可被用于 Git 工作流之中，因为使用 Git 管理站点时，文件的最后修改日期常常会发生改变
  • empty: 直接删除 updated。使用这一选项可能会导致大部分主题和插件无法正常工作。

use_date_for_updated 选项已经被废弃，将会在下个重大版本发布时去除。请改为使用 updated_option: 'date'。

use_date_for_updated | 启用以后，如果 Front Matter 中没有指定 updated， post.updated 将会使用 date 的值而不是文件的创建时间。在 Git 工作流中这个选项会很有用 | true

分页

参数描述默认值
per_page每页显示的文章量 (0 = 关闭分页功能)10
pagination_dir分页目录page

扩展

参数描述
theme当前主题名称。值为false时禁用主题
theme_config主题的配置文件。在这里放置的配置会覆盖主题目录下的 _config.yml 中的配置
deploy部署部分的设置
meta_generatorMeta generator 标签。 值为 false 时 Hexo 不会在头部插入该标签

包括或不包括目录和文件

在 Hexo 配置文件中，通过设置 include/exclude 可以让 Hexo 进行处理或忽略某些目录和文件夹。你可以使用 glob 表达式 对目录和文件进行匹配。

include and exclude options only apply to the source/ folder, whereas ignore option applies to all folders.

参数描述
includeHexo 默认会忽略隐藏文件和文件夹（包括名称以下划线和 . 开头的文件和文件夹，Hexo 的 _posts 和 _data 等目录除外）。通过设置此字段将使 Hexo 处理他们并将它们复制到 source 目录下。
excludeHexo 会忽略这些文件和目录
ignoreIgnore files/folders

举例：

# Include/Exclude Files/Folders
include:
  - ".nojekyll"
  # 包括 'source/css/_typing.css'
  - "css/_typing.css"
  # 包括 'source/_css/' 中的任何文件，但不包括子目录及其其中的文件。
  - "_css/*"
  # 包含 'source/_css/' 中的任何文件和子目录下的任何文件
  - "_css/**/*"

exclude:
  # 不包括 'source/js/test.js'
  - "js/test.js"
  # 不包括 'source/js/' 中的文件、但包括子目录下的所有目录和文件
  - "js/*"
  # 不包括 'source/js/' 中的文件和子目录下的任何文件
  - "js/**/*"
  # 不包括 'source/js/' 目录下的所有文件名以 'test' 开头的文件，但包括其它文件和子目录下的单文件
  - "js/test*"
  # 不包括 'source/js/' 及其子目录中任何以 'test' 开头的文件
  - "js/**/test*"
  # 不要用 exclude 来忽略 'source/_posts/' 中的文件。你应该使用 'skip_render'，或者在要忽略的文件的文件名之前加一个下划线 '_'
  # 在这里配置一个 - "_posts/hello-world.md" 是没有用的。

ignore:
  # Ignore any folder named 'foo'.
  - "**/foo"
  # Ignore 'foo' folder in 'themes/' only.
  - "**/themes/*/foo"
  # Same as above, but applies to every subfolders of 'themes/'.
  - "**/themes/**/foo"

列表中的每一项都必须用单引号或双引号包裹起来。

include 和 exclude 并不适用于 themes/ 目录下的文件。如果需要忽略 themes/ 目录下的部分文件或文件夹，可以使用 ignore 或在文件名之前添加下划线 _。

使用代替配置文件

可以在 hexo-cli 中使用 --config 参数来指定自定义配置文件的路径。你可以使用一个 YAML 或 JSON 文件的路径，也可以使用逗号分隔（无空格）的多个 YAML 或 JSON 文件的路径。例如：

# use 'custom.yml' in place of '_config.yml'
$ hexo server --config custom.yml

# use 'custom.yml' & 'custom2.json', prioritizing 'custom3.yml', then 'custom2.json'
$ hexo generate --config custom.yml,custom2.json,custom3.yml

当你指定了多个配置文件以后，Hexo 会按顺序将这部分配置文件合并成一个 _multiconfig.yml。如果遇到重复的配置，排在后面的文件的配置会覆盖排在前面的文件的配置。这个原则适用于任意数量、任意深度的 YAML 和 JSON 文件。

例如，使用 --options 指定了两个自定义配置文件：

$ hexo generate --config custom.yml,custom2.json

如果 custom.yml 中指定了 foo: bar，在 custom2.json 中指定了 "foo": "dinosaur"，那么在 _multiconfig.yml 中你会得到 foo: dinosaur。

使用代替主题配置文件

通常情况下，Hexo 主题是一个独立的项目，并拥有一个独立的 _config.yml 配置文件。

除了自行维护独立的主题配置文件，你也可以在其它地方对主题进行配置。

配置文件中的 theme_config

该特性自 Hexo 2.8.2 起提供

# _config.yml
theme: "my-theme"
theme_config:
  bio: "My awesome bio"
  foo:
    bar: 'a'
# themes/my-theme/_config.yml
bio: "Some generic bio"
logo: "a-cool-image.png"
  foo:
    baz: 'b'

最终主题配置的输出是：

{
  bio: "My awesome bio",
  logo: "a-cool-image.png",
  foo: {
    bar: "a",
    baz: "b"
  }
}

独立的 _config.[theme].yml 文件

该特性自 Hexo 5.0.0 起提供

独立的主题配置文件应放置于站点根目录下，支持 yml 或 json 格式。需要配置站点 _config.yml 文件中的 theme 以供 Hexo 寻找 _config.[theme].yml 文件。

# _config.yml
theme: "my-theme"
# _config.my-theme.yml
bio: "My awesome bio"
foo:
  bar: 'a'
# themes/my-theme/_config.yml
bio: "Some generic bio"
logo: "a-cool-image.png"
  foo:
    baz: 'b'

最终主题配置的输出是：

{
  bio: "My awesome bio",
  logo: "a-cool-image.png",
  foo: {
    bar: "a",
    baz: "b"
  }
}

我们强烈建议你将所有的主题配置集中在一处。如果你不得不在多处配置你的主题，那么这些信息对你将会非常有用：Hexo 在合并主题配置时，Hexo 配置文件中的 theme_config 的优先级最高，其次是 _config.[theme].yml 文件，最后是位于主题目录下的 _config.yml 文件。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +站点配置文件 - Volantis

站点配置文件

发布于：2023年11月3日

网站标题

blog/_config.yml
# 网站标题
title: my blog

网站图标

blog/_config.yml
# 网站图标，更多尺寸等图标请使用import方式批量导入
favicon: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.ico
blog/_config.yml
import:
  meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    - <meta name="theme-color" content="#ffffff">
  link:
    - <link rel="apple-touch-icon" sizes="180x180" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">

多语言设置

blog/_config.yml
language:
- zh-CN
- en
- zh-HK
- zh-TW

对应的翻译文件路径： themes/volantis/languages/

Import 导入外部文件

可以在无需修改主题文件的情况下在 head 和 body 中添加各种标签。meta 和 link 对应 head 中的 <meta> 和 <link> 标签。script 可以在 body 末尾导入 js 文件。

blog/_config.yml
import:
  meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    - <meta name="theme-color" content="#ffffff">
  link:
    - <link rel="apple-touch-icon" sizes="180x180" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">
  script:

网站

参数描述
title网站标题
subtitle网站副标题
description网站描述
keywords网站的关键词。支援多个关键词。
author您的名字
language网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

网址

参数描述默认值
url网址
root网站根目录
permalink文章的 永久链接 格式:year/:month/:day/:title/
permalink_defaults永久链接中各部分的默认值
pretty_urls改写 permalink 的值来美化 URL
pretty_urls.trailing_index是否在永久链接中保留尾部的 index.html，设置为 false 时去除true
pretty_urls.trailing_html是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)true

网站存放在子目录

如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

例如：

# 比如，一个页面的永久链接是 http://example.com/foo/bar/index.html
pretty_urls:
  trailing_index: false
# 此时页面的永久链接会变为 http://example.com/foo/bar/

目录

参数描述默认值
source_dir资源文件夹，这个文件夹用来存放内容。source
public_dir公共文件夹，这个文件夹用于存放生成的站点文件。public
tag_dir标签文件夹tags
archive_dir归档文件夹archives
category_dir分类文件夹categories
code_dirInclude code 文件夹，source_dir 下的子目录downloads/code
i18n_dir国际化（i18n）文件夹:lang
skip_render跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式 来匹配路径。

例如：

skip_render: "mypage/**/*"
# 将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
# 你也可以用这种方法来跳过对指定文章文件的渲染
skip_render: "_posts/test-post.md"
# 这将会忽略对 'test-post.md' 的渲染

提示

如果您刚刚开始接触 Hexo，通常没有必要修改这一部分的值。

文章

参数描述默认值
new_post_name新文章的文件名称:title.md
default_layout预设布局post
auto_spacing在中文和英文之间加入空格false
titlecase把标题转换为 title casefalse
external_link在新标签中打开链接true
external_link.enable在新标签中打开链接true
external_link.field对整个网站（site）生效或仅对文章（post）生效site
external_link.exclude需要排除的域名。主域名和子域名如 www 需分别配置[]
filename_case把文件名称转换为 (1) 小写或 (2) 大写0
render_drafts显示草稿false
post_asset_folder启动 Asset 文件夹false
relative_link把链接改为与根目录的相对位址false
future显示未来的文章true
highlight代码块的设置, see Highlight.js section for usage guide
prismjs代码块的设置, see PrismJS section for usage guide

相对地址

默认情况下，Hexo 生成的超链接都是绝对地址。例如，如果您的网站域名为 example.com,您有一篇文章名为 hello，那么绝对链接可能像这样：http://example.com/hello.html，它是绝对于域名的。相对链接像这样：/hello.html，也就是说，无论用什么域名访问该站点，都没有关系，这在进行反向代理时可能用到。通常情况下，建议使用绝对地址。

分类 & 标签

参数描述默认值
default_category默认分类uncategorized
category_map分类别名
tag_map标签别名

日期 / 时间格式

Hexo 使用 Moment.js 来解析和显示时间。

参数描述默认值
date_format日期格式YYYY-MM-DD
time_format时间格式HH:mm:ss
updated_option当 Front Matter 中没有指定 updated 时 updated 的取值mtime

updated_option

updated_option 控制了当 Front Matter 中没有指定 updated 时，updated 如何取值：

  • mtime: 使用文件的最后修改时间。这是从 Hexo 3.0.0 开始的默认行为。
  • date: 使用 date 作为 updated 的值。可被用于 Git 工作流之中，因为使用 Git 管理站点时，文件的最后修改日期常常会发生改变
  • empty: 直接删除 updated。使用这一选项可能会导致大部分主题和插件无法正常工作。

use_date_for_updated 选项已经被废弃，将会在下个重大版本发布时去除。请改为使用 updated_option: 'date'。

use_date_for_updated | 启用以后，如果 Front Matter 中没有指定 updated， post.updated 将会使用 date 的值而不是文件的创建时间。在 Git 工作流中这个选项会很有用 | true

分页

参数描述默认值
per_page每页显示的文章量 (0 = 关闭分页功能)10
pagination_dir分页目录page

扩展

参数描述
theme当前主题名称。值为false时禁用主题
theme_config主题的配置文件。在这里放置的配置会覆盖主题目录下的 _config.yml 中的配置
deploy部署部分的设置
meta_generatorMeta generator 标签。 值为 false 时 Hexo 不会在头部插入该标签

包括或不包括目录和文件

在 Hexo 配置文件中，通过设置 include/exclude 可以让 Hexo 进行处理或忽略某些目录和文件夹。你可以使用 glob 表达式 对目录和文件进行匹配。

include and exclude options only apply to the source/ folder, whereas ignore option applies to all folders.

参数描述
includeHexo 默认会忽略隐藏文件和文件夹（包括名称以下划线和 . 开头的文件和文件夹，Hexo 的 _posts 和 _data 等目录除外）。通过设置此字段将使 Hexo 处理他们并将它们复制到 source 目录下。
excludeHexo 会忽略这些文件和目录
ignoreIgnore files/folders

举例：

# Include/Exclude Files/Folders
include:
  - ".nojekyll"
  # 包括 'source/css/_typing.css'
  - "css/_typing.css"
  # 包括 'source/_css/' 中的任何文件，但不包括子目录及其其中的文件。
  - "_css/*"
  # 包含 'source/_css/' 中的任何文件和子目录下的任何文件
  - "_css/**/*"

exclude:
  # 不包括 'source/js/test.js'
  - "js/test.js"
  # 不包括 'source/js/' 中的文件、但包括子目录下的所有目录和文件
  - "js/*"
  # 不包括 'source/js/' 中的文件和子目录下的任何文件
  - "js/**/*"
  # 不包括 'source/js/' 目录下的所有文件名以 'test' 开头的文件，但包括其它文件和子目录下的单文件
  - "js/test*"
  # 不包括 'source/js/' 及其子目录中任何以 'test' 开头的文件
  - "js/**/test*"
  # 不要用 exclude 来忽略 'source/_posts/' 中的文件。你应该使用 'skip_render'，或者在要忽略的文件的文件名之前加一个下划线 '_'
  # 在这里配置一个 - "_posts/hello-world.md" 是没有用的。

ignore:
  # Ignore any folder named 'foo'.
  - "**/foo"
  # Ignore 'foo' folder in 'themes/' only.
  - "**/themes/*/foo"
  # Same as above, but applies to every subfolders of 'themes/'.
  - "**/themes/**/foo"

列表中的每一项都必须用单引号或双引号包裹起来。

include 和 exclude 并不适用于 themes/ 目录下的文件。如果需要忽略 themes/ 目录下的部分文件或文件夹，可以使用 ignore 或在文件名之前添加下划线 _。

使用代替配置文件

可以在 hexo-cli 中使用 --config 参数来指定自定义配置文件的路径。你可以使用一个 YAML 或 JSON 文件的路径，也可以使用逗号分隔（无空格）的多个 YAML 或 JSON 文件的路径。例如：

# use 'custom.yml' in place of '_config.yml'
$ hexo server --config custom.yml

# use 'custom.yml' & 'custom2.json', prioritizing 'custom3.yml', then 'custom2.json'
$ hexo generate --config custom.yml,custom2.json,custom3.yml

当你指定了多个配置文件以后，Hexo 会按顺序将这部分配置文件合并成一个 _multiconfig.yml。如果遇到重复的配置，排在后面的文件的配置会覆盖排在前面的文件的配置。这个原则适用于任意数量、任意深度的 YAML 和 JSON 文件。

例如，使用 --options 指定了两个自定义配置文件：

$ hexo generate --config custom.yml,custom2.json

如果 custom.yml 中指定了 foo: bar，在 custom2.json 中指定了 "foo": "dinosaur"，那么在 _multiconfig.yml 中你会得到 foo: dinosaur。

使用代替主题配置文件

通常情况下，Hexo 主题是一个独立的项目，并拥有一个独立的 _config.yml 配置文件。

除了自行维护独立的主题配置文件，你也可以在其它地方对主题进行配置。

配置文件中的 theme_config

该特性自 Hexo 2.8.2 起提供

# _config.yml
theme: "my-theme"
theme_config:
  bio: "My awesome bio"
  foo:
    bar: 'a'
# themes/my-theme/_config.yml
bio: "Some generic bio"
logo: "a-cool-image.png"
  foo:
    baz: 'b'

最终主题配置的输出是：

{
  bio: "My awesome bio",
  logo: "a-cool-image.png",
  foo: {
    bar: "a",
    baz: "b"
  }
}

独立的 _config.[theme].yml 文件

该特性自 Hexo 5.0.0 起提供

独立的主题配置文件应放置于站点根目录下，支持 yml 或 json 格式。需要配置站点 _config.yml 文件中的 theme 以供 Hexo 寻找 _config.[theme].yml 文件。

# _config.yml
theme: "my-theme"
# _config.my-theme.yml
bio: "My awesome bio"
foo:
  bar: 'a'
# themes/my-theme/_config.yml
bio: "Some generic bio"
logo: "a-cool-image.png"
  foo:
    baz: 'b'

最终主题配置的输出是：

{
  bio: "My awesome bio",
  logo: "a-cool-image.png",
  foo: {
    bar: "a",
    baz: "b"
  }
}

我们强烈建议你将所有的主题配置集中在一处。如果你不得不在多处配置你的主题，那么这些信息对你将会非常有用：Hexo 在合并主题配置时，Hexo 配置文件中的 theme_config 的优先级最高，其次是 _config.[theme].yml 文件，最后是位于主题目录下的 _config.yml 文件。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/tag-plugins/container/index.html b/v3/tag-plugins/container/index.html index 5b5a74163..7571b4a2b 100644 --- a/v3/tag-plugins/container/index.html +++ b/v3/tag-plugins/container/index.html @@ -1 +1 @@ -容器类标签 - Volantis

容器类标签

发布于：2023年11月3日

Tab

此插件移植自 NexT #tabs 。请将您的 Volantis 升级至 2.1 版本以上使用。

{% tabs tab-id %}

<!-- tab tab-name -->

![](https://i.loli.net/2020/03/18/f5PQlWisvm9zbgK.jpg)

<!-- endtab -->

<!-- tab tab-name -->

这里面写内容，支持的语法格式有限，请尽量<u>不要</u>写太过复杂的东西。

<!-- endtab -->

{% endtabs %}

tab-id

必填，如果一个页面有多个 tabs 时，tab-id 不能重复。

tab-name

标签文本。

Folding

请将您的 Volantis 升级至 2.3 版本以上使用。

{% folding 参数（可选）, 标题 %}

![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

参数位置可以填写颜色和状态，多个参数用空格隔开。

颜色

blue, cyan, green, yellow, red

状态

状态填写 open 代表默认打开。

{% folding 查看图片测试 %}

![](https://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}
查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试
{% folding green, 查看代码测试 %}

查看代码测试

{% endfolding %}
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +容器类标签 - Volantis

容器类标签

发布于：2023年11月3日

Tab

此插件移植自 NexT #tabs 。请将您的 Volantis 升级至 2.1 版本以上使用。

{% tabs tab-id %}

<!-- tab tab-name -->

![](https://i.loli.net/2020/03/18/f5PQlWisvm9zbgK.jpg)

<!-- endtab -->

<!-- tab tab-name -->

这里面写内容，支持的语法格式有限，请尽量<u>不要</u>写太过复杂的东西。

<!-- endtab -->

{% endtabs %}

tab-id

必填，如果一个页面有多个 tabs 时，tab-id 不能重复。

tab-name

标签文本。

Folding

请将您的 Volantis 升级至 2.3 版本以上使用。

{% folding 参数（可选）, 标题 %}

![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

参数位置可以填写颜色和状态，多个参数用空格隔开。

颜色

blue, cyan, green, yellow, red

状态

状态填写 open 代表默认打开。

{% folding 查看图片测试 %}

![](https://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}
查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试
{% folding green, 查看代码测试 %}

查看代码测试

{% endfolding %}
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/tag-plugins/hexo/index.html b/v3/tag-plugins/hexo/index.html index 47e93995a..d6cee91e2 100644 --- a/v3/tag-plugins/hexo/index.html +++ b/v3/tag-plugins/hexo/index.html @@ -1 +1 @@ -Hexo 内置标签 - Volantis

Hexo 内置标签

发布于：2023年11月3日

文章摘要和截断

在文章中使用 <!-- more -->，那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。详见 Hexo 官方文档：

标签插件

https://hexo.io/zh-cn/docs/tag-plugins

引用块

引用书上的句子

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

代码块

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

指定语言

[rectangle setX: 10 y: 10 width: 20 height: 20];
example.md:
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

附加说明

Array.map
array.map(callback[, thisArg])
example.md:
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

行标、高亮

1
2
3
4
5
6
7
8
n=eval(input())
if n==0:
   print("Hello World")
elif n>0:
   print("He\nll\no \nWo\nrl\nd")
else:
   for c in "Hello World":
   print(c)
example.md:
{% codeblock lang:python line_number:true mark:3,5,8 %}
n=eval(input())
if n==0:
   print("Hello World")
elif n>0:
   print("He\nll\no \nWo\nrl\nd")
else:
   for c in "Hello World":
   print(c)
{% endcodeblock %}

Pull Quote

在文章中插入 Pull quote

example.md:
{% pullquote [class] %}
content
{% endpullquote %}

jsFiddle

在文章中嵌入 jsFiddle

example.md:
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

Gist

在文章中嵌入 Gist，注意：在国内无法加载。

example.md:
{% gist gist_id [filename] %}

iframe

在文章中插入 iframe

example.md:
{% iframe url [width] [height] %}

Image

在文章中插入指定大小的图片。

example.md:
{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

在文章中插入链接，并自动给外部链接添加 target="_blank" 属性。

example.md:
{% link text url [external] [title] %}

Include Code

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的，取决于你在配置文件中 code_dir 的配置。

example.md:
{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}
示例

嵌入 test.js 文件全文

{% include_code lang:javascript test.js %}

只嵌入第 3 行

{% include_code lang:javascript from:3 to:3 test.js %}

嵌入第 5 行至第 8 行

{% include_code lang:javascript from:5 to:8 test.js %}

嵌入第 5 行至文件结束

{% include_code lang:javascript from:5 test.js %}

嵌入第 1 行至第 8 行

{% include_code lang:javascript to:8 test.js %}

引用文章

引用其他文章的链接。

{% post_path filename %}
{% post_link filename [title] [escape] %}
示例

引用这篇文章：主题更名为「Volantis」

example.md:
引用这篇文章：{% post_link news/2020-02-22 %}

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Hexo 内置标签 - Volantis

Hexo 内置标签

发布于：2023年11月3日

文章摘要和截断

在文章中使用 <!-- more -->，那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。详见 Hexo 官方文档：

标签插件

https://hexo.io/zh-cn/docs/tag-plugins

引用块

引用书上的句子

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

代码块

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

指定语言

[rectangle setX: 10 y: 10 width: 20 height: 20];
example.md:
{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}

附加说明

Array.map
array.map(callback[, thisArg])
example.md:
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}

行标、高亮

1
2
3
4
5
6
7
8
n=eval(input())
if n==0:
   print("Hello World")
elif n>0:
   print("He\nll\no \nWo\nrl\nd")
else:
   for c in "Hello World":
   print(c)
example.md:
{% codeblock lang:python line_number:true mark:3,5,8 %}
n=eval(input())
if n==0:
   print("Hello World")
elif n>0:
   print("He\nll\no \nWo\nrl\nd")
else:
   for c in "Hello World":
   print(c)
{% endcodeblock %}

Pull Quote

在文章中插入 Pull quote

example.md:
{% pullquote [class] %}
content
{% endpullquote %}

jsFiddle

在文章中嵌入 jsFiddle

example.md:
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

Gist

在文章中嵌入 Gist，注意：在国内无法加载。

example.md:
{% gist gist_id [filename] %}

iframe

在文章中插入 iframe

example.md:
{% iframe url [width] [height] %}

Image

在文章中插入指定大小的图片。

example.md:
{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

在文章中插入链接，并自动给外部链接添加 target="_blank" 属性。

example.md:
{% link text url [external] [title] %}

Include Code

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的，取决于你在配置文件中 code_dir 的配置。

example.md:
{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}
示例

嵌入 test.js 文件全文

{% include_code lang:javascript test.js %}

只嵌入第 3 行

{% include_code lang:javascript from:3 to:3 test.js %}

嵌入第 5 行至第 8 行

{% include_code lang:javascript from:5 to:8 test.js %}

嵌入第 5 行至文件结束

{% include_code lang:javascript from:5 test.js %}

嵌入第 1 行至第 8 行

{% include_code lang:javascript to:8 test.js %}

引用文章

引用其他文章的链接。

{% post_path filename %}
{% post_link filename [title] [escape] %}
示例

引用这篇文章：主题更名为「Volantis」

example.md:
引用这篇文章：{% post_link news/2020-02-22 %}

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/tag-plugins/link/index.html b/v3/tag-plugins/link/index.html index b355359ff..6bf0db73e 100644 --- a/v3/tag-plugins/link/index.html +++ b/v3/tag-plugins/link/index.html @@ -1 +1 @@ -链接、按钮和菜单标签 - Volantis

链接、按钮和菜单标签

发布于：2023年11月3日

外链卡片

请将您的 Volantis 升级至 3.0 版本以上使用。

基础按钮

请将您的 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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.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://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

如果需要显示类似「团队成员」之类的一组含有头像的链接：

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu

或者含有图标的按钮：

下载源码 查看文档

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

心率管家

专业版

 心率管家

免费版

下拉菜单

请将您的 Volantis 升级至 3.0 版本以上使用。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +链接、按钮和菜单标签 - Volantis

链接、按钮和菜单标签

发布于：2023年11月3日

外链卡片

请将您的 Volantis 升级至 3.0 版本以上使用。

基础按钮

请将您的 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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.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://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

如果需要显示类似「团队成员」之类的一组含有头像的链接：

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu

或者含有图标的按钮：

下载源码 查看文档

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

心率管家

专业版

 心率管家

免费版

下拉菜单

请将您的 Volantis 升级至 3.0 版本以上使用。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/tag-plugins/media/index.html b/v3/tag-plugins/media/index.html index a7377f0e5..f9b02dbf1 100644 --- a/v3/tag-plugins/media/index.html +++ b/v3/tag-plugins/media/index.html @@ -1 +1 @@ -多媒体标签 - Volantis

多媒体标签

发布于：2023年11月3日

Inlineimage

Inlineimage 标签是一种行内图片标签，可以用来在一段话中间插入表情。请将您的 Volantis 升级至 3.0.0 版本以上使用。

这是一段话 {% inlineimage 链接, height=高度（可选） %} 这是一段话。

图片高度

阿拉伯数字 + px

example:
height=20px
example.md:
这是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。

这是 一段话。

这又是 一段话。

Image

Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。请将您的 Volantis 升级至 2.6 版本以上使用。

{% image 链接, 宽度（可选）, 描述（可选） %}

图片宽度

阿拉伯数字 + px

example:
300px

图片描述

纯文本，不能包含引号。

example.md:
添加描述：

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, alt=每天下课回宿舍的路，承载了太多记忆。 %}

指定宽度：

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, width=300px %}

指定宽度并添加描述：

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, width=300px, alt=每天下课回宿舍的路，承载了太多记忆。 %}

添加描述：

每天下课回宿舍的路，承载了太多记忆。
每天下课回宿舍的路，承载了太多记忆。

指定宽度：

image

指定宽度并添加描述：

每天下课回宿舍的路，承载了太多记忆。
每天下课回宿舍的路，承载了太多记忆。

Gallery 标签是一种针对一组图片应用场景的标签。请将您的 Volantis 升级至 3.0 版本以上使用。

Audio

请将您的 Volantis 升级至 2.4 版本以上使用。

example.md:
{% audio 音频链接 %}
example.md:
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

Video

请将您的 Volantis 升级至 2.3 版本以上使用。

单个视频

example.md:
{% video 视频链接 %}

多个视频

example.md:
{% videos 对齐方向, 列数 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% endvideos %}

对齐方向

left, center, right

列数

逗号后面直接写列数，支持 1 ～ 4 列。

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 %}

100%宽度

50%宽度

25%宽度

APlayer

主题对 APlayer 插件的样式进行了兼容。安装插件：

npm i -S hexo-tag-aplayer

hexo-tag-aplayer

https://github.com/MoePlayer/hexo-tag-aplayer

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +多媒体标签 - Volantis

多媒体标签

发布于：2023年11月3日

Inlineimage

Inlineimage 标签是一种行内图片标签，可以用来在一段话中间插入表情。请将您的 Volantis 升级至 3.0.0 版本以上使用。

这是一段话 {% inlineimage 链接, height=高度（可选） %} 这是一段话。

图片高度

阿拉伯数字 + px

example:
height=20px
example.md:
这是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。

这是 一段话。

这又是 一段话。

Image

Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。请将您的 Volantis 升级至 2.6 版本以上使用。

{% image 链接, 宽度（可选）, 描述（可选） %}

图片宽度

阿拉伯数字 + px

example:
300px

图片描述

纯文本，不能包含引号。

example.md:
添加描述：

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, alt=每天下课回宿舍的路，承载了太多记忆。 %}

指定宽度：

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, width=300px %}

指定宽度并添加描述：

{% image https://i.loli.net/2020/04/06/zdeQiOY9rBCjhDR.jpg, width=300px, alt=每天下课回宿舍的路，承载了太多记忆。 %}

添加描述：

每天下课回宿舍的路，承载了太多记忆。
每天下课回宿舍的路，承载了太多记忆。

指定宽度：

image

指定宽度并添加描述：

每天下课回宿舍的路，承载了太多记忆。
每天下课回宿舍的路，承载了太多记忆。

Gallery 标签是一种针对一组图片应用场景的标签。请将您的 Volantis 升级至 3.0 版本以上使用。

Audio

请将您的 Volantis 升级至 2.4 版本以上使用。

example.md:
{% audio 音频链接 %}
example.md:
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

Video

请将您的 Volantis 升级至 2.3 版本以上使用。

单个视频

example.md:
{% video 视频链接 %}

多个视频

example.md:
{% videos 对齐方向, 列数 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% endvideos %}

对齐方向

left, center, right

列数

逗号后面直接写列数，支持 1 ～ 4 列。

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 %}

100%宽度

50%宽度

25%宽度

APlayer

主题对 APlayer 插件的样式进行了兼容。安装插件：

npm i -S hexo-tag-aplayer

hexo-tag-aplayer

https://github.com/MoePlayer/hexo-tag-aplayer

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/tag-plugins/text/index.html b/v3/tag-plugins/text/index.html index 59d30b775..321c4ca7e 100644 --- a/v3/tag-plugins/text/index.html +++ b/v3/tag-plugins/text/index.html @@ -1 +1 @@ -文本和段落标签 - Volantis

文本和段落标签

发布于：2023年11月3日

行内小标签

请将您的 Volantis 升级至 3.0 版本以上使用。

带下划线的文本

{% u 带下划线的文本 %}

带着重号的文本

{% emp 带着重号的文本 %}

带波浪线的文本

{% wavy 波浪线 %}

带删除线的文本

{% del 带删除线的文本 %}

键盘样式的文本

{% kbd 键盘样式的文本 %}

密码样式的文本

{% psw 密码样式的文本 %}

带下划线的文本

example.md:
带 {% u 下划线 %} 的文本

带着重号的文本

example.md:
带 {% emp 着重号 %} 的文本

带波浪线的文本

example.md:
带 {% wavy 波浪线 %} 的文本

带删除线的文本

example.md:
带 {% del 删除线 %} 的文本

键盘样式的文本

example.md:
收藏页面：{% kbd command %} + {% kbd D %}

密码样式的文本

example.md:
验证码：{% psw 这里没有验证码 %}

带下划线的文本

带 下划线 的文本

带着重号的文本

带着重号 的文本

带波浪线的文本

带波浪线 的文本

带删除线的文本

带 删除线 的文本

键盘样式的文本

收藏页面：command + D

密码样式的文本

验证码：这里没有验证码

Span & P

请将您的 Volantis 升级至 2.5 版本以上使用。

行内文本

{% span 样式参数, 文本内容 %}

独立段落

{% p 样式参数, 文本内容 %}

样式参数位置可以写颜色、大小和对齐方向，多个样式参数用空格隔开。

字体

logo, code

颜色

red, yellow, green, cyan, blue, gray

大小

small, h4, h3, h2, h1, large, huge, ultra

对齐方向

left, center, right

彩色文字

example.md:
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。

超大文字

example.md:
文档「开始」页面中的标题部分就是超大文字。

{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}

彩色文字

在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大文字

文档「开始」页面中的标题部分就是超大文字。

A Wonderful Theme for Hexo

Note & NoteBlock

NoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。请将您的 Volantis 升级至 2.3 版本以上使用。

Note

{% note 样式参数, 文本内容 %}

NoteBlock

{% noteblock 样式参数 %}

文本段落

{% endnoteblock %}

样式参数位置可以写图标和颜色，多个样式参数用空格隔开。

图标

彩色的
quote, info, warning, done/success, error/danger
灰色的，也可以指定颜色
radiation, bug, idea, link, paperclip, todo, msg, guide, download, up, undo

颜色

指定颜色
clear, light, gray, red, yellow, green, cyan, blue

Note

example.md:
{% note, 为简单的一句话提供的简便写法。 %}

{% note success, 支持同样丰富的参数。 %}

NoteBlock

example.md:
可以在区块中放置一些复杂的结构，支持嵌套。

{% noteblock quote %}

{% p subtitle, 小标题 %}

Windows 10不是為所有人設計,而是為每個人設計

{% p subtitle, 嵌套测试 %}
{% noteblock %}
请坐和放宽，我正在帮你搞定一切...
{% endnoteblock %}

{% p subtitle, Folding 测试 %}
{% folding 点击查看更多 %}

{% note warning, 不要说我们没有警告过你 %}
{% noteblock bug red %}
我们都有不顺利的时候
{% endnoteblock %}

{% endfolding %}
{% endnoteblock %}

Note

为简单的一句话提供的简便写法。

支持同样丰富的参数。

NoteBlock

可以在区块中放置一些复杂的结构，支持嵌套。

小标题

Windows 10不是為所有人設計,而是為每個人設計

嵌套测试

请坐和放宽，我正在帮你搞定一切...

Folding 测试

点击查看更多

不要说我们没有警告过你

我们都有不顺利的时候

Checkbox & Radio

请将您的 Volantis 升级至 2.6 版本以上使用。

{% checkbox 样式参数（可选）, 文本（支持简单md） %}

颜色

red, yellow, green, cyan, blue

样式

plus, minus, times

选中状态

checked

Checkbox

example.md:
{% 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, 叉 %}

Radio

example.md:
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

Checkbox

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

Radio

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

Timeline

请将您的 Volantis 升级至 3.0 版本以上使用。

{% timeline 时间线标题 %}

{% timenode 时间节点（标题） %}

正文内容

{% endtimenode %}

{% timenode 时间节点（标题） %}

正文内容

{% endtimenode %}

{% endtimeline %}
example.md:
{% 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 %}

升级小助手

2020-07-24 2.6.6 -> 3.0.0

  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 服务。

2020-07-24 2.6.3 -> 2.6.6

不需要额外处理。

2020-07-24 2.6.2 -> 2.6.3

  1. 全局搜索 seotitle 并替换为 seo_title。
  2. group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
  3. group 组件的列表名优先显示文章的 short_title 其次是 title。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +文本和段落标签 - Volantis

文本和段落标签

发布于：2023年11月3日

行内小标签

请将您的 Volantis 升级至 3.0 版本以上使用。

带下划线的文本

{% u 带下划线的文本 %}

带着重号的文本

{% emp 带着重号的文本 %}

带波浪线的文本

{% wavy 波浪线 %}

带删除线的文本

{% del 带删除线的文本 %}

键盘样式的文本

{% kbd 键盘样式的文本 %}

密码样式的文本

{% psw 密码样式的文本 %}

带下划线的文本

example.md:
带 {% u 下划线 %} 的文本

带着重号的文本

example.md:
带 {% emp 着重号 %} 的文本

带波浪线的文本

example.md:
带 {% wavy 波浪线 %} 的文本

带删除线的文本

example.md:
带 {% del 删除线 %} 的文本

键盘样式的文本

example.md:
收藏页面：{% kbd command %} + {% kbd D %}

密码样式的文本

example.md:
验证码：{% psw 这里没有验证码 %}

带下划线的文本

带 下划线 的文本

带着重号的文本

带着重号 的文本

带波浪线的文本

带波浪线 的文本

带删除线的文本

带 删除线 的文本

键盘样式的文本

收藏页面：command + D

密码样式的文本

验证码：这里没有验证码

Span & P

请将您的 Volantis 升级至 2.5 版本以上使用。

行内文本

{% span 样式参数, 文本内容 %}

独立段落

{% p 样式参数, 文本内容 %}

样式参数位置可以写颜色、大小和对齐方向，多个样式参数用空格隔开。

字体

logo, code

颜色

red, yellow, green, cyan, blue, gray

大小

small, h4, h3, h2, h1, large, huge, ultra

对齐方向

left, center, right

彩色文字

example.md:
在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。

超大文字

example.md:
文档「开始」页面中的标题部分就是超大文字。

{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}

彩色文字

在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大文字

文档「开始」页面中的标题部分就是超大文字。

A Wonderful Theme for Hexo

Note & NoteBlock

NoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。请将您的 Volantis 升级至 2.3 版本以上使用。

Note

{% note 样式参数, 文本内容 %}

NoteBlock

{% noteblock 样式参数 %}

文本段落

{% endnoteblock %}

样式参数位置可以写图标和颜色，多个样式参数用空格隔开。

图标

彩色的
quote, info, warning, done/success, error/danger
灰色的，也可以指定颜色
radiation, bug, idea, link, paperclip, todo, msg, guide, download, up, undo

颜色

指定颜色
clear, light, gray, red, yellow, green, cyan, blue

Note

example.md:
{% note, 为简单的一句话提供的简便写法。 %}

{% note success, 支持同样丰富的参数。 %}

NoteBlock

example.md:
可以在区块中放置一些复杂的结构，支持嵌套。

{% noteblock quote %}

{% p subtitle, 小标题 %}

Windows 10不是為所有人設計,而是為每個人設計

{% p subtitle, 嵌套测试 %}
{% noteblock %}
请坐和放宽，我正在帮你搞定一切...
{% endnoteblock %}

{% p subtitle, Folding 测试 %}
{% folding 点击查看更多 %}

{% note warning, 不要说我们没有警告过你 %}
{% noteblock bug red %}
我们都有不顺利的时候
{% endnoteblock %}

{% endfolding %}
{% endnoteblock %}

Note

为简单的一句话提供的简便写法。

支持同样丰富的参数。

NoteBlock

可以在区块中放置一些复杂的结构，支持嵌套。

小标题

Windows 10不是為所有人設計,而是為每個人設計

嵌套测试

请坐和放宽，我正在帮你搞定一切...

Folding 测试

点击查看更多

不要说我们没有警告过你

我们都有不顺利的时候

Checkbox & Radio

请将您的 Volantis 升级至 2.6 版本以上使用。

{% checkbox 样式参数（可选）, 文本（支持简单md） %}

颜色

red, yellow, green, cyan, blue

样式

plus, minus, times

选中状态

checked

Checkbox

example.md:
{% 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, 叉 %}

Radio

example.md:
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

Checkbox

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

Radio

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

Timeline

请将您的 Volantis 升级至 3.0 版本以上使用。

{% timeline 时间线标题 %}

{% timenode 时间节点（标题） %}

正文内容

{% endtimenode %}

{% timenode 时间节点（标题） %}

正文内容

{% endtimenode %}

{% endtimeline %}
example.md:
{% 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 %}

升级小助手

2020-07-24 2.6.6 -> 3.0.0

  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 服务。

2020-07-24 2.6.3 -> 2.6.6

不需要额外处理。

2020-07-24 2.6.2 -> 2.6.3

  1. 全局搜索 seotitle 并替换为 seo_title。
  2. group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
  3. group 组件的列表名优先显示文章的 short_title 其次是 title。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/theme-settings/comments/index.html b/v3/theme-settings/comments/index.html index 60eec22bc..0f1e41ee7 100644 --- a/v3/theme-settings/comments/index.html +++ b/v3/theme-settings/comments/index.html @@ -1 +1 @@ -选择评论系统 - Volantis

选择评论系统

发布于：2023年11月3日

目前支持的评论系统有： Valine, MiniValine, Disqus, Gitalk, Vssue, Livere, Isso, Hashover

blog/_config.volantis.yml
comments:
  title: <i class='fas fa-comments'></i> 评论
  subtitle:
  service: valine # valine, minivaline, disqus, gitalk, vssue, livere, isso, hashover

一款快速、简洁且高效的无后端评论系统
https://valine.js.org

blog/_config.volantis.yml
comments:
  ...
  service: valine
  ...
  valine:
    appId: # your appId
    appKey: # your appKey
    js: https://unpkg.com/valine@1.4/dist/Valine.min.js
    ... 可选配置项详见源码

其中，placeholder 支持在 front-matter 中设置。

front-matter
---
valine:
  placeholder: 你觉得xxx怎么样呢？
---

也可以通过设置 valine.path 实现多个页面共用一个评论框。

front-matter
---
valine:
  path: /
---

一款快速、简洁且高效的无后端评论系统
https://github.com/MiniValine/MiniValine/

blog/_config.volantis.yml
comments:
  ...
  service: minivaline
  ...
  minivaline:
    appId: # Your leancloud application appid
    appKey: # Your leancloud application appkey
    ... 可选配置项详见源码

Vue 驱动的、基于 Issue 的评论插件
https://vssue.js.org/zh/

blog/_config.volantis.yml
comments:
  ...
  service: vssue
  ...
  vssue:
    owner:
    repo:
    clientId:
    clientSecret:

A modern comment component based on Github Issue and Preact.
https://gitalk.github.io/

blog/_config.volantis.yml
comments:
  ...
  service: gitalk
  ...
  gitalk:
    clientID:
    clientSecret:
    repo:
    owner:
    admin: # []

clientID 和 clientSecret 的获取方法可自行搜索教程，这里仅简单描述一下步骤：

  1. 点击 GitHub -> Settings https://github.com/settings/profile
  2. 点击 Developer settings https://github.com/settings/developers
  3. 点击 New OAuth App https://github.com/settings/applications/new
  4. 填写信息：
    Application name 随便填，我的是：xaoxuu.com
    Homepage URL 和 Authorization callback URL 都写你的网址，我的是：https://xaoxuu.com

可以通过设置 gitalk.id 实现多个页面共用一个评论框。

front-matter
---
gitalk:
  id: /wiki/volantis/
---

Disqus - The #1 way to build an audience on your website.
https://disqus.com/

blog/_config.volantis.yml
comments:
  ...
  service: disqus
  ...
  disqus:
    shortname:

Communication makes better world.
https://www.livere.com/

blog/_config.volantis.yml
comments:
  ...
  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 commenting server similar to Disqus.
https://posativ.org/isso/

blog/_config.volantis.yml
comments:
  ...
  service: isso
  ...
  isso:
    url: https://example.com/(path/)
    src: https://example.com/(path/)js/embed.min.js

A free and open source PHP comment system designed to allow completely anonymous comments and easy theming.
https://www.barkdull.org/software/hashover

blog/_config.volantis.yml
comments:
  ...
  service: hashover
  ...
  hashover:
    src: https://example.com/(path/)comments.php
blog/themes/volantis/layout/_third-party/comments/评论系统名称/layout.ejs
这里写布局代码
blog/themes/volantis/layout/_third-party/comments/评论系统名称/script.ejs
这里要写加载 js 的代码

收录更多评论系统

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +选择评论系统 - Volantis

选择评论系统

发布于：2023年11月3日

目前支持的评论系统有： Valine, MiniValine, Disqus, Gitalk, Vssue, Livere, Isso, Hashover

blog/_config.volantis.yml
comments:
  title: <i class='fas fa-comments'></i> 评论
  subtitle:
  service: valine # valine, minivaline, disqus, gitalk, vssue, livere, isso, hashover

一款快速、简洁且高效的无后端评论系统
https://valine.js.org

blog/_config.volantis.yml
comments:
  ...
  service: valine
  ...
  valine:
    appId: # your appId
    appKey: # your appKey
    js: https://unpkg.com/valine@1.4/dist/Valine.min.js
    ... 可选配置项详见源码

其中，placeholder 支持在 front-matter 中设置。

front-matter
---
valine:
  placeholder: 你觉得xxx怎么样呢？
---

也可以通过设置 valine.path 实现多个页面共用一个评论框。

front-matter
---
valine:
  path: /
---

一款快速、简洁且高效的无后端评论系统
https://github.com/MiniValine/MiniValine/

blog/_config.volantis.yml
comments:
  ...
  service: minivaline
  ...
  minivaline:
    appId: # Your leancloud application appid
    appKey: # Your leancloud application appkey
    ... 可选配置项详见源码

Vue 驱动的、基于 Issue 的评论插件
https://vssue.js.org/zh/

blog/_config.volantis.yml
comments:
  ...
  service: vssue
  ...
  vssue:
    owner:
    repo:
    clientId:
    clientSecret:

A modern comment component based on Github Issue and Preact.
https://gitalk.github.io/

blog/_config.volantis.yml
comments:
  ...
  service: gitalk
  ...
  gitalk:
    clientID:
    clientSecret:
    repo:
    owner:
    admin: # []

clientID 和 clientSecret 的获取方法可自行搜索教程，这里仅简单描述一下步骤：

  1. 点击 GitHub -> Settings https://github.com/settings/profile
  2. 点击 Developer settings https://github.com/settings/developers
  3. 点击 New OAuth App https://github.com/settings/applications/new
  4. 填写信息：
    Application name 随便填，我的是：xaoxuu.com
    Homepage URL 和 Authorization callback URL 都写你的网址，我的是：https://xaoxuu.com

可以通过设置 gitalk.id 实现多个页面共用一个评论框。

front-matter
---
gitalk:
  id: /wiki/volantis/
---

Disqus - The #1 way to build an audience on your website.
https://disqus.com/

blog/_config.volantis.yml
comments:
  ...
  service: disqus
  ...
  disqus:
    shortname:

Communication makes better world.
https://www.livere.com/

blog/_config.volantis.yml
comments:
  ...
  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 commenting server similar to Disqus.
https://posativ.org/isso/

blog/_config.volantis.yml
comments:
  ...
  service: isso
  ...
  isso:
    url: https://example.com/(path/)
    src: https://example.com/(path/)js/embed.min.js

A free and open source PHP comment system designed to allow completely anonymous comments and easy theming.
https://www.barkdull.org/software/hashover

blog/_config.volantis.yml
comments:
  ...
  service: hashover
  ...
  hashover:
    src: https://example.com/(path/)comments.php
blog/themes/volantis/layout/_third-party/comments/评论系统名称/layout.ejs
这里写布局代码
blog/themes/volantis/layout/_third-party/comments/评论系统名称/script.ejs
这里要写加载 js 的代码

收录更多评论系统

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/theme-settings/configuration/index.html b/v3/theme-settings/configuration/index.html index 2ab557b61..9e787bb3e 100644 --- a/v3/theme-settings/configuration/index.html +++ b/v3/theme-settings/configuration/index.html @@ -1 +1 @@ -主题配置文件 - Volantis

主题配置文件

发布于：2023年11月3日

使用代替主题配置文件

第 1/2 步：找到原主题配置文件

  • 使用 npm i hexo-theme-volantis 方式安装的主题，配置文件在 blog/node_modules/hexo-theme-volantis/_config.yml
  • 使用传统方式安装的主题，配置文件在 blog/themes/volantis/_config.yml

第 2/2 步：复制主题配置文件

将主题配置文件复制并重命名到以下路径：

blog/_config.volantis.yml

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +主题配置文件 - Volantis

主题配置文件

发布于：2023年11月3日

使用代替主题配置文件

第 1/2 步：找到原主题配置文件

  • 使用 npm i hexo-theme-volantis 方式安装的主题，配置文件在 blog/node_modules/hexo-theme-volantis/_config.yml
  • 使用传统方式安装的主题，配置文件在 blog/themes/volantis/_config.yml

第 2/2 步：复制主题配置文件

将主题配置文件复制并重命名到以下路径：

blog/_config.volantis.yml

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/theme-settings/cover/index.html b/v3/theme-settings/cover/index.html index 68f8f5d11..66dc62dcd 100644 --- a/v3/theme-settings/cover/index.html +++ b/v3/theme-settings/cover/index.html @@ -1 +1 @@ -网站与文章封面 - Volantis

网站与文章封面

发布于：2023年11月3日

封面方案

blog/_config.volantis.yml
cover:
  scheme: docs # docs, blog
  ...

目前主题提供两种封面方案，全屏封面适用于项目文档，半屏封面适用于个人博客。您可以修改参数决定在任何页面是否显示。

封面布局

blog/_config.volantis.yml
cover:
  ...
  layout: dock # search (搜索), dock (坞), featured (精选), focus (焦点)
  ...

默认显示设置

blog/_config.volantis.yml
cover:
  ...
  display:
    home: true
    archive: false
    others: false # can be written in front-matter 'cover: true'

由于主页、归档是hexo自动生成的，您需要在主题配置文件中设置是否显示封面，而其它页面则可以在 front-matter 中通过设置 cover: true/false 来决定显示封面或者不显示封面。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +网站与文章封面 - Volantis

网站与文章封面

发布于：2023年11月3日

封面方案

blog/_config.volantis.yml
cover:
  scheme: docs # docs, blog
  ...

目前主题提供两种封面方案，全屏封面适用于项目文档，半屏封面适用于个人博客。您可以修改参数决定在任何页面是否显示。

封面布局

blog/_config.volantis.yml
cover:
  ...
  layout: dock # search (搜索), dock (坞), featured (精选), focus (焦点)
  ...

默认显示设置

blog/_config.volantis.yml
cover:
  ...
  display:
    home: true
    archive: false
    others: false # can be written in front-matter 'cover: true'

由于主页、归档是hexo自动生成的，您需要在主题配置文件中设置是否显示封面，而其它页面则可以在 front-matter 中通过设置 cover: true/false 来决定显示封面或者不显示封面。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/theme-settings/footer/index.html b/v3/theme-settings/footer/index.html index a48b9fbac..3aa0607d7 100644 --- a/v3/theme-settings/footer/index.html +++ b/v3/theme-settings/footer/index.html @@ -1 +1 @@ -设置网站页脚 - Volantis

设置网站页脚

发布于：2023年11月3日

您通过 layout 可以自由布局网站页脚内容 aplayer, social, license, info, copyright。

blog/_config.volantis.yml
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.yml
footer:
  layout: [..., br, hello, ...]
  ...
  # You can add your own property here. (Support markdown, for example: br: '<br>')
  br: '<br>'
  hello: '[Hello World](/)'

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +设置网站页脚 - Volantis

设置网站页脚

发布于：2023年11月3日

您通过 layout 可以自由布局网站页脚内容 aplayer, social, license, info, copyright。

blog/_config.volantis.yml
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.yml
footer:
  layout: [..., br, hello, ...]
  ...
  # You can add your own property here. (Support markdown, for example: br: '<br>')
  br: '<br>'
  hello: '[Hello World](/)'

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/theme-settings/layout/index.html b/v3/theme-settings/layout/index.html index 813dd60e1..736dd4f78 100644 --- a/v3/theme-settings/layout/index.html +++ b/v3/theme-settings/layout/index.html @@ -1 +1 @@ -设置默认布局 - Volantis

设置默认布局

发布于：2023年11月3日

您可以自由决定每个页面是否显示侧边栏，侧边栏显示什么小部件，正文区域显示什么卡片，文章卡片显示什么 meta 信息。

layout:
  # The following can be written in `blog/source/_data/layout.yml`
  # 文章列表（主页、自定义的列表）布局
  on_list:
    # 列表中每一篇文章的meta信息
    meta: [title, author, date, category, top]
    # 列表类页面的侧边栏
    sidebar: [blogger, category, tagcloud, qrcode]
  # 页面布局
  on_page:
    # 文章页面主体元素，你也可以在页面的Front-matter中设置
    body: [article, comments]
    # 默认的meta信息，文章中没有配置则按照这里的配置来显示，设置为false则不显示
    # 其中，title只在header中有效，music和thumbnail无需在这里设置，文章中有则显示
    # 如果tags放置在meta.header中，那么在post列表中不显示（因为卡片下方已经有了）
    meta:
      header: [title, author, category, date, top]
      footer: [updated, tags, btns, share]
    # 文章页面的侧边栏
    sidebar: [qrcode, toc]
  # 文章布局，参数继承自 on_page
  on_post:
    # 文章页脚，自动在每一篇文章末尾添加
    article_footer: [copyright, donate]
  # 其他的页面布局暂时等于 on_list

其中 meta 部分的取值自 meta 库， 其余部分取值自 widget 库， （ body 除了可以从 widget 库中取值外，还可以选择 article 和 comments ）。

请别着急，具体的库配置将在下文详细讲解。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +设置默认布局 - Volantis

设置默认布局

发布于：2023年11月3日

您可以自由决定每个页面是否显示侧边栏，侧边栏显示什么小部件，正文区域显示什么卡片，文章卡片显示什么 meta 信息。

layout:
  # The following can be written in `blog/source/_data/layout.yml`
  # 文章列表（主页、自定义的列表）布局
  on_list:
    # 列表中每一篇文章的meta信息
    meta: [title, author, date, category, top]
    # 列表类页面的侧边栏
    sidebar: [blogger, category, tagcloud, qrcode]
  # 页面布局
  on_page:
    # 文章页面主体元素，你也可以在页面的Front-matter中设置
    body: [article, comments]
    # 默认的meta信息，文章中没有配置则按照这里的配置来显示，设置为false则不显示
    # 其中，title只在header中有效，music和thumbnail无需在这里设置，文章中有则显示
    # 如果tags放置在meta.header中，那么在post列表中不显示（因为卡片下方已经有了）
    meta:
      header: [title, author, category, date, top]
      footer: [updated, tags, btns, share]
    # 文章页面的侧边栏
    sidebar: [qrcode, toc]
  # 文章布局，参数继承自 on_page
  on_post:
    # 文章页脚，自动在每一篇文章末尾添加
    article_footer: [copyright, donate]
  # 其他的页面布局暂时等于 on_list

其中 meta 部分的取值自 meta 库， 其余部分取值自 widget 库， （ body 除了可以从 widget 库中取值外，还可以选择 article 和 comments ）。

请别着急，具体的库配置将在下文详细讲解。

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/theme-settings/meta/index.html b/v3/theme-settings/meta/index.html index 1decf7bf0..3a9aeda37 100644 --- a/v3/theme-settings/meta/index.html +++ b/v3/theme-settings/meta/index.html @@ -1 +1 @@ -元数据组件 - Volantis

元数据组件

发布于：2023年11月3日

meta 即文章的元数据，描述文章的作者、发布时间、更新时间等等信息，Volantis 不替您决定，显示什么图标、如何描述都可以自定义。

blog/_config.volantis.yml
meta:
  # 文章标题
  title: # 暂无配置
  # 默认文章作者（可在front-matter中覆盖）
  author:
    avatar: https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png
    name: Mr. X
    url: https://xaoxuu.com
  # 文章创建日期
  date:
    icon: fas fa-edit
    title: '发布于：'
    format: 'll' # 日期格式 http://momentjs.com/docs/
  # 文章更新日期
  updated:
    icon: fas fa-save
    title: '更新于：'
    format: 'll' # 日期格式 http://momentjs.com/docs/
  # 文章分类
  category:
    icon: fas fa-folder-open
  # 文章置顶
  top:
    icon: fas fa-angle-double-up
  # 文章浏览计数
  counter:
    icon: fas fa-eye
  # 文章字数和阅读时长
  wordcount:
    icon_wordcount: fas fa-keyboard
    icon_duration: fas fa-hourglass-half
  # 文章标签
  tags:
    icon: fas fa-hashtag
  # 分享
  share:
    - id: qq
      img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png
    - id: qzone
      img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png
    - id: weibo
      img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png
    # - id: qrcode # 当id为qrcode时需要安装插件  npm i -S hexo-helper-qrcode
    #   img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png
  # 链接
  btns:
    edit:
      icon: fas fa-edit
      title: 在GitHub上编辑此页
      color: '#888'
    repo: # 源码链接
      icon: fas fa-file-code
      title: 源码
      color: '#508EF2'
    bug: # BUG反馈链接
      icon: fas fa-bug
      title: BUG
      color: '#FE5F58'
    doubt: # 疑问链接
      icon: fas fa-question-circle
      title: 疑问
      color: '#FFBD2B'
    idea: # 建议链接
      icon: fas fa-lightbulb
      title: 建议
      color: '#3DC550'
    faq: # FAQ链接
      icon: fas fa-comments
      title: FAQ
      color: '#29B1C9'
    feedback: # 反馈链接
      icon: fas fa-comment-dots
      title: 反馈
      color: '#1BCDFC'

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +元数据组件 - Volantis

元数据组件

发布于：2023年11月3日

meta 即文章的元数据，描述文章的作者、发布时间、更新时间等等信息，Volantis 不替您决定，显示什么图标、如何描述都可以自定义。

blog/_config.volantis.yml
meta:
  # 文章标题
  title: # 暂无配置
  # 默认文章作者（可在front-matter中覆盖）
  author:
    avatar: https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png
    name: Mr. X
    url: https://xaoxuu.com
  # 文章创建日期
  date:
    icon: fas fa-edit
    title: '发布于：'
    format: 'll' # 日期格式 http://momentjs.com/docs/
  # 文章更新日期
  updated:
    icon: fas fa-save
    title: '更新于：'
    format: 'll' # 日期格式 http://momentjs.com/docs/
  # 文章分类
  category:
    icon: fas fa-folder-open
  # 文章置顶
  top:
    icon: fas fa-angle-double-up
  # 文章浏览计数
  counter:
    icon: fas fa-eye
  # 文章字数和阅读时长
  wordcount:
    icon_wordcount: fas fa-keyboard
    icon_duration: fas fa-hourglass-half
  # 文章标签
  tags:
    icon: fas fa-hashtag
  # 分享
  share:
    - id: qq
      img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png
    - id: qzone
      img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png
    - id: weibo
      img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png
    # - id: qrcode # 当id为qrcode时需要安装插件  npm i -S hexo-helper-qrcode
    #   img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png
  # 链接
  btns:
    edit:
      icon: fas fa-edit
      title: 在GitHub上编辑此页
      color: '#888'
    repo: # 源码链接
      icon: fas fa-file-code
      title: 源码
      color: '#508EF2'
    bug: # BUG反馈链接
      icon: fas fa-bug
      title: BUG
      color: '#FE5F58'
    doubt: # 疑问链接
      icon: fas fa-question-circle
      title: 疑问
      color: '#FFBD2B'
    idea: # 建议链接
      icon: fas fa-lightbulb
      title: 建议
      color: '#3DC550'
    faq: # FAQ链接
      icon: fas fa-comments
      title: FAQ
      color: '#29B1C9'
    feedback: # 反馈链接
      icon: fas fa-comment-dots
      title: 反馈
      color: '#1BCDFC'

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/theme-settings/navbar/index.html b/v3/theme-settings/navbar/index.html index 5effe0db6..b2a2ae886 100644 --- a/v3/theme-settings/navbar/index.html +++ b/v3/theme-settings/navbar/index.html @@ -1 +1 @@ -设置网站导航栏 - Volantis

设置网站导航栏

发布于：2023年11月3日

导航栏配置

导航栏分为 logo、menu、search 三个区域设置，其中 logo 区域如果设置了图片，则不能显示图标和标题， menu 区域的设置可以写在一个单独的文件中。

blog/_config.volantis.yml
navbar:
  logo: # choose [img] or [icon + title]
    img:
    icon:
    title:
  menu:
    # The following can be written in `blog/source/_data/menu.yml`
    - name: 博客
      icon: fas fa-rss
      url: /
    - name: 分类
      icon: fas fa-folder-open
      url: categories/
    - name: 标签
      icon: fas fa-tags
      url: tags/
    - name: 归档
      icon: fas fa-archive
      url: archives/
    - name: 友链
      icon: fas fa-link
      url: friends/
    - name: 关于
      icon: fas fa-info-circle
      url: about/
  search: 搜索   # Search bar placeholder

使用数据文件

建议新建一个文件，专门存放导航栏菜单配置，文件的路径为：

blog/source/_data/menu.yml

文件的内容为：

blog/source/_data/menu.yml
- name: 博客
  icon: fas fa-rss
  url: /
...

菜单嵌套

导航栏菜单支持嵌套，嵌套的属性名为 rows ，写法示例：

blog/source/_data/menu.yml
...
- name: 更多
  icon: fas 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: fas fa-clock
  url: /
  rows:
    - name: 热门文章
      icon: fas 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/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +设置网站导航栏 - Volantis

设置网站导航栏

发布于：2023年11月3日

导航栏配置

导航栏分为 logo、menu、search 三个区域设置，其中 logo 区域如果设置了图片，则不能显示图标和标题， menu 区域的设置可以写在一个单独的文件中。

blog/_config.volantis.yml
navbar:
  logo: # choose [img] or [icon + title]
    img:
    icon:
    title:
  menu:
    # The following can be written in `blog/source/_data/menu.yml`
    - name: 博客
      icon: fas fa-rss
      url: /
    - name: 分类
      icon: fas fa-folder-open
      url: categories/
    - name: 标签
      icon: fas fa-tags
      url: tags/
    - name: 归档
      icon: fas fa-archive
      url: archives/
    - name: 友链
      icon: fas fa-link
      url: friends/
    - name: 关于
      icon: fas fa-info-circle
      url: about/
  search: 搜索   # Search bar placeholder

使用数据文件

建议新建一个文件，专门存放导航栏菜单配置，文件的路径为：

blog/source/_data/menu.yml

文件的内容为：

blog/source/_data/menu.yml
- name: 博客
  icon: fas fa-rss
  url: /
...

菜单嵌套

导航栏菜单支持嵌套，嵌套的属性名为 rows ，写法示例：

blog/source/_data/menu.yml
...
- name: 更多
  icon: fas 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: fas fa-clock
  url: /
  rows:
    - name: 热门文章
      icon: fas 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/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/theme-settings/plugins/index.html b/v3/theme-settings/plugins/index.html index 94d9ca084..950a4a36e 100644 --- a/v3/theme-settings/plugins/index.html +++ b/v3/theme-settings/plugins/index.html @@ -1 +1 @@ -第三方插件 - Volantis

第三方插件

发布于：2023年11月3日

插件库

Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭，无需进行设置。

blog/_config.volantis.yml
plugins:
  ################ required plugins ################

  # jquery
  jquery: https://unpkg.com/jquery@3.5/dist/jquery.min.js

  ################ optional plugins ################

  # fontawesome
  fontawesome: https://unpkg.com/@fortawesome/fontawesome-free@5.13/css/all.min.css
  # fontawesome animation
  fontawesome_animation: https://gcore.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css
  # fancybox
  fancybox: https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css


  ######## Plugins to improve loading speed:
  # Preload (The menu's url must end with ‘/’)
  instant_page: https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js

  ######## Plugins to optimize the experience:
  # highlight.js
  highlightjs:
    js: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js
    css: https://unpkg.com/highlight.js@9.18.1/styles/solarized-light.css
    # more: https://www.jsdelivr.com/package/npm/highlight.js?path=styles

  # https://scrollrevealjs.org/api/reveal.html
  scrollreveal:
    js: https://unpkg.com/scrollreveal@4.0.6/dist/scrollreveal.min.js
    distance: 32px
    duration: 800 # ms
    interval: 20 # ms
    scale: 1 # 0.1~1

  # Codeblock Copy Button
  clipboard: https://unpkg.com/clipboard@2/dist/clipboard.min.js

  ######## Plugins for SEO:
  # Traffic statistics (very slow loading)
  busuanzi: https://gcore.jsdelivr.net/gh/volantis-x/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js

  # npm i --save hexo-wordcount
  wordcount: #true

  ######## Plugins for ...
  # Button Ripple Effect
  nodewaves:
    css: https://unpkg.com/node-waves@0.7.6/dist/waves.min.css
    js: https://unpkg.com/node-waves@0.7.6/dist/waves.min.js

  # Typing Effects
  comment_typing: #https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js

  # Slide Background
  backstretch:
    enable: true
    js: https://unpkg.com/jquery-backstretch@2.1.18/jquery.backstretch.min.js
    position: cover       # cover: sticky on the cover.   fixed: Fixed as background for the site.
    shuffle: true         # shuffle playlist
    duration: 20000       # 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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/033.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/035.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/038.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/039.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/042.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/052.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/054.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/056.jpg

  # APlayer is only available in mainland China.
  # APlayer config: https://github.com/metowolf/MetingJS
  aplayer:
    enable: true
    js:
      - https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
      - https://unpkg.com/meting@2.0/dist/Meting.min.js
      - js/aplayer.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
  pjax:
    enable: true
    timeout: 5000        # The timeout in milliseconds for the XHR requests. Set to 0 to disable the timeout.
    cacheBust: false     # When set to true, Pjax appends a timestamp  to skip the browser cache.
    animation: nprogress # nprogress, circle
    banUrl:              # 被屏蔽的 url 地址将不启用 pjax 跳转，可以在控制台下使用 window.location.pathname 获取
      # - '/about/index.html'

  # Artitalk https://artitalk.js.org
  # 配置过程请参考：https://artitalk.js.org/doc.html
  # 除appID和appKEY外均为选填项
  Artitalk:
    enable: false # true为开启，false为关闭
    appID: ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI # your appID
    appKEY: nHXLd3N3Jgh460t2iRQKWAtr # your appKEY
    # severurl:  #leancloud绑定的安全域名，使用国际版的话不需要填写
    # slanguage: # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
    # per: #每页说说的显示数量
    # placeholder1: #在编辑说说的输入框中的占位符
    # placeholder2: #自定义头像url的输入框的占位符
    # lazy: #加载动画的开关，1为开，0为关，默认为开
    # bgimg: #说说输入框背景图片url
    # color1: #说说背景颜色1&按钮颜色1
    # color2: #说说背景颜色2&按钮颜色2
    # color3: #说说字体颜色
  ##################################
  # 暗黑模式 darkmodejs
  # https://darkmodejs.learn.uno
  # 暗黑模式样式：https://github.com/volantis-x/hexo-theme-volantis/blob/master/source/css/_third-party/darkmode.styl
  darkmodejs:
    enable: false
    js: https://unpkg.com/darkmode-js@1.5/lib/darkmode-js.min.js
    bottom: 32px
    right: unset
    left: 16px
    time: 0s
    mixColor: '#f4f4f4'
    backgroundColor: '#f4f4f4'
    buttonColorDark: '#100f2c'
    buttonColorLight: '#f4f4f4'
    saveInCookies: true
    label: 🌓
    autoMatchOsTheme: true

幻灯片背景

blog/_config.volantis.yml
plugins:
  ...
  backstretch:
    enable: true
    js: https://unpkg.com/jquery-backstretch@2.1.18/jquery.backstretch.min.js
    position: cover       # cover: sticky on the cover.   fixed: Fixed as background for the site.
    duration: 20000       # 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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg
      ...

幻灯片背景图片显示的位置可以选择粘贴在封面上，跟随封面一起滑动，也可以选择固定作为网页背景图片。

highlight.js

blog/_config.volantis.yml
plugins:
  ...
  highlightjs:
    js: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js
    css: https://unpkg.com/highlight.js@9.18.1/styles/solarized-light.css

如果需要使用 highlight.js 进行语法高亮，请将站点配置文件中的 highlight.enable 设置为 false 否则不会加载插件。您可以在 94 种 语法高亮主题 中挑选喜爱的主题，然后替换上面的 css 链接。

如果您使用 highlight.js 请确保没有使用 hexo 官方的 codeblock 标签，否则会报错。

经测试，使用 highlight.js 的情况下，部分容器内的代码可能仍然会被渲染甚至报错。

APlayer 音乐播放器

blog/_config.volantis.yml
plugins:
  ...
  aplayer:
    enable: true
    js:
      - https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
      - https://unpkg.com/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: 340px # list max height
    list_folded: true

APlayer播放器只可以在中国大陆地区使用。相关文档： APlayer | MetingJS

Artitalk

blog/_config.volantis.yml
plugins:
  ...
  # Artitalk https://artitalk.js.org
  # 配置过程请参考：https://artitalk.js.org/doc.html
  # 除appID和appKEY外均为选填项
  Artitalk:
    enable: false # true为开启，false为关闭
    appID: ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI # your appID
    appKEY: nHXLd3N3Jgh460t2iRQKWAtr # your appKEY
    # severurl:  #leancloud绑定的安全域名，使用国际版的话不需要填写
    # slanguage: # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
    # per: #每页说说的显示数量
    # placeholder1: #在编辑说说的输入框中的占位符
    # placeholder2: #自定义头像url的输入框的占位符
    # lazy: #加载动画的开关，1为开，0为关，默认为开
    # bgimg: #说说输入框背景图片url
    # color1: #说说背景颜色1&按钮颜色1
    # color2: #说说背景颜色2&按钮颜色2
    # color3: #说说字体颜色

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +第三方插件 - Volantis

第三方插件

发布于：2023年11月3日

插件库

Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭，无需进行设置。

blog/_config.volantis.yml
plugins:
  ################ required plugins ################

  # jquery
  jquery: https://unpkg.com/jquery@3.5/dist/jquery.min.js

  ################ optional plugins ################

  # fontawesome
  fontawesome: https://unpkg.com/@fortawesome/fontawesome-free@5.13/css/all.min.css
  # fontawesome animation
  fontawesome_animation: https://gcore.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css
  # fancybox
  fancybox: https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css


  ######## Plugins to improve loading speed:
  # Preload (The menu's url must end with ‘/’)
  instant_page: https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js

  ######## Plugins to optimize the experience:
  # highlight.js
  highlightjs:
    js: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js
    css: https://unpkg.com/highlight.js@9.18.1/styles/solarized-light.css
    # more: https://www.jsdelivr.com/package/npm/highlight.js?path=styles

  # https://scrollrevealjs.org/api/reveal.html
  scrollreveal:
    js: https://unpkg.com/scrollreveal@4.0.6/dist/scrollreveal.min.js
    distance: 32px
    duration: 800 # ms
    interval: 20 # ms
    scale: 1 # 0.1~1

  # Codeblock Copy Button
  clipboard: https://unpkg.com/clipboard@2/dist/clipboard.min.js

  ######## Plugins for SEO:
  # Traffic statistics (very slow loading)
  busuanzi: https://gcore.jsdelivr.net/gh/volantis-x/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js

  # npm i --save hexo-wordcount
  wordcount: #true

  ######## Plugins for ...
  # Button Ripple Effect
  nodewaves:
    css: https://unpkg.com/node-waves@0.7.6/dist/waves.min.css
    js: https://unpkg.com/node-waves@0.7.6/dist/waves.min.js

  # Typing Effects
  comment_typing: #https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js

  # Slide Background
  backstretch:
    enable: true
    js: https://unpkg.com/jquery-backstretch@2.1.18/jquery.backstretch.min.js
    position: cover       # cover: sticky on the cover.   fixed: Fixed as background for the site.
    shuffle: true         # shuffle playlist
    duration: 20000       # 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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/033.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/035.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/038.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/039.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/042.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/052.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/054.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/056.jpg

  # APlayer is only available in mainland China.
  # APlayer config: https://github.com/metowolf/MetingJS
  aplayer:
    enable: true
    js:
      - https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
      - https://unpkg.com/meting@2.0/dist/Meting.min.js
      - js/aplayer.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
  pjax:
    enable: true
    timeout: 5000        # The timeout in milliseconds for the XHR requests. Set to 0 to disable the timeout.
    cacheBust: false     # When set to true, Pjax appends a timestamp  to skip the browser cache.
    animation: nprogress # nprogress, circle
    banUrl:              # 被屏蔽的 url 地址将不启用 pjax 跳转，可以在控制台下使用 window.location.pathname 获取
      # - '/about/index.html'

  # Artitalk https://artitalk.js.org
  # 配置过程请参考：https://artitalk.js.org/doc.html
  # 除appID和appKEY外均为选填项
  Artitalk:
    enable: false # true为开启，false为关闭
    appID: ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI # your appID
    appKEY: nHXLd3N3Jgh460t2iRQKWAtr # your appKEY
    # severurl:  #leancloud绑定的安全域名，使用国际版的话不需要填写
    # slanguage: # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
    # per: #每页说说的显示数量
    # placeholder1: #在编辑说说的输入框中的占位符
    # placeholder2: #自定义头像url的输入框的占位符
    # lazy: #加载动画的开关，1为开，0为关，默认为开
    # bgimg: #说说输入框背景图片url
    # color1: #说说背景颜色1&按钮颜色1
    # color2: #说说背景颜色2&按钮颜色2
    # color3: #说说字体颜色
  ##################################
  # 暗黑模式 darkmodejs
  # https://darkmodejs.learn.uno
  # 暗黑模式样式：https://github.com/volantis-x/hexo-theme-volantis/blob/master/source/css/_third-party/darkmode.styl
  darkmodejs:
    enable: false
    js: https://unpkg.com/darkmode-js@1.5/lib/darkmode-js.min.js
    bottom: 32px
    right: unset
    left: 16px
    time: 0s
    mixColor: '#f4f4f4'
    backgroundColor: '#f4f4f4'
    buttonColorDark: '#100f2c'
    buttonColorLight: '#f4f4f4'
    saveInCookies: true
    label: 🌓
    autoMatchOsTheme: true

幻灯片背景

blog/_config.volantis.yml
plugins:
  ...
  backstretch:
    enable: true
    js: https://unpkg.com/jquery-backstretch@2.1.18/jquery.backstretch.min.js
    position: cover       # cover: sticky on the cover.   fixed: Fixed as background for the site.
    duration: 20000       # 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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg
      ...

幻灯片背景图片显示的位置可以选择粘贴在封面上，跟随封面一起滑动，也可以选择固定作为网页背景图片。

highlight.js

blog/_config.volantis.yml
plugins:
  ...
  highlightjs:
    js: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js
    css: https://unpkg.com/highlight.js@9.18.1/styles/solarized-light.css

如果需要使用 highlight.js 进行语法高亮，请将站点配置文件中的 highlight.enable 设置为 false 否则不会加载插件。您可以在 94 种 语法高亮主题 中挑选喜爱的主题，然后替换上面的 css 链接。

如果您使用 highlight.js 请确保没有使用 hexo 官方的 codeblock 标签，否则会报错。

经测试，使用 highlight.js 的情况下，部分容器内的代码可能仍然会被渲染甚至报错。

APlayer 音乐播放器

blog/_config.volantis.yml
plugins:
  ...
  aplayer:
    enable: true
    js:
      - https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
      - https://unpkg.com/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: 340px # list max height
    list_folded: true

APlayer播放器只可以在中国大陆地区使用。相关文档： APlayer | MetingJS

Artitalk

blog/_config.volantis.yml
plugins:
  ...
  # Artitalk https://artitalk.js.org
  # 配置过程请参考：https://artitalk.js.org/doc.html
  # 除appID和appKEY外均为选填项
  Artitalk:
    enable: false # true为开启，false为关闭
    appID: ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI # your appID
    appKEY: nHXLd3N3Jgh460t2iRQKWAtr # your appKEY
    # severurl:  #leancloud绑定的安全域名，使用国际版的话不需要填写
    # slanguage: # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
    # per: #每页说说的显示数量
    # placeholder1: #在编辑说说的输入框中的占位符
    # placeholder2: #自定义头像url的输入框的占位符
    # lazy: #加载动画的开关，1为开，0为关，默认为开
    # bgimg: #说说输入框背景图片url
    # color1: #说说背景颜色1&按钮颜色1
    # color2: #说说背景颜色2&按钮颜色2
    # color3: #说说字体颜色

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/theme-settings/search/index.html b/v3/theme-settings/search/index.html index 7b1c887ce..8a0d8439d 100644 --- a/v3/theme-settings/search/index.html +++ b/v3/theme-settings/search/index.html @@ -1 +1 @@ -站内搜索 - Volantis

站内搜索

发布于：2023年11月3日

blog/_config.volantis.yml
search:
  enable: true
  service: hexo  # hexo, google, algolia, azure, baidu
  js: https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2.6.4/js/search.js
  google:
    apiKey:
    engineId:
  algolia:
    applicationID:
    apiKey:
    indexName:
  azure:
    serviceName:
    indexName:
    queryKey:
  baidu:
    apiId:

默认配置为 Hexo 搜索，但是需要安装插件才能使用：

npm i -S hexo-generator-search hexo-generator-json-content

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +站内搜索 - Volantis

站内搜索

发布于：2023年11月3日

blog/_config.volantis.yml
search:
  enable: true
  service: hexo  # hexo, google, algolia, azure, baidu
  js: https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2.6.4/js/search.js
  google:
    apiKey:
    engineId:
  algolia:
    applicationID:
    apiKey:
    indexName:
  azure:
    serviceName:
    indexName:
    queryKey:
  baidu:
    apiId:

默认配置为 Hexo 搜索，但是需要安装插件才能使用：

npm i -S hexo-generator-search hexo-generator-json-content

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/theme-settings/style/index.html b/v3/theme-settings/style/index.html index 2e52e91cb..156698c51 100644 --- a/v3/theme-settings/style/index.html +++ b/v3/theme-settings/style/index.html @@ -1 +1 @@ -自定义主题外观 - Volantis

自定义主题外观

发布于：2023年11月3日

最大布局宽度

blog/_config.volantis.yml
style:
  ...
  max_width: 1080px # Sum of body width and sidebar width

网页所呈现的内容的最大宽度，即 body 和 sidebar 的宽度之和。

抗锯齿

blog/_config.volantis.yml
style:
  ...
  font_smoothing: true # font-smoothing for webkit

自定义光标样式

blog/_config.volantis.yml
style:
  ...
  cursor:
    enable: true
    text: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/text.png
    pointer: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/pointer.png
    default: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/left_ptr.png
    not-allowed: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/circle.png
    zoom-out: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/zoom-out.png
    zoom-in: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/zoom-in.png
    grab: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/openhand.png

导航栏样式

您可以设置导航栏的高度以及视觉特效，视觉特效目前可选的有：

  • shadow：卡片阴影。
  • floatable：当鼠标移动到容器内时，呈现出浮起来的效果。
  • blur：背景模糊效果（毛玻璃），当浏览器不支持时显示为不透明。
blog/_config.volantis.yml
style:
  ...
  navbar:
    height: 64px
    effect: [shadow, blur] # [shadow, floatable, blur]

滚动条样式

blog/_config.volantis.yml
style:
  ...
  scrollbar:
    size: 4px
    border: 2px
    color: '#2196f3'
    hover: '#ff5722'

侧边栏样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。

blog/_config.volantis.yml
style:
  ...
  sidebar:
    effect: [shadow] # [shadow, floatable, blur]

正文区域样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。

blog/_config.volantis.yml
style:
  ...
  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
    note: # style for default note: {% note text %}
      icon: '\f054'
      color: ''

布局间距

您可以设置几种标题的布局间距 h2/h3/h4、段落间距 line、区块内部的段落间距 inline。

blog/_config.volantis.yml
style:
  ...
  gap:
    h2: 48px # Spacing above H2 (only px unit)
    h3: 32px # Spacing above H3 (only px unit)
    h4: 16px # Spacing above H4 (only px unit)
    paragraph: 1rem # Paragraph spacing between paragraphs
    row: .5rem # Paragraph spacing between other elements

自定义字体

您可以自定义正文和代码字体。

blog/_config.volantis.yml
style:
  ...
  fontfamily:
    logofont:
      fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: 'Varela Round'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf
      weight: normal
      style: normal
    bodyfont:
      fontfamily: 'UbuntuMono, "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: 'UbuntuMono'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf
      weight: normal
      style: normal
    codefont:
      fontfamily: 'Menlo, Monaco'
      name: 'Monaco'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf
      weight: normal
      style: normal

自定义颜色

blog/_config.volantis.yml
style:
  ...
  color:
    site: '#21232F' # Website background color
    card: '#444' # Card background color
    text: '#fff' # The color of the text on the card.
    theme: '#ff9800' # Main color
    link: '#1BCDFC' # Link color
    hover: '#ff5722' # Link highlight color
    inner: '#333' # Text color inside the button
    block: '#555' # Block color
    inlinecode: yellow # Inline code color
    codeblock: '#555' # Codeblock color
    p: '#ccc' # Paragraph color

自定义右键菜单

blog/_config.volantis.yml
rightmenu:
  enable: true
  # hr: 分割线, music: 音乐控制器
  layout: [home, help, examples, contributors, hr, source_docs, source_theme, hr, print, hr, music]
  # 可选功能项
  print:
    name: 打印页面
    icon: fa fa-print
    onclick: document.execCommand('print')
  # 自定义菜单的格式如下
  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/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +自定义主题外观 - Volantis

自定义主题外观

发布于：2023年11月3日

最大布局宽度

blog/_config.volantis.yml
style:
  ...
  max_width: 1080px # Sum of body width and sidebar width

网页所呈现的内容的最大宽度，即 body 和 sidebar 的宽度之和。

抗锯齿

blog/_config.volantis.yml
style:
  ...
  font_smoothing: true # font-smoothing for webkit

自定义光标样式

blog/_config.volantis.yml
style:
  ...
  cursor:
    enable: true
    text: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/text.png
    pointer: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/pointer.png
    default: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/left_ptr.png
    not-allowed: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/circle.png
    zoom-out: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/zoom-out.png
    zoom-in: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/zoom-in.png
    grab: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/openhand.png

导航栏样式

您可以设置导航栏的高度以及视觉特效，视觉特效目前可选的有：

  • shadow：卡片阴影。
  • floatable：当鼠标移动到容器内时，呈现出浮起来的效果。
  • blur：背景模糊效果（毛玻璃），当浏览器不支持时显示为不透明。
blog/_config.volantis.yml
style:
  ...
  navbar:
    height: 64px
    effect: [shadow, blur] # [shadow, floatable, blur]

滚动条样式

blog/_config.volantis.yml
style:
  ...
  scrollbar:
    size: 4px
    border: 2px
    color: '#2196f3'
    hover: '#ff5722'

侧边栏样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。

blog/_config.volantis.yml
style:
  ...
  sidebar:
    effect: [shadow] # [shadow, floatable, blur]

正文区域样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。

blog/_config.volantis.yml
style:
  ...
  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
    note: # style for default note: {% note text %}
      icon: '\f054'
      color: ''

布局间距

您可以设置几种标题的布局间距 h2/h3/h4、段落间距 line、区块内部的段落间距 inline。

blog/_config.volantis.yml
style:
  ...
  gap:
    h2: 48px # Spacing above H2 (only px unit)
    h3: 32px # Spacing above H3 (only px unit)
    h4: 16px # Spacing above H4 (only px unit)
    paragraph: 1rem # Paragraph spacing between paragraphs
    row: .5rem # Paragraph spacing between other elements

自定义字体

您可以自定义正文和代码字体。

blog/_config.volantis.yml
style:
  ...
  fontfamily:
    logofont:
      fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: 'Varela Round'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf
      weight: normal
      style: normal
    bodyfont:
      fontfamily: 'UbuntuMono, "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: 'UbuntuMono'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf
      weight: normal
      style: normal
    codefont:
      fontfamily: 'Menlo, Monaco'
      name: 'Monaco'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf
      weight: normal
      style: normal

自定义颜色

blog/_config.volantis.yml
style:
  ...
  color:
    site: '#21232F' # Website background color
    card: '#444' # Card background color
    text: '#fff' # The color of the text on the card.
    theme: '#ff9800' # Main color
    link: '#1BCDFC' # Link color
    hover: '#ff5722' # Link highlight color
    inner: '#333' # Text color inside the button
    block: '#555' # Block color
    inlinecode: yellow # Inline code color
    codeblock: '#555' # Codeblock color
    p: '#ccc' # Paragraph color

自定义右键菜单

blog/_config.volantis.yml
rightmenu:
  enable: true
  # hr: 分割线, music: 音乐控制器
  layout: [home, help, examples, contributors, hr, source_docs, source_theme, hr, print, hr, music]
  # 可选功能项
  print:
    name: 打印页面
    icon: fa fa-print
    onclick: document.execCommand('print')
  # 自定义菜单的格式如下
  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/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v3/theme-settings/widget/index.html b/v3/theme-settings/widget/index.html index e84f2dd40..13b7075e4 100644 --- a/v3/theme-settings/widget/index.html +++ b/v3/theme-settings/widget/index.html @@ -1 +1 @@ -卡片式组件 - Volantis

卡片式组件

发布于：2023年11月3日

widget 即小部件，大部分小部件都可以放置在侧边栏，一部分已经为正文区域显示做了优化，还有一部分只可以放置在文章页脚部分。与 meta 库不同的是：除了现有的 widget ，您可以很轻易地创建自己的 widget ，然后放在需要的地方。此外，您还可以将 widget 写在单独的文件中。

查看所有相关配置
blog/_config.volantis.yml
widget:
  # The following can be written in `blog/source/_data/widget.yml`
  # ---------------------------------------
  # blogger info widget
  blogger:
    class: blogger
    display: [desktop] # [desktop, mobile]
    avatar: https://gcore.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
  # ---------------------------------------
  # 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] # [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'
  # ---------------------------------------
  # related posts widget
  related_posts:
    class: related_posts # npm i -S hexo-related-popular-posts
    display: [desktop, mobile] # [desktop, mobile]
    header:
      icon: fas fa-bookmark
      title: 相关文章
    max_count: 5
  # ---------------------------------------
  # copyright widget (valid only in articles)
  copyright:
    class: copyright
    display: [desktop, mobile] # [desktop, mobile]
    blockquote: true
    permalink: '本文永久链接是：'
    content:
      - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
      - permalink
  # ---------------------------------------
  # qrcode widget
  donate:
    class: qrcode
    display: [desktop, mobile] # [desktop, mobile]
    height: 64px  # Automatic height if not set
    fancybox: true
    images:
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
  # You can add your own widget here or 'blog/source/_data/widget.yml'
  # class: text, list, grid, qrcode, page, ... see more at https://volantis.js.org/

每一个小部件都有 class 和 display，前者代表这个小部件是什么，后者代表这个小部件在什么桌面和移动平台中是否显示，如果在移动平台显示，由于屏幕宽度有限，侧边栏的小部件则会被移动到正文区域下方，因此部分侧边栏小部件便失去意义，建议设置为仅桌面端显示。

小部件名:
  class: 小部件类别
  display: [小部件在桌面端显示, 小部件在移动设备显示]

博主信息部件

blog/_config.volantis.yml
blogger:
  class: blogger
  display: [desktop] # [desktop, mobile]
  avatar: https://gcore.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.yml
toc:
  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.yml
category:
  class: category
  display: [desktop] # [desktop, mobile]
  header:
    icon: fas fa-folder-open
    title: 文章分类
    url: /blog/categories/

这个部件可以直接显示所有文章分类，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。

标签云部件

blog/_config.volantis.yml
tagcloud:
  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.yml
related_posts:
  class: related_posts # npm i -S hexo-related-popular-posts
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fas fa-bookmark
    title: 相关文章
  max_count: 5

这个小部件建议放置在文章页脚，要使用这个部件，您需要安装插件：

npm i -S hexo-related-popular-posts

值得注意的是，开启了这个功能之后，每次修改文章内容包括 front-matter 之后，都需要重新 hexo s。

文章版权部件

blog/_config.volantis.yml
copyright:
  class: copyright
  display: [desktop, mobile] # [desktop, mobile]
  blockquote: true
  permalink: '本文永久链接是：'
  content:
    - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
    - permalink

这个部件只可以放置在文章页脚。

二维码部件

blog/_config.volantis.yml
donate:
  class: qrcode
  display: [desktop, mobile] # [desktop, mobile]
  height: 64px  # Automatic height if not set
  fancybox: true
  images:
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png

您可以放置在文章页脚用于展示打赏图片，也可以放置在侧边栏。

通用文本部件

blog/_config.volantis.yml
repos:
  class: text
  display: [desktop] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: 点个赞吧
    url: https://github.com/xaoxuu/
  content:
    - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)'

您可以创建用于展示任何文本内容的文本部件。

通用列表部件

blog/_config.volantis.yml
wiki-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.yml
references:
  class: references # is subclass of list
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fas fa-quote-left
    title: 参考资料

在文章的 front-matter 中设置：

front-matter
references:
  - name: Apple Developer Documentation
    url: https://developer.apple.com/documentation/

组索引

这个部件的布局继承自 list 部件，用于展示文章所属的分组的文章列表。请将您的 Volantis 升级至 2.5 版本以上使用。

blog/_config.volantis.yml
group-1:
  class: group
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fab fa-apple
    title: Developer
    url: /wiki/ios/

在文章的 front-matter 中设置：

front-matter
group: group-1
order: 16
sidebar: [group-1, toc]

「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章，顺序按照 order 从小到大排列。

通用网格部件

blog/_config.volantis.yml
feedback:
  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.yml
test:
  class: page
  display: [desktop, mobile]
  pid: haha
  content: excerpt # excerpt, more, content

您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容，可选 excerpt，more，content 分别对应文章的摘要、摘要后面的内容、全文。

部件库文件

部件库中的所有部件都可以写在部件库文件中，您需要创建一个文件在以下路径：

blog/source/_data/widget.yml

文件内容示例：widget.yml

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +卡片式组件 - Volantis

卡片式组件

发布于：2023年11月3日

widget 即小部件，大部分小部件都可以放置在侧边栏，一部分已经为正文区域显示做了优化，还有一部分只可以放置在文章页脚部分。与 meta 库不同的是：除了现有的 widget ，您可以很轻易地创建自己的 widget ，然后放在需要的地方。此外，您还可以将 widget 写在单独的文件中。

查看所有相关配置
blog/_config.volantis.yml
widget:
  # The following can be written in `blog/source/_data/widget.yml`
  # ---------------------------------------
  # blogger info widget
  blogger:
    class: blogger
    display: [desktop] # [desktop, mobile]
    avatar: https://gcore.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
  # ---------------------------------------
  # 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] # [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'
  # ---------------------------------------
  # related posts widget
  related_posts:
    class: related_posts # npm i -S hexo-related-popular-posts
    display: [desktop, mobile] # [desktop, mobile]
    header:
      icon: fas fa-bookmark
      title: 相关文章
    max_count: 5
  # ---------------------------------------
  # copyright widget (valid only in articles)
  copyright:
    class: copyright
    display: [desktop, mobile] # [desktop, mobile]
    blockquote: true
    permalink: '本文永久链接是：'
    content:
      - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
      - permalink
  # ---------------------------------------
  # qrcode widget
  donate:
    class: qrcode
    display: [desktop, mobile] # [desktop, mobile]
    height: 64px  # Automatic height if not set
    fancybox: true
    images:
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
  # You can add your own widget here or 'blog/source/_data/widget.yml'
  # class: text, list, grid, qrcode, page, ... see more at https://volantis.js.org/

每一个小部件都有 class 和 display，前者代表这个小部件是什么，后者代表这个小部件在什么桌面和移动平台中是否显示，如果在移动平台显示，由于屏幕宽度有限，侧边栏的小部件则会被移动到正文区域下方，因此部分侧边栏小部件便失去意义，建议设置为仅桌面端显示。

小部件名:
  class: 小部件类别
  display: [小部件在桌面端显示, 小部件在移动设备显示]

博主信息部件

blog/_config.volantis.yml
blogger:
  class: blogger
  display: [desktop] # [desktop, mobile]
  avatar: https://gcore.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.yml
toc:
  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.yml
category:
  class: category
  display: [desktop] # [desktop, mobile]
  header:
    icon: fas fa-folder-open
    title: 文章分类
    url: /blog/categories/

这个部件可以直接显示所有文章分类，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。

标签云部件

blog/_config.volantis.yml
tagcloud:
  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.yml
related_posts:
  class: related_posts # npm i -S hexo-related-popular-posts
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fas fa-bookmark
    title: 相关文章
  max_count: 5

这个小部件建议放置在文章页脚，要使用这个部件，您需要安装插件：

npm i -S hexo-related-popular-posts

值得注意的是，开启了这个功能之后，每次修改文章内容包括 front-matter 之后，都需要重新 hexo s。

文章版权部件

blog/_config.volantis.yml
copyright:
  class: copyright
  display: [desktop, mobile] # [desktop, mobile]
  blockquote: true
  permalink: '本文永久链接是：'
  content:
    - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
    - permalink

这个部件只可以放置在文章页脚。

二维码部件

blog/_config.volantis.yml
donate:
  class: qrcode
  display: [desktop, mobile] # [desktop, mobile]
  height: 64px  # Automatic height if not set
  fancybox: true
  images:
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png

您可以放置在文章页脚用于展示打赏图片，也可以放置在侧边栏。

通用文本部件

blog/_config.volantis.yml
repos:
  class: text
  display: [desktop] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: 点个赞吧
    url: https://github.com/xaoxuu/
  content:
    - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)'

您可以创建用于展示任何文本内容的文本部件。

通用列表部件

blog/_config.volantis.yml
wiki-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.yml
references:
  class: references # is subclass of list
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fas fa-quote-left
    title: 参考资料

在文章的 front-matter 中设置：

front-matter
references:
  - name: Apple Developer Documentation
    url: https://developer.apple.com/documentation/

组索引

这个部件的布局继承自 list 部件，用于展示文章所属的分组的文章列表。请将您的 Volantis 升级至 2.5 版本以上使用。

blog/_config.volantis.yml
group-1:
  class: group
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fab fa-apple
    title: Developer
    url: /wiki/ios/

在文章的 front-matter 中设置：

front-matter
group: group-1
order: 16
sidebar: [group-1, toc]

「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章，顺序按照 order 从小到大排列。

通用网格部件

blog/_config.volantis.yml
feedback:
  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.yml
test:
  class: page
  display: [desktop, mobile]
  pid: haha
  content: excerpt # excerpt, more, content

您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容，可选 excerpt，more，content 分别对应文章的摘要、摘要后面的内容、全文。

部件库文件

部件库中的所有部件都可以写在部件库文件中，您需要创建一个文件在以下路径：

blog/source/_data/widget.yml

文件内容示例：widget.yml

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v4/advanced-settings/index.html b/v4/advanced-settings/index.html index e162e63e6..cacf75d91 100644 --- a/v4/advanced-settings/index.html +++ b/v4/advanced-settings/index.html @@ -1 +1 @@ -进阶设定 - Volantis

进阶设定

发布于：2023年11月3日

设置子模块

将主题添加为子模块
git 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.yml
Jon:
  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_Snow
Dany:
  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 | Fandom
author: Jon
---

为网站提速

加载速度

  • 减少不必要的 js 插件，例如字数统计、动态背景。

  • 查找并解决拖慢速度的资源，以 Chrome 浏览器为例：

    1. 页面中点击右键，选择「检查」。
    2. 在右边的窗口中「Network」选项卡，并勾选「Disable cache」。
    3. 刷新网页，查看加载速度慢的资源。
      3.1. 加载缓慢的图片，建议使用 CDN。
      3.2. 加载缓慢的可以不用的 js 插件，建议舍弃。
      3.3. 加载缓慢却必须使用的 js 插件，建议下载并自己上传至 jsdelivr。

运行速度

  • 访问具有动态特效背景（如雪花、粒子等）的网站时，手机很快会发烫变卡，笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。

优化 SEO

blog/_config.volantis.yml
seo:
  # 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。

使用 CDN

对于大部分将博客 deploy 到 GitHub 的用户来说，直接加载本地资源速度比较慢，可以使用 jsdelivr 为开源项目提供的 CDN 服务。

开启方法

blog/_config.volantis.yml
# use_cdn: /source/js/* 中的JS文件(JS Only)使用jsdelivr的min版本加速
# 默认使用 https://unpkg.com/hexo-theme-volantis@<%- theme.info.theme_version %>/source/js/*.min.js 的CDN压缩版本(min.js)，注意版本号对应关系！！可以通过修改以下配置项覆盖
# 开发者注意 use_cdn 设置为 false
use_cdn: true
info:
  theme_version: 'x.x.x' # This is theme's version.
  cdn:
    js: # https://unpkg.com/hexo-theme-volantis@<%- theme.info.theme_version %>/source/js/app.min.js # 注意版本!!!
    css:
      first: # /css/first.css (默认不提供CDN，first.css 中为首屏渲染的样式，内含 cover navbar search 的样式。)
      style: # /css/style.css (默认不提供CDN，style.css 为异步延迟加载的样式。)

如果你需要对样式进行 DIY，可以只关闭 style 文件的 CDN。

如果你需要对样式进行 DIY，请注意首屏渲染和异步延迟加载的差异。

自定义 CDN

如果你把对应的文件上传到自己的 CDN 服务器，可以把对应的链接改为自己的 CDN 链接。

尝试使用 Terser 压缩 ES6

安装压缩工具

npm install -g gulp
npm install --save-dev gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-terser

gulp 配置文件

blog/gulpfile.js
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var terser = require('gulp-terser');

// 压缩css文件
const minify_css = () => (
    gulp.src(['./public/**/*.css'])
        .pipe(minifycss())
        .pipe(gulp.dest('./public'))
);

// 压缩html文件
const minify_html = () => (
    gulp.src(['./public/**/*.html','!./public/{lib,lib/**}'])
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
)

// 压缩js文件
const minify_js = () => (
    gulp.src(['./public/**/*.js', '!./public/**/*.min.js','!./public/{lib,lib/**}'])
        .pipe(terser())
        .pipe(gulp.dest('./public'))
)

module.exports = {
    minify_html: minify_html,
    minify_css: minify_css,
    minify_js: minify_js
};
gulp.task('one', gulp.parallel(
    minify_html,
    minify_css,
    minify_js
))

gulp.task('default', gulp.series('one'));

运行压缩

gulp

安装 Service Worker 服务

blog/_config.yml
# 全局导入
import:
  script:
    - <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>

在blog/source中创建sw.js文件。

内容如下：

importScripts('https://unpkg.com/workbox-cdn@5.1.3/workbox/workbox-sw.js');

workbox.setConfig({
    modulePathPrefix: 'https://unpkg.com/workbox-cdn@5.1.3/workbox/'
});

const { core, precaching, routing, strategies, expiration, cacheableResponse, backgroundSync } = workbox;
const { CacheFirst, NetworkFirst, NetworkOnly, StaleWhileRevalidate } = strategies;
const { ExpirationPlugin } = expiration;
const { CacheableResponsePlugin } = cacheableResponse;

const cacheSuffixVersion = '-000010', // 缓存版本号 极端重要，修改静态文件后发布网页一定要修改缓存版本号
    maxEntries = 100;

self.addEventListener('activate', (event) => {
    event.waitUntil(
        caches.keys().then((keys) => {
            return Promise.all(keys.map((key) => {
                if (!key.includes(cacheSuffixVersion)) return caches.delete(key);
            }));
        })
    );
});


core.setCacheNameDetails({
    prefix: 'volantis', // 极端重要 自己拟定一个名字
    suffix: cacheSuffixVersion
});

core.skipWaiting();
core.clientsClaim();
precaching.cleanupOutdatedCaches();

/*
 * Precache
 * - Static Assets
 */
precaching.precacheAndRoute( // 极端重要 定义首次缓存的静态文件 如果开启CDN需要修改为CDN链接
    [
        { url: '/css/first.css', revision: null },
        { url: '/css/style.css', revision: null },
        { url: '/js/app.js', revision: null },
    ],
);

/*
 * Cache File From CDN
 *
 * Method: CacheFirst
 * cacheName: static-immutable
 * cacheTime: 30d
 */

// cdn.jsdelivr.net - cors enabled
routing.registerRoute(
    /.*cdn\.jsdelivr\.net/,
    new CacheFirst({
        cacheName: 'static-immutable' + cacheSuffixVersion,
        fetchOptions: {
            mode: 'cors',
            credentials: 'omit'
        },
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 30 * 24 * 60 * 60,
                purgeOnQuotaError: true
            })
        ]
    })
);

// m7.music.126.net - cors enabled
routing.registerRoute(
    /.*m7\.music\.126\.net/,
    new CacheFirst({
        cacheName: 'static-immutable' + cacheSuffixVersion,
        fetchOptions: {
            mode: 'cors',
            credentials: 'omit'
        },
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 30 * 24 * 60 * 60,
                purgeOnQuotaError: true
            })
        ]
    })
);

/*
 *  No Cache
 *
 * Method: networkOnly
 */
routing.registerRoute(
    /.*baidu\.com.*/,
    new NetworkOnly()
);
/*
 * Others img fonts
 * Method: staleWhileRevalidate
 */
routing.registerRoute(
    // Cache image fonts files
    /.*\.(?:png|jpg|jpeg|svg|gif|webp|ico|eot|ttf|woff|woff2|mp3)/,
    new StaleWhileRevalidate()
);

/*
 * Static Assets
 * Method: staleWhileRevalidate
 */
routing.registerRoute(
    // Cache CSS files
    /.*\.(css|js)/,
    // Use cache but update in the background ASAP
    new StaleWhileRevalidate()
);

/*
 * sw.js - Revalidate every time
 * staleWhileRevalidate
 */
routing.registerRoute(
    '/sw.js', // 本文件名
    new StaleWhileRevalidate()
);

/*
 * Default - Serve as it is
 * networkFirst
 */
routing.setDefaultHandler(
    new NetworkFirst({
        networkTimeoutSeconds: 3
    })
);

安装「相关文章」插件

  1. 安装插件

    npm i -S hexo-related-popular-posts

  2. 插件的自定义配置方法：

    hexo-related-popular-posts

    https://github.com/tea3/hexo-related-popular-posts

如果您使用了头图，可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图：

blog/_config.yml
popularPosts:
  eyeCatchImageAttributeName: headimg

注意

需要升级到 5.0.1 及以上版本才可以支持自定义头图，详见 #29

分析与统计

默认支持 不蒜子 的访问统计，可以自行添加百度统计和 Google Analytics。

字数和阅读时长

  1. 安装以下插件：
    npm i --save hexo-wordcount
  2. 修改配置文件，将 wordcount 插件打开
    blog/_config.volantis.yml
    plugins:
      ...
      # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
      wordcount:
        enable: #true
  3. 然后修改配置文件，将 wordcount 写入需要显示的 meta 位置：
    blog/_config.volantis.yml
    # 文章布局
    article:
      ...
      # 文章详情页面的文章卡片本体布局方案
      body:
        # 文章顶部信息
        # 从 meta_library 中取
        top_meta: [..., wordcount, ...]
        ...
        # 文章底部信息
        # 从 meta_library 中取
        bottom_meta: [..., wordcount, ...]

CNZZ 统计

请参考 ZYMIN 的这篇教程：

Hexo hexo+ejs+material x 添加CNZZ统计代码

https://zymin.cn/arcticle/hexo+ejs+material.html

更多进阶玩法

详见 @TRHX 的这篇博客：

Hexo 博客主题个性化

https://www.itrhx.com/2018/08/27/A04-Hexo-blog-topic-personalization/

内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

主题官网 #进阶玩法

https://volantis.js.org/categories/进阶玩法/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +进阶设定 - Volantis

进阶设定

发布于：2023年11月3日

设置子模块

将主题添加为子模块
git 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.yml
Jon:
  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_Snow
Dany:
  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 | Fandom
author: Jon
---

为网站提速

加载速度

  • 减少不必要的 js 插件，例如字数统计、动态背景。

  • 查找并解决拖慢速度的资源，以 Chrome 浏览器为例：

    1. 页面中点击右键，选择「检查」。
    2. 在右边的窗口中「Network」选项卡，并勾选「Disable cache」。
    3. 刷新网页，查看加载速度慢的资源。
      3.1. 加载缓慢的图片，建议使用 CDN。
      3.2. 加载缓慢的可以不用的 js 插件，建议舍弃。
      3.3. 加载缓慢却必须使用的 js 插件，建议下载并自己上传至 jsdelivr。

运行速度

  • 访问具有动态特效背景（如雪花、粒子等）的网站时，手机很快会发烫变卡，笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。

优化 SEO

blog/_config.volantis.yml
seo:
  # 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。

使用 CDN

对于大部分将博客 deploy 到 GitHub 的用户来说，直接加载本地资源速度比较慢，可以使用 jsdelivr 为开源项目提供的 CDN 服务。

开启方法

blog/_config.volantis.yml
# use_cdn: /source/js/* 中的JS文件(JS Only)使用jsdelivr的min版本加速
# 默认使用 https://unpkg.com/hexo-theme-volantis@<%- theme.info.theme_version %>/source/js/*.min.js 的CDN压缩版本(min.js)，注意版本号对应关系！！可以通过修改以下配置项覆盖
# 开发者注意 use_cdn 设置为 false
use_cdn: true
info:
  theme_version: 'x.x.x' # This is theme's version.
  cdn:
    js: # https://unpkg.com/hexo-theme-volantis@<%- theme.info.theme_version %>/source/js/app.min.js # 注意版本!!!
    css:
      first: # /css/first.css (默认不提供CDN，first.css 中为首屏渲染的样式，内含 cover navbar search 的样式。)
      style: # /css/style.css (默认不提供CDN，style.css 为异步延迟加载的样式。)

如果你需要对样式进行 DIY，可以只关闭 style 文件的 CDN。

如果你需要对样式进行 DIY，请注意首屏渲染和异步延迟加载的差异。

自定义 CDN

如果你把对应的文件上传到自己的 CDN 服务器，可以把对应的链接改为自己的 CDN 链接。

尝试使用 Terser 压缩 ES6

安装压缩工具

npm install -g gulp
npm install --save-dev gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-terser

gulp 配置文件

blog/gulpfile.js
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var terser = require('gulp-terser');

// 压缩css文件
const minify_css = () => (
    gulp.src(['./public/**/*.css'])
        .pipe(minifycss())
        .pipe(gulp.dest('./public'))
);

// 压缩html文件
const minify_html = () => (
    gulp.src(['./public/**/*.html','!./public/{lib,lib/**}'])
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
)

// 压缩js文件
const minify_js = () => (
    gulp.src(['./public/**/*.js', '!./public/**/*.min.js','!./public/{lib,lib/**}'])
        .pipe(terser())
        .pipe(gulp.dest('./public'))
)

module.exports = {
    minify_html: minify_html,
    minify_css: minify_css,
    minify_js: minify_js
};
gulp.task('one', gulp.parallel(
    minify_html,
    minify_css,
    minify_js
))

gulp.task('default', gulp.series('one'));

运行压缩

gulp

安装 Service Worker 服务

blog/_config.yml
# 全局导入
import:
  script:
    - <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>

在blog/source中创建sw.js文件。

内容如下：

importScripts('https://unpkg.com/workbox-cdn@5.1.3/workbox/workbox-sw.js');

workbox.setConfig({
    modulePathPrefix: 'https://unpkg.com/workbox-cdn@5.1.3/workbox/'
});

const { core, precaching, routing, strategies, expiration, cacheableResponse, backgroundSync } = workbox;
const { CacheFirst, NetworkFirst, NetworkOnly, StaleWhileRevalidate } = strategies;
const { ExpirationPlugin } = expiration;
const { CacheableResponsePlugin } = cacheableResponse;

const cacheSuffixVersion = '-000010', // 缓存版本号 极端重要，修改静态文件后发布网页一定要修改缓存版本号
    maxEntries = 100;

self.addEventListener('activate', (event) => {
    event.waitUntil(
        caches.keys().then((keys) => {
            return Promise.all(keys.map((key) => {
                if (!key.includes(cacheSuffixVersion)) return caches.delete(key);
            }));
        })
    );
});


core.setCacheNameDetails({
    prefix: 'volantis', // 极端重要 自己拟定一个名字
    suffix: cacheSuffixVersion
});

core.skipWaiting();
core.clientsClaim();
precaching.cleanupOutdatedCaches();

/*
 * Precache
 * - Static Assets
 */
precaching.precacheAndRoute( // 极端重要 定义首次缓存的静态文件 如果开启CDN需要修改为CDN链接
    [
        { url: '/css/first.css', revision: null },
        { url: '/css/style.css', revision: null },
        { url: '/js/app.js', revision: null },
    ],
);

/*
 * Cache File From CDN
 *
 * Method: CacheFirst
 * cacheName: static-immutable
 * cacheTime: 30d
 */

// cdn.jsdelivr.net - cors enabled
routing.registerRoute(
    /.*cdn\.jsdelivr\.net/,
    new CacheFirst({
        cacheName: 'static-immutable' + cacheSuffixVersion,
        fetchOptions: {
            mode: 'cors',
            credentials: 'omit'
        },
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 30 * 24 * 60 * 60,
                purgeOnQuotaError: true
            })
        ]
    })
);

// m7.music.126.net - cors enabled
routing.registerRoute(
    /.*m7\.music\.126\.net/,
    new CacheFirst({
        cacheName: 'static-immutable' + cacheSuffixVersion,
        fetchOptions: {
            mode: 'cors',
            credentials: 'omit'
        },
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 30 * 24 * 60 * 60,
                purgeOnQuotaError: true
            })
        ]
    })
);

/*
 *  No Cache
 *
 * Method: networkOnly
 */
routing.registerRoute(
    /.*baidu\.com.*/,
    new NetworkOnly()
);
/*
 * Others img fonts
 * Method: staleWhileRevalidate
 */
routing.registerRoute(
    // Cache image fonts files
    /.*\.(?:png|jpg|jpeg|svg|gif|webp|ico|eot|ttf|woff|woff2|mp3)/,
    new StaleWhileRevalidate()
);

/*
 * Static Assets
 * Method: staleWhileRevalidate
 */
routing.registerRoute(
    // Cache CSS files
    /.*\.(css|js)/,
    // Use cache but update in the background ASAP
    new StaleWhileRevalidate()
);

/*
 * sw.js - Revalidate every time
 * staleWhileRevalidate
 */
routing.registerRoute(
    '/sw.js', // 本文件名
    new StaleWhileRevalidate()
);

/*
 * Default - Serve as it is
 * networkFirst
 */
routing.setDefaultHandler(
    new NetworkFirst({
        networkTimeoutSeconds: 3
    })
);

安装「相关文章」插件

  1. 安装插件

    npm i -S hexo-related-popular-posts

  2. 插件的自定义配置方法：

    hexo-related-popular-posts

    https://github.com/tea3/hexo-related-popular-posts

如果您使用了头图，可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图：

blog/_config.yml
popularPosts:
  eyeCatchImageAttributeName: headimg

注意

需要升级到 5.0.1 及以上版本才可以支持自定义头图，详见 #29

分析与统计

默认支持 不蒜子 的访问统计，可以自行添加百度统计和 Google Analytics。

字数和阅读时长

  1. 安装以下插件：
    npm i --save hexo-wordcount
  2. 修改配置文件，将 wordcount 插件打开
    blog/_config.volantis.yml
    plugins:
      ...
      # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
      wordcount:
        enable: #true
  3. 然后修改配置文件，将 wordcount 写入需要显示的 meta 位置：
    blog/_config.volantis.yml
    # 文章布局
    article:
      ...
      # 文章详情页面的文章卡片本体布局方案
      body:
        # 文章顶部信息
        # 从 meta_library 中取
        top_meta: [..., wordcount, ...]
        ...
        # 文章底部信息
        # 从 meta_library 中取
        bottom_meta: [..., wordcount, ...]

CNZZ 统计

请参考 ZYMIN 的这篇教程：

Hexo hexo+ejs+material x 添加CNZZ统计代码

https://zymin.cn/arcticle/hexo+ejs+material.html

更多进阶玩法

详见 @TRHX 的这篇博客：

Hexo 博客主题个性化

https://www.itrhx.com/2018/08/27/A04-Hexo-blog-topic-personalization/

内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

主题官网 #进阶玩法

https://volantis.js.org/categories/进阶玩法/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v4/getting-started/index.html b/v4/getting-started/index.html index 265d636f3..a535d7a5f 100644 --- a/v4/getting-started/index.html +++ b/v4/getting-started/index.html @@ -1 +1 @@ -开始使用 - Volantis


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。

示例博客

https://volantis.js.org/examples/

所有的 Volantis 用户都可以按照格式自行创建 Issue 来将自己的博客添加到官网的示例博客页面中。

准备工作

自建博客需要一定的相关知识，在开始前，请务必确保您会使用 markdown 语法，掌握简单的 git 知识，最最重要的是，遇到困难知道该怎么寻求解决：

  1. 翻阅和搜索文档
  2. 搜索 issues 中是否有解决办法
  3. 新建 issue 并按照要求进行操作，详尽地描述您遇到的问题

如果您没有使用过 Hexo 也不要着急，可以先通读一遍 Hexo 中文文档，要想使用地得心应手，最好参照团队提供的开源项目的源码进行搭建：

Demo 源码 ｜ 官网源码

如果您从旧版本更新或着其它主题迁移，请确保环境版本不要太低，否则会产生兼容性问题。

Hexo: 4.2 ~ 5.x
hexo-cli: 3.1 ~ 4.x
node.js: 12.16 ~ latest # 推荐使用 LTS 版
npm: 6.13 ~ latest

快速体验

如果您已经具备环境配置条件，可以在终端中输入下面这行代码，稍等片刻即可尝鲜体验：

git clone https://github.com/volantis-x/demo.git && cd demo && npm i && hexo s

下载与安装

第 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-search hexo-generator-json-content

安装 Stylus 渲染器：

npm i hexo-renderer-stylus

版本更新注意事项

使用主题的时候，尽量 fork 主题到自己的 GitHub，然后进行修改并使用。这样做的好处是：当主题进行重要更新的时候可以根据需要拉取合并代码，使自己 DIY 的主题能够通过更新获取 BUG 修复或者新特性。

如果不懂请自行搜索关键词：fork 更新

实用小技巧

所有需要写在主题配置文件中的配置都可以写在站点配置文件的 theme_config: 中，在 Hexo 5.0 后，还可以写在 _config.volantis.yml 文件中，详见 Hexo 官方文档：

覆盖主题配置

https://hexo.io/zh-cn/docs/configuration#%E8%A6%86%E7%9B%96%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE

也可以直接查看本站源码中站点配置文件的写法：_config.volantis.yml

请对照 更新日志 进行更新，下面是更新之后需要注意的事项：

2021-01-15 4.2.0 -> 4.3.0

更多关于Volantis的小版本更新请点击上方更新日志按钮

  1. 增加 disqusjs 评论系统；

  2. 增加 waline 评论系统；

  3. 增加 旧版 Internet Explorer 淘汰行动 ；

  4. 增加 Tidio聊天功能；

  5. 增加 twitoo waline valine minivaline 文章阅读量统计；

  6. 增加 bbtalk.js；

  7. 修复#514 #538 #567 #431 #468；

  8. 修复关闭 pjax 时 cover样式失效 和 报错 的问题 。

2020-09-26 3.0.0 -> 4.0.0

4.0.0 的配置文件改动非常大，强烈建议不要在旧的配置文件上改。

  1. 原数据文件中的配置项不再支持，请在配置文件中进行设置。
  2. 主题配置文件进行了重新设计，需要「完全」重新配置一遍。
  3. 友链使用数据文件，并支持 issues 标签实现动态自助友链。
  4. 原 meta 自定义布局现在只支持文章内部的 top_meta 和 bottom_meta 。
  5. 文章列表页面布局现在只能在有限范围内进行自定义。
  6. 侧边栏组件现在只支持侧边栏位置；文章末尾有专用的组件。
  7. 如果安装了懒加载插件，需要卸载掉，使用主题内置的懒加载（和插件冲突）。
  8. 如果想要关闭评论，需要改为 comments: false 。
  9. 如果要隐藏文章顶部或者底部的 meta 标签，需设置 top_meta: false 或者 bottom_meta: false 。
  10. 如果需要同时隐藏标题和顶部的 meta 标签也可以把 title: xxx 改为 seo_title: xxx 。
  11. 作者的信息使用数据文件进行定义，文章中只需要写 author: xxx 而不需要重复写作者的信息了。
  12. 现在只有 gallery 标签的图片支持放大。
  13. 友链页面 layout: links 改为 layout: friends。

许可协议

本主题采用 MIT开源许可协议 ，永久无限制免费使用。

MIT开源许可协议

被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
被授权人可根据程式的需要修改授权条款为适当的内容。
在软件和软件的所有副本中都必须包含版权声明和许可声明。

配置与使用

配置与使用

/v4/site-settings/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +开始使用 - Volantis


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。

示例博客

https://volantis.js.org/examples/

所有的 Volantis 用户都可以按照格式自行创建 Issue 来将自己的博客添加到官网的示例博客页面中。

准备工作

自建博客需要一定的相关知识，在开始前，请务必确保您会使用 markdown 语法，掌握简单的 git 知识，最最重要的是，遇到困难知道该怎么寻求解决：

  1. 翻阅和搜索文档
  2. 搜索 issues 中是否有解决办法
  3. 新建 issue 并按照要求进行操作，详尽地描述您遇到的问题

如果您没有使用过 Hexo 也不要着急，可以先通读一遍 Hexo 中文文档，要想使用地得心应手，最好参照团队提供的开源项目的源码进行搭建：

Demo 源码 ｜ 官网源码

如果您从旧版本更新或着其它主题迁移，请确保环境版本不要太低，否则会产生兼容性问题。

Hexo: 4.2 ~ 5.x
hexo-cli: 3.1 ~ 4.x
node.js: 12.16 ~ latest # 推荐使用 LTS 版
npm: 6.13 ~ latest

快速体验

如果您已经具备环境配置条件，可以在终端中输入下面这行代码，稍等片刻即可尝鲜体验：

git clone https://github.com/volantis-x/demo.git && cd demo && npm i && hexo s

下载与安装

第 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-search hexo-generator-json-content

安装 Stylus 渲染器：

npm i hexo-renderer-stylus

版本更新注意事项

使用主题的时候，尽量 fork 主题到自己的 GitHub，然后进行修改并使用。这样做的好处是：当主题进行重要更新的时候可以根据需要拉取合并代码，使自己 DIY 的主题能够通过更新获取 BUG 修复或者新特性。

如果不懂请自行搜索关键词：fork 更新

实用小技巧

所有需要写在主题配置文件中的配置都可以写在站点配置文件的 theme_config: 中，在 Hexo 5.0 后，还可以写在 _config.volantis.yml 文件中，详见 Hexo 官方文档：

覆盖主题配置

https://hexo.io/zh-cn/docs/configuration#%E8%A6%86%E7%9B%96%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE

也可以直接查看本站源码中站点配置文件的写法：_config.volantis.yml

请对照 更新日志 进行更新，下面是更新之后需要注意的事项：

2021-01-15 4.2.0 -> 4.3.0

更多关于Volantis的小版本更新请点击上方更新日志按钮

  1. 增加 disqusjs 评论系统；

  2. 增加 waline 评论系统；

  3. 增加 旧版 Internet Explorer 淘汰行动 ；

  4. 增加 Tidio聊天功能；

  5. 增加 twitoo waline valine minivaline 文章阅读量统计；

  6. 增加 bbtalk.js；

  7. 修复#514 #538 #567 #431 #468；

  8. 修复关闭 pjax 时 cover样式失效 和 报错 的问题 。

2020-09-26 3.0.0 -> 4.0.0

4.0.0 的配置文件改动非常大，强烈建议不要在旧的配置文件上改。

  1. 原数据文件中的配置项不再支持，请在配置文件中进行设置。
  2. 主题配置文件进行了重新设计，需要「完全」重新配置一遍。
  3. 友链使用数据文件，并支持 issues 标签实现动态自助友链。
  4. 原 meta 自定义布局现在只支持文章内部的 top_meta 和 bottom_meta 。
  5. 文章列表页面布局现在只能在有限范围内进行自定义。
  6. 侧边栏组件现在只支持侧边栏位置；文章末尾有专用的组件。
  7. 如果安装了懒加载插件，需要卸载掉，使用主题内置的懒加载（和插件冲突）。
  8. 如果想要关闭评论，需要改为 comments: false 。
  9. 如果要隐藏文章顶部或者底部的 meta 标签，需设置 top_meta: false 或者 bottom_meta: false 。
  10. 如果需要同时隐藏标题和顶部的 meta 标签也可以把 title: xxx 改为 seo_title: xxx 。
  11. 作者的信息使用数据文件进行定义，文章中只需要写 author: xxx 而不需要重复写作者的信息了。
  12. 现在只有 gallery 标签的图片支持放大。
  13. 友链页面 layout: links 改为 layout: friends。

许可协议

本主题采用 MIT开源许可协议 ，永久无限制免费使用。

MIT开源许可协议

被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
被授权人可根据程式的需要修改授权条款为适当的内容。
在软件和软件的所有副本中都必须包含版权声明和许可声明。

配置与使用

配置与使用

/v4/site-settings/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v4/page-settings/index.html b/v4/page-settings/index.html index 10730a744..ec55e5ba9 100644 --- a/v4/page-settings/index.html +++ b/v4/page-settings/index.html @@ -1 +1 @@ -页面配置 - Volantis

页面配置

发布于：2023年11月3日

页面布局模板

布局模板

取值含义
page独立页面
post文章页面
docs文档页面
category分类页面
tag标签页面
friends友链页面
list列表页面

page & post & docs

这三种页面相同，但是有以下细微区别：

  • post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 和 docs 不会。
  • post 文章末尾最多可以显示「参考资料」、「相关文章」、「版权标识」、「打赏」四个模块。
  • docs 文章末尾最多可以显示「参考资料」一个模块。

除了归档页面是自动生成的，其它独立页面都需要手动创建 md 文件。

归档页面

归档页面是自动生成的，并且初始化的时候已经生成，路径如下：

blog/_config.yml
# Directory
archive_dir: archives

关于页面

Create file if not exists: source/about/index.md
---
layout: docs
seo_title: 关于
bottom_meta: false
sidebar: []
valine:
  placeholder: 有什么想对我说的呢？
---

下面写关于自己的内容

分类页面

Create file if not exists: source/categories/index.md
---
layout: category
index: true
title: 所有分类
---

标签页面

Create file if not exists: source/tags/index.md
---
layout: tag
index: true
title: 所有标签
---

列表页面

Create file if not exists: source/mylist/index.md
---
layout: list
group: mylist
index: 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: 传统布局,  sites: 网站卡片布局

目前提供三种布局方案：

  • simple: 简单布局，只有头像和标题。
  • traditional: 传统布局，是 Volantis 旧版本的风格。
  • sites: 网站卡片布局，是 Volantis 4.x 新增的网站卡片标签的样式。

设置数据源

友链的数据源写在以下路径，如果没有请自行创建：

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 --> 部分。

使用 issues 标签可以从 issues 中获取 JSON 数据解析并生成 HTML 填充到页面中，使用方法如下：

{% issues sites | api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}

这样添加友链的方式就变成了：对方提 Issue ，自己审核，然后添加 active 标签，然后刷新网页就生效了。更新友链内容也变得十分方便， Issue 的创建者拥有修改和关闭的权限。

新建一个 GitHub 或者 Gitee 仓库，创建 Issues 模板，如下：

{
    "title": "",
    "screenshot": "",
    "url": "",
    "avatar": "",
    "description": "",
    "keywords": ""
}

关于如何使用 issues 标签，详见这篇文章：

静态博客使用 Issues API 发布动态、友链、书签

https://xaoxuu.com/blog/2020-08-23-issues-api/

建议

  • 两者是可以同时使用的哦，建议开放 issues 友链给大家，常联系的自己再保存到静态友链。
  • 实测 GitHub API 速度和稳定性不如 Gitee ，如果追求稳定建议使用 Gitee。

404页面

Create file if not exists: source/404.md
---
cover: true
robots: noindex,nofollow
sitemap: false
seo_title: 404 Not Found
bottom_meta: false
sidebar: []
valine:
  path: /404.html
  placeholder: 请留言告诉我您要访问哪个页面找不到了
---

{% p logo center huge, 404 %}
{% p center bold, 很抱歉，您访问的页面不存在 %}
{% p center small, 可能是输入地址有误或该地址已被删除 %}

front-matter

front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter

字段含义值类型默认值
layout布局模版String-
title页面标题String-
seo_title网页标题Stringpage.title
short_title页面标题（在group列表中显示）Stringpage.title
date创建时间Date文件创建时间
updated更新日期Date文件修改时间
link外部文章网址String-
music内部音乐控件[Object]-
robotsrobotsString-
keywords页面关键词String-
description页面描述、摘要String-
cover是否显示封面Booltrue
top_meta是否显示文章或页面顶部的meta信息Booltrue
bottom_meta是否显示文章或页面底部的meta信息Booltrue
sidebar页面侧边栏Bool, Arraytheme.layout.*.sidebar
body页面主体元素Arraytheme.layout.on_page.body
mathjax是否渲染公式Bool, Stringfalse
thumbnail缩略图Stringfalse
icons图标Array[]
pin是否置顶Boolfalse
headimg文章头图url-

layout:post 时特有的字段：

字段含义值类型默认值
author文章作者[Object]config.author
categories分类String, Array-
tags标签String, Array-
toc是否生成目录Booltrue

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-matter
pin: true

文章分类

多个分类有两种关系，一种是层级（等同于文件夹），一种是并列（等同于标签）。

多级分类：

front-matter
---
categories: [分类A, 分类B]
---

或者

front-matter
---
categories:
  - 分类A
  - 分类B
---

并列分类

front-matter
categories:
  - [分类A]
  - [分类B]

多级+并列分类

front-matter
categories:
  - [分类A, 分类B]
  - [分类C, 分类D]

文章摘要

在文章中插入 <!-- more -->，前面的部分即为摘要。

某篇文章源码
---
title: xxx
date: 2020-02-21
---

这是摘要

<!-- more -->

这是正文

注意： <!-- more --> 前后一定要有空行，不然可能导致显示错位。

设置文章作者

Volantis 支持多个作者在一个站点发布文章，其他作者信息需要写在数据文件中，例如：

blog/source/_data/author.yml
Jon:
  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_Snow
Dany:
  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 | Fandom
author: Jon
---

引入外部文章

利用 link，搭配自定义的文章作者信息，你可以在文章列表中显示外部文章或者网址，例如：

blog/source/_data/author.yml
xaoxuu:
  name: xaoxuu
  avatar: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  url: https://xaoxuu.com
front-matter
---
layout:     post
date:       2017-07-05
title:      [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
  - Hexo
author: xaoxuu
link: 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: false
bottom_meta: false
---

如果一个页面没有 title 则不会显示 top_meta ，像404、关于页面就可以完全隐藏：

front-matter
---
seo_title: 关于
top_meta: false
bottom_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
---

渲染公式

默认是不渲染的，如果文章内有公式，需要在 front-matter 中设置开启。即便开启了，文章列表中也不会进行渲染，请注意不要把公式写在文章开头。

example.md:
---
title: 渲染公式（MathJax）
date: 2020-02-23
mathjax: true # false: 不渲染, true: 渲染
---

添加一段描述性文字

<!-- 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上使用KaTeX

https://www.micdz.cn/article/katex-on-volantis/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +页面配置 - Volantis

页面配置

发布于：2023年11月3日

页面布局模板

布局模板

取值含义
page独立页面
post文章页面
docs文档页面
category分类页面
tag标签页面
friends友链页面
list列表页面

page & post & docs

这三种页面相同，但是有以下细微区别：

  • post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 和 docs 不会。
  • post 文章末尾最多可以显示「参考资料」、「相关文章」、「版权标识」、「打赏」四个模块。
  • docs 文章末尾最多可以显示「参考资料」一个模块。

除了归档页面是自动生成的，其它独立页面都需要手动创建 md 文件。

归档页面

归档页面是自动生成的，并且初始化的时候已经生成，路径如下：

blog/_config.yml
# Directory
archive_dir: archives

关于页面

Create file if not exists: source/about/index.md
---
layout: docs
seo_title: 关于
bottom_meta: false
sidebar: []
valine:
  placeholder: 有什么想对我说的呢？
---

下面写关于自己的内容

分类页面

Create file if not exists: source/categories/index.md
---
layout: category
index: true
title: 所有分类
---

标签页面

Create file if not exists: source/tags/index.md
---
layout: tag
index: true
title: 所有标签
---

列表页面

Create file if not exists: source/mylist/index.md
---
layout: list
group: mylist
index: 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: 传统布局,  sites: 网站卡片布局

目前提供三种布局方案：

  • simple: 简单布局，只有头像和标题。
  • traditional: 传统布局，是 Volantis 旧版本的风格。
  • sites: 网站卡片布局，是 Volantis 4.x 新增的网站卡片标签的样式。

设置数据源

友链的数据源写在以下路径，如果没有请自行创建：

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 --> 部分。

使用 issues 标签可以从 issues 中获取 JSON 数据解析并生成 HTML 填充到页面中，使用方法如下：

{% issues sites | api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}

这样添加友链的方式就变成了：对方提 Issue ，自己审核，然后添加 active 标签，然后刷新网页就生效了。更新友链内容也变得十分方便， Issue 的创建者拥有修改和关闭的权限。

新建一个 GitHub 或者 Gitee 仓库，创建 Issues 模板，如下：

{
    "title": "",
    "screenshot": "",
    "url": "",
    "avatar": "",
    "description": "",
    "keywords": ""
}

关于如何使用 issues 标签，详见这篇文章：

静态博客使用 Issues API 发布动态、友链、书签

https://xaoxuu.com/blog/2020-08-23-issues-api/

建议

  • 两者是可以同时使用的哦，建议开放 issues 友链给大家，常联系的自己再保存到静态友链。
  • 实测 GitHub API 速度和稳定性不如 Gitee ，如果追求稳定建议使用 Gitee。

404页面

Create file if not exists: source/404.md
---
cover: true
robots: noindex,nofollow
sitemap: false
seo_title: 404 Not Found
bottom_meta: false
sidebar: []
valine:
  path: /404.html
  placeholder: 请留言告诉我您要访问哪个页面找不到了
---

{% p logo center huge, 404 %}
{% p center bold, 很抱歉，您访问的页面不存在 %}
{% p center small, 可能是输入地址有误或该地址已被删除 %}

front-matter

front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter

字段含义值类型默认值
layout布局模版String-
title页面标题String-
seo_title网页标题Stringpage.title
short_title页面标题（在group列表中显示）Stringpage.title
date创建时间Date文件创建时间
updated更新日期Date文件修改时间
link外部文章网址String-
music内部音乐控件[Object]-
robotsrobotsString-
keywords页面关键词String-
description页面描述、摘要String-
cover是否显示封面Booltrue
top_meta是否显示文章或页面顶部的meta信息Booltrue
bottom_meta是否显示文章或页面底部的meta信息Booltrue
sidebar页面侧边栏Bool, Arraytheme.layout.*.sidebar
body页面主体元素Arraytheme.layout.on_page.body
mathjax是否渲染公式Bool, Stringfalse
thumbnail缩略图Stringfalse
icons图标Array[]
pin是否置顶Boolfalse
headimg文章头图url-

layout:post 时特有的字段：

字段含义值类型默认值
author文章作者[Object]config.author
categories分类String, Array-
tags标签String, Array-
toc是否生成目录Booltrue

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-matter
pin: true

文章分类

多个分类有两种关系，一种是层级（等同于文件夹），一种是并列（等同于标签）。

多级分类：

front-matter
---
categories: [分类A, 分类B]
---

或者

front-matter
---
categories:
  - 分类A
  - 分类B
---

并列分类

front-matter
categories:
  - [分类A]
  - [分类B]

多级+并列分类

front-matter
categories:
  - [分类A, 分类B]
  - [分类C, 分类D]

文章摘要

在文章中插入 <!-- more -->，前面的部分即为摘要。

某篇文章源码
---
title: xxx
date: 2020-02-21
---

这是摘要

<!-- more -->

这是正文

注意： <!-- more --> 前后一定要有空行，不然可能导致显示错位。

设置文章作者

Volantis 支持多个作者在一个站点发布文章，其他作者信息需要写在数据文件中，例如：

blog/source/_data/author.yml
Jon:
  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_Snow
Dany:
  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 | Fandom
author: Jon
---

引入外部文章

利用 link，搭配自定义的文章作者信息，你可以在文章列表中显示外部文章或者网址，例如：

blog/source/_data/author.yml
xaoxuu:
  name: xaoxuu
  avatar: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  url: https://xaoxuu.com
front-matter
---
layout:     post
date:       2017-07-05
title:      [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
  - Hexo
author: xaoxuu
link: 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: false
bottom_meta: false
---

如果一个页面没有 title 则不会显示 top_meta ，像404、关于页面就可以完全隐藏：

front-matter
---
seo_title: 关于
top_meta: false
bottom_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
---

渲染公式

默认是不渲染的，如果文章内有公式，需要在 front-matter 中设置开启。即便开启了，文章列表中也不会进行渲染，请注意不要把公式写在文章开头。

example.md:
---
title: 渲染公式（MathJax）
date: 2020-02-23
mathjax: true # false: 不渲染, true: 渲染
---

添加一段描述性文字

<!-- 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上使用KaTeX

https://www.micdz.cn/article/katex-on-volantis/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v4/site-settings/index.html b/v4/site-settings/index.html index 4c47f7488..dcddd8ff5 100644 --- a/v4/site-settings/index.html +++ b/v4/site-settings/index.html @@ -1 +1 @@ -站点配置 - Volantis

站点配置

发布于：2023年11月3日

博客根目录下的 _config.yml 文件通常负责站点相关配置、第三方 npm 插件相关的配置。

网站标题

blog/_config.yml
# 网站标题
title: my blog

网站图标

blog/_config.yml
# 网站图标，更多尺寸等图标请使用import方式批量导入
favicon: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.ico
blog/_config.yml
import:
  meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    - <meta name="theme-color" content="#ffffff">
  link:
    - <link rel="apple-touch-icon" sizes="180x180" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">

多语言设置

blog/_config.yml
language:
  - zh-CN
  - en
  - zh-HK
  - zh-TW

对应的翻译文件路径： themes/volantis/languages/

使用 Import 导入外部文件

Volantis 用户可以在不修改主题文件的情况下向 head 和 body 中添加各种标签。meta 和 link 对应 head 中的 <meta> 和 <link> 标签。script 可以在 body 末尾导入 js 代码。

blog/_config.yml
import:
  meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    - <meta name="theme-color" content="#ffffff">
  link:
    - <link rel="apple-touch-icon" sizes="180x180" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">
  script:
    - <script></script>

更多

Hexo 官方文档 #配置

https://hexo.io/zh-cn/docs/configuration

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +站点配置 - Volantis

站点配置

发布于：2023年11月3日

博客根目录下的 _config.yml 文件通常负责站点相关配置、第三方 npm 插件相关的配置。

网站标题

blog/_config.yml
# 网站标题
title: my blog

网站图标

blog/_config.yml
# 网站图标，更多尺寸等图标请使用import方式批量导入
favicon: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.ico
blog/_config.yml
import:
  meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    - <meta name="theme-color" content="#ffffff">
  link:
    - <link rel="apple-touch-icon" sizes="180x180" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">

多语言设置

blog/_config.yml
language:
  - zh-CN
  - en
  - zh-HK
  - zh-TW

对应的翻译文件路径： themes/volantis/languages/

使用 Import 导入外部文件

Volantis 用户可以在不修改主题文件的情况下向 head 和 body 中添加各种标签。meta 和 link 对应 head 中的 <meta> 和 <link> 标签。script 可以在 body 末尾导入 js 代码。

blog/_config.yml
import:
  meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    - <meta name="theme-color" content="#ffffff">
  link:
    - <link rel="apple-touch-icon" sizes="180x180" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">
  script:
    - <script></script>

更多

Hexo 官方文档 #配置

https://hexo.io/zh-cn/docs/configuration

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v4/tag-plugins/index.html b/v4/tag-plugins/index.html index f7414ffdd..e94817f2a 100644 --- a/v4/tag-plugins/index.html +++ b/v4/tag-plugins/index.html @@ -1 +1 @@ -标签插件 - Volantis

标签插件

发布于：2023年11月3日

为了兼容老用户，旧的标签插件在重构之前依然沿用旧的格式，即「英文逗号+空格」作为参数分隔符，而部分新增标签插件是「空格+英文竖线+空格」，请注意区分。

我们也在探索哪种分隔符既简单又不容易引起冲突，所以可能存在多种格式，具体以对应文档描述为准。

text

这是一些文本样式标签：

带 下划线 的文本

example.md:
带 {% u 下划线 %} 的文本

带着重号 的文本

example.md:
带 {% emp 着重号 %} 的文本

带波浪线 的文本

example.md:
带 {% wavy 波浪线 %} 的文本

带 删除线 的文本

example.md:
带 {% del 删除线 %} 的文本

键盘样式的文本 command + D

example.md:
键盘样式的文本 {% kbd command %} + {% kbd D %}

密码样式的文本：这里没有验证码

example.md:
密码样式的文本：{% psw 这里没有验证码 %}

span

本插件最后更新于 2.5 版本
{% span 样式参数, 文本内容 %}

彩色文字

在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大号文字

文档「开始」页面中的标题部分就是超大号文字。

A Wonderful Theme for Hexo

上述示例的源码

example:
#### 彩色文字

在一段话中方便插入各种颜色的标签，包括：{% 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

本插件最后更新于 2.5 版本
{% p 样式参数, 文本内容 %}

演示效果

彩色文字

在一段话中方便插入各种颜色的标签，包括：

红色

、

黄色

、

绿色

、

青色

、

蓝色

、

灰色

。

超大号文字

文档「开始」页面中的标题部分就是超大号文字。

A Wonderful Theme for Hexo

上述示例的源码

example:
#### 彩色文字

在一段话中方便插入各种颜色的标签，包括：{% 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

note

NoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。

最后更新于 2.3 版本
{% 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

noteblock

NoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。

最后更新于 4.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

最后更新于 2.6 版本
{% 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

最后更新于 2.6 版本
{% 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

  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 服务。

2020-05-15 2.6.3 -> 2.6.6

不需要额外处理。

2020-04-20 2.6.2 -> 2.6.3

  1. 全局搜索 seotitle 并替换为 seo_title。
  2. group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
  3. 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 %}

最后更新于 3.0 版本
{% link 标题, 链接, 图片链接（可选） %}

演示效果

如何参与项目

https://volantis.js.org/contributors/

上述示例的源码

example:
{% link 如何参与项目, https://volantis.js.org/contributors/, https://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.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://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

如果需要显示类似「团队成员」之类的一组含有头像的链接：

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu

或者含有图标的按钮：

下载源码 查看文档

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

心率管家

专业版

 心率管家

免费版


ghcard

最后更新于 4.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，可以和友链数据混用，通过分组过滤实现不一样的效果。

示例写法
{% sites only:community_team %}
sites only:community_team
xaoxuu开发者
MHuiG划水
Colsrch开发者
inkss摸鱼

dropmenu

这个页面的标签将会在不久后重构

下拉菜单

请将您的 Volantis 升级至 3.0 版本以上使用。


tab

此插件移植自 NexT #tabs

最后更新于 2.1 版本
{% tabs 页面内不重复的ID %}
<!-- tab 栏目1 -->
内容
<!-- endtab -->
<!-- tab 栏目2 -->
内容
<!-- endtab -->
{% endtabs %}

演示效果

。。。

！！！

上述示例的源码

example:
{% tabs tab-id %}

<!-- tab 栏目1 -->

。。。

<!-- endtab -->

<!-- tab 栏目2 -->

！！！

<!-- endtab -->

{% endtabs %}

folding

最后更新于 2.3 版本
{% folding 参数（可选）, 标题 %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

演示效果

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试
{% folding green, 查看代码测试 %}

查看代码测试

{% endfolding %}
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

上述示例的源码

example:
{% folding 查看图片测试 %}

![](https://gcore.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://gcore.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 代表默认打开。


inlineimage

Inlineimage 标签是一种行内图片标签，可以用来在一段话中间插入表情。

本插件最后更新于 4.0 版本
{% inlineimage 图片链接, height=高度（可选） %}

演示效果

这是 一段话。

这又是 一段话。

上述示例的源码

example:
这是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。

可以支持的参数

高度

height=20px

image

Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。

本插件最后更新于 4.0 版本
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}

演示效果

添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

指定宽度：

image

指定宽度并添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

设置占位背景色：

优化不同宽度浏览的观感
优化不同宽度浏览的观感

上述示例的源码

example:
添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路，没有什么故事。 %}

指定宽度：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}

指定宽度并添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}

设置占位背景色：

{% image https://gcore.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

Gallery 标签是一种针对一组图片应用场景的标签。

本插件最后更新于 3.0 版本
{% gallery 参数, 列数 %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
{% endgallery %}

演示效果

一行一个图片

图片描述

一行多个图片（不换行）

图片描述

图片描述

图片描述

多行多个图片（每行2～8个图片）
























































上述示例的源码

一行一个图片

example.md:
{% gallery %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endgallery %}

一行多个图片（不换行）

example.md:
{% gallery %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg)
{% endgallery %}

多行多个图片（每行2～8个图片）

example.md:
{% gallery stretch, 4 %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
{% endgallery %}

可以支持的参数

对齐方向

left, center, right

缩放

stretch

列数

逗号后面直接写列数，支持 2 ～ 8 列。设定列列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。


audio

本插件最后更新于 2.4 版本
{% audio 音频链接 %}

演示效果

上述示例的源码

example:
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

video

本插件最后更新于 2.3 版本
{% video 视频链接 %}

演示效果

100%宽度

50%宽度

25%宽度

上述示例的源码

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

这是一个能够将图片或者视频套入设备框架中的标签，可以用来更优雅地显示截图、录屏。

本插件最后更新于 4.0 版本
{% frame 框架名 | img=图片链接 | alt=图片描述（可选） | part=top/bottom（可选） %}
{% frame 框架名 | video=视频链接 | part=top/bottom（可选） %}

{% frame iphone11 | img=https://7.dusays.com/2020/09/28/baa33914a34ec.jpg | video=https://7.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-aplayer

https://github.com/MoePlayer/hexo-tag-aplayer


issues

最后更新于 4.0 版本
{% issues type | api=url | group=key:value1,value2（可选） %}

类型

根据需求不同，会将 issues 内容解析成不同的 HTML 标签，目前支持的类型有：

  • timeline: 解析成 timeline 标签，issue 的标题对应 timeline 的时间， issue 的内容对应 timeline 的内容。
  • sites: 解析成 sites 标签，需要有 JSON 代码块：
    {
        "title": "",
        "screenshot": "",
        "url": "",
        "avatar": "",
        "description": "",
        "keywords": ""
    }

API

传可以调得通的 URL ，例如：

api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active
api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active

分组

sites 类型的 issues 默认不分组，如果需要分组，可指定分组依据「key」，和分组白名单「value1」「value2」等，例如：

group=version:v4,v3,v2

这个参数的作用就是，筛选出 JSON 中包含 "version": "v4" 或者 "version": "v3" 或者 "version": "v2" 的数据，并分组显示。

示例

时间线

{% issues timeline | api=https://gitee.com/api/v5/repos/xaoxuu/timeline/issues?state=open&creator=xaoxuu&sort=created&direction=desc&page=1&per_page=100 %}

对应的仓库链接：

Gitee: xaoxuu/timeline

https://gitee.com/xaoxuu/timeline/issues

友链

{% issues sites | api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}
{% issues sites | api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}

上例中的 labels=active 参数可以控制默认的 issue 不显示，只有自己审核通过添加了 active 标签之后才会显示。上述示例对应的仓库链接：

GitHub: xaoxuu/friends

https://github.com/xaoxuu/friends/issues

分组

这是主题官网的「示例博客」页面的数据：

{% issues sites | api=https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per_page=100 | group=version:版本：^4.0,版本：^3.0,版本：^2.0 %}

上述示例对应的仓库链接：

GitHub: volantis-x/examples

https://github.com/volantis-x/examples/issues

Hexo 通用标签

在文章中使用 <!-- more -->，那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。详见 Hexo 官方文档：

Hexo 官方文档 #标签插件

https://hexo.io/zh-cn/docs/tag-plugins

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +标签插件 - Volantis

标签插件

发布于：2023年11月3日

为了兼容老用户，旧的标签插件在重构之前依然沿用旧的格式，即「英文逗号+空格」作为参数分隔符，而部分新增标签插件是「空格+英文竖线+空格」，请注意区分。

我们也在探索哪种分隔符既简单又不容易引起冲突，所以可能存在多种格式，具体以对应文档描述为准。

text

这是一些文本样式标签：

带 下划线 的文本

example.md:
带 {% u 下划线 %} 的文本

带着重号 的文本

example.md:
带 {% emp 着重号 %} 的文本

带波浪线 的文本

example.md:
带 {% wavy 波浪线 %} 的文本

带 删除线 的文本

example.md:
带 {% del 删除线 %} 的文本

键盘样式的文本 command + D

example.md:
键盘样式的文本 {% kbd command %} + {% kbd D %}

密码样式的文本：这里没有验证码

example.md:
密码样式的文本：{% psw 这里没有验证码 %}

span

本插件最后更新于 2.5 版本
{% span 样式参数, 文本内容 %}

彩色文字

在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大号文字

文档「开始」页面中的标题部分就是超大号文字。

A Wonderful Theme for Hexo

上述示例的源码

example:
#### 彩色文字

在一段话中方便插入各种颜色的标签，包括：{% 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

本插件最后更新于 2.5 版本
{% p 样式参数, 文本内容 %}

演示效果

彩色文字

在一段话中方便插入各种颜色的标签，包括：

红色

、

黄色

、

绿色

、

青色

、

蓝色

、

灰色

。

超大号文字

文档「开始」页面中的标题部分就是超大号文字。

A Wonderful Theme for Hexo

上述示例的源码

example:
#### 彩色文字

在一段话中方便插入各种颜色的标签，包括：{% 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

note

NoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。

最后更新于 2.3 版本
{% 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

noteblock

NoteBlock 是 Blockquote 的增强版，在左边显示图标，并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。

最后更新于 4.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

最后更新于 2.6 版本
{% 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

最后更新于 2.6 版本
{% 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

  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 服务。

2020-05-15 2.6.3 -> 2.6.6

不需要额外处理。

2020-04-20 2.6.2 -> 2.6.3

  1. 全局搜索 seotitle 并替换为 seo_title。
  2. group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
  3. 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 %}

最后更新于 3.0 版本
{% link 标题, 链接, 图片链接（可选） %}

演示效果

如何参与项目

https://volantis.js.org/contributors/

上述示例的源码

example:
{% link 如何参与项目, https://volantis.js.org/contributors/, https://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://gcore.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://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}

如果需要显示类似「团队成员」之类的一组含有头像的链接：

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu

或者含有图标的按钮：

下载源码 查看文档

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

心率管家

专业版

 心率管家

免费版


ghcard

最后更新于 4.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，可以和友链数据混用，通过分组过滤实现不一样的效果。

示例写法
{% sites only:community_team %}
sites only:community_team
xaoxuu开发者
MHuiG划水
Colsrch开发者
inkss摸鱼

dropmenu

这个页面的标签将会在不久后重构

下拉菜单

请将您的 Volantis 升级至 3.0 版本以上使用。


tab

此插件移植自 NexT #tabs

最后更新于 2.1 版本
{% tabs 页面内不重复的ID %}
<!-- tab 栏目1 -->
内容
<!-- endtab -->
<!-- tab 栏目2 -->
内容
<!-- endtab -->
{% endtabs %}

演示效果

。。。

！！！

上述示例的源码

example:
{% tabs tab-id %}

<!-- tab 栏目1 -->

。。。

<!-- endtab -->

<!-- tab 栏目2 -->

！！！

<!-- endtab -->

{% endtabs %}

folding

最后更新于 2.3 版本
{% folding 参数（可选）, 标题 %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

演示效果

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试
{% folding green, 查看代码测试 %}

查看代码测试

{% endfolding %}
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

上述示例的源码

example:
{% folding 查看图片测试 %}

![](https://gcore.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://gcore.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 代表默认打开。


inlineimage

Inlineimage 标签是一种行内图片标签，可以用来在一段话中间插入表情。

本插件最后更新于 4.0 版本
{% inlineimage 图片链接, height=高度（可选） %}

演示效果

这是 一段话。

这又是 一段话。

上述示例的源码

example:
这是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。

可以支持的参数

高度

height=20px

image

Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。

本插件最后更新于 4.0 版本
{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}

演示效果

添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

指定宽度：

image

指定宽度并添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

设置占位背景色：

优化不同宽度浏览的观感
优化不同宽度浏览的观感

上述示例的源码

example:
添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路，没有什么故事。 %}

指定宽度：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}

指定宽度并添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}

设置占位背景色：

{% image https://gcore.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

Gallery 标签是一种针对一组图片应用场景的标签。

本插件最后更新于 3.0 版本
{% gallery 参数, 列数 %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
{% endgallery %}

演示效果

一行一个图片

图片描述

一行多个图片（不换行）

图片描述

图片描述

图片描述

多行多个图片（每行2～8个图片）
























































上述示例的源码

一行一个图片

example.md:
{% gallery %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endgallery %}

一行多个图片（不换行）

example.md:
{% gallery %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg)
{% endgallery %}

多行多个图片（每行2～8个图片）

example.md:
{% gallery stretch, 4 %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
{% endgallery %}

可以支持的参数

对齐方向

left, center, right

缩放

stretch

列数

逗号后面直接写列数，支持 2 ～ 8 列。设定列列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。


audio

本插件最后更新于 2.4 版本
{% audio 音频链接 %}

演示效果

上述示例的源码

example:
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

video

本插件最后更新于 2.3 版本
{% video 视频链接 %}

演示效果

100%宽度

50%宽度

25%宽度

上述示例的源码

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

这是一个能够将图片或者视频套入设备框架中的标签，可以用来更优雅地显示截图、录屏。

本插件最后更新于 4.0 版本
{% frame 框架名 | img=图片链接 | alt=图片描述（可选） | part=top/bottom（可选） %}
{% frame 框架名 | video=视频链接 | part=top/bottom（可选） %}

{% frame iphone11 | img=https://7.dusays.com/2020/09/28/baa33914a34ec.jpg | video=https://7.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-aplayer

https://github.com/MoePlayer/hexo-tag-aplayer


issues

最后更新于 4.0 版本
{% issues type | api=url | group=key:value1,value2（可选） %}

类型

根据需求不同，会将 issues 内容解析成不同的 HTML 标签，目前支持的类型有：

  • timeline: 解析成 timeline 标签，issue 的标题对应 timeline 的时间， issue 的内容对应 timeline 的内容。
  • sites: 解析成 sites 标签，需要有 JSON 代码块：
    {
        "title": "",
        "screenshot": "",
        "url": "",
        "avatar": "",
        "description": "",
        "keywords": ""
    }

API

传可以调得通的 URL ，例如：

api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active
api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active

分组

sites 类型的 issues 默认不分组，如果需要分组，可指定分组依据「key」，和分组白名单「value1」「value2」等，例如：

group=version:v4,v3,v2

这个参数的作用就是，筛选出 JSON 中包含 "version": "v4" 或者 "version": "v3" 或者 "version": "v2" 的数据，并分组显示。

示例

时间线

{% issues timeline | api=https://gitee.com/api/v5/repos/xaoxuu/timeline/issues?state=open&creator=xaoxuu&sort=created&direction=desc&page=1&per_page=100 %}

对应的仓库链接：

Gitee: xaoxuu/timeline

https://gitee.com/xaoxuu/timeline/issues

友链

{% issues sites | api=https://gitee.com/api/v5/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}
{% issues sites | api=https://api.github.com/repos/xaoxuu/friends/issues?sort=updated&state=open&page=1&per_page=100&labels=active %}

上例中的 labels=active 参数可以控制默认的 issue 不显示，只有自己审核通过添加了 active 标签之后才会显示。上述示例对应的仓库链接：

GitHub: xaoxuu/friends

https://github.com/xaoxuu/friends/issues

分组

这是主题官网的「示例博客」页面的数据：

{% issues sites | api=https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per_page=100 | group=version:版本：^4.0,版本：^3.0,版本：^2.0 %}

上述示例对应的仓库链接：

GitHub: volantis-x/examples

https://github.com/volantis-x/examples/issues

Hexo 通用标签

在文章中使用 <!-- more -->，那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字，同时这部分文字也会出现在正文之中。详见 Hexo 官方文档：

Hexo 官方文档 #标签插件

https://hexo.io/zh-cn/docs/tag-plugins

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v4/theme-settings/index.html b/v4/theme-settings/index.html index 600745a65..fc7786177 100644 --- a/v4/theme-settings/index.html +++ b/v4/theme-settings/index.html @@ -1 +1 @@ -主题配置 - Volantis

主题配置

发布于：2023年11月3日

创建主题配置文件

主题目录下的 _config.yml 文件通常负责主题相关配置，我们强烈建议您使用代替的主题配置文件以防止自己的配置丢失。那么如何使用代替主题配置文件呢？

第 1/2 步：创建配置文件

在博客根目录的 _config.yml 文件旁边新建一个文件： _config.volantis.yml ，这个文件中的配置信息优先级高于主题文件夹中的配置文件。

第 2/2 步：覆盖自定义配置

当您需要修改某项内容时，例如导航栏菜单，那么您需要在主题配置文件中找到相关内容，复制进自己创建的配置文件中：

blog/_config.volantis.yml
navbar:
  visiable: auto # always, auto
  logo: # choose [img] or [icon + title]
    img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png
    icon:
    title:
  menu:
    - name: 博客
      icon: fas fa-rss
      url: /

小提示
使用「npm i hexo-theme-volantis」方式安装的主题，主题配置文件在「blog/node_modules/hexo-theme-volantis/_config.yml」
使用传统方式安装的主题，主题配置文件在「blog/themes/volantis/_config.yml」

自定义主题外观

最大布局宽度

blog/_config.volantis.yml
custom_css:
  ...
  max_width: 1080px # Sum of body width and sidebar width

网页所呈现的内容的最大宽度，即 body 和 sidebar 的宽度之和。

抗锯齿

blog/_config.volantis.yml
custom_css:
  ...
  font_smoothing: true # font-smoothing for webkit

自定义光标样式

blog/_config.volantis.yml
custom_css:
  ...
  cursor:
    enable: true
    text: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/text.png
    pointer: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/pointer.png
    default: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/left_ptr.png
    not-allowed: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/circle.png
    zoom-out: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/zoom-out.png
    zoom-in: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/zoom-in.png
    grab: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/openhand.png

导航栏样式

您可以设置导航栏的高度以及视觉特效，视觉特效目前可选的有：

  • shadow：卡片阴影。
  • floatable：当鼠标移动到容器内时，呈现出浮起来的效果。
  • blur：背景模糊效果（毛玻璃），当浏览器不支持时显示为不透明。
blog/_config.volantis.yml
custom_css:
  ...
  navbar:
    height: 64px
    effect: [shadow, blur] # [shadow, floatable, blur]

滚动条样式

blog/_config.volantis.yml
custom_css:
  ...
  scrollbar:
    size: 4px
    border: 2px
    color: '#2196f3'
    hover: '#ff5722'

侧边栏样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。

blog/_config.volantis.yml
custom_css:
  ...
  sidebar:
    effect: [shadow] # [shadow, floatable, blur]

正文区域样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。

blog/_config.volantis.yml
custom_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
    note: # style for default note: {% note text %}
      icon: '\f054'
      color: ''

布局间距

您可以设置几种标题的布局间距 h2/h3/h4、段落间距 line、区块内部的段落间距 inline。

blog/_config.volantis.yml
custom_css:
  ...
  gap:
    h2: 48px # Spacing above H2 (only px unit)
    h3: 32px # Spacing above H3 (only px unit)
    h4: 16px # Spacing above H4 (only px unit)
    paragraph: 1rem # Paragraph spacing between paragraphs
    row: .5rem # Paragraph spacing between other elements

自定义字体

您可以自定义正文和代码字体。

blog/_config.volantis.yml
custom_css:
  ...
  fontfamily:
    logofont:
      fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: 'Varela Round'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf
      weight: normal
      style: normal
    bodyfont:
      fontfamily: 'UbuntuMono, "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: 'UbuntuMono'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf
      weight: normal
      style: normal
    codefont:
      fontfamily: 'Menlo, Monaco'
      name: 'Monaco'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf
      weight: normal
      style: normal

自定义颜色

多彩配色方案
blog/_config.volantis.yml
color_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%

自定义右键菜单

blog/_config.volantis.yml
# 自定义右键菜单
rightmenu:
  enable: true
  # hr: 分割线, music: 音乐控制器
  layout: [home, help, examples, contributors, hr, source_docs, source_theme, hr, print, hr, dark_mode, hr, music]
  # 可选功能项
  print:
    name: 打印页面
    icon: fa fa-print
    onclick: document.execCommand('print')
  # 自定义菜单的格式如下
  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/
  dark_mode:
    name: Dark mode
    icon: fas fa-moon
    toggle: darkmode

设置网站导航栏

导航栏配置

导航栏分为 logo、menu、search 三个区域设置，其中 logo 区域如果设置了图片，则不能显示图标和标题， menu 区域的设置可以写在一个单独的文件中。

blog/_config.volantis.yml
# 注意事项：建议规范全站路径 URL 最后带一个 "/" 例如 "about/"
navbar:
  logo: # choose [img] or [icon + title]
    img:
    icon:
    title:
  menu:
    # The following can be written in `blog/source/_data/menu.yml`
    - name: 博客
      icon: fas fa-rss
      url: /
    - name: 分类
      icon: fas fa-folder-open
      url: categories/
    - name: 标签
      icon: fas fa-tags
      url: tags/
    - name: 归档
      icon: fas fa-archive
      url: archives/
    - name: 友链
      icon: fas fa-link
      url: friends/
    - name: 关于
      icon: fas fa-info-circle
      url: about/
  search: 搜索   # Search bar placeholder

使用数据文件

建议新建一个文件，专门存放导航栏菜单配置，文件的路径为：

blog/source/_data/menu.yml

文件的内容为：

blog/source/_data/menu.yml
- name: 博客
  icon: fas fa-rss
  url: /
...

菜单嵌套

导航栏菜单支持嵌套，嵌套的属性名为 rows ，写法示例：

blog/source/_data/menu.yml
...
- name: 更多
  icon: fas 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: fas fa-clock
  url: /
  rows:
    - name: 热门文章
      icon: fas 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: fas fa-compact-disc 的“菜单”就会被渲染成一个 APlayer 播放器。

- name: 背景音乐
  icon: fas fa-compact-disc

设置网站页脚

您通过 layout 可以自由布局网站页脚内容 aplayer, social, license, info, copyright。

blog/_config.volantis.yml
site_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.yml
site_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.yml
cover:
  height_scheme: full # full, half
  ...

目前主题提供两种首页封面高度方案，其它页面均为半屏幕高度。

封面布局方案

blog/_config.volantis.yml
cover:
  ...
  scheme: dock # search (搜索), dock (坞), featured (精选), focus (焦点)
  ...
布局方案适合场景
search注重搜索
dock入口选项比较多
featured选项在4个左右
focus选项在4个左右

默认显示设置

blog/_config.volantis.yml
cover:
  ...
  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://gcore.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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
          - https://gcore.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: '次浏览'
      # 文章评论数量：只支持 valine
      valinecount:
        icon: fas fa-comment-dots
        desc: '' # 条评论
      # 文章字数和阅读时长
      wordcount:
        icon_wordcount: fas fa-keyboard
        icon_duration: fas fa-hourglass-half
      # 文章标签
      tags:
        icon: fas fa-hashtag
      # 分享
      share:
        - id: qq
          img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png
        - id: qzone
          img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png
        - id: weibo
          img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png
        - id: # qrcode # 当id为qrcode时需要安装插件  npm i hexo-helper-qrcode
          img: # https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png
        - id: # telegram
          img: # https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/telegram.png

其中 top_meta 和 bottom_meta 部分的取值自 meta_library 库。

侧边栏配置

侧边栏小组件与 meta 库不同的是：除了现有的 widget ，您可以很轻易地创建自己的 widget ，然后放在需要的地方。此外，您还可以将 widget 写在单独的文件中。

查看所有相关配置
blog/_config.volantis.yml
sidebar:
  # 主页、分类、归档等独立页面
  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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
        - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    # ---------------------------------------
    # webinfo widget
    webinfo:
      class: webinfo
      display: [desktop]
      header:
        icon: fas fa-award
        title: 站点信息
      type:
        article:
          enable: true
          text: '文章数目：'
          unit: '篇'
        runtime:
          enable: true
          data: '2020/01/01'    # 填写建站日期
          text: '已运行时间：'
          unit: '天'
        wordcount:
          enable: true
          text: '本站总字数：'   # 需要启用 wordcount
          unit: '字'
        siteuv:
          enable: true
          text: '本站访客数：'   # 需要启用 busuanzi
          unit: '人'
        sitepv:
          enable: true
          text: '本站总访问量：' # 需要启用 busuanzi
          unit: '次'
        lastupd:
          enable: true
          friendlyShow: true    # 更友好的时间显示
          text: '最后活动时间：'
          unit: '日'

每一个小部件都有 class 和 display，前者代表这个小部件是什么，后者代表这个小部件在什么桌面和移动平台中是否显示，如果在移动平台显示，由于屏幕宽度有限，侧边栏的小部件则会被移动到正文区域下方，因此部分侧边栏小部件便失去意义，建议设置为仅桌面端显示。

小部件名:
  class: 小部件类别
  display: [小部件在桌面端是否显示, 小部件在移动设备是否显示]

博主信息部件

blog/_config.volantis.yml
blogger:
  class: blogger
  display: [desktop] # [desktop, mobile]
  avatar: https://gcore.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.yml
toc:
  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.yml
category:
  class: category
  display: [desktop] # [desktop, mobile]
  header:
    icon: fas fa-folder-open
    title: 文章分类
    url: /blog/categories/

这个部件可以直接显示所有文章分类，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。

标签云部件

blog/_config.volantis.yml
tagcloud:
  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.yml
donate:
  class: qrcode
  display: [desktop, mobile] # [desktop, mobile]
  height: 64px  # Automatic height if not set
  images:
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png

您可以放置在文章页脚用于展示打赏图片，也可以放置在侧边栏。

通用文本部件

blog/_config.volantis.yml
repos:
  class: text
  display: [desktop] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: 点个赞吧
    url: https://github.com/xaoxuu/
  content:
    - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)'

您可以创建用于展示任何文本内容的文本部件。

通用列表部件

blog/_config.volantis.yml
wiki-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.yml
group-1:
  class: group
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: Git
    url: /wiki/git/

在文章的 front-matter 中设置：

front-matter
group: group-1
order: 16
sidebar: [group-1, toc]

「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章，顺序按照 order 从小到大排列。

通用网格部件

blog/_config.volantis.yml
feedback:
  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.yml
test:
  class: page
  display: [desktop, mobile]
  pid: haha
  content: excerpt # excerpt, more, content

您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容，可选 excerpt，more，content 分别对应文章的摘要、摘要后面的内容、全文。

选择评论系统

目前支持的评论系统有： valine, twikoo, waline, minivaline, disqus, disqusjs, gitalk, vssue, livere, isso, hashover

blog/_config.volantis.yml
comments:
  title: <i class='fas fa-comments'></i> 评论
  subtitle:
  service: valine # valine, twikoo, waline, minivaline, disqus, disqusjs, gitalk, vssue, livere, isso, hashover

一款快速、简洁且高效的无后端评论系统
https://valine.js.org

blog/_config.volantis.yml
comments:
  ...
  service: valine
  ...
  valine:
    # js: https://unpkg.com/valine@1.4/dist/Valine.min.js
    path: # 全局评论地址 目前设置全局评论地址后visitor失效,这是valine的问题
    placeholder: 快来评论吧~  # 评论占位提示
    # 其他配置项按照yml格式继续填写即可 除了 [el path placeholder emojiCDN emojiMaps] 选项
    appId: # your appId
    appKey: # your appKey
    ... 可选配置项详见源码

其中，placeholder 支持在 front-matter 中设置。

front-matter
---
valine:
  placeholder: 你觉得xxx怎么样呢？
---

也可以通过设置 valine.path 实现多个页面共用一个评论框。

front-matter
---
valine:
  path: /
---

一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system.
https://twikoo.js.org/

blog/_config.volantis.yml
comments:
  ...
  service: twikoo
  ...
  twikoo:
    js: https://unpkg.com/twikoo@latest # 建议锁定版本
    path: # 全局评论地址
    # 其他配置项按照yml格式继续填写即可 除了 [el path] 选项
    envId: xxxxxxxxxxxxxxx # 腾讯云环境id

一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system.
https://waline.js.org/

blog/_config.volantis.yml
comments:
  ...
  service: waline
  ...
  # Waline
  # https://waline.js.org/
  waline:
    js: https://unpkg.com/@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
    ... 可选配置项详见源码

一款快速、简洁且高效的无后端评论系统
https://github.com/MiniValine/MiniValine/

blog/_config.volantis.yml
comments:
  ...
  service: minivaline
  ...
  # MiniValine
  # https://github.com/MiniValine/MiniValine
  minivaline:
    js: https://unpkg.com/minivaline@latest
    path: # 全局评论地址
    placeholder: 快来评论吧~  # 全局评论占位提示
    # 更多选项 https://minivaline.js.org/docs/cn/#/Options 按照yml格式继续填写即可 （除了 [el path placeholder] 选项）
    # emoticonUrl 等列表选项 可参考 https://github.com/MiniValine/hexo-next-minivaline
    # 下面是一个例子：
    backend: waline
    serverURL: https://waline.vercel.app

Vue 驱动的、基于 Issue 的评论插件
https://vssue.js.org/zh/

blog/_config.volantis.yml
comments:
  ...
  service: vssue
  ...
  vssue:
    owner:
    repo:
    clientId:
    clientSecret:

A modern comment component based on Github Issue and Preact.
https://gitalk.github.io/

blog/_config.volantis.yml
comments:
  ...
  service: gitalk
  ...
  gitalk:
    clientID:
    clientSecret:
    repo:
    owner:
    admin: # []

clientID 和 clientSecret 的获取方法可自行搜索教程，这里仅简单描述一下步骤：

  1. 点击 GitHub -> Settings https://github.com/settings/profile
  2. 点击 Developer settings https://github.com/settings/developers
  3. 点击 New OAuth App https://github.com/settings/applications/new
  4. 填写信息：
    Application name 随便填，我的是：xaoxuu.com
    Homepage URL 和 Authorization callback URL 都写你的网址，我的是：https://xaoxuu.com

可以通过设置 gitalk.id 实现多个页面共用一个评论框。

front-matter
---
gitalk:
  id: /wiki/volantis/
---

Disqus - The #1 way to build an audience on your website.
https://disqus.com/

blog/_config.volantis.yml
comments:
  ...
  service: disqus
  ...
  disqus:
    shortname:

Render Disqus comments in Mainland China using Disqus API
https://github.com/SukkaW/DisqusJS

blog/_config.volantis.yml
comments:
  ...
  service: disqusjs
  ...
  # DisqusJS
  # https://github.com/SukkaW/DisqusJS
  disqusjs:
    path: # 全局评论地址
    # 配置项按照yml格式继续填写即可 除了 [siteName url identifier] 选项
    #shortname:
    #api:
    #apikey:
    #admin:
    #nesting:

Communication makes better world.
https://www.livere.com/

blog/_config.volantis.yml
comments:
  ...
  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 commenting server similar to Disqus.
https://posativ.org/isso/

blog/_config.volantis.yml
comments:
  ...
  service: isso
  ...
  isso:
    url: https://example.com/(path/)
    src: https://example.com/(path/)js/embed.min.js

A free and open source PHP comment system designed to allow completely anonymous comments and easy theming.
https://www.barkdull.org/software/hashover

blog/_config.volantis.yml
comments:
  ...
  service: hashover
  ...
  hashover:
    src: https://example.com/(path/)comments.php
blog/themes/volantis/layout/_third-party/comments/评论系统名称/layout.ejs
这里写布局代码
blog/themes/volantis/layout/_third-party/comments/评论系统名称/script.ejs
这里要写加载 js 的代码

收录更多评论系统

站内搜索

blog/_config.volantis.yml
search:
  enable: true
  service: hexo  # hexo, google, algolia, azure, baidu
  js: https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2.6.4/js/search.js
  google:
    apiKey:
    engineId:
  algolia:
    applicationID:
    apiKey:
    indexName:
  azure:
    serviceName:
    indexName:
    queryKey:
  baidu:
    apiId:

默认配置为 Hexo 搜索，但是需要安装插件才能使用：

npm i -S hexo-generator-search hexo-generator-json-content

第三方插件

插件库

Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭，无需进行设置。

blog/_config.volantis.yml
plugins:
  ################# required plugins ################
  # jquery
  jquery: https://unpkg.com/jquery@3.5/dist/jquery.min.js
  # fontawesome
  fontawesome: https://unpkg.com/@fortawesome/fontawesome-free@5.14/css/all.min.css
  ################# optional plugins ################

  ######### Plugins to improve loading speed:

  # 预加载
  preload:
    enable: true
    service: flying_pages # instant_page, flying_pages
    instant_page: https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js
    flying_pages: https://gcore.jsdelivr.net/gh/gijo-varghese/flying-pages@2.1.2/flying-pages.min.js

  # 图片懒加载
  # https://www.npmjs.com/package/vanilla-lazyload
  lazyload:
    enable: true
    js: https://unpkg.com/vanilla-lazyload@17.1.0/dist/lazyload.min.js
    onlypost: false
    loadingImg: # https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@3/img/placeholder/c617bfd2497fcea598e621413e315c368f8d8e.svg
    blurIn: true # 模糊加载效果 （loadingImg为空时有效）

  ######### Plugins to optimize the experience:

  # highlight.js
  highlightjs:
    enable: #true # Please set hexo.config.highlight.enable = false !!!
    js: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js
    css: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@10/build/styles/solarized-light.min.css
    # more: https://www.jsdelivr.com/package/npm/highlight.js?path=styles

  # https://scrollrevealjs.org/api/reveal.html
  scrollreveal:
    enable: #true
    js: https://unpkg.com/scrollreveal@4.0.6/dist/scrollreveal.min.js
    distance: 32px
    duration: 800 # ms
    interval: 20 # ms
    scale: 1 # 0.1~1

  # Codeblock Copy Button
  clipboard:
    enable: #true
    js: https://unpkg.com/clipboard@2/dist/clipboard.min.js

  ######### Plugins for SEO:

  # npm i hexo-wordcount
  wordcount:
    enable: #true

  ######### Plugins for ...
  # Button Ripple Effect
  nodewaves:
    enable: #true
    css: https://unpkg.com/node-waves@0.7.6/dist/waves.min.css
    js: https://unpkg.com/node-waves@0.7.6/dist/waves.min.js

  # fontawesome animation
  fontawesome_animation:
    enable: #true
    css: https://gcore.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css

  # Typing Effects
  comment_typing:
    enable: #true
    js: https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js

  # Slide Background
  backstretch:
    enable: #true
    js: https://unpkg.com/jquery-backstretch@2.1.18/jquery.backstretch.min.js
    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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/033.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/035.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/038.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/039.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/042.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/052.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/054.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/056.jpg

  # APlayer is only available in mainland China.
  # APlayer config: https://github.com/metowolf/MetingJS
  aplayer:
    enable: #true
    js:
      aplayer: https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
      meting: https://unpkg.com/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
  pjax:
    enable: true
    cover: true          # 封面是否pjax处理 false：每次切换页面封面都重载，适合封面较少的情况 true：封面经过Pjax处理，适合封面较多的情况
    timeout: 5000        # The timeout in milliseconds for the XHR requests. Set to 0 to disable the timeout.
    cacheBust: false     # When set to true, Pjax appends a timestamp  to skip the browser cache.
    animation: false # false, nprogress, circle
    banUrl:              # 被屏蔽的 url 地址将不启用 pjax 跳转，可以在控制台下使用 window.location.pathname 获取
      # - '/artitalk/'     # artitalk 不支持 pjax
      # - '/bb/'           # bbtalk 不支持 pjax

  # 从 issues 加载动态数据
  # {% issues sites/timeline/friends | api=xxx | group=key:a,b,c %}
  # 例如：
  # {% issues sites | api=https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per_page=100 | group=version:latest,v6,v5,v4,v3,v2,v1,v0 %}


  # 暗黑模式 darkmode
  # 样式：source/css/_plugins/dark.styl
  # 开关按钮：在 navbar.menu 中添加：
  # - name: 暗黑模式 # 可自定义
  #   icon: fas fa-moon # 可自定义
  #   toggle: darkmode
  darkmodejs:
    enable: #true

  # 旧版 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

  # Artitalk https://artitalk.js.org
  # 配置过程请参考：https://artitalk.js.org/doc.html
  # 使用过旧版本的请修改Leancloud shuoshuo class部分列名：https://artitalk.js.org/release.html
  # 除appID和appKEY外均为选填项
  artitalk:
    # Set `layout: artitalk` to enable in page
    # 配置项按照yml格式继续填写即可
    appId: ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI # your appID
    appKey: nHXLd3N3Jgh460t2iRQKWAtr # your appKEY
    # serverURL:  #leancloud绑定的安全域名，使用国际版的话不需要填写
    # lang: # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
    # pageSize: #每页说说的显示数量
    # shuoPla: #在编辑说说的输入框中的占位符
    # avatarPla: #自定义头像url的输入框的占位符
    # motion: #加载动画的开关，1为开，0为关，默认为开
    # bgImg: #说说输入框背景图片url
    # color1: #说说背景颜色1&按钮颜色1
    # color2: #说说背景颜色2&按钮颜色2
    # color3: #说说字体颜色
    # cssUrl: #自定义css接口

  # BBtalk https://bb.js.org
  bbtalk:
    js: https://unpkg.com/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 域名

  # Tidio聊天功能
  # https://www.tidio.com/
  tidio:
    enable: #true
    id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

幻灯片背景

blog/_config.volantis.yml
plugins:
  ...
  backstretch:
    enable: true
    js: https://unpkg.com/jquery-backstretch@2.1.18/jquery.backstretch.min.js
    position: cover       # cover: sticky on the cover.   fixed: Fixed as background for the site.
    duration: 20000       # 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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg
      ...

幻灯片背景图片显示的位置可以选择粘贴在封面上，跟随封面一起滑动，也可以选择固定作为网页背景图片。

highlight.js

blog/_config.volantis.yml
plugins:
  ...
  # highlight.js
  highlightjs:
    enable: true # Please set hexo.config.highlight.enable = false !!!
    js: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js
    css: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@10/build/styles/solarized-light.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.yml
plugins:
  ...
  # APlayer is only available in mainland China.
  # APlayer config: https://github.com/metowolf/MetingJS
  aplayer:
    enable: true
    js:
      aplayer: https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
      meting: https://unpkg.com/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.yml
plugins:
  ...
  # 样式：source/css/_plugins/dark.styl
  # 开关按钮：在 navbar.menu 中添加：
  # - name: 暗黑模式 # 可自定义
  #   icon: fas fa-moon # 可自定义
  #   toggle: darkmode
  darkmodejs:
    enable: true

结束支持

blog/_config.volantis.yml
plugins:
  ...
  # 旧版 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

Artitalk

blog/_config.volantis.yml
plugins:
  ...
  # Artitalk https://artitalk.js.org
  # 配置过程请参考：https://artitalk.js.org/doc.html
  # 使用过旧版本的请修改Leancloud shuoshuo class部分列名：https://artitalk.js.org/release.html
  # 除appID和appKEY外均为选填项
  artitalk:
    # Set `layout: artitalk` to enable in page
    # 配置项按照yml格式继续填写即可
    appId: ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI # your appID
    appKey: nHXLd3N3Jgh460t2iRQKWAtr # your appKEY
    # serverURL:  #leancloud绑定的安全域名，使用国际版的话不需要填写
    # lang: # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
    # pageSize: #每页说说的显示数量
    # shuoPla: #在编辑说说的输入框中的占位符
    # avatarPla: #自定义头像url的输入框的占位符
    # motion: #加载动画的开关，1为开，0为关，默认为开
    # bgImg: #说说输入框背景图片url
    # color1: #说说背景颜色1&按钮颜色1
    # color2: #说说背景颜色2&按钮颜色2
    # color3: #说说字体颜色
    # cssUrl: #自定义css接口

BBtalk

blog/_config.volantis.yml
plugins:
  ...
  bbtalk:
    js: https://unpkg.com/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 域名

Tidio

blog/_config.volantis.yml
plugins:
  ...
  # Tidio聊天功能
  # https://www.tidio.com/
  tidio:
    enable: true
    id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +主题配置 - Volantis

主题配置

发布于：2023年11月3日

创建主题配置文件

主题目录下的 _config.yml 文件通常负责主题相关配置，我们强烈建议您使用代替的主题配置文件以防止自己的配置丢失。那么如何使用代替主题配置文件呢？

第 1/2 步：创建配置文件

在博客根目录的 _config.yml 文件旁边新建一个文件： _config.volantis.yml ，这个文件中的配置信息优先级高于主题文件夹中的配置文件。

第 2/2 步：覆盖自定义配置

当您需要修改某项内容时，例如导航栏菜单，那么您需要在主题配置文件中找到相关内容，复制进自己创建的配置文件中：

blog/_config.volantis.yml
navbar:
  visiable: auto # always, auto
  logo: # choose [img] or [icon + title]
    img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png
    icon:
    title:
  menu:
    - name: 博客
      icon: fas fa-rss
      url: /

小提示
使用「npm i hexo-theme-volantis」方式安装的主题，主题配置文件在「blog/node_modules/hexo-theme-volantis/_config.yml」
使用传统方式安装的主题，主题配置文件在「blog/themes/volantis/_config.yml」

自定义主题外观

最大布局宽度

blog/_config.volantis.yml
custom_css:
  ...
  max_width: 1080px # Sum of body width and sidebar width

网页所呈现的内容的最大宽度，即 body 和 sidebar 的宽度之和。

抗锯齿

blog/_config.volantis.yml
custom_css:
  ...
  font_smoothing: true # font-smoothing for webkit

自定义光标样式

blog/_config.volantis.yml
custom_css:
  ...
  cursor:
    enable: true
    text: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/text.png
    pointer: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/pointer.png
    default: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/left_ptr.png
    not-allowed: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/circle.png
    zoom-out: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/zoom-out.png
    zoom-in: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/zoom-in.png
    grab: https://gcore.jsdelivr.net/gh/inkss/common@master/cursor/openhand.png

导航栏样式

您可以设置导航栏的高度以及视觉特效，视觉特效目前可选的有：

  • shadow：卡片阴影。
  • floatable：当鼠标移动到容器内时，呈现出浮起来的效果。
  • blur：背景模糊效果（毛玻璃），当浏览器不支持时显示为不透明。
blog/_config.volantis.yml
custom_css:
  ...
  navbar:
    height: 64px
    effect: [shadow, blur] # [shadow, floatable, blur]

滚动条样式

blog/_config.volantis.yml
custom_css:
  ...
  scrollbar:
    size: 4px
    border: 2px
    color: '#2196f3'
    hover: '#ff5722'

侧边栏样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。

blog/_config.volantis.yml
custom_css:
  ...
  sidebar:
    effect: [shadow] # [shadow, floatable, blur]

正文区域样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。

blog/_config.volantis.yml
custom_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
    note: # style for default note: {% note text %}
      icon: '\f054'
      color: ''

布局间距

您可以设置几种标题的布局间距 h2/h3/h4、段落间距 line、区块内部的段落间距 inline。

blog/_config.volantis.yml
custom_css:
  ...
  gap:
    h2: 48px # Spacing above H2 (only px unit)
    h3: 32px # Spacing above H3 (only px unit)
    h4: 16px # Spacing above H4 (only px unit)
    paragraph: 1rem # Paragraph spacing between paragraphs
    row: .5rem # Paragraph spacing between other elements

自定义字体

您可以自定义正文和代码字体。

blog/_config.volantis.yml
custom_css:
  ...
  fontfamily:
    logofont:
      fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: 'Varela Round'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf
      weight: normal
      style: normal
    bodyfont:
      fontfamily: 'UbuntuMono, "PingFang SC", "Microsoft YaHei", Helvetica, Arial'
      name: 'UbuntuMono'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf
      weight: normal
      style: normal
    codefont:
      fontfamily: 'Menlo, Monaco'
      name: 'Monaco'
      url: https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf
      weight: normal
      style: normal

自定义颜色

多彩配色方案
blog/_config.volantis.yml
color_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%

自定义右键菜单

blog/_config.volantis.yml
# 自定义右键菜单
rightmenu:
  enable: true
  # hr: 分割线, music: 音乐控制器
  layout: [home, help, examples, contributors, hr, source_docs, source_theme, hr, print, hr, dark_mode, hr, music]
  # 可选功能项
  print:
    name: 打印页面
    icon: fa fa-print
    onclick: document.execCommand('print')
  # 自定义菜单的格式如下
  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/
  dark_mode:
    name: Dark mode
    icon: fas fa-moon
    toggle: darkmode

设置网站导航栏

导航栏配置

导航栏分为 logo、menu、search 三个区域设置，其中 logo 区域如果设置了图片，则不能显示图标和标题， menu 区域的设置可以写在一个单独的文件中。

blog/_config.volantis.yml
# 注意事项：建议规范全站路径 URL 最后带一个 "/" 例如 "about/"
navbar:
  logo: # choose [img] or [icon + title]
    img:
    icon:
    title:
  menu:
    # The following can be written in `blog/source/_data/menu.yml`
    - name: 博客
      icon: fas fa-rss
      url: /
    - name: 分类
      icon: fas fa-folder-open
      url: categories/
    - name: 标签
      icon: fas fa-tags
      url: tags/
    - name: 归档
      icon: fas fa-archive
      url: archives/
    - name: 友链
      icon: fas fa-link
      url: friends/
    - name: 关于
      icon: fas fa-info-circle
      url: about/
  search: 搜索   # Search bar placeholder

使用数据文件

建议新建一个文件，专门存放导航栏菜单配置，文件的路径为：

blog/source/_data/menu.yml

文件的内容为：

blog/source/_data/menu.yml
- name: 博客
  icon: fas fa-rss
  url: /
...

菜单嵌套

导航栏菜单支持嵌套，嵌套的属性名为 rows ，写法示例：

blog/source/_data/menu.yml
...
- name: 更多
  icon: fas 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: fas fa-clock
  url: /
  rows:
    - name: 热门文章
      icon: fas 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: fas fa-compact-disc 的“菜单”就会被渲染成一个 APlayer 播放器。

- name: 背景音乐
  icon: fas fa-compact-disc

设置网站页脚

您通过 layout 可以自由布局网站页脚内容 aplayer, social, license, info, copyright。

blog/_config.volantis.yml
site_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.yml
site_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.yml
cover:
  height_scheme: full # full, half
  ...

目前主题提供两种首页封面高度方案，其它页面均为半屏幕高度。

封面布局方案

blog/_config.volantis.yml
cover:
  ...
  scheme: dock # search (搜索), dock (坞), featured (精选), focus (焦点)
  ...
布局方案适合场景
search注重搜索
dock入口选项比较多
featured选项在4个左右
focus选项在4个左右

默认显示设置

blog/_config.volantis.yml
cover:
  ...
  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://gcore.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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
          - https://gcore.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: '次浏览'
      # 文章评论数量：只支持 valine
      valinecount:
        icon: fas fa-comment-dots
        desc: '' # 条评论
      # 文章字数和阅读时长
      wordcount:
        icon_wordcount: fas fa-keyboard
        icon_duration: fas fa-hourglass-half
      # 文章标签
      tags:
        icon: fas fa-hashtag
      # 分享
      share:
        - id: qq
          img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png
        - id: qzone
          img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png
        - id: weibo
          img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png
        - id: # qrcode # 当id为qrcode时需要安装插件  npm i hexo-helper-qrcode
          img: # https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png
        - id: # telegram
          img: # https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/telegram.png

其中 top_meta 和 bottom_meta 部分的取值自 meta_library 库。

侧边栏配置

侧边栏小组件与 meta 库不同的是：除了现有的 widget ，您可以很轻易地创建自己的 widget ，然后放在需要的地方。此外，您还可以将 widget 写在单独的文件中。

查看所有相关配置
blog/_config.volantis.yml
sidebar:
  # 主页、分类、归档等独立页面
  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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
        - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    # ---------------------------------------
    # webinfo widget
    webinfo:
      class: webinfo
      display: [desktop]
      header:
        icon: fas fa-award
        title: 站点信息
      type:
        article:
          enable: true
          text: '文章数目：'
          unit: '篇'
        runtime:
          enable: true
          data: '2020/01/01'    # 填写建站日期
          text: '已运行时间：'
          unit: '天'
        wordcount:
          enable: true
          text: '本站总字数：'   # 需要启用 wordcount
          unit: '字'
        siteuv:
          enable: true
          text: '本站访客数：'   # 需要启用 busuanzi
          unit: '人'
        sitepv:
          enable: true
          text: '本站总访问量：' # 需要启用 busuanzi
          unit: '次'
        lastupd:
          enable: true
          friendlyShow: true    # 更友好的时间显示
          text: '最后活动时间：'
          unit: '日'

每一个小部件都有 class 和 display，前者代表这个小部件是什么，后者代表这个小部件在什么桌面和移动平台中是否显示，如果在移动平台显示，由于屏幕宽度有限，侧边栏的小部件则会被移动到正文区域下方，因此部分侧边栏小部件便失去意义，建议设置为仅桌面端显示。

小部件名:
  class: 小部件类别
  display: [小部件在桌面端是否显示, 小部件在移动设备是否显示]

博主信息部件

blog/_config.volantis.yml
blogger:
  class: blogger
  display: [desktop] # [desktop, mobile]
  avatar: https://gcore.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.yml
toc:
  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.yml
category:
  class: category
  display: [desktop] # [desktop, mobile]
  header:
    icon: fas fa-folder-open
    title: 文章分类
    url: /blog/categories/

这个部件可以直接显示所有文章分类，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。

标签云部件

blog/_config.volantis.yml
tagcloud:
  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.yml
donate:
  class: qrcode
  display: [desktop, mobile] # [desktop, mobile]
  height: 64px  # Automatic height if not set
  images:
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png

您可以放置在文章页脚用于展示打赏图片，也可以放置在侧边栏。

通用文本部件

blog/_config.volantis.yml
repos:
  class: text
  display: [desktop] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: 点个赞吧
    url: https://github.com/xaoxuu/
  content:
    - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)'

您可以创建用于展示任何文本内容的文本部件。

通用列表部件

blog/_config.volantis.yml
wiki-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.yml
group-1:
  class: group
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: Git
    url: /wiki/git/

在文章的 front-matter 中设置：

front-matter
group: group-1
order: 16
sidebar: [group-1, toc]

「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章，顺序按照 order 从小到大排列。

通用网格部件

blog/_config.volantis.yml
feedback:
  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.yml
test:
  class: page
  display: [desktop, mobile]
  pid: haha
  content: excerpt # excerpt, more, content

您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容，可选 excerpt，more，content 分别对应文章的摘要、摘要后面的内容、全文。

选择评论系统

目前支持的评论系统有： valine, twikoo, waline, minivaline, disqus, disqusjs, gitalk, vssue, livere, isso, hashover

blog/_config.volantis.yml
comments:
  title: <i class='fas fa-comments'></i> 评论
  subtitle:
  service: valine # valine, twikoo, waline, minivaline, disqus, disqusjs, gitalk, vssue, livere, isso, hashover

一款快速、简洁且高效的无后端评论系统
https://valine.js.org

blog/_config.volantis.yml
comments:
  ...
  service: valine
  ...
  valine:
    # js: https://unpkg.com/valine@1.4/dist/Valine.min.js
    path: # 全局评论地址 目前设置全局评论地址后visitor失效,这是valine的问题
    placeholder: 快来评论吧~  # 评论占位提示
    # 其他配置项按照yml格式继续填写即可 除了 [el path placeholder emojiCDN emojiMaps] 选项
    appId: # your appId
    appKey: # your appKey
    ... 可选配置项详见源码

其中，placeholder 支持在 front-matter 中设置。

front-matter
---
valine:
  placeholder: 你觉得xxx怎么样呢？
---

也可以通过设置 valine.path 实现多个页面共用一个评论框。

front-matter
---
valine:
  path: /
---

一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system.
https://twikoo.js.org/

blog/_config.volantis.yml
comments:
  ...
  service: twikoo
  ...
  twikoo:
    js: https://unpkg.com/twikoo@latest # 建议锁定版本
    path: # 全局评论地址
    # 其他配置项按照yml格式继续填写即可 除了 [el path] 选项
    envId: xxxxxxxxxxxxxxx # 腾讯云环境id

一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system.
https://waline.js.org/

blog/_config.volantis.yml
comments:
  ...
  service: waline
  ...
  # Waline
  # https://waline.js.org/
  waline:
    js: https://unpkg.com/@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
    ... 可选配置项详见源码

一款快速、简洁且高效的无后端评论系统
https://github.com/MiniValine/MiniValine/

blog/_config.volantis.yml
comments:
  ...
  service: minivaline
  ...
  # MiniValine
  # https://github.com/MiniValine/MiniValine
  minivaline:
    js: https://unpkg.com/minivaline@latest
    path: # 全局评论地址
    placeholder: 快来评论吧~  # 全局评论占位提示
    # 更多选项 https://minivaline.js.org/docs/cn/#/Options 按照yml格式继续填写即可 （除了 [el path placeholder] 选项）
    # emoticonUrl 等列表选项 可参考 https://github.com/MiniValine/hexo-next-minivaline
    # 下面是一个例子：
    backend: waline
    serverURL: https://waline.vercel.app

Vue 驱动的、基于 Issue 的评论插件
https://vssue.js.org/zh/

blog/_config.volantis.yml
comments:
  ...
  service: vssue
  ...
  vssue:
    owner:
    repo:
    clientId:
    clientSecret:

A modern comment component based on Github Issue and Preact.
https://gitalk.github.io/

blog/_config.volantis.yml
comments:
  ...
  service: gitalk
  ...
  gitalk:
    clientID:
    clientSecret:
    repo:
    owner:
    admin: # []

clientID 和 clientSecret 的获取方法可自行搜索教程，这里仅简单描述一下步骤：

  1. 点击 GitHub -> Settings https://github.com/settings/profile
  2. 点击 Developer settings https://github.com/settings/developers
  3. 点击 New OAuth App https://github.com/settings/applications/new
  4. 填写信息：
    Application name 随便填，我的是：xaoxuu.com
    Homepage URL 和 Authorization callback URL 都写你的网址，我的是：https://xaoxuu.com

可以通过设置 gitalk.id 实现多个页面共用一个评论框。

front-matter
---
gitalk:
  id: /wiki/volantis/
---

Disqus - The #1 way to build an audience on your website.
https://disqus.com/

blog/_config.volantis.yml
comments:
  ...
  service: disqus
  ...
  disqus:
    shortname:

Render Disqus comments in Mainland China using Disqus API
https://github.com/SukkaW/DisqusJS

blog/_config.volantis.yml
comments:
  ...
  service: disqusjs
  ...
  # DisqusJS
  # https://github.com/SukkaW/DisqusJS
  disqusjs:
    path: # 全局评论地址
    # 配置项按照yml格式继续填写即可 除了 [siteName url identifier] 选项
    #shortname:
    #api:
    #apikey:
    #admin:
    #nesting:

Communication makes better world.
https://www.livere.com/

blog/_config.volantis.yml
comments:
  ...
  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 commenting server similar to Disqus.
https://posativ.org/isso/

blog/_config.volantis.yml
comments:
  ...
  service: isso
  ...
  isso:
    url: https://example.com/(path/)
    src: https://example.com/(path/)js/embed.min.js

A free and open source PHP comment system designed to allow completely anonymous comments and easy theming.
https://www.barkdull.org/software/hashover

blog/_config.volantis.yml
comments:
  ...
  service: hashover
  ...
  hashover:
    src: https://example.com/(path/)comments.php
blog/themes/volantis/layout/_third-party/comments/评论系统名称/layout.ejs
这里写布局代码
blog/themes/volantis/layout/_third-party/comments/评论系统名称/script.ejs
这里要写加载 js 的代码

收录更多评论系统

站内搜索

blog/_config.volantis.yml
search:
  enable: true
  service: hexo  # hexo, google, algolia, azure, baidu
  js: https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2.6.4/js/search.js
  google:
    apiKey:
    engineId:
  algolia:
    applicationID:
    apiKey:
    indexName:
  azure:
    serviceName:
    indexName:
    queryKey:
  baidu:
    apiId:

默认配置为 Hexo 搜索，但是需要安装插件才能使用：

npm i -S hexo-generator-search hexo-generator-json-content

第三方插件

插件库

Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭，无需进行设置。

blog/_config.volantis.yml
plugins:
  ################# required plugins ################
  # jquery
  jquery: https://unpkg.com/jquery@3.5/dist/jquery.min.js
  # fontawesome
  fontawesome: https://unpkg.com/@fortawesome/fontawesome-free@5.14/css/all.min.css
  ################# optional plugins ################

  ######### Plugins to improve loading speed:

  # 预加载
  preload:
    enable: true
    service: flying_pages # instant_page, flying_pages
    instant_page: https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js
    flying_pages: https://gcore.jsdelivr.net/gh/gijo-varghese/flying-pages@2.1.2/flying-pages.min.js

  # 图片懒加载
  # https://www.npmjs.com/package/vanilla-lazyload
  lazyload:
    enable: true
    js: https://unpkg.com/vanilla-lazyload@17.1.0/dist/lazyload.min.js
    onlypost: false
    loadingImg: # https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@3/img/placeholder/c617bfd2497fcea598e621413e315c368f8d8e.svg
    blurIn: true # 模糊加载效果 （loadingImg为空时有效）

  ######### Plugins to optimize the experience:

  # highlight.js
  highlightjs:
    enable: #true # Please set hexo.config.highlight.enable = false !!!
    js: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js
    css: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@10/build/styles/solarized-light.min.css
    # more: https://www.jsdelivr.com/package/npm/highlight.js?path=styles

  # https://scrollrevealjs.org/api/reveal.html
  scrollreveal:
    enable: #true
    js: https://unpkg.com/scrollreveal@4.0.6/dist/scrollreveal.min.js
    distance: 32px
    duration: 800 # ms
    interval: 20 # ms
    scale: 1 # 0.1~1

  # Codeblock Copy Button
  clipboard:
    enable: #true
    js: https://unpkg.com/clipboard@2/dist/clipboard.min.js

  ######### Plugins for SEO:

  # npm i hexo-wordcount
  wordcount:
    enable: #true

  ######### Plugins for ...
  # Button Ripple Effect
  nodewaves:
    enable: #true
    css: https://unpkg.com/node-waves@0.7.6/dist/waves.min.css
    js: https://unpkg.com/node-waves@0.7.6/dist/waves.min.js

  # fontawesome animation
  fontawesome_animation:
    enable: #true
    css: https://gcore.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css

  # Typing Effects
  comment_typing:
    enable: #true
    js: https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js

  # Slide Background
  backstretch:
    enable: #true
    js: https://unpkg.com/jquery-backstretch@2.1.18/jquery.backstretch.min.js
    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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/033.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/035.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/038.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/039.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/042.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/052.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/054.jpg
      - https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/056.jpg

  # APlayer is only available in mainland China.
  # APlayer config: https://github.com/metowolf/MetingJS
  aplayer:
    enable: #true
    js:
      aplayer: https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
      meting: https://unpkg.com/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
  pjax:
    enable: true
    cover: true          # 封面是否pjax处理 false：每次切换页面封面都重载，适合封面较少的情况 true：封面经过Pjax处理，适合封面较多的情况
    timeout: 5000        # The timeout in milliseconds for the XHR requests. Set to 0 to disable the timeout.
    cacheBust: false     # When set to true, Pjax appends a timestamp  to skip the browser cache.
    animation: false # false, nprogress, circle
    banUrl:              # 被屏蔽的 url 地址将不启用 pjax 跳转，可以在控制台下使用 window.location.pathname 获取
      # - '/artitalk/'     # artitalk 不支持 pjax
      # - '/bb/'           # bbtalk 不支持 pjax

  # 从 issues 加载动态数据
  # {% issues sites/timeline/friends | api=xxx | group=key:a,b,c %}
  # 例如：
  # {% issues sites | api=https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per_page=100 | group=version:latest,v6,v5,v4,v3,v2,v1,v0 %}


  # 暗黑模式 darkmode
  # 样式：source/css/_plugins/dark.styl
  # 开关按钮：在 navbar.menu 中添加：
  # - name: 暗黑模式 # 可自定义
  #   icon: fas fa-moon # 可自定义
  #   toggle: darkmode
  darkmodejs:
    enable: #true

  # 旧版 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

  # Artitalk https://artitalk.js.org
  # 配置过程请参考：https://artitalk.js.org/doc.html
  # 使用过旧版本的请修改Leancloud shuoshuo class部分列名：https://artitalk.js.org/release.html
  # 除appID和appKEY外均为选填项
  artitalk:
    # Set `layout: artitalk` to enable in page
    # 配置项按照yml格式继续填写即可
    appId: ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI # your appID
    appKey: nHXLd3N3Jgh460t2iRQKWAtr # your appKEY
    # serverURL:  #leancloud绑定的安全域名，使用国际版的话不需要填写
    # lang: # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
    # pageSize: #每页说说的显示数量
    # shuoPla: #在编辑说说的输入框中的占位符
    # avatarPla: #自定义头像url的输入框的占位符
    # motion: #加载动画的开关，1为开，0为关，默认为开
    # bgImg: #说说输入框背景图片url
    # color1: #说说背景颜色1&按钮颜色1
    # color2: #说说背景颜色2&按钮颜色2
    # color3: #说说字体颜色
    # cssUrl: #自定义css接口

  # BBtalk https://bb.js.org
  bbtalk:
    js: https://unpkg.com/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 域名

  # Tidio聊天功能
  # https://www.tidio.com/
  tidio:
    enable: #true
    id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

幻灯片背景

blog/_config.volantis.yml
plugins:
  ...
  backstretch:
    enable: true
    js: https://unpkg.com/jquery-backstretch@2.1.18/jquery.backstretch.min.js
    position: cover       # cover: sticky on the cover.   fixed: Fixed as background for the site.
    duration: 20000       # 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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg
      ...

幻灯片背景图片显示的位置可以选择粘贴在封面上，跟随封面一起滑动，也可以选择固定作为网页背景图片。

highlight.js

blog/_config.volantis.yml
plugins:
  ...
  # highlight.js
  highlightjs:
    enable: true # Please set hexo.config.highlight.enable = false !!!
    js: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js
    css: https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@10/build/styles/solarized-light.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.yml
plugins:
  ...
  # APlayer is only available in mainland China.
  # APlayer config: https://github.com/metowolf/MetingJS
  aplayer:
    enable: true
    js:
      aplayer: https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
      meting: https://unpkg.com/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.yml
plugins:
  ...
  # 样式：source/css/_plugins/dark.styl
  # 开关按钮：在 navbar.menu 中添加：
  # - name: 暗黑模式 # 可自定义
  #   icon: fas fa-moon # 可自定义
  #   toggle: darkmode
  darkmodejs:
    enable: true

结束支持

blog/_config.volantis.yml
plugins:
  ...
  # 旧版 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

Artitalk

blog/_config.volantis.yml
plugins:
  ...
  # Artitalk https://artitalk.js.org
  # 配置过程请参考：https://artitalk.js.org/doc.html
  # 使用过旧版本的请修改Leancloud shuoshuo class部分列名：https://artitalk.js.org/release.html
  # 除appID和appKEY外均为选填项
  artitalk:
    # Set `layout: artitalk` to enable in page
    # 配置项按照yml格式继续填写即可
    appId: ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI # your appID
    appKey: nHXLd3N3Jgh460t2iRQKWAtr # your appKEY
    # serverURL:  #leancloud绑定的安全域名，使用国际版的话不需要填写
    # lang: # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
    # pageSize: #每页说说的显示数量
    # shuoPla: #在编辑说说的输入框中的占位符
    # avatarPla: #自定义头像url的输入框的占位符
    # motion: #加载动画的开关，1为开，0为关，默认为开
    # bgImg: #说说输入框背景图片url
    # color1: #说说背景颜色1&按钮颜色1
    # color2: #说说背景颜色2&按钮颜色2
    # color3: #说说字体颜色
    # cssUrl: #自定义css接口

BBtalk

blog/_config.volantis.yml
plugins:
  ...
  bbtalk:
    js: https://unpkg.com/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 域名

Tidio

blog/_config.volantis.yml
plugins:
  ...
  # Tidio聊天功能
  # https://www.tidio.com/
  tidio:
    enable: true
    id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v5/advanced-settings/index.html b/v5/advanced-settings/index.html index 2f2612aa5..a825d91c7 100644 --- a/v5/advanced-settings/index.html +++ b/v5/advanced-settings/index.html @@ -1 +1 @@ -Volantis: 进阶设定 - Volantis

进阶设定

发布于：2023年11月3日

设置子模块

将主题添加为子模块

开始前需要确认不存在 themes/volantis 文件夹, 如果有, 请自行删除.

git submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantis
git 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.yml
Jon:
  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_Snow
Dany:
  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 | Fandom
author: 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 浏览器为例：

    1. 页面中点击右键，选择「检查」。
    2. 在右边的窗口中「Network」选项卡，并勾选「Disable cache」。
    3. 刷新网页，查看加载速度慢的资源。
      3.1. 加载缓慢的图片，建议使用 CDN。
      3.2. 加载缓慢的可以不用的 js 插件，建议舍弃。
      3.3. 加载缓慢却必须使用的 js 插件，建议下载并自己上传至 CDN。

运行速度

  • 访问具有动态特效背景（如雪花、粒子等）的网站时，手机很快会发烫变卡，笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。

优化 SEO

Robots

blog/_config.volantis.yml
seo:
  # 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。

Open Graph

blog/_config.volantis.yml
# https://ogp.me/
# https://hexo.io/zh-cn/docs/helpers#open-graph
open_graph:
  image: https://gcore.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 Data

blog/_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-results
structured_data:
  enable: true
  # 以下是覆盖配置, 默认配置见 scripts/helpers/structured-data/lib/config.js
  data:
    person:
      sns:
        - https://github.com/volantis-x
    logo:
      path: https://gcore.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 设置为 false
cdn:
  enable: true
  # CDN 前缀，为空使用默认值，链接最后不加 "/",
  # 例如： https://gcore.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-static
volantis_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 gulp
npm 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

运行 gulp

gulp

尝试使用 babel 转换兼容 ES6

如果想要兼容旧版浏览器，可以尝试使用 gulp-babel 将 ES6 转换为 ES5。

安装 gulp-babel 工具

npm install -g gulp
npm install --save-dev gulp-babel @babel/core @babel/preset-env

gulp 配置文件

参考文档： gulp gulp-babel

gulp 配置文件

https://github.com/volantis-x/community/blob/main/gulpfile.js

gulp.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'))

运行 gulp

gulp

安装 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.js

volantis-sw.js

discussions/791

安装「相关文章」插件

  1. 安装插件

    npm i -S hexo-related-popular-posts

  2. 插件的自定义配置方法：

    hexo-related-popular-posts

    https://github.com/tea3/hexo-related-popular-posts

如果您使用了头图，可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图：

blog/_config.yml
popularPosts:
  eyeCatchImageAttributeName: headimg

注意

需要升级到 5.0.1 及以上版本才可以支持自定义头图，详见 #29

分析与统计

数据统计

PV 和 UV

支持 不蒜子 的访问统计和 leancloud 统计，在配置文件中设置。

  • 若你选择 leancloud 统计, 你还需前往 leancloud 创建应用并填写下面 leancloud 相关配置
  • 若你选择 不蒜子 统计, 请取消下面 busuanzi 的配置注释
blog/_config.volantis.yml
analytics:
  busuanzi: #/libs/busuanzi/js/busuanzi.pure.mini.js #https://gcore.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 的所有配置注释，并启用对应评论系统的统计功能

字数和阅读时长

  1. 安装以下插件：
    npm i --save hexo-wordcount
  2. 修改配置文件，将 wordcount 插件打开
    blog/_config.volantis.yml
    plugins:
      ...
      # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
      wordcount:
        enable: #true
  3. 然后修改配置文件，将 wordcount 写入需要显示的 meta 位置：
    blog/_config.volantis.yml
    # 文章布局
    article:
      ...
      # 文章详情页面的文章卡片本体布局方案
      body:
        # 文章顶部信息
        # 从 meta_library 中取
        top_meta: [..., wordcount, ...]
        ...
        # 文章底部信息
        # 从 meta_library 中取
        bottom_meta: [..., wordcount, ...]

数据分析

百度统计

blog/_config.yml
baidu_analytics_key: 百度统计的key

Google Analytics

blog/_config.yml
google_analytics_key: Google Analytics Key

腾讯前端性能监控

blog/_config.yml
tencent_aegis_id: 上报 id

51LA统计

blog/_config.yml
v6_51_la: 应用id

灵雀监控

blog/_config.yml
perf_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/进阶玩法/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Volantis: 进阶设定 - Volantis

进阶设定

发布于：2023年11月3日

设置子模块

将主题添加为子模块

开始前需要确认不存在 themes/volantis 文件夹, 如果有, 请自行删除.

git submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantis
git 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.yml
Jon:
  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_Snow
Dany:
  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 | Fandom
author: 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 浏览器为例：

    1. 页面中点击右键，选择「检查」。
    2. 在右边的窗口中「Network」选项卡，并勾选「Disable cache」。
    3. 刷新网页，查看加载速度慢的资源。
      3.1. 加载缓慢的图片，建议使用 CDN。
      3.2. 加载缓慢的可以不用的 js 插件，建议舍弃。
      3.3. 加载缓慢却必须使用的 js 插件，建议下载并自己上传至 CDN。

运行速度

  • 访问具有动态特效背景（如雪花、粒子等）的网站时，手机很快会发烫变卡，笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。

优化 SEO

Robots

blog/_config.volantis.yml
seo:
  # 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。

Open Graph

blog/_config.volantis.yml
# https://ogp.me/
# https://hexo.io/zh-cn/docs/helpers#open-graph
open_graph:
  image: https://gcore.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 Data

blog/_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-results
structured_data:
  enable: true
  # 以下是覆盖配置, 默认配置见 scripts/helpers/structured-data/lib/config.js
  data:
    person:
      sns:
        - https://github.com/volantis-x
    logo:
      path: https://gcore.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 设置为 false
cdn:
  enable: true
  # CDN 前缀，为空使用默认值，链接最后不加 "/",
  # 例如： https://gcore.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-static
volantis_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 gulp
npm 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

运行 gulp

gulp

尝试使用 babel 转换兼容 ES6

如果想要兼容旧版浏览器，可以尝试使用 gulp-babel 将 ES6 转换为 ES5。

安装 gulp-babel 工具

npm install -g gulp
npm install --save-dev gulp-babel @babel/core @babel/preset-env

gulp 配置文件

参考文档： gulp gulp-babel

gulp 配置文件

https://github.com/volantis-x/community/blob/main/gulpfile.js

gulp.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'))

运行 gulp

gulp

安装 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.js

volantis-sw.js

discussions/791

安装「相关文章」插件

  1. 安装插件

    npm i -S hexo-related-popular-posts

  2. 插件的自定义配置方法：

    hexo-related-popular-posts

    https://github.com/tea3/hexo-related-popular-posts

如果您使用了头图，可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图：

blog/_config.yml
popularPosts:
  eyeCatchImageAttributeName: headimg

注意

需要升级到 5.0.1 及以上版本才可以支持自定义头图，详见 #29

分析与统计

数据统计

PV 和 UV

支持 不蒜子 的访问统计和 leancloud 统计，在配置文件中设置。

  • 若你选择 leancloud 统计, 你还需前往 leancloud 创建应用并填写下面 leancloud 相关配置
  • 若你选择 不蒜子 统计, 请取消下面 busuanzi 的配置注释
blog/_config.volantis.yml
analytics:
  busuanzi: #/libs/busuanzi/js/busuanzi.pure.mini.js #https://gcore.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 的所有配置注释，并启用对应评论系统的统计功能

字数和阅读时长

  1. 安装以下插件：
    npm i --save hexo-wordcount
  2. 修改配置文件，将 wordcount 插件打开
    blog/_config.volantis.yml
    plugins:
      ...
      # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
      wordcount:
        enable: #true
  3. 然后修改配置文件，将 wordcount 写入需要显示的 meta 位置：
    blog/_config.volantis.yml
    # 文章布局
    article:
      ...
      # 文章详情页面的文章卡片本体布局方案
      body:
        # 文章顶部信息
        # 从 meta_library 中取
        top_meta: [..., wordcount, ...]
        ...
        # 文章底部信息
        # 从 meta_library 中取
        bottom_meta: [..., wordcount, ...]

数据分析

百度统计

blog/_config.yml
baidu_analytics_key: 百度统计的key

Google Analytics

blog/_config.yml
google_analytics_key: Google Analytics Key

腾讯前端性能监控

blog/_config.yml
tencent_aegis_id: 上报 id

51LA统计

blog/_config.yml
v6_51_la: 应用id

灵雀监控

blog/_config.yml
perf_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/进阶玩法/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v5/development-api/index.html b/v5/development-api/index.html index 2c5d5936d..d05c23769 100644 --- a/v5/development-api/index.html +++ b/v5/development-api/index.html @@ -1 +1 @@ -Volantis: 开发文档 - Volantis

开发文档

发布于：2023年11月3日


样式文件说明

/source/css/Readme.md

全局变量

volantis

我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。

源码参考：layout/_partial/scripts/global.ejs

VolantisApp

我们提供了全局变量 VolantisApp 和一些全局函数等主题开发调用接口。

源码参考：/source/js/app.js

Pjax

Pjax 重载区域划分接口

我们提供了可以实现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://unpkg.com/jquery").then(()=>{
    console.log("我在脚本加载完成后调用")
})

按需加载的插件

源码参考：

layout/_partial/scripts/global.ejs

jQuery

volantis.import.jQuery().then(()=>{
  // 依赖 jQuery 的代码段
  // .....
  // .....
})

requestAnimationFrame

1、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://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/app.js
       rightMenu: https://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/rightMenu.js
       parallax: https://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/parallax.js
       plugins:
         contributors: https://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/contributors.js
         friends: https://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/friends.js
         sites: https://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/sites.js
     css:
       style: https://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/css/style.css
       message: https://gcore.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.yml
custom_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.styl
body
  --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.js
hexo.extend.filter.register('theme_inject', function(injects) {
  injects.style.push('source/_data/mystyle.styl');
});

以文本的形式向 <body> 标签末尾注入自定义脚本内容

blog/scripts/example-2.js
hexo.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.js
hexo.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 学习如何创建插件。

请注意，以上是主题开发文档，不是使用文档！

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Volantis: 开发文档 - Volantis

开发文档

发布于：2023年11月3日


样式文件说明

/source/css/Readme.md

全局变量

volantis

我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。

源码参考：layout/_partial/scripts/global.ejs

VolantisApp

我们提供了全局变量 VolantisApp 和一些全局函数等主题开发调用接口。

源码参考：/source/js/app.js

Pjax

Pjax 重载区域划分接口

我们提供了可以实现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://unpkg.com/jquery").then(()=>{
    console.log("我在脚本加载完成后调用")
})

按需加载的插件

源码参考：

layout/_partial/scripts/global.ejs

jQuery

volantis.import.jQuery().then(()=>{
  // 依赖 jQuery 的代码段
  // .....
  // .....
})

requestAnimationFrame

1、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://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/app.js
       rightMenu: https://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/rightMenu.js
       parallax: https://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/parallax.js
       plugins:
         contributors: https://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/contributors.js
         friends: https://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/friends.js
         sites: https://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/sites.js
     css:
       style: https://gcore.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/css/style.css
       message: https://gcore.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.yml
custom_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.styl
body
  --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.js
hexo.extend.filter.register('theme_inject', function(injects) {
  injects.style.push('source/_data/mystyle.styl');
});

以文本的形式向 <body> 标签末尾注入自定义脚本内容

blog/scripts/example-2.js
hexo.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.js
hexo.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 学习如何创建插件。

请注意，以上是主题开发文档，不是使用文档！

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v5/faq/index.html b/v5/faq/index.html index a2d86c13c..53dd4a891 100644 --- a/v5/faq/index.html +++ b/v5/faq/index.html @@ -1 +1 @@ -Volantis: FAQ - Volantis

FAQ

发布于：2023年11月3日


这是什么？我在哪里？

我也不知道

我这里出现了故障，需要先做什么？


控制台报错 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

42

上面没有我要找的答案？

尝试 打开搜索 或 常见问题与反馈渠道

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Volantis: FAQ - Volantis

FAQ

发布于：2023年11月3日


这是什么？我在哪里？

我也不知道

我这里出现了故障，需要先做什么？


控制台报错 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

42

上面没有我要找的答案？

尝试 打开搜索 或 常见问题与反馈渠道

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v5/getting-started/index.html b/v5/getting-started/index.html index 6a4b596fa..0f043d1aa 100644 --- a/v5/getting-started/index.html +++ b/v5/getting-started/index.html @@ -1 +1 @@ -Volantis: 开始使用 - Volantis


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。

示例博客

/examples/

所有的 Volantis 用户都可以按照格式自行创建 Issue 来将自己的博客添加到官网的示例博客页面中。

准备工作

自建博客需要一定的相关知识，在开始前，请务必确保您会使用 markdown 语法，掌握简单的 git 知识，最最重要的是，遇到困难知道该怎么寻求解决：

  1. 翻阅和搜索文档
  2. 搜索 issues 中是否有解决办法
  3. 新建 issue 并按照要求进行操作，详尽地描述您遇到的问题

如果您没有使用过 Hexo 也不要着急，可以先通读一遍 Hexo 中文文档，要想使用地得心应手，最好参照团队提供的开源项目的源码进行搭建：

Demo 源码 ｜ 官网源码

如果您从旧版本更新或着其它主题迁移，请确保环境版本不要太低，否则会产生兼容性问题。

Hexo: 5.4 ~ 6.x
hexo-cli: 4.3 ~ latest
node.js: 16.x LTS ~ latest LTS
npm: 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 阶段的正式版本 我们统称为 「稳定版本」 , 只有 「稳定版本」 发布到 npm

alpha 阶段的开发测试版本 和 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 文件夹, 如果有, 请自行删除.

git submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantis
git submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis

第 3/3 步：将主题仓库切换为 dev 分支

在终端中输入：

cd themes/volantis
git 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/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Volantis: 开始使用 - Volantis


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。

示例博客

/examples/

所有的 Volantis 用户都可以按照格式自行创建 Issue 来将自己的博客添加到官网的示例博客页面中。

准备工作

自建博客需要一定的相关知识，在开始前，请务必确保您会使用 markdown 语法，掌握简单的 git 知识，最最重要的是，遇到困难知道该怎么寻求解决：

  1. 翻阅和搜索文档
  2. 搜索 issues 中是否有解决办法
  3. 新建 issue 并按照要求进行操作，详尽地描述您遇到的问题

如果您没有使用过 Hexo 也不要着急，可以先通读一遍 Hexo 中文文档，要想使用地得心应手，最好参照团队提供的开源项目的源码进行搭建：

Demo 源码 ｜ 官网源码

如果您从旧版本更新或着其它主题迁移，请确保环境版本不要太低，否则会产生兼容性问题。

Hexo: 5.4 ~ 6.x
hexo-cli: 4.3 ~ latest
node.js: 16.x LTS ~ latest LTS
npm: 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 阶段的正式版本 我们统称为 「稳定版本」 , 只有 「稳定版本」 发布到 npm

alpha 阶段的开发测试版本 和 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 文件夹, 如果有, 请自行删除.

git submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantis
git submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis

第 3/3 步：将主题仓库切换为 dev 分支

在终端中输入：

cd themes/volantis
git 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/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v5/page-settings/index.html b/v5/page-settings/index.html index 73c8e4efa..b714913d4 100644 --- a/v5/page-settings/index.html +++ b/v5/page-settings/index.html @@ -1 +1 @@ -Volantis: 页面配置 - Volantis

页面配置

发布于：2023年11月3日

页面布局模板

布局模板

取值含义
page独立页面
post文章页面
docs文档页面
category分类页面
tag标签页面
friends友链页面
list列表页面

page & post & docs

这三种页面相同，但是有以下细微区别：

  • post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 和 docs 不会。
  • post 文章末尾最多可以显示「参考资料」、「相关文章」、「版权标识」、「打赏」四个模块。
  • docs 文章末尾最多可以显示「参考资料」一个模块。

除了归档页面是自动生成的，其它独立页面都需要手动创建 md 文件。

归档页面

归档页面是自动生成的，并且初始化的时候已经生成，路径如下：

blog/_config.yml
# Directory
archive_dir: archives

关于页面

Create file if not exists: source/about/index.md
---
layout: docs
seo_title: 关于
bottom_meta: false
sidebar: []
twikoo:
  placeholder: 有什么想对我说的呢？
---

下面写关于自己的内容

分类页面

Create file if not exists: source/categories/index.md
---
layout: category
index: true
title: 所有分类
---

标签页面

Create file if not exists: source/tags/index.md
---
layout: tag
index: true
title: 所有标签
---

列表页面

Create file if not exists: source/mylist/index.md
---
layout: list
group: mylist
index: 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: true
robots: noindex,nofollow
sitemap: false
seo_title: 404 Not Found
bottom_meta: false
sidebar: []
twikoo:
  path: /404.html
  placeholder: 请留言告诉我您要访问哪个页面找不到了
---

{% p logo center huge, 404 %}
{% p center bold, 很抱歉，您访问的页面不存在 %}
{% p center small, 可能是输入地址有误或该地址已被删除 %}

front-matter

front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter

字段含义值类型默认值
layout布局模版String-
title页面标题String-
seo_title网页标题Stringpage.title
short_title页面标题（在group列表中显示）Stringpage.title
date创建时间Date文件创建时间
updated更新日期Date文件修改时间
link外部文章网址String-
music内部音乐控件[Object]-
robotsrobotsString-
keywords页面关键词String-
description页面描述、摘要String-
cover是否显示封面Booltrue
top_meta是否显示文章或页面顶部的meta信息Booltrue
bottom_meta是否显示文章或页面底部的meta信息Booltrue
sidebar页面侧边栏Bool, Arraytheme.layout.*.sidebar
body页面主体元素Arraytheme.layout.on_page.body
thumbnail缩略图Stringfalse
icons图标Array[]
pin是否置顶Boolfalse
headimg文章头图url-

layout:post 时特有的字段：

字段含义值类型默认值
author文章作者[Object]config.author
categories分类String, Array-
tags标签String, Array-
toc是否生成目录Booltrue

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-matter
pin: true

文章分类

多个分类有两种关系，一种是层级（等同于文件夹），一种是并列（等同于标签）。

多级分类：

front-matter
---
categories: [分类A, 分类B]
---

或者

front-matter
---
categories:
  - 分类A
  - 分类B
---

并列分类

front-matter
categories:
  - [分类A]
  - [分类B]

多级+并列分类

front-matter
categories:
  - [分类A, 分类B]
  - [分类C, 分类D]

文章摘要

在文章中插入 <!-- more -->，前面的部分即为摘要。

某篇文章源码
---
title: xxx
date: 2020-02-21
---

这是摘要

<!-- more -->

这是正文

注意： <!-- more --> 前后一定要有空行，不然可能导致显示错位。

设置文章作者

Volantis 支持多个作者在一个站点发布文章，其他作者信息需要写在数据文件中，例如：

blog/source/_data/author.yml
Jon:
  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_Snow
Dany:
  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 | Fandom
author: Jon
---

引入外部文章

利用 link，搭配自定义的文章作者信息，你可以在文章列表中显示外部文章或者网址，例如：

blog/source/_data/author.yml
xaoxuu:
  name: xaoxuu
  avatar: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  url: https://xaoxuu.com
front-matter
---
layout:     post
date:       2017-07-05
title:      [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
  - Hexo
author: xaoxuu
link: 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: false
bottom_meta: false
---

如果一个页面没有 title 则不会显示 top_meta ，像404、关于页面就可以完全隐藏：

front-matter
---
seo_title: 关于
top_meta: false
bottom_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: false
plugins:
  - 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-23
plugins:
  - 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上使用KaTeX

https://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.yml
oldversion:
  title: 过期的文档
  message: 这份文档过于久远，如果您使用的是新版的主题，请查看新版本的文档。
  position: bottom # bottom (底部通知), right (右侧通知，会自动消失)
  theme: warning # default, warning
  cache: false # 是否记住选项（下次不再弹出）
  buttons:
    - title: 查看新版文档
      url: /getting-started/
      dismiss: false # 点击了是否关闭底部横幅

配置 front-matter

front-matter
---
plugins:
  - snackbar: oldversion
---

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Volantis: 页面配置 - Volantis

页面配置

发布于：2023年11月3日

页面布局模板

布局模板

取值含义
page独立页面
post文章页面
docs文档页面
category分类页面
tag标签页面
friends友链页面
list列表页面

page & post & docs

这三种页面相同，但是有以下细微区别：

  • post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 和 docs 不会。
  • post 文章末尾最多可以显示「参考资料」、「相关文章」、「版权标识」、「打赏」四个模块。
  • docs 文章末尾最多可以显示「参考资料」一个模块。

除了归档页面是自动生成的，其它独立页面都需要手动创建 md 文件。

归档页面

归档页面是自动生成的，并且初始化的时候已经生成，路径如下：

blog/_config.yml
# Directory
archive_dir: archives

关于页面

Create file if not exists: source/about/index.md
---
layout: docs
seo_title: 关于
bottom_meta: false
sidebar: []
twikoo:
  placeholder: 有什么想对我说的呢？
---

下面写关于自己的内容

分类页面

Create file if not exists: source/categories/index.md
---
layout: category
index: true
title: 所有分类
---

标签页面

Create file if not exists: source/tags/index.md
---
layout: tag
index: true
title: 所有标签
---

列表页面

Create file if not exists: source/mylist/index.md
---
layout: list
group: mylist
index: 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: true
robots: noindex,nofollow
sitemap: false
seo_title: 404 Not Found
bottom_meta: false
sidebar: []
twikoo:
  path: /404.html
  placeholder: 请留言告诉我您要访问哪个页面找不到了
---

{% p logo center huge, 404 %}
{% p center bold, 很抱歉，您访问的页面不存在 %}
{% p center small, 可能是输入地址有误或该地址已被删除 %}

front-matter

front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter

字段含义值类型默认值
layout布局模版String-
title页面标题String-
seo_title网页标题Stringpage.title
short_title页面标题（在group列表中显示）Stringpage.title
date创建时间Date文件创建时间
updated更新日期Date文件修改时间
link外部文章网址String-
music内部音乐控件[Object]-
robotsrobotsString-
keywords页面关键词String-
description页面描述、摘要String-
cover是否显示封面Booltrue
top_meta是否显示文章或页面顶部的meta信息Booltrue
bottom_meta是否显示文章或页面底部的meta信息Booltrue
sidebar页面侧边栏Bool, Arraytheme.layout.*.sidebar
body页面主体元素Arraytheme.layout.on_page.body
thumbnail缩略图Stringfalse
icons图标Array[]
pin是否置顶Boolfalse
headimg文章头图url-

layout:post 时特有的字段：

字段含义值类型默认值
author文章作者[Object]config.author
categories分类String, Array-
tags标签String, Array-
toc是否生成目录Booltrue

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-matter
pin: true

文章分类

多个分类有两种关系，一种是层级（等同于文件夹），一种是并列（等同于标签）。

多级分类：

front-matter
---
categories: [分类A, 分类B]
---

或者

front-matter
---
categories:
  - 分类A
  - 分类B
---

并列分类

front-matter
categories:
  - [分类A]
  - [分类B]

多级+并列分类

front-matter
categories:
  - [分类A, 分类B]
  - [分类C, 分类D]

文章摘要

在文章中插入 <!-- more -->，前面的部分即为摘要。

某篇文章源码
---
title: xxx
date: 2020-02-21
---

这是摘要

<!-- more -->

这是正文

注意： <!-- more --> 前后一定要有空行，不然可能导致显示错位。

设置文章作者

Volantis 支持多个作者在一个站点发布文章，其他作者信息需要写在数据文件中，例如：

blog/source/_data/author.yml
Jon:
  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_Snow
Dany:
  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 | Fandom
author: Jon
---

引入外部文章

利用 link，搭配自定义的文章作者信息，你可以在文章列表中显示外部文章或者网址，例如：

blog/source/_data/author.yml
xaoxuu:
  name: xaoxuu
  avatar: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  url: https://xaoxuu.com
front-matter
---
layout:     post
date:       2017-07-05
title:      [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
  - Hexo
author: xaoxuu
link: 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: false
bottom_meta: false
---

如果一个页面没有 title 则不会显示 top_meta ，像404、关于页面就可以完全隐藏：

front-matter
---
seo_title: 关于
top_meta: false
bottom_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: false
plugins:
  - 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-23
plugins:
  - 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上使用KaTeX

https://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.yml
oldversion:
  title: 过期的文档
  message: 这份文档过于久远，如果您使用的是新版的主题，请查看新版本的文档。
  position: bottom # bottom (底部通知), right (右侧通知，会自动消失)
  theme: warning # default, warning
  cache: false # 是否记住选项（下次不再弹出）
  buttons:
    - title: 查看新版文档
      url: /getting-started/
      dismiss: false # 点击了是否关闭底部横幅

配置 front-matter

front-matter
---
plugins:
  - snackbar: oldversion
---

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v5/site-settings/index.html b/v5/site-settings/index.html index 3d2a04f74..2a96c2ad2 100644 --- a/v5/site-settings/index.html +++ b/v5/site-settings/index.html @@ -1 +1 @@ -Volantis: 站点配置 - Volantis

站点配置

发布于：2023年11月3日

博客根目录下的 _config.yml 文件通常负责站点相关配置、第三方 npm 插件相关的配置。

网站标题

blog/_config.yml
# 网站标题
title: my blog

网站图标

blog/_config.yml
# 网站图标，更多尺寸等图标请使用import方式批量导入
favicon: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.ico
blog/_config.yml
import:
  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.yml
language:
  - 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.yml
import:
  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

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Volantis: 站点配置 - Volantis

站点配置

发布于：2023年11月3日

博客根目录下的 _config.yml 文件通常负责站点相关配置、第三方 npm 插件相关的配置。

网站标题

blog/_config.yml
# 网站标题
title: my blog

网站图标

blog/_config.yml
# 网站图标，更多尺寸等图标请使用import方式批量导入
favicon: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.ico
blog/_config.yml
import:
  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.yml
language:
  - 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.yml
import:
  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

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v5/tag-plugins/index.html b/v5/tag-plugins/index.html index 41c0947a8..5ebc507b2 100644 --- a/v5/tag-plugins/index.html +++ b/v5/tag-plugins/index.html @@ -1 +1 @@ -Volantis: 标签插件 - Volantis

标签插件

发布于：2023年11月3日

为了兼容老用户，旧的标签插件在重构之前依然沿用旧的格式，即 command + 空格 作为参数分隔符，而部分新增标签插件是 空格 + 英文竖线 + 空格 ，请注意区分。

我们也在探索哪种分隔符既简单又不容易引起冲突，所以可能存在多种格式，具体以对应文档描述为准。

5.0 版本起临时实验使用英文双冒号 ( :: ) 作为分隔符，之前版本的分隔符写法向下兼容

6.0 版本的分隔符最终计划使用 stellar 的分隔符，之前版本的分隔符写法没有兼容计划

text

带 下划线 的文本；带着重号 的文本；带波浪线 的文本；带 删除线 的文本

键盘样式的文本：⌘ + D

密码样式的文本：这里没有验证码

带 {% u 下划线 %} 的文本；带 {% emp 着重号 %} 的文本；带 {% wavy 波浪线 %} 的文本；带 {% del 删除线 %} 的文本

键盘样式的文本：{% kbd ⌘ %} + {% kbd D %}

密码样式的文本：{% psw 这里没有验证码 %}

span

本插件最后更新于5.0 版本
{% span 样式参数::文本内容 %}

各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大号文字：

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 样式参数::文本内容 %}

红色

黄色

绿色

青色

蓝色

灰色

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

note

NoteBlock 是 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

noteblock

NoteBlock 是 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

  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 服务。

2020-05-15 2.6.3 -> 2.6.6

不需要额外处理。

2020-04-20 2.6.2 -> 2.6.3

  1. 全局搜索 seotitle 并替换为 seo_title。
  2. group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
  3. 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 %}

最后更新于 5.0 版本
{% link 标题::链接::图片链接（可选） %}

演示效果

如何参与项目

https://volantis.js.org/contributors/

上述示例的源码

example:
{% link 如何参与项目::https://volantis.js.org/contributors/::https://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.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://gcore.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://gcore.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 版本以上使用。


tab

此插件移植自 NexT #tabs

最后更新于 2.1 版本
{% tabs 页面内不重复的ID %}
<!-- tab 栏目1 -->
内容
<!-- endtab -->
<!-- tab 栏目2 -->
内容
<!-- endtab -->
{% endtabs %}

演示效果

。。。

！！！

上述示例的源码

example:
{% tabs tab-id %}

<!-- tab 栏目1 -->

。。。

<!-- endtab -->

<!-- tab 栏目2 -->

！！！

<!-- endtab -->

{% endtabs %}

folding

最后更新于 5.0 版本
{% folding 参数（可选）::标题 %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

演示效果

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试
{% folding green::查看代码测试 %}

查看代码测试

{% endfolding %}
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

上述示例的源码

example:
{% folding 查看图片测试 %}

![](https://gcore.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://gcore.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 代表默认打开。


inlineimage

Inlineimage 标签是一种行内图片标签，可以用来在一段话中间插入表情。

本插件最后更新于 5.0 版本
{% inlineimage 图片链接::height=高度（可选） %}

演示效果

这是 一段话。

这又是 一段话。

上述示例的源码

example:
这是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif::height=40px %} 一段话。

可以支持的参数

高度

height=20px

image

Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。

本插件最后更新于 5.0 版本
{% image 链接::width=宽度（可选）::height=高度（可选）::alt=描述（可选）::bg=占位颜色（可选） %}

演示效果

添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

指定宽度：

image

指定宽度并添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

设置占位背景色：

优化不同宽度浏览的观感
优化不同宽度浏览的观感

上述示例的源码

example:
添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::alt=每天下课回宿舍的路，没有什么故事。 %}

指定宽度：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px %}

指定宽度并添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::alt=每天下课回宿舍的路，没有什么故事。 %}

设置占位背景色：

{% image https://gcore.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

Gallery 标签是一种针对一组图片应用场景的标签。

本插件最后更新于 5.0 版本
{% gallery 参数::列数::分组 %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
{% endgallery %}

演示效果

一行一个图片

图片描述

一行多个图片（不换行）

图片描述

图片描述

图片描述

多行多个图片（每行2～8个图片）
























上述示例的源码

一行一个图片

example.md:
{% gallery %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endgallery %}

一行多个图片（不换行）

example.md:
{% gallery::::one %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg)
{% endgallery %}

多行多个图片（每行2～8个图片）

example.md:
{% gallery stretch::6::two %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/007.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/008.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/009.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/010.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/011.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/013.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/014.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/015.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/017.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/018.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/020.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/021.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/022.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/023.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/024.jpg)
{% endgallery %}

可以支持的参数

对齐方向

left::center::right

缩放

stretch

列数

::后面直接写列数，支持 2 ～ 8 列。设定列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。

测试中 设定列数之后 不会产生 累积布局偏移; 没有设定列数 产生了累积布局偏移

分组

相同内容的会被归档在一个分组中。


audio

本插件最后更新于 2.4 版本
{% audio 音频链接 %}

演示效果

上述示例的源码

example:
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

video

本插件最后更新于 5.0 版本
{% video 视频链接 %}

演示效果

100%宽度

50%宽度

25%宽度

上述示例的源码

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-aplayer

https://github.com/MoePlayer/hexo-tag-aplayer


issues

issues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代

md

在局部渲染外部md文件。

示例写法
{% md https://gcore.jsdelivr.net/gh/volantis-x/hexo-theme-volantis/README.md %}
md

swiper

轮播标签

默认一张图片是 50% 宽度，通过设置 width:min 设置为 25% 宽度，width:max 设置为 100% 宽度。

最大图片宽度

{% swiper width:max %}
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot11.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot12.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot13.png)
{% endswiper %}

最小图片宽度

{% swiper width:min %}
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot01.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot02.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot03.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot04.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot05.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot06.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot07.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot08.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot09.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot10.png)
{% endswiper %}

pandown

本插件最后更新于 5.0 版本
{% 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.yml
volantis_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=4


community_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=4
groupGitHub:
  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
xaoxuu
MHuiG
inkss
Colsrch
Drew233
Linhk1606
W4J1e
ericclose
heson525
CRainyDay
Flexiston
MicDZ
zhaohaihao
lixiang810
WillyChen123
ic3evi1
penndu
PHIKN1GHT
zsStrike
code004Accepted
qinxs
XuxuGood
TRHX
cofm
lunhui1994
gyl-coder
fi6

实现动态友链

可以加载来自 issues 的友链数据，除了需要在 _data/friends.yml 中指定 api 和 repo 外，还需要做一下几件事：

从 xaoxuu/issues-api 作为模板克隆或者 fork 仓库，然后提交一个 issue 进行测试，不出意外的话，仓库中已经配置好了 issue 模板，只需要在模板中指定的位置填写信息就可以了。

提交完 issue 一分钟左右，如果仓库中出现了 output 分支提交，可以点击查看一下文件内容是否已经包含了刚刚提交的 issue 中的数据，如果包含，那么再次回到前端页面刷新就可以看到来自 issue 的友链数据了。

关于自建&nbsp;Vercel&nbsp;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

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Volantis: 标签插件 - Volantis

标签插件

发布于：2023年11月3日

为了兼容老用户，旧的标签插件在重构之前依然沿用旧的格式，即 command + 空格 作为参数分隔符，而部分新增标签插件是 空格 + 英文竖线 + 空格 ，请注意区分。

我们也在探索哪种分隔符既简单又不容易引起冲突，所以可能存在多种格式，具体以对应文档描述为准。

5.0 版本起临时实验使用英文双冒号 ( :: ) 作为分隔符，之前版本的分隔符写法向下兼容

6.0 版本的分隔符最终计划使用 stellar 的分隔符，之前版本的分隔符写法没有兼容计划

text

带 下划线 的文本；带着重号 的文本；带波浪线 的文本；带 删除线 的文本

键盘样式的文本：⌘ + D

密码样式的文本：这里没有验证码

带 {% u 下划线 %} 的文本；带 {% emp 着重号 %} 的文本；带 {% wavy 波浪线 %} 的文本；带 {% del 删除线 %} 的文本

键盘样式的文本：{% kbd ⌘ %} + {% kbd D %}

密码样式的文本：{% psw 这里没有验证码 %}

span

本插件最后更新于5.0 版本
{% span 样式参数::文本内容 %}

各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大号文字：

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 样式参数::文本内容 %}

红色

黄色

绿色

青色

蓝色

灰色

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

note

NoteBlock 是 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

noteblock

NoteBlock 是 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

  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 服务。

2020-05-15 2.6.3 -> 2.6.6

不需要额外处理。

2020-04-20 2.6.2 -> 2.6.3

  1. 全局搜索 seotitle 并替换为 seo_title。
  2. group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
  3. 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 %}

最后更新于 5.0 版本
{% link 标题::链接::图片链接（可选） %}

演示效果

如何参与项目

https://volantis.js.org/contributors/

上述示例的源码

example:
{% link 如何参与项目::https://volantis.js.org/contributors/::https://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.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://gcore.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://gcore.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 版本以上使用。


tab

此插件移植自 NexT #tabs

最后更新于 2.1 版本
{% tabs 页面内不重复的ID %}
<!-- tab 栏目1 -->
内容
<!-- endtab -->
<!-- tab 栏目2 -->
内容
<!-- endtab -->
{% endtabs %}

演示效果

。。。

！！！

上述示例的源码

example:
{% tabs tab-id %}

<!-- tab 栏目1 -->

。。。

<!-- endtab -->

<!-- tab 栏目2 -->

！！！

<!-- endtab -->

{% endtabs %}

folding

最后更新于 5.0 版本
{% folding 参数（可选）::标题 %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

演示效果

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试
{% folding green::查看代码测试 %}

查看代码测试

{% endfolding %}
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

上述示例的源码

example:
{% folding 查看图片测试 %}

![](https://gcore.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://gcore.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 代表默认打开。


inlineimage

Inlineimage 标签是一种行内图片标签，可以用来在一段话中间插入表情。

本插件最后更新于 5.0 版本
{% inlineimage 图片链接::height=高度（可选） %}

演示效果

这是 一段话。

这又是 一段话。

上述示例的源码

example:
这是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif::height=40px %} 一段话。

可以支持的参数

高度

height=20px

image

Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。

本插件最后更新于 5.0 版本
{% image 链接::width=宽度（可选）::height=高度（可选）::alt=描述（可选）::bg=占位颜色（可选） %}

演示效果

添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

指定宽度：

image

指定宽度并添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

设置占位背景色：

优化不同宽度浏览的观感
优化不同宽度浏览的观感

上述示例的源码

example:
添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::alt=每天下课回宿舍的路，没有什么故事。 %}

指定宽度：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px %}

指定宽度并添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::alt=每天下课回宿舍的路，没有什么故事。 %}

设置占位背景色：

{% image https://gcore.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

Gallery 标签是一种针对一组图片应用场景的标签。

本插件最后更新于 5.0 版本
{% gallery 参数::列数::分组 %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
{% endgallery %}

演示效果

一行一个图片

图片描述

一行多个图片（不换行）

图片描述

图片描述

图片描述

多行多个图片（每行2～8个图片）
























上述示例的源码

一行一个图片

example.md:
{% gallery %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endgallery %}

一行多个图片（不换行）

example.md:
{% gallery::::one %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg)
{% endgallery %}

多行多个图片（每行2～8个图片）

example.md:
{% gallery stretch::6::two %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/007.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/008.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/009.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/010.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/011.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/013.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/014.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/015.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/017.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/018.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/020.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/021.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/022.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/023.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/024.jpg)
{% endgallery %}

可以支持的参数

对齐方向

left::center::right

缩放

stretch

列数

::后面直接写列数，支持 2 ～ 8 列。设定列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。

测试中 设定列数之后 不会产生 累积布局偏移; 没有设定列数 产生了累积布局偏移

分组

相同内容的会被归档在一个分组中。


audio

本插件最后更新于 2.4 版本
{% audio 音频链接 %}

演示效果

上述示例的源码

example:
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

video

本插件最后更新于 5.0 版本
{% video 视频链接 %}

演示效果

100%宽度

50%宽度

25%宽度

上述示例的源码

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-aplayer

https://github.com/MoePlayer/hexo-tag-aplayer


issues

issues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代

md

在局部渲染外部md文件。

示例写法
{% md https://gcore.jsdelivr.net/gh/volantis-x/hexo-theme-volantis/README.md %}
md

swiper

轮播标签

默认一张图片是 50% 宽度，通过设置 width:min 设置为 25% 宽度，width:max 设置为 100% 宽度。

最大图片宽度

{% swiper width:max %}
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot11.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot12.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot13.png)
{% endswiper %}

最小图片宽度

{% swiper width:min %}
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot01.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot02.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot03.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot04.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot05.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot06.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot07.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot08.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot09.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot10.png)
{% endswiper %}

pandown

本插件最后更新于 5.0 版本
{% 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.yml
volantis_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=4


community_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=4
groupGitHub:
  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
xaoxuu
MHuiG
inkss
Colsrch
Drew233
Linhk1606
W4J1e
ericclose
heson525
CRainyDay
Flexiston
MicDZ
zhaohaihao
lixiang810
WillyChen123
ic3evi1
penndu
PHIKN1GHT
zsStrike
code004Accepted
qinxs
XuxuGood
TRHX
cofm
lunhui1994
gyl-coder
fi6

实现动态友链

可以加载来自 issues 的友链数据，除了需要在 _data/friends.yml 中指定 api 和 repo 外，还需要做一下几件事：

从 xaoxuu/issues-api 作为模板克隆或者 fork 仓库，然后提交一个 issue 进行测试，不出意外的话，仓库中已经配置好了 issue 模板，只需要在模板中指定的位置填写信息就可以了。

提交完 issue 一分钟左右，如果仓库中出现了 output 分支提交，可以点击查看一下文件内容是否已经包含了刚刚提交的 issue 中的数据，如果包含，那么再次回到前端页面刷新就可以看到来自 issue 的友链数据了。

关于自建&nbsp;Vercel&nbsp;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

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v5/theme-settings/index.html b/v5/theme-settings/index.html index 83d054642..1a13339b7 100644 --- a/v5/theme-settings/index.html +++ b/v5/theme-settings/index.html @@ -1 +1 @@ -Volantis: 主题配置 - Volantis

主题配置

发布于：2023年11月3日

创建主题配置文件

主题目录下的 _config.yml 文件通常负责主题相关配置，我们强烈建议您使用代替的主题配置文件以防止自己的配置丢失。那么如何使用代替主题配置文件呢？

第 1/2 步：创建配置文件

在博客根目录的 _config.yml 文件旁边新建一个文件： _config.volantis.yml ，这个文件中的配置信息优先级高于主题文件夹中的配置文件。

第 2/2 步：覆盖自定义配置

当您需要修改某项内容时，例如导航栏菜单，那么您需要在主题配置文件中找到相关内容，复制进自己创建的配置文件中：

blog/_config.volantis.yml
navbar:
  visiable: auto # always, auto
  logo: # choose [img] or [icon + title]
    img: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://gcore.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.yml
custom_css:
  ...
  max_width: 1080px # Sum of body width and sidebar width

网页所呈现的内容的最大宽度，即 body 和 sidebar 的宽度之和。

抗锯齿

blog/_config.volantis.yml
custom_css:
  ...
  font_smoothing: true # font-smoothing for webkit

自定义光标样式

blog/_config.volantis.yml
custom_css:
  ...
  cursor:
    enable: true
    text: volantis-static/media/cursor/text.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/text.png
    pointer: volantis-static/media/cursor/pointer.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/pointer.png
    default: volantis-static/media/cursor/left_ptr.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/left_ptr.png
    not-allowed: volantis-static/media/cursor/circle.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/circle.png
    zoom-out: volantis-static/media/cursor/zoom-out.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/zoom-out.png
    zoom-in: volantis-static/media/cursor/zoom-in.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/zoom-in.png
    grab: volantis-static/media/cursor/openhand.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/openhand.png

导航栏样式

您可以设置导航栏的高度以及视觉特效，视觉特效目前可选的有：

  • shadow：卡片阴影。
  • floatable：当鼠标移动到容器内时，呈现出浮起来的效果。
  • blur：背景模糊效果（毛玻璃），当浏览器不支持时显示为不透明。
blog/_config.volantis.yml
custom_css:
  ...
  navbar:
    height: 64px
    width: auto # auto, max
    effect: [shadow, blur] # [shadow, floatable, blur]

滚动条样式

blog/_config.volantis.yml
custom_css:
  ...
  scrollbar:
    size: 4px
    border: 2px
    color: '#2196f3'
    hover: '#ff5722'

侧边栏样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。

blog/_config.volantis.yml
custom_css:
  ...
  sidebar:
    effect: [shadow] # [shadow, floatable, blur]

正文区域样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。

blog/_config.volantis.yml
custom_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.yml
custom_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.yml
custom_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://gcore.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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf
      # weight: normal
      # style: normal

自定义颜色

多彩配色方案
blog/_config.volantis.yml
color_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阅读模式一个简单的阅读模式功能
默认设置
iconPrefix

Fontawesome 图标前缀，音乐类组件使用，参考内容：fa-solid, fa-regular, fa-light, fa-thin, fa-duotone, fa-brands。

在 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 自定义文件 功能，实现自定义右键菜单脚本及菜单项控制。

  • 一个在右键菜单中添加 查看上一篇、查看下一篇 菜单项的范例：
省略了部分不相关内容
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://gcore.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://gcore.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.yml
site_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.yml
site_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.yml
cover:
  height_scheme: full # full, half
  ...

目前主题提供两种首页封面高度方案，其它页面均为半屏幕高度。

封面布局方案

blog/_config.volantis.yml
cover:
  ...
  scheme: dock # search (搜索), dock (坞), featured (精选), focus (焦点)
  ...
布局方案适合场景
search注重搜索
dock入口选项比较多
featured选项在4个左右
focus选项在4个左右

默认显示设置

blog/_config.volantis.yml
cover:
  ...
  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://gcore.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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
          - https://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png
        - id: qzone
          img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png
        - id: weibo
          img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png
        - id: # qrcode # 当id为qrcode时需要安装插件  npm i hexo-helper-qrcode
          img: # https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png
        - id: # telegram
          img: # https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/telegram.png

其中 top_meta 和 bottom_meta 部分的取值自 meta_library 库。

侧边栏配置

侧边栏小组件与 meta 库不同的是：除了现有的 widget ，您可以很轻易地创建自己的 widget ，然后放在需要的地方。此外，您还可以将 widget 写在单独的文件中。

查看所有相关配置
blog/_config.volantis.yml
sidebar:
  # 主页、分类、归档等独立页面
  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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
        - https://gcore.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.yml
blogger:
  class: blogger
  display: [desktop] # [desktop, mobile]
  avatar: https://gcore.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.yml
toc:
  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.yml
category:
  class: category
  display: [desktop] # [desktop, mobile]
  header:
    icon: fas fa-folder-open
    title: 文章分类
    url: /blog/categories/

这个部件可以直接显示所有文章分类，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。

标签云部件

blog/_config.volantis.yml
tagcloud:
  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.yml
donate:
  class: qrcode
  display: [desktop, mobile] # [desktop, mobile]
  height: 64px  # Automatic height if not set
  images:
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png

您可以放置在文章页脚用于展示打赏图片，也可以放置在侧边栏。

通用文本部件

blog/_config.volantis.yml
repos:
  class: text
  display: [desktop] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: 点个赞吧
    url: https://github.com/xaoxuu/
  content:
    - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)'

您可以创建用于展示任何文本内容的文本部件。

通用列表部件

blog/_config.volantis.yml
wiki-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.yml
group-1:
  class: group
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: Git
    url: /wiki/git/

在文章的 front-matter 中设置：

front-matter
group: group-1
order: 16
sidebar: [group-1, toc]

「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章，顺序按照 order 从小到大排列。

通用网格部件

blog/_config.volantis.yml
feedback:
  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.yml
test:
  class: page
  display: [desktop, mobile]
  pid: haha
  content: excerpt # excerpt, more, content

您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容，可选 excerpt，more，content 分别对应文章的摘要、摘要后面的内容、全文。

音乐部件

blog/_config.volantis.yml
music:
  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.yml
comments:
  title: <i class='fas fa-comments'></i> 评论
  subtitle:
  service: giscus
GitHub Discussions 系列

A comments system powered by GitHub Discussions.
https://giscus.app/

blog/_config.volantis.yml
comments:
  ...
  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://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/light.css
      dark: "dark" # https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/dark.css
GitHub Issues 系列

Beaudar 名称源于粤语“表达”的发音，是 Utterances 的中文版本。
https://beaudar.lipk.org/

blog/_config.volantis.yml
comments:
  ...
  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.yml
comments:
  ...
  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.yml
comments:
  ...
  service: vssue
  ...
  vssue:
    owner:
    repo:
    clientId:
    clientSecret:

A modern comment component based on Github Issue and Preact.
https://gitalk.github.io/

blog/_config.volantis.yml
comments:
  ...
  service: gitalk
  ...
  gitalk:
    clientID:
    clientSecret:
    repo:
    owner:
    admin: # []

clientID 和 clientSecret 的获取方法可自行搜索教程，这里仅简单描述一下步骤：

  1. 点击 GitHub -> Settings https://github.com/settings/profile
  2. 点击 Developer settings https://github.com/settings/developers
  3. 点击 New OAuth App https://github.com/settings/applications/new
  4. 填写信息：
    Application name 随便填，我的是：xaoxuu.com
    Homepage URL 和 Authorization callback URL 都写你的网址，我的是：https://xaoxuu.com

可以通过设置 gitalk.id 实现多个页面共用一个评论框。

front-matter
---
gitalk:
  id: /wiki/volantis/
---
Disqus 系列

Disqus - The #1 way to build an audience on your website.
https://disqus.com/

blog/_config.volantis.yml
comments:
  ...
  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/DisqusJS

blog/_config.volantis.yml
comments:
  ...
  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.yml
comments:
  ...
  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),故请谨慎选择.

一款简单，安全，免费的评论系统 | A simple, safe, free comment system
https://discuss.js.org

blog/_config.volantis.yml
comments:
  ...
  service: discuss
  ...
  # Discuss
  # https://discuss.js.org
  discuss:
    js: https://unpkg.com/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.yml
comments:
  ...
  service: twikoo
  ...
  twikoo:
    js: https://unpkg.com/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.yml
comments:
  ...
  service: waline
  ...
  # Waline
  # https://waline.js.org/
  waline:
    js: https://unpkg.com/@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 其他系列

一款简洁的自托管评论系统 | A Selfhosted Comment System.
https://artalk.js.org/

blog/_config.volantis.yml
comments:
  ...
  service: artalk
  ...
  artalk:
    js: https://unpkg.com/artalk@2.1.3/dist/Artalk.js
    css: https://unpkg.com/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.yml
comments:
  ...
  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/hashover

blog/_config.volantis.yml
comments:
  ...
  service: hashover
  ...
  hashover:
    src: https://example.com/(path/)comments.php
blog/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
search:
  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.yml
plugins:
  ...
  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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg
      ...

幻灯片背景图片显示的位置可以选择粘贴在封面上，跟随封面一起滑动，也可以选择固定作为网页背景图片。

highlight.js

blog/_config.volantis.yml
plugins:
  ...
  # 代码高亮
  code_highlight: highlightjs # highlightjs or prismjs
  # highlight.js
  highlightjs:
    copy_code: true
    # 如果开启 js, hexo.config.highlight.enable 需要设置为 false
    js: #https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/highlight.min.js # Please set hexo.config.highlight.enable = false !!!
    css: https://gcore.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.yml
plugins:
  ...
  # APlayer is only available in mainland China.
  # APlayer config: https://github.com/metowolf/MetingJS
  aplayer:
    enable: true
    js:
      aplayer: https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
      meting: https://unpkg.com/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.yml
plugins:
  ...
  # 暗黑模式 darkmode
  # 开关按钮：在 navbar.menu 中添加：
  # - name: 暗黑模式 # 可自定义
  #   icon: fas fa-moon # 可自定义
  #   toggle: darkmode
  darkmode:
    enable: true

结束支持

blog/_config.volantis.yml
plugins:
  ...
  # 旧版 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

Artitalk

blog/_config.volantis.yml
plugins:
  ...
  # 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接口

BBtalk

blog/_config.volantis.yml
plugins:
  ...
  # BBtalk https://bb.js.org
  bbtalk:
    # Set `plugins: ["bbtalk"]` to enable in front-matter
    # 支持 Pjax
    js: https://unpkg.com/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 域名

Tidio

blog/_config.volantis.yml
plugins:
  ...
  # 聊天功能
  chat_service: tidio # tidio or gitter

  # Tidio
  # https://www.tidio.com/
  tidio:
    id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

友链朋友圈

blog/_config.volantis.yml
plugins:
  ...
  # 友链朋友圈 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.yml
plugins:
  ...
  # 消息提示 
  # 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.yml
swiper:
  enable: true
  css: https://unpkg.com/swiper@6/swiper-bundle.min.css
  js: https://unpkg.com/swiper@6/swiper-bundle.min.js

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +Volantis: 主题配置 - Volantis

主题配置

发布于：2023年11月3日

创建主题配置文件

主题目录下的 _config.yml 文件通常负责主题相关配置，我们强烈建议您使用代替的主题配置文件以防止自己的配置丢失。那么如何使用代替主题配置文件呢？

第 1/2 步：创建配置文件

在博客根目录的 _config.yml 文件旁边新建一个文件： _config.volantis.yml ，这个文件中的配置信息优先级高于主题文件夹中的配置文件。

第 2/2 步：覆盖自定义配置

当您需要修改某项内容时，例如导航栏菜单，那么您需要在主题配置文件中找到相关内容，复制进自己创建的配置文件中：

blog/_config.volantis.yml
navbar:
  visiable: auto # always, auto
  logo: # choose [img] or [icon + title]
    img: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://gcore.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.yml
custom_css:
  ...
  max_width: 1080px # Sum of body width and sidebar width

网页所呈现的内容的最大宽度，即 body 和 sidebar 的宽度之和。

抗锯齿

blog/_config.volantis.yml
custom_css:
  ...
  font_smoothing: true # font-smoothing for webkit

自定义光标样式

blog/_config.volantis.yml
custom_css:
  ...
  cursor:
    enable: true
    text: volantis-static/media/cursor/text.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/text.png
    pointer: volantis-static/media/cursor/pointer.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/pointer.png
    default: volantis-static/media/cursor/left_ptr.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/left_ptr.png
    not-allowed: volantis-static/media/cursor/circle.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/circle.png
    zoom-out: volantis-static/media/cursor/zoom-out.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/zoom-out.png
    zoom-in: volantis-static/media/cursor/zoom-in.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/zoom-in.png
    grab: volantis-static/media/cursor/openhand.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/openhand.png

导航栏样式

您可以设置导航栏的高度以及视觉特效，视觉特效目前可选的有：

  • shadow：卡片阴影。
  • floatable：当鼠标移动到容器内时，呈现出浮起来的效果。
  • blur：背景模糊效果（毛玻璃），当浏览器不支持时显示为不透明。
blog/_config.volantis.yml
custom_css:
  ...
  navbar:
    height: 64px
    width: auto # auto, max
    effect: [shadow, blur] # [shadow, floatable, blur]

滚动条样式

blog/_config.volantis.yml
custom_css:
  ...
  scrollbar:
    size: 4px
    border: 2px
    color: '#2196f3'
    hover: '#ff5722'

侧边栏样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。

blog/_config.volantis.yml
custom_css:
  ...
  sidebar:
    effect: [shadow] # [shadow, floatable, blur]

正文区域样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。

blog/_config.volantis.yml
custom_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.yml
custom_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.yml
custom_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://gcore.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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf
      # weight: normal
      # style: normal

自定义颜色

多彩配色方案
blog/_config.volantis.yml
color_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阅读模式一个简单的阅读模式功能
默认设置
iconPrefix

Fontawesome 图标前缀，音乐类组件使用，参考内容：fa-solid, fa-regular, fa-light, fa-thin, fa-duotone, fa-brands。

在 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 自定义文件 功能，实现自定义右键菜单脚本及菜单项控制。

  • 一个在右键菜单中添加 查看上一篇、查看下一篇 菜单项的范例：
省略了部分不相关内容
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://gcore.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://gcore.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.yml
site_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.yml
site_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.yml
cover:
  height_scheme: full # full, half
  ...

目前主题提供两种首页封面高度方案，其它页面均为半屏幕高度。

封面布局方案

blog/_config.volantis.yml
cover:
  ...
  scheme: dock # search (搜索), dock (坞), featured (精选), focus (焦点)
  ...
布局方案适合场景
search注重搜索
dock入口选项比较多
featured选项在4个左右
focus选项在4个左右

默认显示设置

blog/_config.volantis.yml
cover:
  ...
  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://gcore.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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
          - https://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png
        - id: qzone
          img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png
        - id: weibo
          img: https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png
        - id: # qrcode # 当id为qrcode时需要安装插件  npm i hexo-helper-qrcode
          img: # https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png
        - id: # telegram
          img: # https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/telegram.png

其中 top_meta 和 bottom_meta 部分的取值自 meta_library 库。

侧边栏配置

侧边栏小组件与 meta 库不同的是：除了现有的 widget ，您可以很轻易地创建自己的 widget ，然后放在需要的地方。此外，您还可以将 widget 写在单独的文件中。

查看所有相关配置
blog/_config.volantis.yml
sidebar:
  # 主页、分类、归档等独立页面
  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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
        - https://gcore.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.yml
blogger:
  class: blogger
  display: [desktop] # [desktop, mobile]
  avatar: https://gcore.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.yml
toc:
  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.yml
category:
  class: category
  display: [desktop] # [desktop, mobile]
  header:
    icon: fas fa-folder-open
    title: 文章分类
    url: /blog/categories/

这个部件可以直接显示所有文章分类，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。

标签云部件

blog/_config.volantis.yml
tagcloud:
  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.yml
donate:
  class: qrcode
  display: [desktop, mobile] # [desktop, mobile]
  height: 64px  # Automatic height if not set
  images:
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png

您可以放置在文章页脚用于展示打赏图片，也可以放置在侧边栏。

通用文本部件

blog/_config.volantis.yml
repos:
  class: text
  display: [desktop] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: 点个赞吧
    url: https://github.com/xaoxuu/
  content:
    - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)'

您可以创建用于展示任何文本内容的文本部件。

通用列表部件

blog/_config.volantis.yml
wiki-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.yml
group-1:
  class: group
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: Git
    url: /wiki/git/

在文章的 front-matter 中设置：

front-matter
group: group-1
order: 16
sidebar: [group-1, toc]

「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章，顺序按照 order 从小到大排列。

通用网格部件

blog/_config.volantis.yml
feedback:
  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.yml
test:
  class: page
  display: [desktop, mobile]
  pid: haha
  content: excerpt # excerpt, more, content

您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容，可选 excerpt，more，content 分别对应文章的摘要、摘要后面的内容、全文。

音乐部件

blog/_config.volantis.yml
music:
  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.yml
comments:
  title: <i class='fas fa-comments'></i> 评论
  subtitle:
  service: giscus
GitHub Discussions 系列

A comments system powered by GitHub Discussions.
https://giscus.app/

blog/_config.volantis.yml
comments:
  ...
  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://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/light.css
      dark: "dark" # https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/dark.css
GitHub Issues 系列

Beaudar 名称源于粤语“表达”的发音，是 Utterances 的中文版本。
https://beaudar.lipk.org/

blog/_config.volantis.yml
comments:
  ...
  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.yml
comments:
  ...
  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.yml
comments:
  ...
  service: vssue
  ...
  vssue:
    owner:
    repo:
    clientId:
    clientSecret:

A modern comment component based on Github Issue and Preact.
https://gitalk.github.io/

blog/_config.volantis.yml
comments:
  ...
  service: gitalk
  ...
  gitalk:
    clientID:
    clientSecret:
    repo:
    owner:
    admin: # []

clientID 和 clientSecret 的获取方法可自行搜索教程，这里仅简单描述一下步骤：

  1. 点击 GitHub -> Settings https://github.com/settings/profile
  2. 点击 Developer settings https://github.com/settings/developers
  3. 点击 New OAuth App https://github.com/settings/applications/new
  4. 填写信息：
    Application name 随便填，我的是：xaoxuu.com
    Homepage URL 和 Authorization callback URL 都写你的网址，我的是：https://xaoxuu.com

可以通过设置 gitalk.id 实现多个页面共用一个评论框。

front-matter
---
gitalk:
  id: /wiki/volantis/
---
Disqus 系列

Disqus - The #1 way to build an audience on your website.
https://disqus.com/

blog/_config.volantis.yml
comments:
  ...
  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/DisqusJS

blog/_config.volantis.yml
comments:
  ...
  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.yml
comments:
  ...
  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),故请谨慎选择.

一款简单，安全，免费的评论系统 | A simple, safe, free comment system
https://discuss.js.org

blog/_config.volantis.yml
comments:
  ...
  service: discuss
  ...
  # Discuss
  # https://discuss.js.org
  discuss:
    js: https://unpkg.com/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.yml
comments:
  ...
  service: twikoo
  ...
  twikoo:
    js: https://unpkg.com/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.yml
comments:
  ...
  service: waline
  ...
  # Waline
  # https://waline.js.org/
  waline:
    js: https://unpkg.com/@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 其他系列

一款简洁的自托管评论系统 | A Selfhosted Comment System.
https://artalk.js.org/

blog/_config.volantis.yml
comments:
  ...
  service: artalk
  ...
  artalk:
    js: https://unpkg.com/artalk@2.1.3/dist/Artalk.js
    css: https://unpkg.com/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.yml
comments:
  ...
  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/hashover

blog/_config.volantis.yml
comments:
  ...
  service: hashover
  ...
  hashover:
    src: https://example.com/(path/)comments.php
blog/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
search:
  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.yml
plugins:
  ...
  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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg
      ...

幻灯片背景图片显示的位置可以选择粘贴在封面上，跟随封面一起滑动，也可以选择固定作为网页背景图片。

highlight.js

blog/_config.volantis.yml
plugins:
  ...
  # 代码高亮
  code_highlight: highlightjs # highlightjs or prismjs
  # highlight.js
  highlightjs:
    copy_code: true
    # 如果开启 js, hexo.config.highlight.enable 需要设置为 false
    js: #https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/highlight.min.js # Please set hexo.config.highlight.enable = false !!!
    css: https://gcore.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.yml
plugins:
  ...
  # APlayer is only available in mainland China.
  # APlayer config: https://github.com/metowolf/MetingJS
  aplayer:
    enable: true
    js:
      aplayer: https://unpkg.com/aplayer@1.10/dist/APlayer.min.js
      meting: https://unpkg.com/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.yml
plugins:
  ...
  # 暗黑模式 darkmode
  # 开关按钮：在 navbar.menu 中添加：
  # - name: 暗黑模式 # 可自定义
  #   icon: fas fa-moon # 可自定义
  #   toggle: darkmode
  darkmode:
    enable: true

结束支持

blog/_config.volantis.yml
plugins:
  ...
  # 旧版 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

Artitalk

blog/_config.volantis.yml
plugins:
  ...
  # 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接口

BBtalk

blog/_config.volantis.yml
plugins:
  ...
  # BBtalk https://bb.js.org
  bbtalk:
    # Set `plugins: ["bbtalk"]` to enable in front-matter
    # 支持 Pjax
    js: https://unpkg.com/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 域名

Tidio

blog/_config.volantis.yml
plugins:
  ...
  # 聊天功能
  chat_service: tidio # tidio or gitter

  # Tidio
  # https://www.tidio.com/
  tidio:
    id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

友链朋友圈

blog/_config.volantis.yml
plugins:
  ...
  # 友链朋友圈 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.yml
plugins:
  ...
  # 消息提示 
  # 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.yml
swiper:
  enable: true
  css: https://unpkg.com/swiper@6/swiper-bundle.min.css
  js: https://unpkg.com/swiper@6/swiper-bundle.min.js

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v6/advanced-settings/index.html b/v6/advanced-settings/index.html index b0a514918..b321c8f9b 100644 --- a/v6/advanced-settings/index.html +++ b/v6/advanced-settings/index.html @@ -1 +1 @@ -进阶设定 - Volantis

进阶设定

发布于：2023年11月3日

设置子模块

将主题添加为子模块

开始前需要确认不存在 themes/volantis 文件夹, 如果有, 请自行删除.

git submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantis
git 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.yml
Jon:
  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_Snow
Dany:
  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 | Fandom
author: 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 浏览器为例：

    1. 页面中点击右键，选择「检查」。
    2. 在右边的窗口中「Network」选项卡，并勾选「Disable cache」。
    3. 刷新网页，查看加载速度慢的资源。
      3.1. 加载缓慢的图片，建议使用 CDN。
      3.2. 加载缓慢的可以不用的 js 插件，建议舍弃。
      3.3. 加载缓慢却必须使用的 js 插件，建议下载并自己上传至 CDN。

运行速度

  • 访问具有动态特效背景（如雪花、粒子等）的网站时，手机很快会发烫变卡，笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。

优化 SEO

Robots

blog/_config.volantis.yml
seo:
  # 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。

Open Graph

blog/_config.volantis.yml
# https://ogp.me/
# https://hexo.io/zh-cn/docs/helpers#open-graph
open_graph:
  image: https://gcore.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 Data

blog/_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-results
structured_data:
  enable: true
  # 以下是覆盖配置, 默认配置见 scripts/helpers/structured-data/lib/config.js
  data:
    person:
      sns:
        - https://github.com/volantis-x
    logo:
      path: https://gcore.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_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 gulp
npm 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

运行 gulp

gulp

尝试使用 babel 转换兼容 ES6

如果想要兼容旧版浏览器，可以尝试使用 gulp-babel 将 ES6 转换为 ES5。

安装 gulp-babel 工具

npm install -g gulp
npm install --save-dev gulp-babel @babel/core @babel/preset-env

gulp 配置文件

参考文档： gulp gulp-babel

gulp 配置文件

https://github.com/volantis-x/community/blob/main/gulpfile.js

gulp.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'))

运行 gulp

gulp

安装 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.js

volantis-sw.js

discussions/791

安装「相关文章」插件

  1. 安装插件

    npm i -S hexo-related-popular-posts

  2. 插件的自定义配置方法：

    hexo-related-popular-posts

    https://github.com/tea3/hexo-related-popular-posts

如果您使用了头图，可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图：

blog/_config.yml
popularPosts:
  eyeCatchImageAttributeName: headimg

注意

需要升级到 5.0.1 及以上版本才可以支持自定义头图，详见 #29

分析与统计

数据统计

PV 和 UV

支持 不蒜子 的访问统计，在配置文件中设置。

blog/_config.volantis.yml
plugins:
  busuanzi: 
    enable: true

我们还支持以下评论系统提供的访问统计: waline、twikoo、discuss、artalk

如需使用它们，请开启对应评论系统的相关设置，此时将接管含评论页面的 PV 量统计。

推广：杜老师自建国内不蒜子统计平台：4H8G，60G，下行 500M，上行 50M，阿里 CDN。

字数和阅读时长

  1. 安装以下插件：
    npm i --save hexo-wordcount
  2. 修改配置文件，将 wordcount 插件打开
    blog/_config.volantis.yml
    plugins:
      ...
      # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
      wordcount:
        enable: #true
  3. 然后修改配置文件，将 wordcount 写入需要显示的 meta 位置：
    blog/_config.volantis.yml
    # 文章布局
    article:
      ...
      # 文章详情页面的文章卡片本体布局方案
      body:
        # 文章顶部信息
        # 从 meta_library 中取
        top_meta: [..., wordcount, ...]
        ...
        # 文章底部信息
        # 从 meta_library 中取
        bottom_meta: [..., wordcount, ...]

数据分析

百度统计

blog/_config.yml
baidu_analytics_key: 百度统计的key

Google Analytics

blog/_config.yml
google_analytics_key: Google Analytics Key

腾讯前端性能监控

blog/_config.yml
tencent_aegis_id: 上报 id

51LA统计

blog/_config.yml
v6_51_la: 应用id

灵雀监控

blog/_config.yml
perf_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/进阶玩法/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +进阶设定 - Volantis

进阶设定

发布于：2023年11月3日

设置子模块

将主题添加为子模块

开始前需要确认不存在 themes/volantis 文件夹, 如果有, 请自行删除.

git submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantis
git 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.yml
Jon:
  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_Snow
Dany:
  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 | Fandom
author: 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 浏览器为例：

    1. 页面中点击右键，选择「检查」。
    2. 在右边的窗口中「Network」选项卡，并勾选「Disable cache」。
    3. 刷新网页，查看加载速度慢的资源。
      3.1. 加载缓慢的图片，建议使用 CDN。
      3.2. 加载缓慢的可以不用的 js 插件，建议舍弃。
      3.3. 加载缓慢却必须使用的 js 插件，建议下载并自己上传至 CDN。

运行速度

  • 访问具有动态特效背景（如雪花、粒子等）的网站时，手机很快会发烫变卡，笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。

优化 SEO

Robots

blog/_config.volantis.yml
seo:
  # 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。

Open Graph

blog/_config.volantis.yml
# https://ogp.me/
# https://hexo.io/zh-cn/docs/helpers#open-graph
open_graph:
  image: https://gcore.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 Data

blog/_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-results
structured_data:
  enable: true
  # 以下是覆盖配置, 默认配置见 scripts/helpers/structured-data/lib/config.js
  data:
    person:
      sns:
        - https://github.com/volantis-x
    logo:
      path: https://gcore.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_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 gulp
npm 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

运行 gulp

gulp

尝试使用 babel 转换兼容 ES6

如果想要兼容旧版浏览器，可以尝试使用 gulp-babel 将 ES6 转换为 ES5。

安装 gulp-babel 工具

npm install -g gulp
npm install --save-dev gulp-babel @babel/core @babel/preset-env

gulp 配置文件

参考文档： gulp gulp-babel

gulp 配置文件

https://github.com/volantis-x/community/blob/main/gulpfile.js

gulp.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'))

运行 gulp

gulp

安装 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.js

volantis-sw.js

discussions/791

安装「相关文章」插件

  1. 安装插件

    npm i -S hexo-related-popular-posts

  2. 插件的自定义配置方法：

    hexo-related-popular-posts

    https://github.com/tea3/hexo-related-popular-posts

如果您使用了头图，可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图：

blog/_config.yml
popularPosts:
  eyeCatchImageAttributeName: headimg

注意

需要升级到 5.0.1 及以上版本才可以支持自定义头图，详见 #29

分析与统计

数据统计

PV 和 UV

支持 不蒜子 的访问统计，在配置文件中设置。

blog/_config.volantis.yml
plugins:
  busuanzi: 
    enable: true

我们还支持以下评论系统提供的访问统计: waline、twikoo、discuss、artalk

如需使用它们，请开启对应评论系统的相关设置，此时将接管含评论页面的 PV 量统计。

推广：杜老师自建国内不蒜子统计平台：4H8G，60G，下行 500M，上行 50M，阿里 CDN。

字数和阅读时长

  1. 安装以下插件：
    npm i --save hexo-wordcount
  2. 修改配置文件，将 wordcount 插件打开
    blog/_config.volantis.yml
    plugins:
      ...
      # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount
      wordcount:
        enable: #true
  3. 然后修改配置文件，将 wordcount 写入需要显示的 meta 位置：
    blog/_config.volantis.yml
    # 文章布局
    article:
      ...
      # 文章详情页面的文章卡片本体布局方案
      body:
        # 文章顶部信息
        # 从 meta_library 中取
        top_meta: [..., wordcount, ...]
        ...
        # 文章底部信息
        # 从 meta_library 中取
        bottom_meta: [..., wordcount, ...]

数据分析

百度统计

blog/_config.yml
baidu_analytics_key: 百度统计的key

Google Analytics

blog/_config.yml
google_analytics_key: Google Analytics Key

腾讯前端性能监控

blog/_config.yml
tencent_aegis_id: 上报 id

51LA统计

blog/_config.yml
v6_51_la: 应用id

灵雀监控

blog/_config.yml
perf_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/进阶玩法/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v6/development-api/index.html b/v6/development-api/index.html index 5590376b1..1daa3cab1 100644 --- a/v6/development-api/index.html +++ b/v6/development-api/index.html @@ -1 +1 @@ -开发文档 - Volantis

开发文档

发布于：2023年11月3日


样式文件说明

/source/css/Readme.md

全局变量

volantis

我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。

源码参考：layout/_partial/scripts/global.ejs

VolantisApp

我们提供了全局变量 VolantisApp 和一些全局函数等主题开发调用接口。

源码参考：/source/js/app.js

Pjax

Pjax 重载区域划分接口

我们提供了可以实现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://unpkg.com/jquery").then(()=>{
    console.log("我在脚本加载完成后调用")
})

按需加载的插件

源码参考：

layout/_partial/scripts/global.ejs

jQuery

volantis.import.jQuery().then(()=>{
  // 依赖 jQuery 的代码段
  // .....
  // .....
})

requestAnimationFrame

1、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.yml
custom_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.styl
body
  --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.js
hexo.extend.filter.register('theme_inject', function(injects) {
  injects.style.push('source/_data/mystyle.styl');
});

以文本的形式向 <body> 标签末尾注入自定义脚本内容

blog/scripts/example-2.js
hexo.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.js
hexo.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 学习如何创建插件。

请注意，以上是主题开发文档，不是使用文档！

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +开发文档 - Volantis

开发文档

发布于：2023年11月3日


样式文件说明

/source/css/Readme.md

全局变量

volantis

我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。

源码参考：layout/_partial/scripts/global.ejs

VolantisApp

我们提供了全局变量 VolantisApp 和一些全局函数等主题开发调用接口。

源码参考：/source/js/app.js

Pjax

Pjax 重载区域划分接口

我们提供了可以实现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://unpkg.com/jquery").then(()=>{
    console.log("我在脚本加载完成后调用")
})

按需加载的插件

源码参考：

layout/_partial/scripts/global.ejs

jQuery

volantis.import.jQuery().then(()=>{
  // 依赖 jQuery 的代码段
  // .....
  // .....
})

requestAnimationFrame

1、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.yml
custom_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.styl
body
  --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.js
hexo.extend.filter.register('theme_inject', function(injects) {
  injects.style.push('source/_data/mystyle.styl');
});

以文本的形式向 <body> 标签末尾注入自定义脚本内容

blog/scripts/example-2.js
hexo.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.js
hexo.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 学习如何创建插件。

请注意，以上是主题开发文档，不是使用文档！

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v6/faq/index.html b/v6/faq/index.html index 1e79236e6..fe6eb645a 100644 --- a/v6/faq/index.html +++ b/v6/faq/index.html @@ -1 +1 @@ -FAQ - Volantis

FAQ

发布于：2023年11月3日


这是什么？我在哪里？

我也不知道

我这里出现了故障，需要先做什么？


控制台报错 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

42

上面没有我要找的答案？

尝试 打开搜索 或 常见问题与反馈渠道

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +FAQ - Volantis

FAQ

发布于：2023年11月3日


这是什么？我在哪里？

我也不知道

我这里出现了故障，需要先做什么？


控制台报错 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

42

上面没有我要找的答案？

尝试 打开搜索 或 常见问题与反馈渠道

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v6/getting-started/index.html b/v6/getting-started/index.html index 320918700..cc3fb4f34 100644 --- a/v6/getting-started/index.html +++ b/v6/getting-started/index.html @@ -1 +1 @@ -开始使用 - Volantis


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。

示例博客

/examples/

所有的 Volantis 用户都可以按照格式自行创建 Issue 来将自己的博客添加到官网的示例博客页面中。

准备工作

自建博客需要一定的相关知识，在开始前，请务必确保您会使用 markdown 语法，掌握简单的 git 知识，最最重要的是，遇到困难知道该怎么寻求解决：

  1. 翻阅和搜索文档
  2. 搜索 issues 中是否有解决办法
  3. 新建 issue 并按照要求进行操作，详尽地描述您遇到的问题

如果您没有使用过 Hexo 也不要着急，可以先通读一遍 Hexo 中文文档，要想使用地得心应手，最好参照团队提供的开源项目的源码进行搭建：

Demo 源码 ｜ 官网源码

如果您从旧版本更新或着其它主题迁移，请确保环境版本不要太低，否则会产生兼容性问题。

Hexo: 5.4 ~ 6.x
hexo-cli: 4.3 ~ latest
node.js: 16.x LTS ~ latest LTS
npm: 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 阶段的正式版本 我们统称为 「稳定版本」 , 只有 「稳定版本」 发布到 npm

alpha 阶段的开发测试版本 和 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 文件夹, 如果有, 请自行删除.

git submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantis
git submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis

第 3/3 步：将主题仓库切换为 6.0 分支

在终端中输入：

cd themes/volantis
git 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/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +开始使用 - Volantis


Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。

示例博客

/examples/

所有的 Volantis 用户都可以按照格式自行创建 Issue 来将自己的博客添加到官网的示例博客页面中。

准备工作

自建博客需要一定的相关知识，在开始前，请务必确保您会使用 markdown 语法，掌握简单的 git 知识，最最重要的是，遇到困难知道该怎么寻求解决：

  1. 翻阅和搜索文档
  2. 搜索 issues 中是否有解决办法
  3. 新建 issue 并按照要求进行操作，详尽地描述您遇到的问题

如果您没有使用过 Hexo 也不要着急，可以先通读一遍 Hexo 中文文档，要想使用地得心应手，最好参照团队提供的开源项目的源码进行搭建：

Demo 源码 ｜ 官网源码

如果您从旧版本更新或着其它主题迁移，请确保环境版本不要太低，否则会产生兼容性问题。

Hexo: 5.4 ~ 6.x
hexo-cli: 4.3 ~ latest
node.js: 16.x LTS ~ latest LTS
npm: 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 阶段的正式版本 我们统称为 「稳定版本」 , 只有 「稳定版本」 发布到 npm

alpha 阶段的开发测试版本 和 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 文件夹, 如果有, 请自行删除.

git submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantis
git submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis

第 3/3 步：将主题仓库切换为 6.0 分支

在终端中输入：

cd themes/volantis
git 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/

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v6/page-settings/index.html b/v6/page-settings/index.html index e5f0fb743..ea5ada541 100644 --- a/v6/page-settings/index.html +++ b/v6/page-settings/index.html @@ -1 +1 @@ -页面配置 - Volantis

页面配置

发布于：2023年11月3日

页面布局模板

布局模板

取值含义
page独立页面
post文章页面
docs文档页面
category分类页面
tag标签页面
friends友链页面
list列表页面

page & post & docs

这三种页面相同，但是有以下细微区别：

  • post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 和 docs 不会。
  • post 文章末尾最多可以显示「参考资料」、「相关文章」、「版权标识」、「打赏」四个模块。
  • docs 文章末尾最多可以显示「参考资料」一个模块。

除了归档页面是自动生成的，其它独立页面都需要手动创建 md 文件。

归档页面

归档页面是自动生成的，并且初始化的时候已经生成，路径如下：

blog/_config.yml
# Directory
archive_dir: archives

关于页面

Create file if not exists: source/about/index.md
---
layout: docs
seo_title: 关于
bottom_meta: false
sidebar: []
twikoo:
  placeholder: 有什么想对我说的呢？
---

下面写关于自己的内容

分类页面

Create file if not exists: source/categories/index.md
---
layout: category
index: true
title: 所有分类
---

标签页面

Create file if not exists: source/tags/index.md
---
layout: tag
index: true
title: 所有标签
---

列表页面

Create file if not exists: source/mylist/index.md
---
layout: list
group: mylist
index: 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: true
robots: noindex,nofollow
sitemap: false
seo_title: 404 Not Found
bottom_meta: false
sidebar: []
twikoo:
  path: /404.html
  placeholder: 请留言告诉我您要访问哪个页面找不到了
---

{% p logo center huge, 404 %}
{% p center bold, 很抱歉，您访问的页面不存在 %}
{% p center small, 可能是输入地址有误或该地址已被删除 %}

front-matter

front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter

字段含义值类型默认值
layout布局模版String-
title页面标题String-
seo_title网页标题Stringpage.title
short_title页面标题（在group列表中显示）Stringpage.title
date创建时间Date文件创建时间
updated更新日期Date文件修改时间
link外部文章网址String-
music内部音乐控件[Object]-
robotsrobotsString-
keywords页面关键词String-
description页面描述、摘要String-
cover是否显示封面Booltrue
top_meta是否显示文章或页面顶部的meta信息Booltrue
bottom_meta是否显示文章或页面底部的meta信息Booltrue
sidebar页面侧边栏Bool, Arraytheme.layout.*.sidebar
body页面主体元素Arraytheme.layout.on_page.body
thumbnail缩略图Stringfalse
icons图标Array[]
pin是否置顶Boolfalse
headimg文章头图url-
readmore阅读更多按钮Bool-

layout:post 时特有的字段：

字段含义值类型默认值
author文章作者[Object]config.author
categories分类String, Array-
tags标签String, Array-
toc是否生成目录Booltrue

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-matter
pin: true

文章分类

多个分类有两种关系，一种是层级（等同于文件夹），一种是并列（等同于标签）。

多级分类：

front-matter
---
categories: [分类A, 分类B]
---

或者

front-matter
---
categories:
  - 分类A
  - 分类B
---

并列分类

front-matter
categories:
  - [分类A]
  - [分类B]

多级+并列分类

front-matter
categories:
  - [分类A, 分类B]
  - [分类C, 分类D]

文章摘要

在文章中插入 <!-- more -->，前面的部分即为摘要。

某篇文章源码
---
title: xxx
date: 2020-02-21
---

这是摘要

<!-- more -->

这是正文

注意： <!-- more --> 前后一定要有空行，不然可能导致显示错位。

设置文章作者

Volantis 支持多个作者在一个站点发布文章，其他作者信息需要写在数据文件中，例如：

blog/source/_data/author.yml
Jon:
  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_Snow
Dany:
  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 | Fandom
author: Jon
---

引入外部文章

利用 link，搭配自定义的文章作者信息，你可以在文章列表中显示外部文章或者网址，例如：

blog/source/_data/author.yml
xaoxuu:
  name: xaoxuu
  avatar: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  url: https://xaoxuu.com
front-matter
---
layout:     post
date:       2017-07-05
title:      [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
  - Hexo
author: xaoxuu
link: 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: false
bottom_meta: false
---

如果一个页面没有 title 则不会显示 top_meta ，像404、关于页面就可以完全隐藏：

front-matter
---
seo_title: 关于
top_meta: false
bottom_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: false
plugins:
  - 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-23
plugins:
  - 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上使用KaTeX

https://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.yml
oldversion:
  title: 过期的文档
  message: 这份文档过于久远，如果您使用的是新版的主题，请查看新版本的文档。
  position: bottom # bottom (底部通知), right (右侧通知，会自动消失)
  theme: warning # default, warning
  cache: false # 是否记住选项（下次不再弹出）
  buttons:
    - title: 查看新版文档
      url: /getting-started/
      dismiss: false # 点击了是否关闭底部横幅

配置 front-matter

front-matter
---
plugins:
  - snackbar: oldversion
---

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +页面配置 - Volantis

页面配置

发布于：2023年11月3日

页面布局模板

布局模板

取值含义
page独立页面
post文章页面
docs文档页面
category分类页面
tag标签页面
friends友链页面
list列表页面

page & post & docs

这三种页面相同，但是有以下细微区别：

  • post 文章有 title 时，向下滚动网页，导航栏会向上移出屏幕显出文章标题，而 page 和 docs 不会。
  • post 文章末尾最多可以显示「参考资料」、「相关文章」、「版权标识」、「打赏」四个模块。
  • docs 文章末尾最多可以显示「参考资料」一个模块。

除了归档页面是自动生成的，其它独立页面都需要手动创建 md 文件。

归档页面

归档页面是自动生成的，并且初始化的时候已经生成，路径如下：

blog/_config.yml
# Directory
archive_dir: archives

关于页面

Create file if not exists: source/about/index.md
---
layout: docs
seo_title: 关于
bottom_meta: false
sidebar: []
twikoo:
  placeholder: 有什么想对我说的呢？
---

下面写关于自己的内容

分类页面

Create file if not exists: source/categories/index.md
---
layout: category
index: true
title: 所有分类
---

标签页面

Create file if not exists: source/tags/index.md
---
layout: tag
index: true
title: 所有标签
---

列表页面

Create file if not exists: source/mylist/index.md
---
layout: list
group: mylist
index: 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: true
robots: noindex,nofollow
sitemap: false
seo_title: 404 Not Found
bottom_meta: false
sidebar: []
twikoo:
  path: /404.html
  placeholder: 请留言告诉我您要访问哪个页面找不到了
---

{% p logo center huge, 404 %}
{% p center bold, 很抱歉，您访问的页面不存在 %}
{% p center small, 可能是输入地址有误或该地址已被删除 %}

front-matter

front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量。更多请见 Hexo 官方文档：#front-matter

字段含义值类型默认值
layout布局模版String-
title页面标题String-
seo_title网页标题Stringpage.title
short_title页面标题（在group列表中显示）Stringpage.title
date创建时间Date文件创建时间
updated更新日期Date文件修改时间
link外部文章网址String-
music内部音乐控件[Object]-
robotsrobotsString-
keywords页面关键词String-
description页面描述、摘要String-
cover是否显示封面Booltrue
top_meta是否显示文章或页面顶部的meta信息Booltrue
bottom_meta是否显示文章或页面底部的meta信息Booltrue
sidebar页面侧边栏Bool, Arraytheme.layout.*.sidebar
body页面主体元素Arraytheme.layout.on_page.body
thumbnail缩略图Stringfalse
icons图标Array[]
pin是否置顶Boolfalse
headimg文章头图url-
readmore阅读更多按钮Bool-

layout:post 时特有的字段：

字段含义值类型默认值
author文章作者[Object]config.author
categories分类String, Array-
tags标签String, Array-
toc是否生成目录Booltrue

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-matter
pin: true

文章分类

多个分类有两种关系，一种是层级（等同于文件夹），一种是并列（等同于标签）。

多级分类：

front-matter
---
categories: [分类A, 分类B]
---

或者

front-matter
---
categories:
  - 分类A
  - 分类B
---

并列分类

front-matter
categories:
  - [分类A]
  - [分类B]

多级+并列分类

front-matter
categories:
  - [分类A, 分类B]
  - [分类C, 分类D]

文章摘要

在文章中插入 <!-- more -->，前面的部分即为摘要。

某篇文章源码
---
title: xxx
date: 2020-02-21
---

这是摘要

<!-- more -->

这是正文

注意： <!-- more --> 前后一定要有空行，不然可能导致显示错位。

设置文章作者

Volantis 支持多个作者在一个站点发布文章，其他作者信息需要写在数据文件中，例如：

blog/source/_data/author.yml
Jon:
  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_Snow
Dany:
  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 | Fandom
author: Jon
---

引入外部文章

利用 link，搭配自定义的文章作者信息，你可以在文章列表中显示外部文章或者网址，例如：

blog/source/_data/author.yml
xaoxuu:
  name: xaoxuu
  avatar: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  url: https://xaoxuu.com
front-matter
---
layout:     post
date:       2017-07-05
title:      [转]如何搭建基于Hexo的独立博客
categories: [Dev, Hexo]
tags:
  - Hexo
author: xaoxuu
link: 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: false
bottom_meta: false
---

如果一个页面没有 title 则不会显示 top_meta ，像404、关于页面就可以完全隐藏：

front-matter
---
seo_title: 关于
top_meta: false
bottom_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: false
plugins:
  - 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-23
plugins:
  - 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上使用KaTeX

https://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.yml
oldversion:
  title: 过期的文档
  message: 这份文档过于久远，如果您使用的是新版的主题，请查看新版本的文档。
  position: bottom # bottom (底部通知), right (右侧通知，会自动消失)
  theme: warning # default, warning
  cache: false # 是否记住选项（下次不再弹出）
  buttons:
    - title: 查看新版文档
      url: /getting-started/
      dismiss: false # 点击了是否关闭底部横幅

配置 front-matter

front-matter
---
plugins:
  - snackbar: oldversion
---

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v6/site-settings/index.html b/v6/site-settings/index.html index 85fe3111b..d42116942 100644 --- a/v6/site-settings/index.html +++ b/v6/site-settings/index.html @@ -1 +1 @@ -站点配置 - Volantis

站点配置

发布于：2023年11月3日

博客根目录下的 _config.yml 文件通常负责站点相关配置、第三方 npm 插件相关的配置。

网站标题

blog/_config.yml
# 网站标题
title: my blog

网站图标

blog/_config.yml
# 网站图标，更多尺寸等图标请使用 import 方式批量导入
favicon: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.ico
blog/_config.yml
import:
  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.yml
language:
  - 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.yml
import:
  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_beginblog/source/_volantis/headBegin.ejs
head_endblog/source/_volantis/headEnd.ejs
body_beginblog/source/_volantis/ bodyBegin.ejs
body_endblog/source/_volantis/bodyEnd.ejs

更多

Hexo 官方文档 #配置

https://hexo.io/zh-cn/docs/configuration

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +站点配置 - Volantis

站点配置

发布于：2023年11月3日

博客根目录下的 _config.yml 文件通常负责站点相关配置、第三方 npm 插件相关的配置。

网站标题

blog/_config.yml
# 网站标题
title: my blog

网站图标

blog/_config.yml
# 网站图标，更多尺寸等图标请使用 import 方式批量导入
favicon: https://gcore.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.ico
blog/_config.yml
import:
  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.yml
language:
  - 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.yml
import:
  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_beginblog/source/_volantis/headBegin.ejs
head_endblog/source/_volantis/headEnd.ejs
body_beginblog/source/_volantis/ bodyBegin.ejs
body_endblog/source/_volantis/bodyEnd.ejs

更多

Hexo 官方文档 #配置

https://hexo.io/zh-cn/docs/configuration

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v6/tag-plugins/index.html b/v6/tag-plugins/index.html index 42418d949..d885c7f3e 100644 --- a/v6/tag-plugins/index.html +++ b/v6/tag-plugins/index.html @@ -1 +1 @@ -标签插件 - Volantis

标签插件

发布于：2023年11月3日

为了兼容老用户，旧的标签插件在重构之前依然沿用旧的格式，即 command + 空格 作为参数分隔符，而部分新增标签插件是 空格 + 英文竖线 + 空格 ，请注意区分。

我们也在探索哪种分隔符既简单又不容易引起冲突，所以可能存在多种格式，具体以对应文档描述为准。

5.0 版本起临时实验使用英文双冒号 ( :: ) 作为分隔符，之前版本的分隔符写法向下兼容

6.0 版本的分隔符最终计划使用 stellar 的分隔符，之前版本的分隔符写法没有兼容计划

text

带 下划线 的文本；带着重号 的文本；带波浪线 的文本；带 删除线 的文本

键盘样式的文本：⌘ + D

密码样式的文本：这里没有验证码

带 {% u 下划线 %} 的文本；带 {% emp 着重号 %} 的文本；带 {% wavy 波浪线 %} 的文本；带 {% del 删除线 %} 的文本

键盘样式的文本：{% kbd ⌘ %} + {% kbd D %}

密码样式的文本：{% psw 这里没有验证码 %}

span

本插件最后更新于5.0 版本
{% span 样式参数::文本内容 %}

各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大号文字：

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 样式参数::文本内容 %}

红色

黄色

绿色

青色

蓝色

灰色

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

note

NoteBlock 是 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

noteblock

NoteBlock 是 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

  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 服务。

2020-05-15 2.6.3 -> 2.6.6

不需要额外处理。

2020-04-20 2.6.2 -> 2.6.3

  1. 全局搜索 seotitle 并替换为 seo_title。
  2. group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
  3. 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 %}

最后更新于 5.0 版本
{% link 标题::链接::图片链接（可选） %}

演示效果

如何参与项目

https://volantis.js.org/contributors/

上述示例的源码

example:
{% link 如何参与项目::https://volantis.js.org/contributors/::https://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.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://gcore.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://gcore.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 版本以上使用。


tab

此插件移植自 NexT #tabs

最后更新于 2.1 版本
{% tabs 页面内不重复的ID %}
<!-- tab 栏目1 -->
内容
<!-- endtab -->
<!-- tab 栏目2 -->
内容
<!-- endtab -->
{% endtabs %}

演示效果

。。。

！！！

上述示例的源码

example:
{% tabs tab-id %}

<!-- tab 栏目1 -->

。。。

<!-- endtab -->

<!-- tab 栏目2 -->

！！！

<!-- endtab -->

{% endtabs %}

folding

最后更新于 5.0 版本
{% folding 参数（可选）::标题 %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

演示效果

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试
{% folding green::查看代码测试 %}

查看代码测试

{% endfolding %}
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

上述示例的源码

example:
{% folding 查看图片测试 %}

![](https://gcore.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://gcore.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 代表默认打开。


inlineimage

Inlineimage 标签是一种行内图片标签，可以用来在一段话中间插入表情。

本插件最后更新于 5.0 版本
{% inlineimage 图片链接::height=高度（可选） %}

演示效果

这是 一段话。

这又是 一段话。

上述示例的源码

example:
这是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif::height=40px %} 一段话。

可以支持的参数

高度

height=20px

image

Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。

本插件最后更新于 5.0 版本
{% image 链接::width=宽度（可选）::height=高度（可选）::alt=描述（可选）::bg=占位颜色（可选） %}

演示效果

添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

指定宽度：

image

指定宽度并添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

设置占位背景色：

优化不同宽度浏览的观感
优化不同宽度浏览的观感

上述示例的源码

example:
添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::alt=每天下课回宿舍的路，没有什么故事。 %}

指定宽度：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px %}

指定宽度并添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::alt=每天下课回宿舍的路，没有什么故事。 %}

设置占位背景色：

{% image https://gcore.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

Gallery 标签是一种针对一组图片应用场景的标签。

本插件最后更新于 5.0 版本
{% gallery 参数::列数::分组 %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
{% endgallery %}

演示效果

一行一个图片

图片描述

一行多个图片（不换行）

图片描述

图片描述

图片描述

多行多个图片（每行2～8个图片）
























上述示例的源码

一行一个图片

example.md:
{% gallery %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endgallery %}

一行多个图片（不换行）

example.md:
{% gallery::::one %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg)
{% endgallery %}

多行多个图片（每行2～8个图片）

example.md:
{% gallery stretch::6::two %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/007.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/008.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/009.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/010.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/011.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/013.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/014.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/015.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/017.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/018.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/020.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/021.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/022.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/023.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/024.jpg)
{% endgallery %}

可以支持的参数

对齐方向

left::center::right

缩放

stretch

列数

::后面直接写列数，支持 2 ～ 8 列。设定列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。

测试中 设定列数之后 不会产生 累积布局偏移; 没有设定列数 产生了累积布局偏移

分组

相同内容的会被归档在一个分组中。


audio

本插件最后更新于 2.4 版本
{% audio 音频链接 %}

演示效果

上述示例的源码

example:
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

video

本插件最后更新于 5.0 版本
{% video 视频链接 %}

演示效果

100%宽度

50%宽度

25%宽度

上述示例的源码

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-aplayer

https://github.com/MoePlayer/hexo-tag-aplayer


issues

issues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代

md

在局部渲染外部md文件。

示例写法
{% md https://gcore.jsdelivr.net/gh/volantis-x/hexo-theme-volantis/README.md %}
md

swiper

轮播标签

默认一张图片是 50% 宽度，通过设置 width:min 设置为 25% 宽度，width:max 设置为 100% 宽度。

最大图片宽度

{% swiper width:max %}
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot11.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot12.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot13.png)
{% endswiper %}

最小图片宽度

{% swiper width:min %}
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot01.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot02.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot03.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot04.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot05.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot06.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot07.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot08.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot09.png)
![](https://gcore.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.yml
volantis_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=4


community_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=4
groupGitHub:
  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
xaoxuu
MHuiG
inkss
Colsrch
Drew233
Linhk1606
W4J1e
ericclose
heson525
CRainyDay
Flexiston
MicDZ
zhaohaihao
lixiang810
WillyChen123
ic3evi1
penndu
PHIKN1GHT
zsStrike
code004Accepted
qinxs
XuxuGood
TRHX
cofm
lunhui1994
gyl-coder
fi6

实现动态友链

可以加载来自 issues 的友链数据，除了需要在 _data/friends.yml 中指定 api 和 repo 外，还需要做一下几件事：

从 xaoxuu/issues-api 作为模板克隆或者 fork 仓库，然后提交一个 issue 进行测试，不出意外的话，仓库中已经配置好了 issue 模板，只需要在模板中指定的位置填写信息就可以了。

提交完 issue 一分钟左右，如果仓库中出现了 output 分支提交，可以点击查看一下文件内容是否已经包含了刚刚提交的 issue 中的数据，如果包含，那么再次回到前端页面刷新就可以看到来自 issue 的友链数据了。

关于自建&nbsp;Vercel&nbsp;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

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +标签插件 - Volantis

标签插件

发布于：2023年11月3日

为了兼容老用户，旧的标签插件在重构之前依然沿用旧的格式，即 command + 空格 作为参数分隔符，而部分新增标签插件是 空格 + 英文竖线 + 空格 ，请注意区分。

我们也在探索哪种分隔符既简单又不容易引起冲突，所以可能存在多种格式，具体以对应文档描述为准。

5.0 版本起临时实验使用英文双冒号 ( :: ) 作为分隔符，之前版本的分隔符写法向下兼容

6.0 版本的分隔符最终计划使用 stellar 的分隔符，之前版本的分隔符写法没有兼容计划

text

带 下划线 的文本；带着重号 的文本；带波浪线 的文本；带 删除线 的文本

键盘样式的文本：⌘ + D

密码样式的文本：这里没有验证码

带 {% u 下划线 %} 的文本；带 {% emp 着重号 %} 的文本；带 {% wavy 波浪线 %} 的文本；带 {% del 删除线 %} 的文本

键盘样式的文本：{% kbd ⌘ %} + {% kbd D %}

密码样式的文本：{% psw 这里没有验证码 %}

span

本插件最后更新于5.0 版本
{% span 样式参数::文本内容 %}

各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大号文字：

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 样式参数::文本内容 %}

红色

黄色

绿色

青色

蓝色

灰色

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

note

NoteBlock 是 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

noteblock

NoteBlock 是 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

  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 服务。

2020-05-15 2.6.3 -> 2.6.6

不需要额外处理。

2020-04-20 2.6.2 -> 2.6.3

  1. 全局搜索 seotitle 并替换为 seo_title。
  2. group 组件的索引规则有变，使用 group 组件的文章内，group: group_name 对应的组件名必须是 group_name。
  3. 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 %}

最后更新于 5.0 版本
{% link 标题::链接::图片链接（可选） %}

演示效果

如何参与项目

https://volantis.js.org/contributors/

上述示例的源码

example:
{% link 如何参与项目::https://volantis.js.org/contributors/::https://gcore.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://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu::https://xaoxuu.com::https://gcore.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://gcore.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://gcore.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 版本以上使用。


tab

此插件移植自 NexT #tabs

最后更新于 2.1 版本
{% tabs 页面内不重复的ID %}
<!-- tab 栏目1 -->
内容
<!-- endtab -->
<!-- tab 栏目2 -->
内容
<!-- endtab -->
{% endtabs %}

演示效果

。。。

！！！

上述示例的源码

example:
{% tabs tab-id %}

<!-- tab 栏目1 -->

。。。

<!-- endtab -->

<!-- tab 栏目2 -->

！！！

<!-- endtab -->

{% endtabs %}

folding

最后更新于 5.0 版本
{% folding 参数（可选）::标题 %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endfolding %}

演示效果

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试
{% folding green::查看代码测试 %}

查看代码测试

{% endfolding %}
查看列表测试
  • haha
  • hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

hahaha

上述示例的源码

example:
{% folding 查看图片测试 %}

![](https://gcore.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://gcore.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 代表默认打开。


inlineimage

Inlineimage 标签是一种行内图片标签，可以用来在一段话中间插入表情。

本插件最后更新于 5.0 版本
{% inlineimage 图片链接::height=高度（可选） %}

演示效果

这是 一段话。

这又是 一段话。

上述示例的源码

example:
这是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。

这又是 {% inlineimage https://gcore.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif::height=40px %} 一段话。

可以支持的参数

高度

height=20px

image

Image 标签是一种针对单个图片应用场景的标签，支持图片描述文字和指定宽度。

本插件最后更新于 5.0 版本
{% image 链接::width=宽度（可选）::height=高度（可选）::alt=描述（可选）::bg=占位颜色（可选） %}

演示效果

添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

指定宽度：

image

指定宽度并添加描述：

每天下课回宿舍的路，没有什么故事。
每天下课回宿舍的路，没有什么故事。

设置占位背景色：

优化不同宽度浏览的观感
优化不同宽度浏览的观感

上述示例的源码

example:
添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::alt=每天下课回宿舍的路，没有什么故事。 %}

指定宽度：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px %}

指定宽度并添加描述：

{% image https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::alt=每天下课回宿舍的路，没有什么故事。 %}

设置占位背景色：

{% image https://gcore.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

Gallery 标签是一种针对一组图片应用场景的标签。

本插件最后更新于 5.0 版本
{% gallery 参数::列数::分组 %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
{% endgallery %}

演示效果

一行一个图片

图片描述

一行多个图片（不换行）

图片描述

图片描述

图片描述

多行多个图片（每行2～8个图片）
























上述示例的源码

一行一个图片

example.md:
{% gallery %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
{% endgallery %}

一行多个图片（不换行）

example.md:
{% gallery::::one %}
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)
![图片描述](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg)
{% endgallery %}

多行多个图片（每行2～8个图片）

example.md:
{% gallery stretch::6::two %}
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/007.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/008.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/009.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/010.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/011.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/013.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/014.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/015.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/017.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/018.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/020.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/021.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/022.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/023.jpg)
![](https://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/024.jpg)
{% endgallery %}

可以支持的参数

对齐方向

left::center::right

缩放

stretch

列数

::后面直接写列数，支持 2 ～ 8 列。设定列数之后就是「多行多图」布局，此时图片默认左对齐。为了避免图片大小不一，建议搭配 stretch 来时图片放大填充。

测试中 设定列数之后 不会产生 累积布局偏移; 没有设定列数 产生了累积布局偏移

分组

相同内容的会被归档在一个分组中。


audio

本插件最后更新于 2.4 版本
{% audio 音频链接 %}

演示效果

上述示例的源码

example:
{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}

video

本插件最后更新于 5.0 版本
{% video 视频链接 %}

演示效果

100%宽度

50%宽度

25%宽度

上述示例的源码

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-aplayer

https://github.com/MoePlayer/hexo-tag-aplayer


issues

issues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代

md

在局部渲染外部md文件。

示例写法
{% md https://gcore.jsdelivr.net/gh/volantis-x/hexo-theme-volantis/README.md %}
md

swiper

轮播标签

默认一张图片是 50% 宽度，通过设置 width:min 设置为 25% 宽度，width:max 设置为 100% 宽度。

最大图片宽度

{% swiper width:max %}
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot11.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot12.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot13.png)
{% endswiper %}

最小图片宽度

{% swiper width:min %}
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot01.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot02.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot03.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot04.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot05.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot06.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot07.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot08.png)
![](https://gcore.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot09.png)
![](https://gcore.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.yml
volantis_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=4


community_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=4
groupGitHub:
  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
xaoxuu
MHuiG
inkss
Colsrch
Drew233
Linhk1606
W4J1e
ericclose
heson525
CRainyDay
Flexiston
MicDZ
zhaohaihao
lixiang810
WillyChen123
ic3evi1
penndu
PHIKN1GHT
zsStrike
code004Accepted
qinxs
XuxuGood
TRHX
cofm
lunhui1994
gyl-coder
fi6

实现动态友链

可以加载来自 issues 的友链数据，除了需要在 _data/friends.yml 中指定 api 和 repo 外，还需要做一下几件事：

从 xaoxuu/issues-api 作为模板克隆或者 fork 仓库，然后提交一个 issue 进行测试，不出意外的话，仓库中已经配置好了 issue 模板，只需要在模板中指定的位置填写信息就可以了。

提交完 issue 一分钟左右，如果仓库中出现了 output 分支提交，可以点击查看一下文件内容是否已经包含了刚刚提交的 issue 中的数据，如果包含，那么再次回到前端页面刷新就可以看到来自 issue 的友链数据了。

关于自建&nbsp;Vercel&nbsp;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

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v6/tag-plugins/no-pjax.html b/v6/tag-plugins/no-pjax.html index 7762c1151..bfedda4df 100644 --- a/v6/tag-plugins/no-pjax.html +++ b/v6/tag-plugins/no-pjax.html @@ -1 +1 @@ -不支持 pjax 的标签插件 - Volantis

不支持 pjax 的标签插件

发布于：2023年11月3日

这里存放不支持 pjax 的标签插件

如果没有演示效果，多刷新几次即可。

pandown

本插件最后更新于 5.0 版本
{% 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

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +不支持 pjax 的标签插件 - Volantis

不支持 pjax 的标签插件

发布于：2023年11月3日

这里存放不支持 pjax 的标签插件

如果没有演示效果，多刷新几次即可。

pandown

本插件最后更新于 5.0 版本
{% 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

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file diff --git a/v6/theme-settings/index.html b/v6/theme-settings/index.html index dc56efd79..27cc9e77f 100644 --- a/v6/theme-settings/index.html +++ b/v6/theme-settings/index.html @@ -1 +1 @@ -主题配置 - Volantis

主题配置

发布于：2023年11月3日

创建主题配置文件

主题目录下的 _config.yml 文件通常负责主题相关配置，我们强烈建议您使用代替的主题配置文件以防止自己的配置丢失。那么如何使用代替主题配置文件呢？

第 1/2 步：创建配置文件

在博客根目录的 _config.yml 文件旁边新建一个文件： _config.volantis.yml ，这个文件中的配置信息优先级高于主题文件夹中的配置文件。

第 2/2 步：覆盖自定义配置

当您需要修改某项内容时，例如导航栏菜单，那么您需要在主题配置文件中找到相关内容，复制进自己创建的配置文件中：

blog/_config.volantis.yml
navbar:
  visiable: auto # always, auto
  logo: # choose [img] or [icon + title]
    img: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://gcore.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.yml
custom_css:
  ...
  max_width: 1080px # Sum of body width and sidebar width

网页所呈现的内容的最大宽度，即 body 和 sidebar 的宽度之和。

抗锯齿

blog/_config.volantis.yml
custom_css:
  ...
  font_smoothing: true # font-smoothing for webkit

自定义光标样式

blog/_config.volantis.yml
custom_css:
  ...
  cursor:
    enable: true
    text: volantis-static/media/cursor/text.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/text.png
    pointer: volantis-static/media/cursor/pointer.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/pointer.png
    default: volantis-static/media/cursor/left_ptr.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/left_ptr.png
    not-allowed: volantis-static/media/cursor/circle.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/circle.png
    zoom-out: volantis-static/media/cursor/zoom-out.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/zoom-out.png
    zoom-in: volantis-static/media/cursor/zoom-in.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/zoom-in.png
    grab: volantis-static/media/cursor/openhand.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/openhand.png

导航栏样式

您可以设置导航栏的高度以及视觉特效，视觉特效目前可选的有：

  • shadow：卡片阴影。
  • floatable：当鼠标移动到容器内时，呈现出浮起来的效果。
  • blur：背景模糊效果（毛玻璃），当浏览器不支持时显示为不透明。
blog/_config.volantis.yml
custom_css:
  ...
  navbar:
    height: 64px
    width: auto # auto, max
    effect: [shadow, blur] # [shadow, floatable, blur]

滚动条样式

blog/_config.volantis.yml
custom_css:
  ...
  scrollbar:
    size: 4px
    border: 2px
    color: '#2196f3'
    hover: '#ff5722'

侧边栏样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。

blog/_config.volantis.yml
custom_css:
  ...
  sidebar:
    effect: [shadow] # [shadow, floatable, blur]

正文区域样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。

blog/_config.volantis.yml
custom_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.yml
custom_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.yml
custom_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://gcore.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://gcore.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://gcore.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-cn
color_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 自定义文件 功能，实现自定义右键菜单脚本及菜单项控制。

  • 一个在右键菜单中添加 查看上一篇、查看下一篇 菜单项的范例：
省略了部分不相关内容
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://gcore.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.yml
site_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.yml
site_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.yml
cover:
  height_scheme: full # full, half
  ...

目前主题提供两种首页封面高度方案，其它页面均为半屏幕高度。

封面布局方案

blog/_config.volantis.yml
cover:
  ...
  scheme: dock # search (搜索), dock (坞), featured (精选), focus (焦点)
  ...
布局方案适合场景
search注重搜索
dock入口选项比较多
featured选项在4个左右
focus选项在4个左右

默认显示设置

blog/_config.volantis.yml
cover:
  ...
  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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
          - volantis-static/media/org.volantis/blog/qrcode/github@volantis.png # https://gcore.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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png
        - id: qzone
          img: volantis-static/media/org.volantis/logo/128/qzone.png #  https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png
        - id: weibo
          img: volantis-static/media/org.volantis/logo/128/weibo.png #  https://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png
        - id: # telegram
          img: # volantis-static/media/org.volantis/logo/128/telegram.png #  https://gcore.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 ############################### > start
sidebar:
  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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
        - volantis-static/media/org.volantis/blog/qrcode/github@volantis.png # https://gcore.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.yml
blogger:
  class: blogger
  display: [desktop] # [desktop, mobile]
  avatar: https://gcore.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.yml
toc:
  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.yml
category:
  class: category
  display: [desktop] # [desktop, mobile]
  header:
    icon: fas fa-folder-open
    title: 文章分类
    url: /blog/categories/

这个部件可以直接显示所有文章分类，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。

标签云部件

blog/_config.volantis.yml
tagcloud:
  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.yml
donate:
  class: qrcode
  display: [desktop, mobile] # [desktop, mobile]
  height: 64px  # Automatic height if not set
  images:
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png

您可以放置在文章页脚用于展示打赏图片，也可以放置在侧边栏。

通用文本部件

blog/_config.volantis.yml
repos:
  class: text
  display: [desktop] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: 点个赞吧
    url: https://github.com/xaoxuu/
  content:
    - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)'

您可以创建用于展示任何文本内容的文本部件。

通用列表部件

blog/_config.volantis.yml
wiki-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.yml
group-1:
  class: group
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: Git
    url: /wiki/git/

在文章的 front-matter 中设置：

front-matter
group: group-1
order: 16
sidebar: [group-1, toc]

「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章，顺序按照 order 从小到大排列。

通用网格部件

blog/_config.volantis.yml
feedback:
  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.yml
test:
  class: page
  display: [desktop, mobile]
  pid: haha
  content: excerpt # excerpt, more, content

您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容，可选 excerpt，more，content 分别对应文章的摘要、摘要后面的内容、全文。

音乐部件

blog/_config.volantis.yml
music:
  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.yml
comments:
  title: <i class='fas fa-comments'></i> 评论
  subtitle:
  service: giscus
GitHub Discussions 系列

A comments system powered by GitHub Discussions.
https://giscus.app/

blog/_config.volantis.yml
comments:
  ...
  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://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/light.css
      dark: "dark" # https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/dark.css
GitHub Issues 系列

Beaudar 名称源于粤语“表达”的发音，是 Utterances 的中文版本。
https://beaudar.lipk.org/

blog/_config.volantis.yml
comments:
  ...
  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.yml
comments:
  ...
  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.yml
comments:
  ...
  service: vssue
  ...
  vssue:
    owner:
    repo:
    clientId:
    clientSecret:

A modern comment component based on Github Issue and Preact.
https://gitalk.github.io/

blog/_config.volantis.yml
comments:
  ...
  service: gitalk
  ...
  gitalk:
    clientID:
    clientSecret:
    repo:
    owner:
    admin: # []

clientID 和 clientSecret 的获取方法可自行搜索教程，这里仅简单描述一下步骤：

  1. 点击 GitHub -> Settings https://github.com/settings/profile
  2. 点击 Developer settings https://github.com/settings/developers
  3. 点击 New OAuth App https://github.com/settings/applications/new
  4. 填写信息：
    Application name 随便填，我的是：xaoxuu.com
    Homepage URL 和 Authorization callback URL 都写你的网址，我的是：https://xaoxuu.com

可以通过设置 gitalk.id 实现多个页面共用一个评论框。

front-matter
---
gitalk:
  id: /wiki/volantis/
---
Disqus 系列

Disqus - The #1 way to build an audience on your website.
https://disqus.com/

blog/_config.volantis.yml
comments:
  ...
  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/DisqusJS

blog/_config.volantis.yml
comments:
  ...
  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.yml
comments:
  ...
  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),故请谨慎选择.

一款简单，安全，免费的评论系统 | A simple, safe, free comment system
https://discuss.js.org

blog/_config.volantis.yml
comments:
  ...
  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.yml
comments:
  ...
  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.yml
comments:
  ...
  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 其他系列

一款简洁的自托管评论系统 | A Selfhosted Comment System.
https://artalk.js.org/

blog/_config.volantis.yml
comments:
  ...
  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.yml
comments:
  ...
  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/hashover

blog/_config.volantis.yml
comments:
  ...
  service: hashover
  ...
  hashover:
    src: https://example.com/(path/)comments.php
blog/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-content
search:
  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: ''
  1. 你需要安装 hexo-generator-json-content，并根据它的文档去做相应配置。
  2. 修改 主题配置文件。
blog/_config.volantis.yml
search:
  enable: true
  service: hexo
  1. 你需要安装 hexo-algoliasearch 或 hexo-algolia，根据它们的说明文档去做相应的配置。
  2. 修改 主题配置文件。
blog/_config.volantis.yml
search:
  enable: true
  service: algolia

如果你使用 hexo-algoliasearch，请记得配置 fields 参数的 title, permalink 和 content:strip

  1. MeiliSearch 为自托管搜索引擎，需要服务器支撑，部署文档详见：Meilisearch Doc。
  2. 数据集需要自行上传，可使用 hexo-generator-json-content 生成索引，同时配置修改如下：
    blog/_config.yml
    jsonContent: 
      meta: false 
      pages: false 
      posts: 
        title: true 
        path: true 
        text: true 
        uuid: true # <--- 做主键
  3. 你需要为文章分配一个唯一 ID 作为主键，此处推荐使用 hexo-uuid 生成。
  4. 修改 主题配置文件。
blog/_config.volantis.yml
search:
  enable: true
  service: meilisearch

原 google, azure, baidu 站内搜索 系祖传代码, 且文档丢失, 不便后续维护 在 5.0 版本移除

插件库

概述

Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭，无需进行设置。

幻灯片背景(视差滚动效果)

jquery.backstretch 在 5.0 版本 移除, 被 parallax 替代

blog/_config.volantis.yml
plugins:
  ...
  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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg
      ...

幻灯片背景图片显示的位置可以选择粘贴在封面上，跟随封面一起滑动，也可以选择固定作为网页背景图片。

语法高亮

blog/_config.volantis.yml
plugins:
  ...
  # 代码高亮
  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.yml
plugins:
  ...
  # 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.yml
plugins:
  ...
  # 暗黑模式 darkmode
  # 开关按钮：在 navbar.menu 中添加：
  # - name: 暗黑模式 # 可自定义
  #   icon: fas fa-moon # 可自定义
  #   toggle: darkmode
  darkmode:
    enable: true

结束支持

blog/_config.volantis.yml
plugins:
  ...
  # 旧版 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

Artitalk

blog/_config.volantis.yml
plugins:
  ...
  # 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接口

BBtalk

blog/_config.volantis.yml
plugins:
  ...
  # BBtalk https://bb.js.org
  bbtalk:
    # Set `plugins: ["bbtalk"]` to enable in front-matter
    # 支持 Pjax
    js: https://unpkg.com/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 域名

Tidio

blog/_config.volantis.yml
plugins:
  ...
  # 聊天功能
  chat_service: tidio # tidio or gitter

  # Tidio
  # https://www.tidio.com/
  tidio:
    id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

友链朋友圈

blog/_config.volantis.yml
plugins:
  ...
  # 友链朋友圈 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.yml
plugins:
  ...
  # 消息提示 
  # 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

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file +主题配置 - Volantis

主题配置

发布于：2023年11月3日

创建主题配置文件

主题目录下的 _config.yml 文件通常负责主题相关配置，我们强烈建议您使用代替的主题配置文件以防止自己的配置丢失。那么如何使用代替主题配置文件呢？

第 1/2 步：创建配置文件

在博客根目录的 _config.yml 文件旁边新建一个文件： _config.volantis.yml ，这个文件中的配置信息优先级高于主题文件夹中的配置文件。

第 2/2 步：覆盖自定义配置

当您需要修改某项内容时，例如导航栏菜单，那么您需要在主题配置文件中找到相关内容，复制进自己创建的配置文件中：

blog/_config.volantis.yml
navbar:
  visiable: auto # always, auto
  logo: # choose [img] or [icon + title]
    img: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://gcore.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.yml
custom_css:
  ...
  max_width: 1080px # Sum of body width and sidebar width

网页所呈现的内容的最大宽度，即 body 和 sidebar 的宽度之和。

抗锯齿

blog/_config.volantis.yml
custom_css:
  ...
  font_smoothing: true # font-smoothing for webkit

自定义光标样式

blog/_config.volantis.yml
custom_css:
  ...
  cursor:
    enable: true
    text: volantis-static/media/cursor/text.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/text.png
    pointer: volantis-static/media/cursor/pointer.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/pointer.png
    default: volantis-static/media/cursor/left_ptr.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/left_ptr.png
    not-allowed: volantis-static/media/cursor/circle.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/circle.png
    zoom-out: volantis-static/media/cursor/zoom-out.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/zoom-out.png
    zoom-in: volantis-static/media/cursor/zoom-in.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/zoom-in.png
    grab: volantis-static/media/cursor/openhand.png # https://gcore.jsdelivr.net/gh/inkss/common@1/cursor/openhand.png

导航栏样式

您可以设置导航栏的高度以及视觉特效，视觉特效目前可选的有：

  • shadow：卡片阴影。
  • floatable：当鼠标移动到容器内时，呈现出浮起来的效果。
  • blur：背景模糊效果（毛玻璃），当浏览器不支持时显示为不透明。
blog/_config.volantis.yml
custom_css:
  ...
  navbar:
    height: 64px
    width: auto # auto, max
    effect: [shadow, blur] # [shadow, floatable, blur]

滚动条样式

blog/_config.volantis.yml
custom_css:
  ...
  scrollbar:
    size: 4px
    border: 2px
    color: '#2196f3'
    hover: '#ff5722'

侧边栏样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。

blog/_config.volantis.yml
custom_css:
  ...
  sidebar:
    effect: [shadow] # [shadow, floatable, blur]

正文区域样式

视觉特效参数同上，值得注意的是：卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。

blog/_config.volantis.yml
custom_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.yml
custom_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.yml
custom_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://gcore.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://gcore.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://gcore.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-cn
color_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 自定义文件 功能，实现自定义右键菜单脚本及菜单项控制。

  • 一个在右键菜单中添加 查看上一篇、查看下一篇 菜单项的范例：
省略了部分不相关内容
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://gcore.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.yml
site_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.yml
site_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.yml
cover:
  height_scheme: full # full, half
  ...

目前主题提供两种首页封面高度方案，其它页面均为半屏幕高度。

封面布局方案

blog/_config.volantis.yml
cover:
  ...
  scheme: dock # search (搜索), dock (坞), featured (精选), focus (焦点)
  ...
布局方案适合场景
search注重搜索
dock入口选项比较多
featured选项在4个左右
focus选项在4个左右

默认显示设置

blog/_config.volantis.yml
cover:
  ...
  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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
          - volantis-static/media/org.volantis/blog/qrcode/github@volantis.png # https://gcore.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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png
        - id: qzone
          img: volantis-static/media/org.volantis/logo/128/qzone.png #  https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png
        - id: weibo
          img: volantis-static/media/org.volantis/logo/128/weibo.png #  https://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png
        - id: # telegram
          img: # volantis-static/media/org.volantis/logo/128/telegram.png #  https://gcore.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 ############################### > start
sidebar:
  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://gcore.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://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
        - volantis-static/media/org.volantis/blog/qrcode/github@volantis.png # https://gcore.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.yml
blogger:
  class: blogger
  display: [desktop] # [desktop, mobile]
  avatar: https://gcore.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.yml
toc:
  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.yml
category:
  class: category
  display: [desktop] # [desktop, mobile]
  header:
    icon: fas fa-folder-open
    title: 文章分类
    url: /blog/categories/

这个部件可以直接显示所有文章分类，如果您希望有一个独立的页面来展示，需要自己创建一个文件，具体操作在「页面」部分文档中。

标签云部件

blog/_config.volantis.yml
tagcloud:
  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.yml
donate:
  class: qrcode
  display: [desktop, mobile] # [desktop, mobile]
  height: 64px  # Automatic height if not set
  images:
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png
    - https://gcore.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png

您可以放置在文章页脚用于展示打赏图片，也可以放置在侧边栏。

通用文本部件

blog/_config.volantis.yml
repos:
  class: text
  display: [desktop] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: 点个赞吧
    url: https://github.com/xaoxuu/
  content:
    - '您的赞对我来说很重要，如果您喜欢本主题，希望能够给下面的项目点个赞来支持一下。'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)'
    - '[<img src="https://gcore.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)'

您可以创建用于展示任何文本内容的文本部件。

通用列表部件

blog/_config.volantis.yml
wiki-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.yml
group-1:
  class: group
  display: [desktop, mobile] # [desktop, mobile]
  header:
    icon: fab fa-github
    title: Git
    url: /wiki/git/

在文章的 front-matter 中设置：

front-matter
group: group-1
order: 16
sidebar: [group-1, toc]

「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章，顺序按照 order 从小到大排列。

通用网格部件

blog/_config.volantis.yml
feedback:
  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.yml
test:
  class: page
  display: [desktop, mobile]
  pid: haha
  content: excerpt # excerpt, more, content

您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容，可选 excerpt，more，content 分别对应文章的摘要、摘要后面的内容、全文。

音乐部件

blog/_config.volantis.yml
music:
  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.yml
comments:
  title: <i class='fas fa-comments'></i> 评论
  subtitle:
  service: giscus
GitHub Discussions 系列

A comments system powered by GitHub Discussions.
https://giscus.app/

blog/_config.volantis.yml
comments:
  ...
  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://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/light.css
      dark: "dark" # https://gcore.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/dark.css
GitHub Issues 系列

Beaudar 名称源于粤语“表达”的发音，是 Utterances 的中文版本。
https://beaudar.lipk.org/

blog/_config.volantis.yml
comments:
  ...
  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.yml
comments:
  ...
  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.yml
comments:
  ...
  service: vssue
  ...
  vssue:
    owner:
    repo:
    clientId:
    clientSecret:

A modern comment component based on Github Issue and Preact.
https://gitalk.github.io/

blog/_config.volantis.yml
comments:
  ...
  service: gitalk
  ...
  gitalk:
    clientID:
    clientSecret:
    repo:
    owner:
    admin: # []

clientID 和 clientSecret 的获取方法可自行搜索教程，这里仅简单描述一下步骤：

  1. 点击 GitHub -> Settings https://github.com/settings/profile
  2. 点击 Developer settings https://github.com/settings/developers
  3. 点击 New OAuth App https://github.com/settings/applications/new
  4. 填写信息：
    Application name 随便填，我的是：xaoxuu.com
    Homepage URL 和 Authorization callback URL 都写你的网址，我的是：https://xaoxuu.com

可以通过设置 gitalk.id 实现多个页面共用一个评论框。

front-matter
---
gitalk:
  id: /wiki/volantis/
---
Disqus 系列

Disqus - The #1 way to build an audience on your website.
https://disqus.com/

blog/_config.volantis.yml
comments:
  ...
  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/DisqusJS

blog/_config.volantis.yml
comments:
  ...
  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.yml
comments:
  ...
  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),故请谨慎选择.

一款简单，安全，免费的评论系统 | A simple, safe, free comment system
https://discuss.js.org

blog/_config.volantis.yml
comments:
  ...
  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.yml
comments:
  ...
  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.yml
comments:
  ...
  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 其他系列

一款简洁的自托管评论系统 | A Selfhosted Comment System.
https://artalk.js.org/

blog/_config.volantis.yml
comments:
  ...
  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.yml
comments:
  ...
  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/hashover

blog/_config.volantis.yml
comments:
  ...
  service: hashover
  ...
  hashover:
    src: https://example.com/(path/)comments.php
blog/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-content
search:
  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: ''
  1. 你需要安装 hexo-generator-json-content，并根据它的文档去做相应配置。
  2. 修改 主题配置文件。
blog/_config.volantis.yml
search:
  enable: true
  service: hexo
  1. 你需要安装 hexo-algoliasearch 或 hexo-algolia，根据它们的说明文档去做相应的配置。
  2. 修改 主题配置文件。
blog/_config.volantis.yml
search:
  enable: true
  service: algolia

如果你使用 hexo-algoliasearch，请记得配置 fields 参数的 title, permalink 和 content:strip

  1. MeiliSearch 为自托管搜索引擎，需要服务器支撑，部署文档详见：Meilisearch Doc。
  2. 数据集需要自行上传，可使用 hexo-generator-json-content 生成索引，同时配置修改如下：
    blog/_config.yml
    jsonContent: 
      meta: false 
      pages: false 
      posts: 
        title: true 
        path: true 
        text: true 
        uuid: true # <--- 做主键
  3. 你需要为文章分配一个唯一 ID 作为主键，此处推荐使用 hexo-uuid 生成。
  4. 修改 主题配置文件。
blog/_config.volantis.yml
search:
  enable: true
  service: meilisearch

原 google, azure, baidu 站内搜索 系祖传代码, 且文档丢失, 不便后续维护 在 5.0 版本移除

插件库

概述

Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭，无需进行设置。

幻灯片背景(视差滚动效果)

jquery.backstretch 在 5.0 版本 移除, 被 parallax 替代

blog/_config.volantis.yml
plugins:
  ...
  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://gcore.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg
      ...

幻灯片背景图片显示的位置可以选择粘贴在封面上，跟随封面一起滑动，也可以选择固定作为网页背景图片。

语法高亮

blog/_config.volantis.yml
plugins:
  ...
  # 代码高亮
  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.yml
plugins:
  ...
  # 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.yml
plugins:
  ...
  # 暗黑模式 darkmode
  # 开关按钮：在 navbar.menu 中添加：
  # - name: 暗黑模式 # 可自定义
  #   icon: fas fa-moon # 可自定义
  #   toggle: darkmode
  darkmode:
    enable: true

结束支持

blog/_config.volantis.yml
plugins:
  ...
  # 旧版 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

Artitalk

blog/_config.volantis.yml
plugins:
  ...
  # 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接口

BBtalk

blog/_config.volantis.yml
plugins:
  ...
  # BBtalk https://bb.js.org
  bbtalk:
    # Set `plugins: ["bbtalk"]` to enable in front-matter
    # 支持 Pjax
    js: https://unpkg.com/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 域名

Tidio

blog/_config.volantis.yml
plugins:
  ...
  # 聊天功能
  chat_service: tidio # tidio or gitter

  # Tidio
  # https://www.tidio.com/
  tidio:
    id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

友链朋友圈

blog/_config.volantis.yml
plugins:
  ...
  # 友链朋友圈 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.yml
plugins:
  ...
  # 消息提示 
  # 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

本页文档最后更新于：2023年11月3日

评论

\ No newline at end of file