diff --git a/404.html b/404.html index dc03f43f58..9403099ad0 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 bb72c7340d..5c1a5afcd4 100644 --- a/archives/2013/12/index.html +++ b/archives/2013/12/index.html @@ -1 +1 @@ -归档:2013/12 - Volantis

Volantis

中文创作者社区

Images

This is a image test post.

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

Excerpts

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

Videos

This is a video test post.

Youtube

Vimeo

Gallery Post

This post contains 4 photos:

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

All photos should be displayed properly.

Tag Plugins

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.

www.google.com

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.

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


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

Volantis

中文创作者社区

This is a image test post.

测试 设定列数

This is a image test post.

测试 没有设定列数

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.


\ 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 cf17ca51eb..e7ede9d973 100644 --- a/archives/2013/12/page/2/index.html +++ b/archives/2013/12/page/2/index.html @@ -1 +1 @@ -归档:2013/12 - Volantis

Volantis

中文创作者社区

Link Post

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

Elements

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.

Hello World

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


\ 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.


\ No newline at end of file diff --git a/archives/2013/index.html b/archives/2013/index.html index 9be1110438..b257160e8b 100644 --- a/archives/2013/index.html +++ b/archives/2013/index.html @@ -1 +1 @@ -归档:2013 - Volantis

Volantis

中文创作者社区

Images

This is a image test post.

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

Excerpts

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

Videos

This is a video test post.

Youtube

Vimeo

Gallery Post

This post contains 4 photos:

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

All photos should be displayed properly.

Tag Plugins

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.

www.google.com

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.

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


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

Volantis

中文创作者社区

This is a image test post.

测试 设定列数

This is a image test post.

测试 没有设定列数

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.


\ No newline at end of file diff --git a/archives/2013/page/2/index.html b/archives/2013/page/2/index.html index 9dc091ee41..cd8534fb9d 100644 --- a/archives/2013/page/2/index.html +++ b/archives/2013/page/2/index.html @@ -1 +1 @@ -归档:2013 - Volantis

Volantis

中文创作者社区

Link Post

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

Elements

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.

Hello World

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


\ 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.


\ No newline at end of file diff --git a/archives/2017/10/index.html b/archives/2017/10/index.html index 22140cf6f5..c3b8347139 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 3131f32f48..0a1da6db3e 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 e02b26d14c..08c493fb98 100644 --- a/archives/2018/07/index.html +++ b/archives/2018/07/index.html @@ -1 +1 @@ -归档:2018/7 - Volantis

Volantis

中文创作者社区

Markdown Style test || 'image'

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 e5acc243aa..6e21ece803 100644 --- a/archives/2018/index.html +++ b/archives/2018/index.html @@ -1 +1 @@ -归档:2018 - Volantis

Volantis

中文创作者社区

Markdown Style test || 'image'

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 855f291a1e..1fd6fd98b6 100644 --- a/archives/2019/07/index.html +++ b/archives/2019/07/index.html @@ -1 +1 @@ -归档:2019/7 - Volantis

Volantis

中文创作者社区

Code Highlight Style test

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 282e01a9a3..4ce4950faf 100644 --- a/archives/2019/index.html +++ b/archives/2019/index.html @@ -1 +1 @@ -归档:2019 - Volantis

Volantis

中文创作者社区

Code Highlight Style test

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 51c08e66ab..9a849fa63e 100644 --- a/archives/2020/02/index.html +++ b/archives/2020/02/index.html @@ -1 +1 @@ -归档:2020/2 - Volantis

Volantis

中文创作者社区

新增 pjax 开发分支

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

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

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

官方资讯

主题更名为「Volantis」

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

官方资讯

主题文档网页更新并开源

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

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

官方资讯

已关闭评论区

使用 GitHub Issue

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

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面,查看是否有解决方案。
  3. 访问在线示例,查看是否具有相同第问题。
    1. 如果在线示例表示正常,则说明自己配置有误,检查开发环境、主题配置是否正确。如果检查不出问题,提Issue询问。
    1. 如果在线示例也存在相同问题,则说明存在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 66f64d9648..63bd8902e7 100644 --- a/archives/2020/03/index.html +++ b/archives/2020/03/index.html @@ -1 +1 @@ -归档:2020/3 - Volantis

Volantis

中文创作者社区

新版本「2.0」正式版发布

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

  1. 卸载 less

    npm uninstall hexo-renderer-less --save
  2. 安装 stylus

    npm install hexo-renderer-stylus --save

新版本「2.0」测试版发布

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 cc143b31cb..09de839bd5 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 bcde7be73f..2bbe9b1dd8 100644 --- a/archives/2020/05/index.html +++ b/archives/2020/05/index.html @@ -1 +1 @@ -归档:2020/5 - Volantis

Volantis

中文创作者社区

Volantis 主题部署 Pjax

本篇文章记录了我对 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/07/index.html b/archives/2020/07/index.html deleted file mode 100644 index 14dcabfa29..0000000000 --- a/archives/2020/07/index.html +++ /dev/null @@ -1 +0,0 @@ -归档:2020/7 - Volantis

Volantis

中文创作者社区

如何快速优雅地删除 Valine 的垃圾评论

Valine 评论由于可以匿名,发言成本低、质量低,使用 app 可以方便的删除垃圾评论。

\ No newline at end of file diff --git a/archives/2020/08/index.html b/archives/2020/08/index.html index f409305c79..c8677c570f 100644 --- a/archives/2020/08/index.html +++ b/archives/2020/08/index.html @@ -1 +1 @@ -归档:2020/8 - Volantis

Volantis

中文创作者社区

博客访问速度提升:最佳线路分流 || 'image'

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

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

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

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

给 Volantis 主题调用 Valine 最新评论 || 'image'

给 Volantis 主题调用 Valine 最新评论

给博客加上最新评论栏目。以 Volantis 主题为例,给侧边栏加上最新评论功能,实现整站调用。

给 Hexo Volantis 主题添加图片轮播功能

很多网站首页都会有图片轮播效果,给网站的首页加上图片轮播的效果,可以很好的起到广告的作用也可以起到推荐优秀内容的作用。来吧,下面是给 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 cb2a5a1dd3..d8ecf24636 100644 --- a/archives/2020/09/index.html +++ b/archives/2020/09/index.html @@ -1 +1 @@ -归档:2020/9 - Volantis

Volantis

中文创作者社区

Hexo 标签函数 list_tags 用法详解 || 'image'

Hexo 标签函数 list_tags 用法详解

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

如何给博客添加弹窗通知 || 'image'

如何给博客添加弹窗通知

\ 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 e67f8b1fb2..a8c61cde4a 100644 --- a/archives/2020/10/index.html +++ b/archives/2020/10/index.html @@ -1 +1 @@ -归档:2020/10 - Volantis

Volantis

中文创作者社区

哔哔!换个姿势在静态博客上发短博文(volantis适配版) || 'image'

哔哔!换个姿势在静态博客上发短博文(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 e983ee111b..af3fe4d6f5 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 790e87fc8f..8b8f7c5d8e 100644 --- a/archives/2020/index.html +++ b/archives/2020/index.html @@ -1 +1 @@ -归档:2020 - Volantis

Volantis

中文创作者社区

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

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

哔哔!换个姿势在静态博客上发短博文(volantis适配版) || 'image'

哔哔!换个姿势在静态博客上发短博文(volantis适配版)

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

Hexo 标签函数 list_tags 用法详解 || 'image'

Hexo 标签函数 list_tags 用法详解

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

如何给博客添加弹窗通知 || 'image'

如何给博客添加弹窗通知

博客访问速度提升:最佳线路分流 || 'image'

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

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

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

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

给 Volantis 主题调用 Valine 最新评论 || 'image'

给 Volantis 主题调用 Valine 最新评论

给博客加上最新评论栏目。以 Volantis 主题为例,给侧边栏加上最新评论功能,实现整站调用。

给 Hexo Volantis 主题添加图片轮播功能

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

如何快速优雅地删除 Valine 的垃圾评论

Valine 评论由于可以匿名,发言成本低、质量低,使用 app 可以方便的删除垃圾评论。

Volantis 主题部署 Pjax

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


\ 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

\ No newline at end of file diff --git a/archives/2020/page/2/index.html b/archives/2020/page/2/index.html index ab61923249..cd0eaca930 100644 --- a/archives/2020/page/2/index.html +++ b/archives/2020/page/2/index.html @@ -1 +1 @@ -归档:2020 - Volantis

Volantis

中文创作者社区

关于主题与文档的更新

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

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

新版本「2.0」正式版发布

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

  1. 卸载 less

    npm uninstall hexo-renderer-less --save
  2. 安装 stylus

    npm install hexo-renderer-stylus --save

新版本「2.0」测试版发布

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

测试「文章内链接作文本的话无法生成静态文件」

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

相关 Issue: #164

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

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

新增 pjax 开发分支

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

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

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

官方资讯

主题更名为「Volantis」

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

官方资讯

主题文档网页更新并开源

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

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

官方资讯

已关闭评论区

使用 GitHub Issue

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

遇到问题怎么办

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

版本命名规范化

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

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

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

心率测量工具限免活动

心率管家 App(仅iOS端),专业版不定期限免,欢迎下载体验。

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

官方资讯

\ 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元之间浮动变化的。


\ No newline at end of file diff --git a/archives/2021/02/index.html b/archives/2021/02/index.html deleted file mode 100644 index 0638e7f1df..0000000000 --- a/archives/2021/02/index.html +++ /dev/null @@ -1 +0,0 @@ -归档:2021/2 - Volantis

Volantis

中文创作者社区

\ No newline at end of file diff --git a/archives/2021/03/index.html b/archives/2021/03/index.html index a73228a7ac..944a94762a 100644 --- a/archives/2021/03/index.html +++ b/archives/2021/03/index.html @@ -1 +1 @@ -归档:2021/3 - Volantis

Volantis

中文创作者社区

volantis主题修改代码高亮样式

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

为volantis主题添加图片轮播和热门文章

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

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

我在主题文档中看到了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 7a15b2b48b..ac1539a5df 100644 --- a/archives/2021/04/index.html +++ b/archives/2021/04/index.html @@ -1 +1 @@ -归档:2021/4 - Volantis

Volantis

中文创作者社区

使用 pandoc 正确渲染多行 MathJax 公式

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

为volantis添加瀑布流相册

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

为volantis添加hls.js以在Chrome上播放m3u8视频

在文章中插入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 new file mode 100644 index 0000000000..5c5b680797 --- /dev/null +++ b/archives/2021/08/index.html @@ -0,0 +1 @@ +归档: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 new file mode 100644 index 0000000000..d756fde815 --- /dev/null +++ b/archives/2021/09/index.html @@ -0,0 +1 @@ +归档: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 new file mode 100644 index 0000000000..2f698b59fe --- /dev/null +++ b/archives/2021/11/index.html @@ -0,0 +1 @@ +归档:2021/11 - Volantis

Volantis

中文创作者社区

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

\ No newline at end of file diff --git a/archives/2021/index.html b/archives/2021/index.html index d497782cd1..508494fa4b 100644 --- a/archives/2021/index.html +++ b/archives/2021/index.html @@ -1 +1 @@ -归档:2021 - Volantis

Volantis

中文创作者社区

使用 pandoc 正确渲染多行 MathJax 公式

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

为volantis添加瀑布流相册

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

为volantis添加hls.js以在Chrome上播放m3u8视频

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

volantis主题修改代码高亮样式

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

为volantis主题添加图片轮播和热门文章

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

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

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

为 hexo 博客支持 sweetalert 弹窗 || 'image'

为 hexo 博客支持 sweetalert 弹窗

\ 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大佬完善。在这感谢两位大佬,如果你也需要轮播插件,就进来看看吧。


\ No newline at end of file diff --git a/archives/2021/page/2/index.html b/archives/2021/page/2/index.html new file mode 100644 index 0000000000..519e9327da --- /dev/null +++ b/archives/2021/page/2/index.html @@ -0,0 +1 @@ +归档:2021 - Volantis

Volantis

中文创作者社区

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


\ No newline at end of file diff --git a/archives/2022/05/index.html b/archives/2022/05/index.html new file mode 100644 index 0000000000..099d88a8f9 --- /dev/null +++ b/archives/2022/05/index.html @@ -0,0 +1 @@ +归档: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 new file mode 100644 index 0000000000..8c78ee8c6d --- /dev/null +++ b/archives/2022/08/index.html @@ -0,0 +1 @@ +归档:2022/8 - Volantis

Volantis

中文创作者社区

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

\ No newline at end of file diff --git a/archives/2022/12/index.html b/archives/2022/12/index.html new file mode 100644 index 0000000000..e874483dde --- /dev/null +++ b/archives/2022/12/index.html @@ -0,0 +1 @@ +归档:2022/12 - Volantis

Volantis

中文创作者社区

添加Gitee动态友链

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

\ No newline at end of file diff --git a/archives/2022/index.html b/archives/2022/index.html new file mode 100644 index 0000000000..8378cc76d1 --- /dev/null +++ b/archives/2022/index.html @@ -0,0 +1 @@ +归档: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 new file mode 100644 index 0000000000..01c44d6924 --- /dev/null +++ b/archives/2023/01/index.html @@ -0,0 +1 @@ +归档:2023/1 - Volantis

Volantis

中文创作者社区

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

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

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

部分内容非Volantis主题也适用

\ No newline at end of file diff --git a/archives/2023/05/index.html b/archives/2023/05/index.html new file mode 100644 index 0000000000..52a34a5e41 --- /dev/null +++ b/archives/2023/05/index.html @@ -0,0 +1 @@ +归档:2023/5 - Volantis

Volantis

中文创作者社区

Hexo Volantis Snippets的vscode扩展

本篇文章适用于vscode+hexo+volantis的博客,快速向文章内插入标签,提升写文章的速度

\ No newline at end of file diff --git a/archives/2023/09/index.html b/archives/2023/09/index.html new file mode 100644 index 0000000000..20b0e3827f --- /dev/null +++ b/archives/2023/09/index.html @@ -0,0 +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 diff --git a/archives/2023/10/index.html b/archives/2023/10/index.html new file mode 100644 index 0000000000..13ff16d81e --- /dev/null +++ b/archives/2023/10/index.html @@ -0,0 +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 diff --git a/archives/2023/11/index.html b/archives/2023/11/index.html new file mode 100644 index 0000000000..4c3eef713f --- /dev/null +++ b/archives/2023/11/index.html @@ -0,0 +1 @@ +归档:2023/11 - Volantis

Volantis

中文创作者社区

免费通过NS1利用监控宝平台实现实时基于不同运营商的故障转移

本教程用到的资源全部都是免费且可持续使用的。NS1.com这个权威DNS服务器能根据ASN、国家或省份、DNS轮询(可加权)等方式解析域名,并且提供了API去控制某个解析(answer)是否响应。监控宝能实时监控网站(通过HTTP、PING、DNS方式等)并输出警告(webhook、Email、短信等),最高监控频率为2分钟。亚马逊的AWS Lambda是一个FaaS平台(serverless),可以作为连接NS1.com和监控宝之间的桥梁,当监控宝检测到网站速度变慢的时候发送信息到AWS Lambda,AWS Lambda得到信息后再传递给NS1.com,速度恢复的时候也是同样的操作。为什么要夹在一个AWS Lambda呢?这是因为监控宝发送的格式是固定的,并不能直接接入到NS1.com。

\ No newline at end of file diff --git a/archives/2023/index.html b/archives/2023/index.html new file mode 100644 index 0000000000..a953003472 --- /dev/null +++ b/archives/2023/index.html @@ -0,0 +1 @@ +归档:2023 - Volantis

Volantis

中文创作者社区

免费通过NS1利用监控宝平台实现实时基于不同运营商的故障转移

本教程用到的资源全部都是免费且可持续使用的。NS1.com这个权威DNS服务器能根据ASN、国家或省份、DNS轮询(可加权)等方式解析域名,并且提供了API去控制某个解析(answer)是否响应。监控宝能实时监控网站(通过HTTP、PING、DNS方式等)并输出警告(webhook、Email、短信等),最高监控频率为2分钟。亚马逊的AWS Lambda是一个FaaS平台(serverless),可以作为连接NS1.com和监控宝之间的桥梁,当监控宝检测到网站速度变慢的时候发送信息到AWS Lambda,AWS Lambda得到信息后再传递给NS1.com,速度恢复的时候也是同样的操作。为什么要夹在一个AWS Lambda呢?这是因为监控宝发送的格式是固定的,并不能直接接入到NS1.com。

由于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主题)。

Hexo Volantis Snippets的vscode扩展

本篇文章适用于vscode+hexo+volantis的博客,快速向文章内插入标签,提升写文章的速度

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

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

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

部分内容非Volantis主题也适用

\ No newline at end of file diff --git a/archives/2024/03/index.html b/archives/2024/03/index.html new file mode 100644 index 0000000000..4d6485beb5 --- /dev/null +++ b/archives/2024/03/index.html @@ -0,0 +1 @@ +归档:2024/3 - Volantis

Volantis

中文创作者社区

  • 如果你的网站部署在vercel,则把cname记录改为:
    • vercel-cname.xingpingcn.top
  • 如果你的网站部署在netlify,则把cname记录改为:
    • netlify-cname.xingpingcn.top
  • 如果你的网站部署在netlifyvercel上,则把cname记录改为:
    • verlify-cname.xingpingcn.top
      • 使用此dns解析建议:先把cname记录改为官方提供的url,等ssl/tls证书生成之后再把cname记录改为verlify-cname.xingpingcn.top
\ No newline at end of file diff --git a/archives/2024/index.html b/archives/2024/index.html new file mode 100644 index 0000000000..dfdc1b8c6e --- /dev/null +++ b/archives/2024/index.html @@ -0,0 +1 @@ +归档:2024 - Volantis

Volantis

中文创作者社区

  • 如果你的网站部署在vercel,则把cname记录改为:
    • vercel-cname.xingpingcn.top
  • 如果你的网站部署在netlify,则把cname记录改为:
    • netlify-cname.xingpingcn.top
  • 如果你的网站部署在netlifyvercel上,则把cname记录改为:
    • verlify-cname.xingpingcn.top
      • 使用此dns解析建议:先把cname记录改为官方提供的url,等ssl/tls证书生成之后再把cname记录改为verlify-cname.xingpingcn.top
\ No newline at end of file diff --git a/archives/index.html b/archives/index.html index 0712b08618..ff0fd5f9a7 100644 --- a/archives/index.html +++ b/archives/index.html @@ -1 +1 @@ -归档 - Volantis

Volantis

中文创作者社区

2021

2020

2019

2018

2017

2013

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

Volantis

中文创作者社区

2024

2023

2022

2021

2020

2019

2018

2017

2013

\ No newline at end of file diff --git a/archives/page/2/index.html b/archives/page/2/index.html index 0712b08618..3d1446cc49 100644 --- a/archives/page/2/index.html +++ b/archives/page/2/index.html @@ -1 +1 @@ -归档 - Volantis

Volantis

中文创作者社区

2021

2020

2019

2018

2017

2013

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

Volantis

中文创作者社区

2024

2023

2022

2021

2020

2019

2018

2017

2013

\ No newline at end of file diff --git a/archives/page/3/index.html b/archives/page/3/index.html index 0712b08618..aa3425127e 100644 --- a/archives/page/3/index.html +++ b/archives/page/3/index.html @@ -1 +1 @@ -归档 - Volantis

Volantis

中文创作者社区

2021

2020

2019

2018

2017

2013

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

Volantis

中文创作者社区

2024

2023

2022

2021

2020

2019

2018

2017

2013

\ No newline at end of file diff --git a/archives/page/4/index.html b/archives/page/4/index.html index 0712b08618..c609a70315 100644 --- a/archives/page/4/index.html +++ b/archives/page/4/index.html @@ -1 +1 @@ -归档 - Volantis

Volantis

中文创作者社区

2021

2020

2019

2018

2017

2013

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

Volantis

中文创作者社区

2024

2023

2022

2021

2020

2019

2018

2017

2013

\ No newline at end of file diff --git a/archives/page/5/index.html b/archives/page/5/index.html index 0712b08618..7c74c7223b 100644 --- a/archives/page/5/index.html +++ b/archives/page/5/index.html @@ -1 +1 @@ -归档 - Volantis

Volantis

中文创作者社区

2021

2020

2019

2018

2017

2013

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

Volantis

中文创作者社区

2024

2023

2022

2021

2020

2019

2018

2017

2013

\ No newline at end of file diff --git a/archives/page/6/index.html b/archives/page/6/index.html new file mode 100644 index 0000000000..36c3b755f0 --- /dev/null +++ b/archives/page/6/index.html @@ -0,0 +1 @@ +归档 - Volantis

Volantis

中文创作者社区

2024

2023

2022

2021

2020

2019

2018

2017

2013

\ No newline at end of file diff --git a/atom.xml b/atom.xml index 7836647b63..04d4a23a86 100644 --- a/atom.xml +++ b/atom.xml @@ -6,7 +6,7 @@ - 2021-04-18T00:00:00.000Z + 2024-03-28T06:49:35.000Z https://volantis.js.org/ @@ -17,175 +17,183 @@ Hexo - 使用 pandoc 正确渲染多行 MathJax 公式 - - https://volantis.js.org/blogs/2021-4-18-pandoc-renderer/ - 2021-04-18T00:00:00.000Z - 2021-04-18T00:00:00.000Z + 提升部署在vercel或netlify的网站在中国的访问速度和稳定性 + + https://volantis.js.org/blogs/2024-03-15-enhanced-FaaS-in-cn/ + 2024-03-15T00:00:00.000Z + 2024-03-28T06:49:35.000Z +

enhanced-FaaS-in-China

https://github.com/xingpingcn/enhanced-FaaS-in-China

  • 如果你的网站部署在vercel,则把cname记录改为:
    • vercel-cname.xingpingcn.top
  • 如果你的网站部署在netlify,则把cname记录改为:
    • netlify-cname.xingpingcn.top
  • 如果你的网站部署在netlifyvercel上,则把cname记录改为:
    • verlify-cname.xingpingcn.top
      • 使用此dns解析建议:先把cname记录改为官方提供的url,等ssl/tls证书生成之后再把cname记录改为verlify-cname.xingpingcn.top
]]>
- 关于更换 Markdown 渲染器以正确渲染 MathJax 公式的一些考据 + 通过更改cname提升部署在vercel或netlify的网站在中国的访问速度和稳定性 -
- 为volantis添加瀑布流相册 - - https://volantis.js.org/blogs/2021-4-14-photos/ - 2021-04-14T00:00:00.000Z - 2021-05-17T08:08:37.075Z - - 经过折腾,目前相册功能可用了,就是还不支持分类和懒加载,等后续完善吧。

]]>
+ 免费通过NS1利用监控宝平台实现实时基于不同运营商的故障转移 + + https://volantis.js.org/blogs/2023-11-08-NS1-failover/ + 2023-11-18T00:00:00.000Z + 2024-03-28T06:49:35.000Z + 本教程用到的资源全部都是免费且可持续使用的。NS1.com这个权威DNS服务器能根据ASN、国家或省份、DNS轮询(可加权)等方式解析域名,并且提供了API去控制某个解析(answer)是否响应。监控宝能实时监控网站(通过HTTP、PING、DNS方式等)并输出警告(webhook、Email、短信等),最高监控频率为2分钟。亚马逊的AWS Lambda是一个FaaS平台(serverless),可以作为连接NS1.com和监控宝之间的桥梁,当监控宝检测到网站速度变慢的时候发送信息到AWS Lambda,AWS Lambda得到信息后再传递给NS1.com,速度恢复的时候也是同样的操作。为什么要夹在一个AWS Lambda呢?这是因为监控宝发送的格式是固定的,并不能直接接入到NS1.com。

]]>
- <p>经过折腾,目前相册功能可用了,就是还不支持分类和懒加载,等后续完善吧。</p> + 免费利用NS1权威DNS服务器实时基于不同运营商故障转移,利用监控宝平台监控指定网站 -
- 为volantis添加hls.js以在Chrome上播放m3u8视频 - - https://volantis.js.org/blogs/2021-4-1-hls/ - 2021-04-01T00:00:00.000Z - 2021-05-17T08:08:37.075Z + 使用freecdn-js提高hexo博客的cdn稳定性 + + https://volantis.js.org/blogs/2023-10-01-enhanced-cdn/ + 2023-10-01T00:00:00.000Z + 2024-03-28T06:49:35.000Z - 在文章中插入m3u8视频的时候,由于Chrome等浏览器原生播放不了这种格式,所以需要添加hls.js等让其支持播放,如果你也遇到了这样的问题就来看看吧。

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

]]>
- <p>在文章中插入m3u8视频的时候,由于Chrome等浏览器原生播放不了这种格式,所以需要添加hls.js等让其支持播放,如果你也遇到了这样的问题就来看看吧。</p> - + 根据md文件内的cdn链接(图片等并不在本地)自动生成cdn列表,若图片、js、html等文件cdn失效则尝试连接列表内的其他cdn -
- volantis主题修改代码高亮样式 - - https://volantis.js.org/blogs/2021-3-31-highlightjs/ - 2021-03-31T00:00:00.000Z - 2021-05-17T08:08:37.075Z + 为hexo博客添加自适应图片占位图(配合lazyload) + + https://volantis.js.org/blogs/2023-09-03-lazyload/ + 2023-09-03T00:00:00.000Z + 2024-03-28T06:49:35.000Z - 在使用主题内的highlightjs的时候,你是否也遇到了它不换行、没有行号等问题?点进来看看吧。

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

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

]]>
- <p>在使用主题内的highlightjs的时候,你是否也遇到了它不换行、没有行号等问题?点进来看看吧。</p> + 为hexo博客解决图片抖动问题添加自适应图片占位图 - + + +
- 为volantis主题添加图片轮播和热门文章 - - https://volantis.js.org/blogs/2021-2-30-slider/ - 2021-03-30T00:00:00.000Z - 2021-05-17T08:08:37.075Z + Hexo Volantis Snippets的vscode扩展 + + https://volantis.js.org/blogs/2023-05-10-hexo-volantis-snippets/ + 2023-05-10T00:00:00.000Z + 2023-05-10T00:00:00.000Z - 这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的,由我将新的轮播模板迁移至主题内,由inkss大佬完善。在这感谢两位大佬,如果你也需要轮播插件,就进来看看吧。

]]>
+ - <p>这篇教程是基于heson大佬的这篇 <a href="https://www.heson10.com/posts/19736.html" target="_blank" rel="noopener external nofollow noreferrer">给Hexo Volantis主题添加图片轮播功能</a> 创作的,由我将新的轮播模板迁移至主题内,由inkss大佬完善。在这感谢两位大佬,如果你也需要轮播插件,就进来看看吧。</p> + 本篇文章适用于vscode+hexo+volantis的博客,快速向文章内插入标签,提升写文章的速度 - +
- 使用volantis更优雅地展示截图/录屏 - - https://volantis.js.org/blogs/2021-3-7-framei8/ - 2021-03-07T00:00:00.000Z - 2021-05-17T08:08:37.075Z + Aplayer采用本地音源 + + https://volantis.js.org/blogs/2023-1-18-LocalMusic/ + 2023-01-18T00:00:00.000Z + 2023-01-18T00:00:00.000Z - 我在主题文档中看到了frame标签,可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架,想要使用其他的框架就得对齐修改,我经过折腾基本实现了,写下了这篇文章。

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

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

]]>
- <p>我在主题文档中看到了frame标签,可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架,想要使用其他的框架就得对齐修改,我经过折腾基本实现了,写下了这篇文章。</p> + Aplayer改用本地音源 - +
- 为 hexo 博客支持 sweetalert 弹窗 - - https://volantis.js.org/blogs/2021-2-19-hexo-supports-sweetalert/ - 2021-02-19T00:00:00.000Z - 2021-02-19T00:00:00.000Z + Volantis魔改教程 + + https://volantis.js.org/blogs/2023-01-07-VolantisModify/ + 2023-01-07T00:00:00.000Z + 2023-01-17T00:00:00.000Z + 暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等

部分内容非Volantis主题也适用

]]>
+ 魔改大合集 - + + +
- 通过CoolPush实时推送hexo评论到QQ - - https://volantis.js.org/blogs/2020-12-17-comments-push/ - 2020-12-17T00:00:00.000Z - 2020-12-17T00:00:00.000Z + volantis使用php实现Gitee友链 + + https://volantis.js.org/blogs/2022-12-26-GiteeFriendsLink/ + 2022-12-26T00:00:00.000Z + 2022-12-26T00:00:00.000Z + + 添加Gitee动态友链 + - + + - 哔哔!换个姿势在静态博客上发短博文(volantis适配版) - - https://volantis.js.org/blogs/2020-10-09-bb-on-volantis/ - 2020-10-09T00:00:00.000Z - 2020-10-09T00:00:00.000Z + 配置Volantis 主题遇到的问题和解决 + + https://volantis.js.org/blogs/2022-12-06-experience/ + 2022-12-06T00:00:00.000Z + 2022-12-06T00:00:00.000Z - 要在静态博客上发送短博文,不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk,已经有短博文的那种体验了,而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是:发文不是很方便,需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥,换个舒服的姿势》,顿时感觉爱了,这就是我梦寐以求发送短博文的姿势。

]]>
+ - <p>要在静态博客上发送短博文,不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk,已经有短博文的那种体验了,而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是:发文不是很方便,需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥,换个舒服的姿势》,顿时感觉爱了,这就是我梦寐以求发送短博文的姿势。</p> + 本篇文章记录了我对 Volantis 主题一路磕磕碰碰的个性化配置,希望为接下来要去配置的新手避个坑 - +
- Hexo 标签函数 list_tags 用法详解 - - https://volantis.js.org/blogs/2020-09-24-list-tags/ - 2020-09-24T00:00:00.000Z - 2020-09-24T00:00:00.000Z + volantis新版暗黑模式动画 + + https://volantis.js.org/blogs/2022-08-18-darkmode-new/ + 2022-08-18T00:00:00.000Z + 2022-08-18T00:00:00.000Z + + - 对官方文档标签文档的一个补充,以volantis主题标签调用为例,展示不同用法下的标签示例。 + 为暗黑模式的切换增加动画 @@ -195,13 +203,27 @@ - 如何给博客添加弹窗通知 - - https://volantis.js.org/blogs/2020-09-03-message-prompt/ - 2020-09-03T00:00:00.000Z - 2020-09-04T00:00:00.000Z + 好看的网盘链接 + + https://volantis.js.org/blogs/2022-07-09-pandownjs/ + 2022-05-05T12:00:00.000Z + 2024-03-28T06:49:35.000Z + + 这不是Node.js包!

这是个javascript的小工具?

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

]]>
+ <p><strong>这不是Node.js包!</strong></p> +<p><strong>这是个javascript的小工具?</strong></p> +<a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/Fgaoxing/pandown-js"><img src="https://github-readme-stats.xaoxuu.com/api/pin/?username=Fgaoxing&repo=pandown-js&show_owner=true"/></a> + +<p><del>↑↑↑和上次一样的开头↑↑↑</del></p> +<!-- +这一段会使返回主页的pjax失效。。 +<script pjax-data type="text/javascript" src="https://cdn.jsdelivr.net/gh/Fgaoxing/pandown-js/pandown.js"></script> +<pandown type="lz" url="123" pwd="1234" fname="啥都没有,我没放链接"></pandown> +<script pjax-data>pandown()</script> +--> + @@ -210,29 +232,37 @@
- 博客访问速度提升:最佳线路分流 - - https://volantis.js.org/blogs/2020-08-31-hexospeed/ - 2020-08-31T00:00:00.000Z - 2020-08-31T00:00:00.000Z + Volantis 多背景图的优化方案 + + https://volantis.js.org/blogs/2021-11-29-parallax/ + 2021-11-29T00:00:00.000Z + 2022-04-20T00:00:00.000Z + + 优化背景图较多时的网页加载速度 - + + + - 静态博客使用 Issues API 发布动态、友链、书签 - - https://volantis.js.org/blogs/2020-08-28-issue-api/ - 2020-08-28T00:00:00.000Z - 2020-08-28T00:00:00.000Z + 网站自定义字体及推荐 + + https://volantis.js.org/blogs/2021-09-02-inkss-font/ + 2021-09-02T00:00:00.000Z + 2024-03-28T06:49:35.000Z + +

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

Volantis 主题可直接参考使用。

]]>
- 由于发布 issue 的成本远远低于发布一次博客更新(即便是使用了持续集成),可以用 issue 来简化每个独立博客都必备的友链系统,也可以通过 issue 来快速发布动态资讯,弥补静态博客必须更新静态文件才能更新内容的缺点。此功能已经集成到了主题中,使用非常方便。 + <div class="note alien-monster cyan"><p>统计一下目前使用的自定义字体及调用。</p></div> + +<div class="note poo gray"><p>Volantis 主题可直接参考使用。</p></div> @@ -242,31 +272,35 @@
- 给 Volantis 主题调用 Valine 最新评论 - - https://volantis.js.org/blogs/2020-09-03-latest-comments/ - 2020-08-28T00:00:00.000Z - 2020-09-03T00:00:00.000Z + Volantis主题自定义-暗黑模式动画 + + https://volantis.js.org/blogs/2021-8-29-darkmode/ + 2021-08-25T00:00:00.000Z + 2021-08-25T00:00:00.000Z + - 给博客加上最新评论栏目。以 Volantis 主题为例,给侧边栏加上最新评论功能,实现整站调用。 + 为暗黑模式的切换增加动画 - + + - 给 Hexo Volantis 主题添加图片轮播功能 - - https://volantis.js.org/blogs/2020-08-21-main-banner/ - 2020-08-21T00:00:00.000Z - 2020-08-22T00:00:00.000Z + Volantis 主题个性化修改合集 + + https://volantis.js.org/blogs/2021-08-15-inkss-theme/ + 2021-08-15T00:00:00.000Z + 2021-08-15T00:00:00.000Z + + - 很多网站首页都会有图片轮播效果,给网站的首页加上图片轮播的效果,可以很好的起到广告的作用也可以起到推荐优秀内容的作用。来吧,下面是给 Volantis 主题加上首页图片轮播的效果。 + 记录了与 Volantis 主题相关的修改合集。 @@ -276,33 +310,35 @@ - 如何快速优雅地删除 Valine 的垃圾评论 - - https://volantis.js.org/blogs/2020-07-03-valine/ - 2020-07-03T00:00:00.000Z - 2021-05-17T08:08:37.075Z + 给博客添加捐赠小部件—sponsor-page + + https://volantis.js.org/blogs/2021-08-13-sponsor-page/ + 2021-08-13T00:00:00.000Z + 2021-08-13T00:00:00.000Z - Valine 评论由于可以匿名,发言成本低、质量低,使用 app 可以方便的删除垃圾评论。

操作演示

App 只支持数据存储于 LeanCloud 的评论系统。

App 登录前需要配置 AppID 和 AppKey,由于字符比较长,输入不方便,所以支持 URL Scheme 配置。将 URL 生成一个二维码,然后用手机扫码就可以打开 App 并自动配置好。

格式为:

valine://cfg/id=7yIoRlSmfX09vQCERsuWzFnx-MdYXbMMI&key=3zCL5GFePTUjwbqLop44QFbr&alias=测试项目

也可以把管理员用户的账号和密码配置上,扫码直接登录,但是注意不要泄露出去:

valine://cfg/id=7yIoRlSmfX09vQCERsuWzFnx-MdYXbMMI&key=3zCL5GFePTUjwbqLop44QFbr&alias=测试项目&user=me@xaoxuu.com&psw=q

注意:这个管理员用户并不是 LeanCloud 的账号,而是当前 Valine 数据库中的 _User 表中的一个用户,可以在 App 中注册,然后在 LeanCloud 上把注册的用户设置为管理员。

设置管理员的方法:在 _Role 表中新建一个 admin 角色,然后在 admin 角色的 users 列中点击 Relations 把自己刚注册的用户添加进去,这个用户就有了修改和删除评论数据的权限。

App 测试版地址

]]>
+ - <p>Valine 评论由于可以匿名,发言成本低、质量低,使用 app 可以方便的删除垃圾评论。</p> + sponsor-page 是一个开源的捐赠按钮样式,可以用于美化我们的博客。 - +
- Volantis 主题部署 Pjax - - https://volantis.js.org/blogs/2020-05-17-pjax/ - 2020-05-17T00:00:00.000Z - 2020-08-07T00:00:00.000Z + 使用 pandoc 正确渲染多行 MathJax 公式 + + https://volantis.js.org/blogs/2021-4-18-pandoc-renderer/ + 2021-04-18T00:00:00.000Z + 2021-04-18T00:00:00.000Z + - 本篇文章记录了我对 Volantis 主题做 Pjax 兼容的种种,大抵算是种记录吧~ + + 关于更换 Markdown 渲染器以正确渲染 MathJax 公式的一些考据 @@ -312,72 +348,58 @@ - 关于主题与文档的更新 - - https://volantis.js.org/news/2020-04-04/ - 2020-04-04T00:00:00.000Z - 2021-05-17T08:08:37.075Z + 为volantis添加瀑布流相册 + + https://volantis.js.org/blogs/2021-4-14-photos/ + 2021-04-14T00:00:00.000Z + 2024-03-28T06:49:35.000Z - 由于主题目前仍处于青少年阶段,更新迭代速度比较快,所以不会保留旧版本的文档,如果需要查看旧版本的文档,请下载主题文档的源码,回退到旧版本,本地运行查看。

  • 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时,即最终会同时维护3个大版本的文档。
  • 当主题稳定后会提供英文文档。
]]>
+ 经过折腾,目前相册功能可用了,就是还不支持分类和懒加载,等后续完善吧。

]]>
- <p>由于主题目前仍处于青少年阶段,更新迭代速度比较快,所以不会保留旧版本的文档,如果需要查看旧版本的文档,请下载主题文档的源码,回退到旧版本,本地运行查看。</p> -<ul> -<li>计划 <code>2.x</code> 的最后一个版本的文档会保留至 <code>5.0</code> 发布时,即最终会同时维护3个大版本的文档。</li> -<li>当主题稳定后会提供英文文档。</li> -</ul> + <p>经过折腾,目前相册功能可用了,就是还不支持分类和懒加载,等后续完善吧。</p> - +
- 新版本「2.0」正式版发布 - - https://volantis.js.org/news/2020-03-10-2.0/ - 2020-03-10T00:00:00.000Z - 2021-05-17T08:08:37.075Z + 为volantis添加hls.js以在Chrome上播放m3u8视频 + + https://volantis.js.org/blogs/2021-4-1-hls/ + 2021-04-01T00:00:00.000Z + 2024-03-28T06:49:35.000Z - 本次更新内容非常多,主要升级了导航栏、使用新的语言重写了全部样式。旧版本 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.4css文件体积缩小了19.75%

主题配置文件

  • 主题配置文件经过了较大改动,使得层级结构更加清晰。
  • 优化了二维码(微信)分享的使用体验
]]>
+ 在文章中插入m3u8视频的时候,由于Chrome等浏览器原生播放不了这种格式,所以需要添加hls.js等让其支持播放,如果你也遇到了这样的问题就来看看吧。

]]>
- <p>本次更新内容非常多,主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户,请您卸载掉旧的样式渲染插件,并安装新的:</p> -<ol> -<li><p>卸载 <code>less</code></p> -<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">npm uninstall hexo-renderer-less --save</span><br></pre></td></tr></table></figure></li> -<li><p>安装 <code>stylus</code></p> -<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">npm install hexo-renderer-stylus --save</span><br></pre></td></tr></table></figure></li> -</ol> + <p>在文章中插入m3u8视频的时候,由于Chrome等浏览器原生播放不了这种格式,所以需要添加hls.js等让其支持播放,如果你也遇到了这样的问题就来看看吧。</p> - +
- 新版本「2.0」测试版发布 - - https://volantis.js.org/news/2020-03-06-2.0-beta/ - 2020-03-06T19:43:00.000Z - 2021-05-17T08:08:37.075Z + volantis主题修改代码高亮样式 + + https://volantis.js.org/blogs/2021-3-31-highlightjs/ + 2021-03-31T00:00:00.000Z + 2024-03-28T06:49:35.000Z - 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

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

]]>
- <details open><summary> Beta6 </summary> - <div class='content'> - <ul><li><input checked="" disabled="" type="checkbox"> 导航栏N级菜单支持分割线和小标题,详见我的个人博客。</li></ul> - </div> - </details> + <p>在使用主题内的highlightjs的时候,你是否也遇到了它不换行、没有行号等问题?点进来看看吧。</p> - +
diff --git a/blog/categories/index.html b/blog/categories/index.html index 7ead9a3a56..394df9eb72 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 7b5da89f76..83bef21567 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 new file mode 100644 index 0000000000..55254de6fd --- /dev/null +++ b/blogs/2020-05-17-inkss-pjax/index.html @@ -0,0 +1 @@ +Volantis 主题部署 Pjax - Volantis
\ No newline at end of file diff --git a/blogs/2020-05-17-pjax/index.html b/blogs/2020-05-17-pjax/index.html deleted file mode 100644 index 38592f0951..0000000000 --- a/blogs/2020-05-17-pjax/index.html +++ /dev/null @@ -1 +0,0 @@ -Volantis 主题部署 Pjax - Volantis
\ No newline at end of file diff --git a/blogs/2020-07-03-valine/index.html b/blogs/2020-07-03-valine/index.html deleted file mode 100644 index 6ec38cb535..0000000000 --- a/blogs/2020-07-03-valine/index.html +++ /dev/null @@ -1 +0,0 @@ -如何快速优雅地删除 Valine 的垃圾评论 - Volantis

Valine 评论由于可以匿名,发言成本低、质量低,使用 app 可以方便的删除垃圾评论。

操作演示

App 只支持数据存储于 LeanCloud 的评论系统。

App 登录前需要配置 AppID 和 AppKey,由于字符比较长,输入不方便,所以支持 URL Scheme 配置。将 URL 生成一个二维码,然后用手机扫码就可以打开 App 并自动配置好。

格式为:

valine://cfg/id=7yIoRlSmfX09vQCERsuWzFnx-MdYXbMMI&key=3zCL5GFePTUjwbqLop44QFbr&alias=测试项目

也可以把管理员用户的账号和密码配置上,扫码直接登录,但是注意不要泄露出去:

valine://cfg/id=7yIoRlSmfX09vQCERsuWzFnx-MdYXbMMI&key=3zCL5GFePTUjwbqLop44QFbr&alias=测试项目&user=me@xaoxuu.com&psw=q

注意:这个管理员用户并不是 LeanCloud 的账号,而是当前 Valine 数据库中的 _User 表中的一个用户,可以在 App 中注册,然后在 LeanCloud 上把注册的用户设置为管理员。

设置管理员的方法:在 _Role 表中新建一个 admin 角色,然后在 admin 角色的 users 列中点击 Relations 把自己刚注册的用户添加进去,这个用户就有了修改和删除评论数据的权限。

App 测试版地址

评论

\ 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 0d492f77cb..0fb22a1923 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 c301bb2395..74d8d8bd0c 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 5030dbaf74..db147b8914 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-latest-comments/index.html b/blogs/2020-09-03-latest-comments/index.html deleted file mode 100644 index bb361cc297..0000000000 --- a/blogs/2020-09-03-latest-comments/index.html +++ /dev/null @@ -1 +0,0 @@ -给 Volantis 主题调用 Valine 最新评论 - 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 8aa9ef37fa..89e6cba987 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 37dfb89e54..74fe82bf79 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 2386f7eb77..cea73827d1 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

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

评论

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

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

评论

\ 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 9fa5c15459..82f06ce1f1 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 new file mode 100644 index 0000000000..8ec31720a7 --- /dev/null +++ b/blogs/2021-08-13-sponsor-page/index.html @@ -0,0 +1 @@ +给博客添加捐赠小部件—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 new file mode 100644 index 0000000000..70634e2f99 --- /dev/null +++ b/blogs/2021-08-15-inkss-theme/index.html @@ -0,0 +1 @@ +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 new file mode 100644 index 0000000000..2a64a24514 --- /dev/null +++ b/blogs/2021-09-02-inkss-font/index.html @@ -0,0 +1,9 @@ +网站自定义字体及推荐 - Volantis

评论

\ No newline at end of file diff --git a/blogs/2021-11-29-parallax/index.html b/blogs/2021-11-29-parallax/index.html new file mode 100644 index 0000000000..539c9a56d3 --- /dev/null +++ b/blogs/2021-11-29-parallax/index.html @@ -0,0 +1 @@ +Volantis 多背景图的优化方案 - Volantis
\ No newline at end of file diff --git a/blogs/2021-2-19-hexo-supports-sweetalert/index.html b/blogs/2021-2-19-hexo-supports-sweetalert/index.html deleted file mode 100644 index 56cc6db20b..0000000000 --- a/blogs/2021-2-19-hexo-supports-sweetalert/index.html +++ /dev/null @@ -1 +0,0 @@ -为 hexo 博客支持 sweetalert 弹窗 - 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 0c00d85baa..48f0b2355e 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 4812ae60ce..7731eb0cdf 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 035cc10882..d85fb13e05 100644 --- a/blogs/2021-3-7-framei8/index.html +++ b/blogs/2021-3-7-framei8/index.html @@ -1 +1 @@ -使用volantis更优雅地展示截图/录屏 - Volantis

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

评论

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

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

评论

\ 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 c1c06ea01a..717db71fd4 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

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

评论

\ 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 aa4d38531a..bae83f62c1 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 40ced9a845..e4b0c23a65 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 new file mode 100644 index 0000000000..7b107b5203 --- /dev/null +++ b/blogs/2021-8-29-darkmode/index.html @@ -0,0 +1 @@ +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 new file mode 100644 index 0000000000..cdf99dc068 --- /dev/null +++ b/blogs/2022-07-09-pandownjs/index.html @@ -0,0 +1,18 @@ +好看的网盘链接 - Volantis

评论

\ 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 new file mode 100644 index 0000000000..cf8ccabf48 --- /dev/null +++ b/blogs/2022-08-18-darkmode-new/index.html @@ -0,0 +1 @@ +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 new file mode 100644 index 0000000000..1944499062 --- /dev/null +++ b/blogs/2022-12-06-experience/index.html @@ -0,0 +1 @@ +配置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 new file mode 100644 index 0000000000..13d8e13f24 --- /dev/null +++ b/blogs/2022-12-26-GiteeFriendsLink/index.html @@ -0,0 +1 @@ +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 new file mode 100644 index 0000000000..b4e66a640f --- /dev/null +++ b/blogs/2023-01-07-VolantisModify/index.html @@ -0,0 +1,16 @@ +Volantis魔改教程 - Volantis

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

部分内容非Volantis主题也适用

评论

\ No newline at end of file diff --git a/blogs/2023-05-10-hexo-volantis-snippets/index.html b/blogs/2023-05-10-hexo-volantis-snippets/index.html new file mode 100644 index 0000000000..cacc0b8a1d --- /dev/null +++ b/blogs/2023-05-10-hexo-volantis-snippets/index.html @@ -0,0 +1 @@ +Hexo Volantis Snippets的vscode扩展 - Volantis
\ No newline at end of file diff --git a/blogs/2023-09-03-lazyload/index.html b/blogs/2023-09-03-lazyload/index.html new file mode 100644 index 0000000000..2a94a1baf6 --- /dev/null +++ b/blogs/2023-09-03-lazyload/index.html @@ -0,0 +1,4 @@ +为hexo博客添加自适应图片占位图(配合lazyload) - Volantis

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

由于博客采用了图片懒加载(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/blogs/2023-1-18-LocalMusic/index.html b/blogs/2023-1-18-LocalMusic/index.html new file mode 100644 index 0000000000..48d1c7203d --- /dev/null +++ b/blogs/2023-1-18-LocalMusic/index.html @@ -0,0 +1,4 @@ +Aplayer采用本地音源 - Volantis

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

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

评论

\ 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 new file mode 100644 index 0000000000..d2fd6173a0 --- /dev/null +++ b/blogs/2023-10-01-enhanced-cdn/index.html @@ -0,0 +1 @@ +使用freecdn-js提高hexo博客的cdn稳定性 - 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/blogs/2023-11-08-NS1-failover/index.html b/blogs/2023-11-08-NS1-failover/index.html new file mode 100644 index 0000000000..50bd98f02d --- /dev/null +++ b/blogs/2023-11-08-NS1-failover/index.html @@ -0,0 +1 @@ +免费通过NS1利用监控宝平台实现实时基于不同运营商的故障转移 - Volantis

本教程用到的资源全部都是免费且可持续使用的。NS1.com这个权威DNS服务器能根据ASN、国家或省份、DNS轮询(可加权)等方式解析域名,并且提供了API去控制某个解析(answer)是否响应。监控宝能实时监控网站(通过HTTP、PING、DNS方式等)并输出警告(webhook、Email、短信等),最高监控频率为2分钟。亚马逊的AWS Lambda是一个FaaS平台(serverless),可以作为连接NS1.com和监控宝之间的桥梁,当监控宝检测到网站速度变慢的时候发送信息到AWS Lambda,AWS Lambda得到信息后再传递给NS1.com,速度恢复的时候也是同样的操作。为什么要夹在一个AWS Lambda呢?这是因为监控宝发送的格式是固定的,并不能直接接入到NS1.com。

评论

\ No newline at end of file diff --git a/blogs/2024-03-15-enhanced-FaaS-in-cn/index.html b/blogs/2024-03-15-enhanced-FaaS-in-cn/index.html new file mode 100644 index 0000000000..271d27e93f --- /dev/null +++ b/blogs/2024-03-15-enhanced-FaaS-in-cn/index.html @@ -0,0 +1,40 @@ +提升部署在vercel或netlify的网站在中国的访问速度和稳定性 - Volantis
  • 如果你的网站部署在vercel,则把cname记录改为:
    • vercel-cname.xingpingcn.top
  • 如果你的网站部署在netlify,则把cname记录改为:
    • netlify-cname.xingpingcn.top
  • 如果你的网站部署在netlifyvercel上,则把cname记录改为:
    • verlify-cname.xingpingcn.top
      • 使用此dns解析建议:先把cname记录改为官方提供的url,等ssl/tls证书生成之后再把cname记录改为verlify-cname.xingpingcn.top

评论

\ 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" new file mode 100644 index 0000000000..3ffe76f9fd --- /dev/null +++ "b/categories/hexo\346\212\230\350\205\276/index.html" @@ -0,0 +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 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 6d8ff91b8f..2929f321ec 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个大版本的文档。
  • 当主题稳定后会提供英文文档。

新版本「2.0」正式版发布

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

  1. 卸载 less

    npm uninstall hexo-renderer-less --save
  2. 安装 stylus

    npm install hexo-renderer-stylus --save

新版本「2.0」测试版发布

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

新增 pjax 开发分支

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

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

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

官方资讯

主题更名为「Volantis」

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

官方资讯

主题文档网页更新并开源

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

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

官方资讯

已关闭评论区

使用 GitHub Issue

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

遇到问题怎么办

  1. 确定已经查阅文档找不到相关内容。
  2. 前往「常见问题」页面,查看是否有解决方案。
  3. 访问在线示例,查看是否具有相同第问题。
    1. 如果在线示例表示正常,则说明自己配置有误,检查开发环境、主题配置是否正确。如果检查不出问题,提Issue询问。
    1. 如果在线示例也存在相同问题,则说明存在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 15b75c9ef6..7df8f47494 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

使用 pandoc 正确渲染多行 MathJax 公式

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

Hexo 标签函数 list_tags 用法详解 || 'image'

Hexo 标签函数 list_tags 用法详解

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

Volantis 主题部署 Pjax

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

\ No newline at end of file +分类:开发心得 - Volantis
Hexo Volantis Snippets的vscode扩展

本篇文章适用于vscode+hexo+volantis的博客,快速向文章内插入标签,提升写文章的速度

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

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

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

部分内容非Volantis主题也适用

添加Gitee动态友链

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

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

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

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

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

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

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


\ 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" new file mode 100644 index 0000000000..31e0f4e3a0 --- /dev/null +++ "b/categories/\345\274\200\345\217\221\345\277\203\345\276\227/page/2/index.html" @@ -0,0 +1 @@ +分类:开发心得 - Volantis
Hexo 标签函数 list_tags 用法详解

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

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


\ 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 2af506d529..a4e5e86327 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

为volantis添加瀑布流相册

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

为volantis添加hls.js以在Chrome上播放m3u8视频

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

volantis主题修改代码高亮样式

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

为volantis主题添加图片轮播和热门文章

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

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

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

为 hexo 博客支持 sweetalert 弹窗 || 'image'

为 hexo 博客支持 sweetalert 弹窗

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

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

哔哔!换个姿势在静态博客上发短博文(volantis适配版) || 'image'

哔哔!换个姿势在静态博客上发短博文(volantis适配版)

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

如何给博客添加弹窗通知 || 'image'

如何给博客添加弹窗通知

博客访问速度提升:最佳线路分流 || 'image'

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


\ 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、图片、音乐等等功能。感觉唯一的缺点就是:发文不是很方便,需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥,换个舒服的姿势》,顿时感觉爱了,这就是我梦寐以求发送短博文的姿势。


\ 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 7635e17380..38447ac174 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
给 Volantis 主题调用 Valine 最新评论 || 'image'

给 Volantis 主题调用 Valine 最新评论

给博客加上最新评论栏目。以 Volantis 主题为例,给侧边栏加上最新评论功能,实现整站调用。

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

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

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

给 Hexo Volantis 主题添加图片轮播功能

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

如何快速优雅地删除 Valine 的垃圾评论

Valine 评论由于可以匿名,发言成本低、质量低,使用 app 可以方便的删除垃圾评论。


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

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

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

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

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


\ No newline at end of file diff --git a/content.json b/content.json index 05091e3060..dd6c8408a8 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":"2021-05-17T08:08:37.075Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"404.html","permalink":"https://volantis.js.org/404","excerpt":"","text":"404 很抱歉,您访问的页面不存在 可能是输入地址有误或该地址已被删除"},{"title":"鸣谢项目和社区贡献者","date":"2021-05-17T08:08:37.075Z","updated":"2021-05-17T08:08:37.075Z","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 4.x 已是已知的 Hexo 主题中文档最全面的,但仍有部分功能缺少明确的文档、部分文档已经过时,如果您发现了遗漏或者错误之处,我们非常希望您能够帮忙完善一下。 Volantis 官网支持 CI ,您可以直接在线编辑源码: 在线编辑文档https://github.com/volantis-x/community/tree/master/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://archive.vn/U36NG # 将页面存档到 archive.tody 网页快照档案馆的存档链接 https://archive.tody--- 如果这篇文章的作者是第一次出现在官网,还需要在 _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/master/source/_posts/blogs"},{"title":"","date":"2021-05-17T08:08:37.075Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"examples/index.html","permalink":"https://volantis.js.org/examples/","excerpt":"示 例 博 客 社区维护团队的博客MHuiG划水Colsrch开发者inkss摸鱼W4J1e打杂volantis-x.js.orgTest Site For Development 使用 Volantis 的博客示例","text":"示 例 博 客 社区维护团队的博客MHuiG划水Colsrch开发者inkss摸鱼W4J1e打杂volantis-x.js.orgTest Site For Development 使用 Volantis 的博客示例 如何添加自己的博客链接 第一步:新建 Issue 按照格式填写并提交 { "title": "", "description": "", "screenshot": "", "url": "", "avatar": "", "version": "版本:^4.0"}为了提高图片加载速度,建议优化图片尺寸:打开 压缩图 上传自己的截图,将图片的高度调整到 360px 后下载。将压缩后的图片上传到 去不图床 并使用此图片链接作为截图链接。 第二步:刷新 回来刷新即可生效。 如何更新自己的博客链接 如果是自己创建的 issue ,可以自己修改。 如果是管理员创建的,请自己重新创建一份,然后让管理员删掉旧的。"},{"title":"常见问题与反馈渠道","date":"2021-05-17T08:08:37.075Z","updated":"2021-05-17T08:08:37.075Z","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#%E8%A6%86%E7%9B%96%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE也可以直接查看本站源码中站点配置文件的写法:_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 官方文档 | Valine 官方文档请一定要阅读官方文档! 可供交流的渠道解决问题 渠道 方式 用途 Issues @volantis-x/hexo-theme-volantis 和开发者沟通的唯一渠道,用于跟进和解决问题 请不要发送邮件开源项目的开发者很反感别人不通过正确的途径如 Issues 而是通过私人邮件询问开源项目问题,所以一般不会回复此类邮件。 交流 渠道 方式 用途 论坛 @volantis-x/discussions 慢,相对正式,方便检索,可以给其他用户参考 QQ群 1146399464 (验证码: vlts-2021) 非正式,即时通讯,易于斗图;不利于给其他用户参考 佛系互动 渠道 方式 用途 评论区 留言 可以测试、灌水、推广自己的博客。"},{"title":"文章分类","date":"2021-05-17T08:08:37.075Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"blog/categories/index.html","permalink":"https://volantis.js.org/blog/categories/","excerpt":"","text":""},{"title":"所有标签","date":"2021-05-17T08:08:37.075Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"blog/tags/index.html","permalink":"https://volantis.js.org/blog/tags/","excerpt":"","text":""},{"title":"进阶设定","date":"2021-05-17T08:08:37.075Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"v2/advanced-settings/index.html","permalink":"https://volantis.js.org/v2/advanced-settings/","excerpt":"","text":"建议有一定基础知识的朋友进行尝试。 将主题添加为子模块 git submodule add https://github.com/volantis-x/hexo-theme-volantis themes/volantis 为网站提速加载速度 尝试安装 hexo-all-minifier 插件来压缩文件。 减少不必要的 js 插件,例如字数统计、动态背景。 查找并解决拖慢速度的资源,以 Chrome 浏览器为例: 页面中点击右键,选择「检查」。 在右边的窗口中「Network」选项卡,并勾选「Disable cache」。 刷新网页,查看加载速度慢的资源。 加载缓慢的图片,建议使用 CDN。 加载缓慢的可以不用的 js 插件,建议舍弃。 加载缓慢却必须使用的 js 插件,建议下载并自己上传至 jsdelivr。 运行速度 访问具有动态特效背景(如雪花、粒子等)的网站时,手机很快会发烫变卡,笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。 强烈推荐安装 hexo-offline 插件,初次加载速度不变,后期切换页面和刷新网页速度越来越快。 推荐安装图片懒加载插件 hexo-lazyload-image(需同时安装 hexo-fs 依赖库)。 优化 SEO在 front-matter 中,可以设置 keywords、description、robots 和 seo_title。其中 seo_title 仅仅用作网页标题,优先级高于 title。 文章内部不要使用 H1 标题。 通过死链检测工具检查并删除无法访问的链接。 安装 SEO 优化插件: hexo-autonofollow hexo-generator-seo-friendly-sitemap 页面不要堆砌关键词,不要频繁更改路径。 使用 CDN对于大部分将博客 deploy 到 GitHub 的用户来说,直接加载本地资源速度比较慢,可以使用 jsdelivr 为开源项目提供的 CDN 服务。 开启方法blog/_config.ymluse_cdn: true 如果你需要对样式进行 DIY,可以只关闭 style 文件的 CDN。 自定义 CDN如果你把对应的文件上传到自己的 CDN 服务器,可以把对应的链接改为自己的 CDN 链接。 安装「相关文章」插件 安装插件 npm i -S hexo-related-popular-posts 在需要显示的位置添加 related_posts 例如放在侧边栏: blog/themes/volantis/_config.ymllayout: on_page: sidebar: [related_posts] 插件的自定义配置方法: hexo-related-popular-posts 分析与统计默认支持 不蒜子 的访问统计,可以自行添加百度统计和 Google Analytics。 字数和阅读时长 安装以下插件:npm i --save hexo-wordcount 修改配置文件,将 wordcount 插件打开blog/themes/volantis/_config.ymlplugins: ... # 文章字数统计、阅读时长,开启需要安装插件: npm i --save hexo-wordcount wordcount: true 然后修改配置文件,将 wordcount 写入需要显示的 meta 位置:blog/themes/volantis/_config.yml# 布局layout: on_list: meta: [..., wordcount, ...] on_page: meta: header: [..., wordcount, ...] footer: [..., wordcount, ...] 百度统计blog/_config.ymlbaidu_analytics_key: 百度统计的key Google Analyticsblog/_config.ymlgoogle_analytics_key: Google Analytics Key CNZZ 统计请参考 ZYMIN 的这篇教程:《hexo+ejs+material x 添加CNZZ统计代码》 网站运行时间等请参考 TRHX 的这篇教程:《Hexo 博客主题个性化》 更多 DIY 玩法详见 @TRHX 的这篇博客:《Hexo 博客主题个性化》 内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。"},{"title":"开始使用","date":"2021-05-17T08:08:37.075Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"v2/getting-started/index.html","permalink":"https://volantis.js.org/v2/getting-started/","excerpt":"","text":" Volantis2 A Wonderful Theme for Hexo Volantis,一个高度模块化和可定制化、功能相对完善的 Hexo 博客主题,既可以用作个人博客,也适合用来搭建文档。 这些是使用了本主题的博客: 示例博客 能力要求自建博客需要一定的相关知识,在开始前,请务必确保: 已掌握 markdown 语法 已阅读 Hexo 官方文档 会使用终端(命令行),会使用 git 会阅读文档、搜索文档 为了更好地使用,还建议掌握以下知识: 规范地使用 GitHub Issues(解决文档中没有的问题) GitHub Fork、Pull Request 操作(使主题保持更新) 环境要求如果您从旧版本更新或着其它主题迁移,请确保环境版本不要太低,否则会产生兼容性问题。 Hexo: 4.2hexo-cli: 3.1node.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.ymltheme: 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 全局搜索 seotitle 并替换为 seo_title。group 组件的索引规则有变,使用 group 组件的文章内,group: group_name 对应的组件名必须是 group_name。group 组件的列表名优先显示文章的 short_title 其次是 title。 许可协议本主题采用 MIT开源许可协议 ,永久无限制免费使用。 MIT开源许可协议被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。被授权人可根据程式的需要修改授权条款为适当的内容。在软件和软件的所有副本中都必须包含版权声明和许可声明。"},{"title":"页面配置","date":"2021-05-17T08:08:37.075Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"v2/page-settings/index.html","permalink":"https://volantis.js.org/v2/page-settings/","excerpt":"","text":"如无特殊说明,本页面的配置信息写在 页面 文件的 front-matter 中。 布局模板 取值 含义 page 独立页面 post 文章页面 category 分类页面 tag 标签页面 links 友链页面 list 列表页面 page & postpost 页面布局几乎与 page 页面相同,但是有以下细微区别: post 文章有 title 时,向下滚动网页,导航栏会向上移出屏幕显出文章标题,而 page 不会。 主题配置中的 article_footer 只作用于 post,如果 page 也要显示,可以在 front-matter 中设置meta: article_footer: [xxx] front-matterfront-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量。更多请见 Hexo 官方文档:#front-matter 查看全部取值 字段含义值类型默认值layout布局模版String-title页面标题String-seo_title网页标题Stringpage.titleshort_title页面标题(在group列表中显示)Stringpage.titledate创建时间Date文件创建时间updated更新日期Date文件修改时间link外部文章网址String-music内部音乐控件[Object]-robotsrobotsString-keywords页面关键词String-description页面描述、摘要String-cover是否显示封面Booltruemeta文章或页面的meta信息Bool, Arraytheme.layout.*.metasidebar页面侧边栏Bool, Arraytheme.layout.*.sidebarbody页面主体元素Arraytheme.layout.on_page.bodymathjax是否渲染公式Bool, Stringfalsethumbnail缩略图Stringfalseicons图标Array[]layout:post 时特有的字段:字段含义值类型默认值author文章作者[Object]config.authorcategories分类String, Array-tags标签String, Array-toc是否生成目录Booltruetop是否置顶Boolfalseauthor字段含义值类型默认值name作者名Stringconfig.authoravatar头像Stringconfig.avatarurl链接Stringconfig.urlmusic字段是否必须值类型server是netease, tencent, kugou, xiami, baidutype是song, playlist, album, search, artistid是song id / playlist id / album id / search keyword 独立页面除了归档页面是自动生成的,其它独立页面都需要手动创建 md 文件。 归档页面归档页面是自动生成的,并且初始化的时候已经生成,路径如下: blog/_config.yml# Directoryarchive_dir: archives 关于页面Create file if not exists: source/about/index.md---layout: pagetitle: 关于meta: header: [] footer: []sidebar: []valine: 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: 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: pagetitle: 404 Not Foundbody: [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-mattertop: true 如果想自定义置顶标签的文字,可以直接设置为字符串,例如: front-mattertop: 近期更新 文章分类多个分类有两种关系,一种是层级(等同于文件夹),一种是并列(等同于标签)。 多级分类: 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 --> 前后一定要有空行,不然可能导致显示错位。 设置文章作者由于支持多个作者在一个站点发布文章,所以可以设置单独一篇文章的作者: 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: 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 来设置图标的颜色 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: postdate: 2017-07-05title: [转]如何搭建基于Hexo的独立博客categories: [Dev, Hexo]tags: - Hexoauthor: name: xaoxuu avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png url: https://xaoxuu.comlink: 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]---"},{"title":"站点配置","date":"2021-05-17T08:08:37.075Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"v2/site-settings/index.html","permalink":"https://volantis.js.org/v2/site-settings/","excerpt":"","text":"如无特殊说明,本页面的配置信息写在 博客根目录 的 _config.yml 文件中。 网站标题blog/_config.yml# 网站标题title: my blog 网站图标简单方式完全自定义blog/_config.yml# 网站图标,更多尺寸等图标请使用import方式批量导入favicon: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.icoblog/_config.ymlimport: meta: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico"> Import可以在无需修改主题文件的情况下在 head 和 body 中添加各种标签。meta 和 link 对应 head 中的 <meta> 和 <link> 标签。script 可以在 body 末尾导入 js 文件。 blog/_config.ymlimport: meta: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico"> script: 更多配置更多请见 Hexo 官方文档:#Hexo配置"},{"title":"进阶设定","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/advanced-settings/index.html","permalink":"https://volantis.js.org/v3/advanced-settings/","excerpt":"","text":"使用数据文件有时您可能需要在主题中使用某些资料,而这些资料并不在文章内,并且是需要重复使用的,那么您可以考虑使用 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.ymlsource/_data/menu.ymlsource/_data/widget.yml 设置子模块 将主题添加为子模块 git submodule add git@github.com:theme-volantis/hexo-theme-volantis themes/volantisorgit submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis 为网站提速加载速度 尝试安装 hexo-all-minifier 插件来压缩文件。 减少不必要的 js 插件,例如字数统计、动态背景。 查找并解决拖慢速度的资源,以 Chrome 浏览器为例: 页面中点击右键,选择「检查」。 在右边的窗口中「Network」选项卡,并勾选「Disable cache」。 刷新网页,查看加载速度慢的资源。 加载缓慢的图片,建议使用 CDN。 加载缓慢的可以不用的 js 插件,建议舍弃。 加载缓慢却必须使用的 js 插件,建议下载并自己上传至 jsdelivr。 运行速度 访问具有动态特效背景(如雪花、粒子等)的网站时,手机很快会发烫变卡,笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。 推荐安装图片懒加载插件 hexo-lazyload-image(需同时安装 hexo-fs 依赖库)。 优化 SEOblog/_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 页面不要堆砌关键词,不要频繁更改路径。 使用 CDN对于大部分将博客 deploy 到 GitHub 的用户来说,直接加载本地资源速度比较慢,可以使用 jsdelivr 为开源项目提供的 CDN 服务。 开启方法blog/_config.ymluse_cdn: true 如果你需要对样式进行 DIY,可以只关闭 style 文件的 CDN。 自定义 CDN如果你把对应的文件上传到自己的 CDN 服务器,可以把对应的链接改为自己的 CDN 链接。 安装「相关文章」插件 安装插件 npm i -S hexo-related-popular-posts 在需要显示的位置添加 related_posts 例如放在侧边栏: blog/_config.volantis.ymllayout: on_page: sidebar: [related_posts] 插件的自定义配置方法: hexo-related-popular-postshttps://github.com/tea3/hexo-related-popular-posts 分析与统计默认支持 不蒜子 的访问统计,可以自行添加百度统计和 Google Analytics。 字数和阅读时长 安装以下插件:npm i --save hexo-wordcount 修改配置文件,将 wordcount 插件打开blog/_config.volantis.ymlplugins: ... # 文章字数统计、阅读时长,开启需要安装插件: npm i --save hexo-wordcount wordcount: true 然后修改配置文件,将 wordcount 写入需要显示的 meta 位置:blog/_config.volantis.yml# 布局layout: on_list: meta: [..., wordcount, ...] on_page: meta: header: [..., wordcount, ...] footer: [..., wordcount, ...] 百度统计blog/_config.ymlbaidu_analytics_key: 百度统计的key Google Analyticsblog/_config.ymlgoogle_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/ 内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。"},{"title":"安装与版本更新","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/getting-started/index.html","permalink":"https://volantis.js.org/v3/getting-started/","excerpt":"","text":" Volantis3 A Wonderful Theme for Hexo 5 Volantis,一个高度模块化和可定制化、功能相对完善的 Hexo 博客主题,既可以用作个人博客,也适合用来搭建文档。 这些是使用了本主题的博客: 示例博客 能力要求 !!!自建博客需要一定的相关知识,在开始前,请务必确保: 已掌握 markdown 语法 已阅读 Hexo 官方文档 会使用终端(命令行),会使用 git 会阅读文档、搜索文档 为了更好地使用,还建议掌握以下知识: 会阅读源码,知道本站源码在哪里,会参照源码仿写、对比差异 规范地使用 GitHub Issues(解决文档中没有的问题) GitHub Fork、Pull Request 操作(使主题保持最新) 环境要求如果您从旧版本更新或着其它主题迁移,请确保环境版本不要太低,否则会产生兼容性问题。 Hexo: 4.2 ~ 5.xhexo-cli: 3.1 ~ 4.xnode.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 如果有 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 服务。欢迎补充 许可协议本主题采用 MIT开源许可协议 ,永久无限制免费使用。 MIT开源许可协议被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。被授权人可根据程式的需要修改授权条款为适当的内容。在软件和软件的所有副本中都必须包含版权声明和许可声明。"},{"title":"进阶设定","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v4/advanced-settings/index.html","permalink":"https://volantis.js.org/v4/advanced-settings/","excerpt":"","text":"设置子模块 将主题添加为子模块 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.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--- 为网站提速加载速度 减少不必要的 js 插件,例如字数统计、动态背景。 查找并解决拖慢速度的资源,以 Chrome 浏览器为例: 页面中点击右键,选择「检查」。 在右边的窗口中「Network」选项卡,并勾选「Disable cache」。 刷新网页,查看加载速度慢的资源。 加载缓慢的图片,建议使用 CDN。 加载缓慢的可以不用的 js 插件,建议舍弃。 加载缓慢却必须使用的 js 插件,建议下载并自己上传至 jsdelivr。 运行速度 访问具有动态特效背景(如雪花、粒子等)的网站时,手机很快会发烫变卡,笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。 优化 SEOblog/_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 页面不要堆砌关键词,不要频繁更改路径。 使用 CDN对于大部分将博客 deploy 到 GitHub 的用户来说,直接加载本地资源速度比较慢,可以使用 jsdelivr 为开源项目提供的 CDN 服务。 开启方法blog/_config.volantis.yml# use_cdn: /source/js/* 中的JS文件(JS Only)使用jsdelivr的min版本加速# 默认使用 https://cdn.jsdelivr.net/npm/hexo-theme-volantis@<%- theme.info.theme_version %>/source/js/*.min.js 的CDN压缩版本(min.js),注意版本号对应关系!!可以通过修改以下配置项覆盖# 开发者注意 use_cdn 设置为 falseuse_cdn: trueinfo: theme_version: 'x.x.x' # This is theme's version. cdn: js: # https://cdn.jsdelivr.net/npm/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 gulpnpm install --save-dev gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-terser gulp 配置文件blog/gulpfile.jsvar 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://cdn.jsdelivr.net/npm/workbox-cdn@5.1.3/workbox/workbox-sw.js');workbox.setConfig({ modulePathPrefix: 'https://cdn.jsdelivr.net/npm/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 enabledrouting.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 enabledrouting.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 })); 安装「相关文章」插件 安装插件 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 分析与统计默认支持 不蒜子 的访问统计,可以自行添加百度统计和 Google Analytics。 字数和阅读时长 安装以下插件: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, ...] 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/进阶玩法/"},{"title":"","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v4/getting-started/index.html","permalink":"https://volantis.js.org/v4/getting-started/","excerpt":"","text":" Volantis4 A Wonderful Theme for Hexo Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性,您可以轻松搭建一个极简风格的博客,也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。 示例博客https://volantis.js.org/examples/ 所有的 Volantis 用户都可以按照格式自行创建 Issue 来将自己的博客添加到官网的示例博客页面中。 准备工作能力条件环境配置条件自建博客需要一定的相关知识,在开始前,请务必确保您会使用 markdown 语法,掌握简单的 git 知识,最最重要的是,遇到困难知道该怎么寻求解决: 翻阅和搜索文档 搜索 issues 中是否有解决办法 新建 issue 并按照要求进行操作,详尽地描述您遇到的问题 如果您没有使用过 Hexo 也不要着急,可以先通读一遍 Hexo 中文文档,要想使用地得心应手,最好参照团队提供的开源项目的源码进行搭建: Demo 源码 | 官网源码如果您从旧版本更新或着其它主题迁移,请确保环境版本不要太低,否则会产生兼容性问题。 Hexo: 4.2 ~ 5.xhexo-cli: 3.1 ~ 4.xnode.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的小版本更新请点击上方更新日志按钮增加 disqusjs 评论系统;增加 waline 评论系统;增加 旧版 Internet Explorer 淘汰行动 ;增加 Tidio聊天功能;增加 twitoo waline valine minivaline 文章阅读量统计;增加 bbtalk.js;修复#514 #538 #567 #431 #468;修复关闭 pjax 时 cover样式失效 和 报错 的问题 。 2020-09-26 3.0.0 -> 4.0.0 4.0.0 的配置文件改动非常大,强烈建议不要在旧的配置文件上改。原数据文件中的配置项不再支持,请在配置文件中进行设置。主题配置文件进行了重新设计,需要「完全」重新配置一遍。友链使用数据文件,并支持 issues 标签实现动态自助友链。原 meta 自定义布局现在只支持文章内部的 top_meta 和 bottom_meta 。文章列表页面布局现在只能在有限范围内进行自定义。侧边栏组件现在只支持侧边栏位置;文章末尾有专用的组件。如果安装了懒加载插件,需要卸载掉,使用主题内置的懒加载(和插件冲突)。如果想要关闭评论,需要改为 comments: false 。如果要隐藏文章顶部或者底部的 meta 标签,需设置 top_meta: false 或者 bottom_meta: false 。如果需要同时隐藏标题和顶部的 meta 标签也可以把 title: xxx 改为 seo_title: xxx 。作者的信息使用数据文件进行定义,文章中只需要写 author: xxx 而不需要重复写作者的信息了。现在只有 gallery 标签的图片支持放大。友链页面 layout: links 改为 layout: friends。 许可协议本主题采用 MIT开源许可协议 ,永久无限制免费使用。 MIT开源许可协议被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。被授权人可根据程式的需要修改授权条款为适当的内容。在软件和软件的所有副本中都必须包含版权声明和许可声明。 配置与使用配置与使用/v4/site-settings/"},{"title":"页面配置","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v4/page-settings/index.html","permalink":"https://volantis.js.org/v4/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: []valine: 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: 传统布局, 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: truerobots: noindex,nofollowsitemap: falseseo_title: 404 Not Foundbottom_meta: falsesidebar: []valine: 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 mathjax 是否渲染公式 Bool, String false 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--- 渲染公式默认是不渲染的,如果文章内有公式,需要在 front-matter 中设置开启。即便开启了,文章列表中也不会进行渲染,请注意不要把公式写在文章开头。 example.md:---title: 渲染公式(MathJax)date: 2020-02-23mathjax: 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上使用KaTeXhttps://www.micdz.cn/article/katex-on-volantis/"},{"title":"站点配置","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v4/site-settings/index.html","permalink":"https://volantis.js.org/v4/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: meta: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico"> 多语言设置blog/_config.ymllanguage: - zh-CN - en - zh-HK - zh-TW 对应的翻译文件路径: themes/volantis/languages/ 使用 Import 导入外部文件Volantis 用户可以在不修改主题文件的情况下向 head 和 body 中添加各种标签。meta 和 link 对应 head 中的 <meta> 和 <link> 标签。script 可以在 body 末尾导入 js 代码。 blog/_config.ymlimport: meta: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico"> script: - <script></script> 更多Hexo 官方文档 #配置https://hexo.io/zh-cn/docs/configuration"},{"title":"进阶设定","date":"2021-05-17T08:08:37.083Z","updated":"2021-05-17T08:08:37.083Z","comments":true,"path":"v5/advanced-settings/index.html","permalink":"https://volantis.js.org/v5/advanced-settings/","excerpt":"","text":"设置子模块 将主题添加为子模块 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.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--- 为网站提速加载速度 减少不必要的 js 插件,例如字数统计、动态背景。 查找并解决拖慢速度的资源,以 Chrome 浏览器为例: 页面中点击右键,选择「检查」。 在右边的窗口中「Network」选项卡,并勾选「Disable cache」。 刷新网页,查看加载速度慢的资源。 加载缓慢的图片,建议使用 CDN。 加载缓慢的可以不用的 js 插件,建议舍弃。 加载缓慢却必须使用的 js 插件,建议下载并自己上传至 jsdelivr。 运行速度 访问具有动态特效背景(如雪花、粒子等)的网站时,手机很快会发烫变卡,笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。 优化 SEOblog/_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 页面不要堆砌关键词,不要频繁更改路径。 使用 CDN对于大部分将博客 deploy 到 GitHub 的用户来说,直接加载本地资源速度比较慢,可以使用 jsdelivr 为开源项目提供的 CDN 服务。 开启方法blog/_config.volantis.yml# 本地静态文件使用jsdelivr的min版本加速 https://www.jsdelivr.com/features# 默认使用 https://cdn.jsdelivr.net/npm/hexo-theme-volantis@<%- theme.info.theme_version %>/source/js/*.min.js 的CDN压缩版本(min.js),注意版本号对应关系!!可以通过修改以下配置项覆盖# 开发者注意 cdn.enable 设置为 falsecdn: enable: false prefix: # CDN 前缀,为空使用默认值,链接最后不加 "/",例如: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page 填写最后编译生成的源码CDN地址前缀,此路径下应该含有/js与/css目录,该配置默认值是:"https://cdn.jsdelivr.net/npm/hexo-theme-volantis@"+ theme.info.theme_version +"/source" # 以下配置可以覆盖 cdn.prefix,配置项的值可以为空,但是要使用CDN必须依据路径填写配置项的键 set: js: app: #/js/app.js css: style: #/css/style.css # (异步加载样式) 如果你需要对样式进行 DIY,可以只关闭 style 文件的 CDN。 从V5版本开始,首屏样式采用硬编码的方式写在HTML中。首屏样式内含 cover navbar search 的样式,其他样式放入/css/style.css异步加载。 如果你需要对样式进行 DIY,请注意首屏渲染和异步延迟加载的差异。 可以对 style.css 使用 HTTP/2 Server Push,但是此方案并不推荐。我们已经对style.css进行了preload处理,推荐使用对服务器压力成本较小的 CDN 服务。 自定义 CDN如果你把对应的文件上传到自己的 CDN 服务器,可以把对应的链接改为自己的 CDN 链接。 尝试使用 Terser 压缩 ES6安装压缩工具npm install -g gulpnpm install --save-dev gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-terser gulp 配置文件 gulp 配置文件 blog/gulpfile.jsvar 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 服务方案一 安装插件安装 hexo-offline-popup 或者 hexo-offline 插件,初次加载速度不变,后期切换页面和刷新网页速度越来越快。 方案二 使用 workbox 自定义配置 step 1. 修改 blog/_config.yml 文件。 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> step 2. 在 blog/source 中创建 sw.js 文件。 blog/source/sw.jsimportScripts('https://cdn.jsdelivr.net/npm/workbox-cdn@5.1.3/workbox/workbox-sw.js');workbox.setConfig({ modulePathPrefix: 'https://cdn.jsdelivr.net/npm/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 enabledrouting.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 enabledrouting.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 })); 如果你使用了此方案,修改静态文件后发布网页一定要修改缓存版本号。 安装「相关文章」插件 安装插件 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 分析与统计默认支持 不蒜子 的访问统计,可以自行添加百度统计和 Google Analytics。 字数和阅读时长 安装以下插件: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, ...] 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/进阶玩法/"},{"title":"开发文档","date":"2021-05-17T08:08:37.083Z","updated":"2021-05-17T08:08:37.083Z","comments":true,"path":"v5/development-api/index.html","permalink":"https://volantis.js.org/v5/development-api/","excerpt":"","text":" Volantis5 Development API for Volantis 全局变量 volantis我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。 源码参考:layout/_partial/scripts/global.ejs PjaxPjax 重载区域划分接口我们提供了可以实现Pjax重载区域灵活划分的开发接口。 源码参考:layout/_third-party/pjax/index.ejs <pjax></pjax> 标签所有被 <pjax></pjax> 标签包裹的所有元素将被pjax重载。 <pjax> <!--我是将被pjax重载的内容 begin--> <div> <div></div> <script></script> </div> <!--我是将被pjax重载的内容 end--></pjax> 使用案例:layout/_partial/snackbar.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/_third-party/pjax/index.ejs 使用案例:layout/_third-party/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/_partial/scripts/darkmode.ejs 暗黑模式样式详见:source/css/_plugins/dark.styl 当前模式调用 volantis.dark.mode 查看当前模式。返回值为字符串 dark 或者 light。 暗黑模式触发器调用 volantis.dark.toggle() 触发切换亮黑模式。 暗黑模式触发器回调函数调用 volantis.dark.push(callBack[,"callBackName"]) 传入触发器回调函数. 使用案例:layout/_third-party/comments/utterances/script.ejs Message 消息提示我们提供了 Message 消息提示灵活的开发接口。 源码参考: layout/_partial/scripts/global.ejs layout/_third-party/message/script.ejs volantis.message("title","message","type",autoClose,time) 参数都是String类型,可选的。 title 标题 message 信息 type 图标类型 【info、warning、error、question】 autoClose 自动关闭 time 显示时间,默认3秒 动态加载脚本源码参考: 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/_third-party/aplayer/script.ejs 由于返回的是 Promise 对象,也可以采用以下方式实现加载完成后调用回调函数: volantis.js("https://cdn.jsdelivr.net/npm/jquery").then(()=>{ console.log("我在脚本加载完成后调用")}) 对本地文件使用CDN源码参考: layout/_partial/scripts/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/jquery.parallax.min.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链接回调 请注意,以上是主题开发文档,不是使用文档!"},{"title":"","date":"2021-05-17T08:08:37.083Z","updated":"2021-05-17T08:08:37.083Z","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 博客主题。得益于其强大的模块化特性,您可以轻松搭建一个极简风格的博客,也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。 示例博客https://volantis.js.org/examples/ 所有的 Volantis 用户都可以按照格式自行创建 Issue 来将自己的博客添加到官网的示例博客页面中。 准备工作能力条件环境配置条件自建博客需要一定的相关知识,在开始前,请务必确保您会使用 markdown 语法,掌握简单的 git 知识,最最重要的是,遇到困难知道该怎么寻求解决: 翻阅和搜索文档 搜索 issues 中是否有解决办法 新建 issue 并按照要求进行操作,详尽地描述您遇到的问题 如果您没有使用过 Hexo 也不要着急,可以先通读一遍 Hexo 中文文档,要想使用地得心应手,最好参照团队提供的开源项目的源码进行搭建: Demo 源码 | 官网源码如果您从旧版本更新或着其它主题迁移,请确保环境版本不要太低,否则会产生兼容性问题。 Hexo: 4.2 ~ 5.xhexo-cli: 3.1 ~ 4.xnode.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 请对照 更新日志 进行更新. 许可协议本主题采用 MIT开源许可协议 ,永久无限制免费使用。 MIT开源许可协议被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。被授权人可根据程式的需要修改授权条款为适当的内容。在软件和软件的所有副本中都必须包含版权声明和许可声明。 配置与使用配置与使用/v4/site-settings/"},{"title":"页面配置","date":"2021-05-17T08:08:37.083Z","updated":"2021-05-17T08:08:37.083Z","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 列表页面 artitalk 说说页面 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: []valine: 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: 传统布局, 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。 Artitalk页面创建页面文件Create file if not exists: source/artitalk/index.md---layout: artitalkseo_title: 说说comments: false--- 配置Artitalk在主题配置文件中找到以下内容 artitalk: # Set `layout: artitalk` to enable in page # 配置项按照yml格式继续填写即可 appId: # your appID appKey: # 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接口 最后记得屏蔽Artitalk页面的pjax 404页面Create file if not exists: source/404.md---cover: truerobots: noindex,nofollowsitemap: falseseo_title: 404 Not Foundbottom_meta: falsesidebar: []valine: 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 mathjax 是否渲染公式 Bool, String false 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--- 渲染公式默认是不渲染的,如果文章内有公式,需要在 front-matter 中设置开启。即便开启了,文章列表中也不会进行渲染,请注意不要把公式写在文章开头。 example.md:---title: 渲染公式(MathJax)date: 2020-02-23mathjax: 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上使用KaTeXhttps://www.micdz.cn/article/katex-on-volantis/"},{"title":"站点配置","date":"2021-05-17T08:08:37.083Z","updated":"2021-05-17T08:08:37.083Z","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: meta: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico"> 多语言设置blog/_config.ymllanguage: - zh-CN - en - zh-HK - zh-TW 对应的翻译文件路径: themes/volantis/languages/ 使用 Import 导入外部文件Volantis 用户可以在不修改主题文件的情况下向 head 和 body 中添加各种标签。meta 和 link 对应 head 中的 <meta> 和 <link> 标签。script 可以在 body 末尾导入 js 代码。 blog/_config.ymlimport: meta: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico"> script: - <script></script> 更多Hexo 官方文档 #配置https://hexo.io/zh-cn/docs/configuration"},{"title":"页面自定义布局","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/page-settings/body/index.html","permalink":"https://volantis.js.org/v3/page-settings/body/","excerpt":"","text":"正文布局默认是文章+评论: 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]---"},{"title":"front-matter","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/page-settings/front-matter/index.html","permalink":"https://volantis.js.org/v3/page-settings/front-matter/","excerpt":"","text":"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 meta 文章或页面的meta信息 Bool, Array theme.layout.*.meta sidebar 页面侧边栏 Bool, Array theme.layout.*.sidebar body 页面主体元素 Array theme.layout.on_page.body mathjax 是否渲染公式 Bool, String false thumbnail 缩略图 String false icons 图标 Array [] pin 是否置顶 Bool false layout:post 时特有的字段: 字段 含义 值类型 默认值 author 文章作者 [Object] config.author categories 分类 String, Array - tags 标签 String, Array - toc 是否生成目录 Bool true author 字段 含义 值类型 默认值 name 作者名 String config.author avatar 头像 String config.avatar url 链接 String config.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-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 --> 前后一定要有空行,不然可能导致显示错位。 设置文章作者由于支持多个作者在一个站点发布文章,所以可以设置单独一篇文章的作者: front-matter---author: name: 作者 avatar: https://img.vim-cn.com/a1/d53c11fb5d4fd69529bc805d385fe818feb3f6.png url: https://baidu.com--- 引入外部文章利用 link,搭配自定义的文章作者信息,你可以在文章列表中显示外部文章或者网址,例如: front-matter---layout: postdate: 2017-07-05title: [转]如何搭建基于Hexo的独立博客categories: [Dev, Hexo]tags: - Hexoauthor: name: xaoxuu avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png url: https://xaoxuu.comlink: 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---"},{"title":"页面布局模板","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/page-settings/layout/index.html","permalink":"https://volantis.js.org/v3/page-settings/layout/","excerpt":"","text":"布局模板 取值 含义 page 独立页面 post 文章页面 category 分类页面 tag 标签页面 links 友链页面 list 列表页面 page & postpost 页面布局几乎与 page 页面相同,但是有以下细微区别: post 文章有 title 时,向下滚动网页,导航栏会向上移出屏幕显出文章标题,而 page 不会。 主题配置中的 article_footer 只作用于 post,如果 page 也要显示,可以在 front-matter 中设置meta: article_footer: [xxx] 除了归档页面是自动生成的,其它独立页面都需要手动创建 md 文件。 归档页面归档页面是自动生成的,并且初始化的时候已经生成,路径如下: blog/_config.yml# Directoryarchive_dir: archives 关于页面Create file if not exists: source/about/index.md---layout: pagetitle: 关于meta: header: [] footer: []sidebar: []valine: 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: 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: pagetitle: 404 Not Foundbody: [article, comments]meta: header: [] footer: []sidebar: []valine: path: /404.html placeholder: 请留言告诉我您要访问哪个页面找不到了---{% p center huge, 404 %}{% p center bold, 很抱歉,您访问的页面不存在 %}{% p center small, 可能是输入地址有误或该地址已被删除 %}"},{"title":"渲染公式","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/page-settings/math/index.html","permalink":"https://volantis.js.org/v3/page-settings/math/","excerpt":"","text":"MathJax默认是不渲染的,如果文章内有公式,需要在 front-matter 中设置开启。 example.md:---title: 渲染公式(MathJax)date: 2020-02-23mathjax: 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上使用KaTeXhttps://www.micdz.cn/article/katex-on-volantis/"},{"title":"站点配置文件","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/site-settings/configuration/index.html","permalink":"https://volantis.js.org/v3/site-settings/configuration/","excerpt":"","text":"网站标题blog/_config.yml# 网站标题title: my blog 网站图标简单方式完全自定义blog/_config.yml# 网站图标,更多尺寸等图标请使用import方式批量导入favicon: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.icoblog/_config.ymlimport: meta: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico"> 多语言设置blog/_config.ymllanguage:- zh-CN- en- zh-HK- zh-TW 对应的翻译文件路径: themes/volantis/languages/ Import 导入外部文件可以在无需修改主题文件的情况下在 head 和 body 中添加各种标签。meta 和 link 对应 head 中的 <meta> 和 <link> 标签。script 可以在 body 末尾导入 js 文件。 blog/_config.ymlimport: meta: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://cdn.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.htmlpretty_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_dir Include 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 case false 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_optionupdated_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_generator Meta 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. 参数 描述 include Hexo 默认会忽略隐藏文件和文件夹(包括名称以下划线和 . 开头的文件和文件夹,Hexo 的 _posts 和 _data 等目录除外)。通过设置此字段将使 Hexo 处理他们并将它们复制到 source 目录下。 exclude Hexo 会忽略这些文件和目录 ignore Ignore files/folders 举例: # Include/Exclude Files/Foldersinclude: - ".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.ymltheme: "my-theme"theme_config: bio: "My awesome bio" foo: bar: 'a' # themes/my-theme/_config.ymlbio: "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.ymltheme: "my-theme" # _config.my-theme.ymlbio: "My awesome bio"foo: bar: 'a' # themes/my-theme/_config.ymlbio: "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 文件。"},{"title":"容器类标签","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/tag-plugins/container/index.html","permalink":"https://volantis.js.org/v3/tag-plugins/container/","excerpt":"","text":"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://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endfolding %}参数位置可以填写颜色和状态,多个参数用空格隔开。 颜色 blue, cyan, green, yellow, red 状态 状态填写 open 代表默认打开。{% 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 %} 查看图片测试 查看默认打开的折叠框 这是一个默认打开的折叠框。 查看代码测试 {% folding green, 查看代码测试 %}查看代码测试{% endfolding %} 查看列表测试 hahahehe 查看嵌套测试 查看嵌套测试2 查看嵌套测试3 hahaha"},{"title":"Hexo 内置标签","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/tag-plugins/hexo/index.html","permalink":"https://volantis.js.org/v3/tag-plugins/hexo/","excerpt":"","text":"文章摘要和截断在文章中使用 <!-- 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.maparray.map(callback[, thisArg]) example.md:{% codeblock Array.map %}array.map(callback[, thisArg]){% endcodeblock %} 行标、高亮12345678n=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"' %} Link在文章中插入链接,并自动给外部链接添加 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 %}"},{"title":"链接、按钮和菜单标签","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/tag-plugins/link/index.html","permalink":"https://volantis.js.org/v3/tag-plugins/link/","excerpt":"","text":"外链卡片请将您的 Volantis 升级至 3.0 版本以上使用。 语法格式示例写法示例效果{% link 标题, 链接, 图片 %}example.md:{% link 如何参与项目, http://localhost:4000/contributors/, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets@master/logo/256/safari.png %}如何参与项目http://localhost:4000/contributors/ 基础按钮请将您的 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列 + 居中 心率管家 专业版 心率管家 免费版 下拉菜单请将您的 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 的示例效果。"},{"title":"多媒体标签","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/tag-plugins/media/index.html","permalink":"https://volantis.js.org/v3/tag-plugins/media/","excerpt":"","text":"InlineimageInlineimage 标签是一种行内图片标签,可以用来在一段话中间插入表情。请将您的 Volantis 升级至 3.0.0 版本以上使用。 语法格式参数列表示例写法示例效果这是一段话 {% inlineimage 链接, height=高度(可选) %} 这是一段话。图片高度 阿拉伯数字 + px example:height=20pxexample.md:这是 {% 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 %} 一段话。这是 一段话。 这又是 一段话。 ImageImage 标签是一种针对单个图片应用场景的标签,支持图片描述文字和指定宽度。请将您的 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=每天下课回宿舍的路,承载了太多记忆。 %}添加描述: 每天下课回宿舍的路,承载了太多记忆。 指定宽度: 指定宽度并添加描述: 每天下课回宿舍的路,承载了太多记忆。 GalleryGallery 标签是一种针对一组图片应用场景的标签。请将您的 Volantis 升级至 3.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 %}对齐方向 left, center, right 缩放 stretch 列数 逗号后面直接写列数,支持 2 ~ 8 列。设定列列数之后就是「多行多图」布局,此时图片默认左对齐。为了避免图片大小不一,建议搭配 stretch 来时图片放大填充。一行一个图片 example.md:{% gallery %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endgallery %} 一行多个图片(不换行) example.md:{% 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)![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg){% endgallery %} 多行多个图片(每行2~8个图片) example.md:{% gallery stretch, 4 %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg){% endgallery %}一行一个图片 图片描述 一行多个图片(不换行) 图片描述 图片描述 图片描述 多行多个图片(每行2~8个图片) Audio请将您的 Volantis 升级至 2.4 版本以上使用。 语法格式示例写法示例效果example.md:{% audio 音频链接 %}example.md:{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}Your browser does not support the audio tag. 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%宽度 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. APlayer主题对 APlayer 插件的样式进行了兼容。安装插件: npm i -S hexo-tag-aplayer hexo-tag-aplayerhttps://github.com/MoePlayer/hexo-tag-aplayer"},{"title":"文本和段落标签","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/tag-plugins/text/index.html","permalink":"https://volantis.js.org/v3/tag-plugins/text/","excerpt":"","text":"行内小标签请将您的 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 %}彩色文字 在一段话中方便插入各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 超大文字 文档「开始」页面中的标题部分就是超大文字。 Volantis A Wonderful Theme for Hexo Note & NoteBlockNoteBlock 是 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, blueNote 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 选中状态 checkedCheckbox 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 如果有 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-07-24 2.6.3 -> 2.6.6 不需要额外处理。 2020-07-24 2.6.2 -> 2.6.3 全局搜索 seotitle 并替换为 seo_title。group 组件的索引规则有变,使用 group 组件的文章内,group: group_name 对应的组件名必须是 group_name。group 组件的列表名优先显示文章的 short_title 其次是 title。"},{"title":"选择评论系统","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/theme-settings/comments/index.html","permalink":"https://volantis.js.org/v3/theme-settings/comments/","excerpt":"","text":"目前支持的评论系统有: Valine, MiniValine, Disqus, Gitalk, Vssue, Livere, Isso, Hashover blog/_config.volantis.ymlcomments: title: <i class='fas fa-comments'></i> 评论 subtitle: service: valine # valine, minivaline, disqus, gitalk, vssue, livere, isso, hashover ValineMiniValineVssueGitalkDisqusLivereIssoHashover... 一款快速、简洁且高效的无后端评论系统 https://valine.js.org blog/_config.volantis.ymlcomments: ... service: valine ... valine: appId: # your appId appKey: # your appKey js: https://cdn.jsdelivr.net/npm/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.ymlcomments: ... service: minivaline ... minivaline: appId: # Your leancloud application appid appKey: # Your leancloud application appkey ... 可选配置项详见源码 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 - The #1 way to build an audience on your website. https://disqus.com/ blog/_config.volantis.ymlcomments: ... service: disqus ... disqus: shortname: 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 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 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.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 的代码 收录更多评论系统"},{"title":"主题配置文件","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/theme-settings/configuration/index.html","permalink":"https://volantis.js.org/v3/theme-settings/configuration/","excerpt":"","text":"使用代替主题配置文件 第 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"},{"title":"网站与文章封面","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/theme-settings/cover/index.html","permalink":"https://volantis.js.org/v3/theme-settings/cover/","excerpt":"","text":"封面方案blog/_config.volantis.ymlcover: scheme: docs # docs, blog ... 目前主题提供两种封面方案,全屏封面适用于项目文档,半屏封面适用于个人博客。您可以修改参数决定在任何页面是否显示。 封面布局blog/_config.volantis.ymlcover: ... layout: dock # search (搜索), dock (坞), featured (精选), focus (焦点) ... 默认显示设置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 来决定显示封面或者不显示封面。"},{"title":"设置网站页脚","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/theme-settings/footer/index.html","permalink":"https://volantis.js.org/v3/theme-settings/footer/","excerpt":"","text":"您通过 layout 可以自由布局网站页脚内容 aplayer, social, license, info, copyright。 blog/_config.volantis.ymlfooter: # 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.ymlfooter: layout: [..., br, hello, ...] ... # You can add your own property here. (Support markdown, for example: br: '<br>') br: '<br>' hello: '[Hello World](/)'"},{"title":"设置默认布局","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/theme-settings/layout/index.html","permalink":"https://volantis.js.org/v3/theme-settings/layout/","excerpt":"","text":"您可以自由决定每个页面是否显示侧边栏,侧边栏显示什么小部件,正文区域显示什么卡片,文章卡片显示什么 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 )。 请别着急,具体的库配置将在下文详细讲解。"},{"title":"元数据组件","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/theme-settings/meta/index.html","permalink":"https://volantis.js.org/v3/theme-settings/meta/","excerpt":"","text":"meta 即文章的元数据,描述文章的作者、发布时间、更新时间等等信息,Volantis 不替您决定,显示什么图标、如何描述都可以自定义。 blog/_config.volantis.ymlmeta: # 文章标题 title: # 暂无配置 # 默认文章作者(可在front-matter中覆盖) author: avatar: https://cdn.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://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 -S hexo-helper-qrcode # img: https://cdn.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'"},{"title":"设置网站导航栏","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/theme-settings/navbar/index.html","permalink":"https://volantis.js.org/v3/theme-settings/navbar/","excerpt":"","text":"导航栏配置导航栏分为 logo、menu、search 三个区域设置,其中 logo 区域如果设置了图片,则不能显示图标和标题, menu 区域的设置可以写在一个单独的文件中。 blog/_config.volantis.ymlnavbar: 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/"},{"title":"第三方插件","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/theme-settings/plugins/index.html","permalink":"https://volantis.js.org/v3/theme-settings/plugins/","excerpt":"","text":"插件库Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭,无需进行设置。 blog/_config.volantis.ymlplugins: ################ required plugins ################ # jquery jquery: https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js ################ optional plugins ################ # fontawesome fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13/css/all.min.css # fontawesome animation fontawesome_animation: https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css # fancybox fancybox: https://cdn.jsdelivr.net/npm/@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://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js ######## Plugins to optimize the experience: # highlight.js highlightjs: js: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js css: https://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js ######## Plugins for SEO: # Traffic statistics (very slow loading) busuanzi: https://cdn.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://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css js: https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js # Typing Effects comment_typing: #https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js # Slide Background backstretch: enable: true js: https://cdn.jsdelivr.net/npm/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://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/012.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/019.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/033.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/035.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/038.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/039.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/042.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/052.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/054.jpg - https://cdn.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://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js - https://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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.ymlplugins: ... backstretch: enable: true js: https://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg ... 幻灯片背景图片显示的位置可以选择粘贴在封面上,跟随封面一起滑动,也可以选择固定作为网页背景图片。 highlight.jsblog/_config.volantis.ymlplugins: ... highlightjs: js: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js css: https://cdn.jsdelivr.net/npm/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.ymlplugins: ... aplayer: enable: true js: - https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js - 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: 340px # list max height list_folded: true APlayer播放器只可以在中国大陆地区使用。相关文档: APlayer | MetingJS Artitalkblog/_config.volantis.ymlplugins: ... # 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: #说说字体颜色"},{"title":"站内搜索","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/theme-settings/search/index.html","permalink":"https://volantis.js.org/v3/theme-settings/search/","excerpt":"","text":"blog/_config.volantis.ymlsearch: enable: true service: hexo # hexo, google, algolia, azure, baidu js: https://cdn.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"},{"title":"自定义主题外观","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/theme-settings/style/index.html","permalink":"https://volantis.js.org/v3/theme-settings/style/","excerpt":"","text":"最大布局宽度blog/_config.volantis.ymlstyle: ... max_width: 1080px # Sum of body width and sidebar width 网页所呈现的内容的最大宽度,即 body 和 sidebar 的宽度之和。 抗锯齿blog/_config.volantis.ymlstyle: ... font_smoothing: true # font-smoothing for webkit 自定义光标样式blog/_config.volantis.ymlstyle: ... cursor: enable: true text: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/text.png pointer: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/pointer.png default: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/left_ptr.png not-allowed: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/circle.png zoom-out: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/zoom-out.png zoom-in: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/zoom-in.png grab: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/openhand.png 导航栏样式您可以设置导航栏的高度以及视觉特效,视觉特效目前可选的有: shadow:卡片阴影。 floatable:当鼠标移动到容器内时,呈现出浮起来的效果。 blur:背景模糊效果(毛玻璃),当浏览器不支持时显示为不透明。 blog/_config.volantis.ymlstyle: ... navbar: height: 64px effect: [shadow, blur] # [shadow, floatable, blur] 滚动条样式blog/_config.volantis.ymlstyle: ... scrollbar: size: 4px border: 2px color: '#2196f3' hover: '#ff5722' 侧边栏样式视觉特效参数同上,值得注意的是:卡片的 floatable 效果和 blur 效果相冲突。 blog/_config.volantis.ymlstyle: ... sidebar: effect: [shadow] # [shadow, floatable, blur] 正文区域样式视觉特效参数同上,值得注意的是:卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。 blog/_config.volantis.ymlstyle: ... 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.ymlstyle: ... 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.ymlstyle: ... fontfamily: logofont: fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'Varela Round' url: https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf weight: normal style: normal codefont: fontfamily: 'Menlo, Monaco' name: 'Monaco' url: https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf weight: normal style: normal 自定义颜色blog/_config.volantis.ymlstyle: ... 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.ymlrightmenu: 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/"},{"title":"卡片式组件","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v3/theme-settings/widget/index.html","permalink":"https://volantis.js.org/v3/theme-settings/widget/","excerpt":"","text":"widget 即小部件,大部分小部件都可以放置在侧边栏,一部分已经为正文区域显示做了优化,还有一部分只可以放置在文章页脚部分。与 meta 库不同的是:除了现有的 widget ,您可以很轻易地创建自己的 widget ,然后放在需要的地方。此外,您还可以将 widget 写在单独的文件中。 查看所有相关配置 blog/_config.volantis.ymlwidget: # The following can be written in `blog/source/_data/widget.yml` # --------------------------------------- # blogger info widget blogger: 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 # --------------------------------------- # 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://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 # 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.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.ymlrelated_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.ymlcopyright: class: copyright display: [desktop, mobile] # [desktop, mobile] blockquote: true permalink: '本文永久链接是:' content: - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议' - permalink 这个部件只可以放置在文章页脚。 二维码部件blog/_config.volantis.ymldonate: class: qrcode display: [desktop, mobile] # [desktop, mobile] height: 64px # Automatic height if not set fancybox: true 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.ymlreferences: class: references # is subclass of list display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-quote-left title: 参考资料 在文章的 front-matter 中设置: front-matterreferences: - name: Apple Developer Documentation url: https://developer.apple.com/documentation/ 组索引这个部件的布局继承自 list 部件,用于展示文章所属的分组的文章列表。请将您的 Volantis 升级至 2.5 版本以上使用。 blog/_config.volantis.ymlgroup-1: class: group display: [desktop, mobile] # [desktop, mobile] header: icon: fab fa-apple title: Developer url: /wiki/ios/ 在文章的 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/source/_data/widget.yml 文件内容示例:widget.yml"},{"title":"标签插件","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v2/tag-plugins/index.html","permalink":"https://volantis.js.org/v2/tag-plugins/","excerpt":"","text":"主题原生支持丰富多彩的标签。 文本和段落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 %}彩色文字 在一段话中方便插入各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 超大文字 文档「开始」页面中的标题部分就是超大文字。 Volantis A Wonderful Theme for Hexo Note & NoteBlockNoteBlock 是 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, blueNote 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 选中状态 checkedCheckbox 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://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列 + 居中 心率管家 专业版 心率管家 免费版 Menu请将您的 Volantis 升级至 2.4 版本以上使用。 语法格式示例写法示例效果容器 {% menu 下拉菜单, 图标 %}菜单内容{% endmenu %} 菜单内容 菜单项 {% menuitem 文本, 链接, 图标 %} 分割线 {% menuitem hr %} 子菜单 {% submenu 嵌套菜单, 图标 %}菜单内容{% endsubmenu %}{% 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 %} 下拉菜单 主题源码 更新日志 有疑问? 看 FAQ 看 本站源码 提 Issue 容器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://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endfolding %}参数位置可以填写颜色和状态,多个参数用空格隔开。 颜色 blue, cyan, green, yellow, red 状态 状态填写 open 代表默认打开。{% 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 %} 查看图片测试 查看默认打开的折叠框 这是一个默认打开的折叠框。 查看代码测试 {% folding green, 查看代码测试 %}查看代码测试{% endfolding %} 查看列表测试 hahahehe 查看嵌套测试 查看嵌套测试2 查看嵌套测试3 hahaha 多媒体包括图片、音频、视频。 ImageImage 标签是一种针对单个图片应用场景的标签,支持图片描述文字和指定宽度。请将您的 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=每天下课回宿舍的路,承载了太多记忆。 %}添加描述: 每天下课回宿舍的路,承载了太多记忆。 指定宽度: 指定宽度并添加描述: 每天下课回宿舍的路,承载了太多记忆。 FancyboxFancybox 标签是一种针对一组图片应用场景的标签。请将您的 Volantis 升级至 2.2 版本以上使用。 语法格式参数列表示例写法示例效果{% fancybox 参数, 列数 %}![图片描述](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){% endfancybox %}对齐方向 left, center, right 缩放 stretch 列数 逗号后面直接写列数,支持 2 ~ 8 列。设定列列数之后就是「多行多图」布局,此时图片默认左对齐。为了避免图片大小不一,建议搭配 stretch 来时图片放大填充。一行一个图片 example.md:{% fancybox %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endfancybox %} 一行多个图片(不换行) example.md:{% fancybox %}![图片描述](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){% endfancybox %} 多行多个图片(每行2~8个图片) example.md:{% fancybox stretch, 4 %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)![](https://cdn.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 %}Your browser does not support the audio tag. 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%宽度 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. APlayer主题对 APlayer 插件的样式进行了兼容。安装插件: npm i -S hexo-tag-aplayer 官方文档: hexo-tag-aplayer 公式MathJax公式默认是不渲染的,如果文章内有公式,需要在 front-matter 中设置开启。 example.md:---title: 渲染公式(MathJax)date: 2020-02-23mathjax: 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.maparray.map(callback[, thisArg]) example.md:{% codeblock Array.map %}array.map(callback[, thisArg]){% endcodeblock %} 行标、高亮12345678n=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"' %} Link在文章中插入链接,并自动给外部链接添加 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官方文档:#标签插件"},{"title":"主题配置","date":"2021-05-17T08:08:37.079Z","updated":"2021-05-17T08:08:37.079Z","comments":true,"path":"v2/theme-settings/index.html","permalink":"https://volantis.js.org/v2/theme-settings/","excerpt":"","text":"如无特殊说明,本页面的配置信息写在 主题 的 config.yml 文件中。 实用小技巧所有需要写在主题配置文件中的配置都可以写在站点配置文件的 theme_config: 中详见 Hexo 官方文档 #覆盖主题配置也可以直接查看本站源码中站点配置文件的写法:_config.yml 主题样式您可以在主题配置文件中设定一些简单的样式,在开始前,确保没有使用 CDN 服务,否则修改不会生效。 最大布局宽度blog/themes/volantis/_config.ymlstyle: ... max_width: 1080px # Sum of body width and sidebar width 网页所呈现的内容的最大宽度,即 body 和 sidebar 的宽度之和。 导航栏样式您可以设置导航栏的高度以及视觉特效,视觉特效目前可选的有: shadow:卡片阴影。 floatable:当鼠标移动到容器内时,呈现出浮起来的效果。 blur:背景模糊效果(毛玻璃),当浏览器不支持时显示为不透明。 blog/themes/volantis/_config.ymlstyle: ... navbar: height: 64px effect: [shadow, blur] # [shadow, floatable, blur] 滚动条样式blog/themes/volantis/_config.ymlstyle: ... scrollbar: size: 4px border: 2px color: '#2196f3' hover: '#ff5722' 侧边栏样式视觉特效参数同上,值得注意的是:卡片的 floatable 效果和 blur 效果相冲突。 blog/themes/volantis/_config.ymlstyle: ... sidebar: effect: [shadow] # [shadow, floatable, blur] 正文区域样式视觉特效参数同上,值得注意的是:卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。 blog/themes/volantis/_config.ymlstyle: ... 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.ymlstyle: ... 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.ymlstyle: ... fontfamily: logofont: fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'Varela Round' url: https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf weight: normal style: normal codefont: fontfamily: 'Menlo, Monaco' name: 'Monaco' url: https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf weight: normal style: normal 颜色样式blog/themes/volantis/_config.ymlstyle: ... 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.ymlcover: ... 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.ymlnavbar: 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.ymlmeta: # 文章标题 title: # 暂无配置 # 默认文章作者(可在front-matter中覆盖) author: avatar: https://cdn.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://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 -S hexo-helper-qrcode # img: https://cdn.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.ymlwidget: # The following can be written in `blog/source/_data/widget.yml` # --------------------------------------- # blogger info widget blogger: 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 # --------------------------------------- # 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://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 # 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.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/themes/volantis/_config.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/themes/volantis/_config.ymlcategory: class: category display: [desktop] # [desktop, mobile] header: icon: fas fa-folder-open title: 文章分类 url: /blog/categories/ 这个部件可以直接显示所有文章分类,如果您希望有一个独立的页面来展示,需要自己创建一个文件,具体操作在「页面」部分文档中。 标签云部件blog/themes/volantis/_config.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/themes/volantis/_config.ymlrelated_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.ymlcopyright: class: copyright display: [desktop, mobile] # [desktop, mobile] blockquote: true permalink: '本文永久链接是:' content: - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议' - permalink 这个部件只可以放置在文章页脚。 二维码部件blog/themes/volantis/_config.ymldonate: class: qrcode display: [desktop, mobile] # [desktop, mobile] height: 64px # Automatic height if not set fancybox: true 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/themes/volantis/_config.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/themes/volantis/_config.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/themes/volantis/_config.ymlreferences: class: references # is subclass of list display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-quote-left title: 参考资料 在文章的 front-matter 中设置: front-matterreferences: - name: Apple Developer Documentation url: https://developer.apple.com/documentation/ 组索引这个部件的布局继承自 list 部件,用于展示文章所属的分组的文章列表。请将您的 Volantis 升级至 2.5 版本以上使用。 blog/themes/volantis/_config.ymlgroup-1: class: group display: [desktop, mobile] # [desktop, mobile] header: icon: fab fa-apple title: Developer url: /wiki/ios/ 在文章的 front-matter 中设置: front-mattergroup: group-1order: 16sidebar: [group-1, toc] 「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章,顺序按照 order 从小到大排列。 效果见: https://xaoxuu.com/wiki/git/ 通用网格部件blog/themes/volantis/_config.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/themes/volantis/_config.ymltest: 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.ymlfooter: # 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.ymlfooter: layout: [..., br, hello, ...] ... # You can add your own property here. (Support markdown, for example: br: '<br>') br: '<br>' hello: '[Hello World](/)' SEOblog/themes/volantis/_config.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 这部分一般不需要修改。 插件库Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭,无需进行设置。 幻灯片背景blog/themes/volantis/_config.ymlplugins: ... backstretch: enable: true js: https://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg ... 幻灯片背景图片显示的位置可以选择粘贴在封面上,跟随封面一起滑动,也可以选择固定作为网页背景图片。 highlight.jsblog/themes/volantis/_config.ymlplugins: ... highlightjs: js: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js css: https://cdn.jsdelivr.net/npm/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.ymlplugins: ... aplayer: enable: true js: - https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js - 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: 340px # list max height list_folded: true APlayer播放器只可以在中国大陆地区使用。相关文档: APlayer | MetingJS 评论系统blog/themes/volantis/_config.ymlcomments: title: <i class='fas fa-comments'></i> 评论 subtitle: service: valine # valine, disqus, gitalk, livere valine: appId: # your appId appKey: # your appKey js: https://cdn.jsdelivr.net/npm/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.ymlcomments: ... disqus: shortname: Gitalk官网: https://github.com/gitalk/gitalk blog/themes/volantis/_config.ymlcomments: ... 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/--- Valine官网: https://valine.js.org blog/themes/volantis/_config.ymlcomments: ... valine: appId: # your appId appKey: # your appKey js: https://cdn.jsdelivr.net/npm/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.ymlcomments: ... 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.ymlcomments: ... 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.ymlsearch: enable: true service: hexo # hexo, google, algolia, azure, baidu js: https://cdn.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"},{"title":"标签插件","date":"2021-05-17T08:08:37.083Z","updated":"2021-05-17T08:08:37.083Z","comments":true,"path":"v4/tag-plugins/index.html","permalink":"https://volantis.js.org/v4/tag-plugins/","excerpt":"","text":"为了兼容老用户,旧的标签插件在重构之前依然沿用旧的格式,即「英文逗号+空格」作为参数分隔符,而部分新增标签插件是「空格+英文竖线+空格」,请注意区分。 我们也在探索哪种分隔符既简单又不容易引起冲突,所以可能存在多种格式,具体以对应文档描述为准。 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 样式参数, 文本内容 %} 彩色文字在一段话中方便插入各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 超大号文字文档「开始」页面中的标题部分就是超大号文字。 Volantis 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 样式参数, 文本内容 %} 演示效果彩色文字在一段话中方便插入各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 超大号文字文档「开始」页面中的标题部分就是超大号文字。 Volantis 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 noteNoteBlock 是 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 noteblockNoteBlock 是 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 如果有 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最后更新于 3.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最后更新于 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.vercel.app site网站卡片可以显示网站截图、logo、标题、描述,使用方法和友链标签一模一样,唯一的区别是数据文件名称为 sites.yml,可以和友链数据混用,通过分组过滤实现不一样的效果。 示例写法{% sites only:community_team %} sites only:community_team MHuiG划水Colsrch开发者inkss摸鱼W4J1e打杂 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最后更新于 2.3 版本{% 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 标签是一种行内图片标签,可以用来在一段话中间插入表情。 本插件最后更新于 4.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 标签是一种针对单个图片应用场景的标签,支持图片描述文字和指定宽度。 本插件最后更新于 4.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 标签是一种针对一组图片应用场景的标签。 本插件最后更新于 3.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 %}![图片描述](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, 4 %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)![](https://cdn.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 音频链接 %} 演示效果Your browser does not support the audio tag. 上述示例的源码example:{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %} video本插件最后更新于 2.3 版本{% 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这是一个能够将图片或者视频套入设备框架中的标签,可以用来更优雅地显示截图、录屏。 本插件最后更新于 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-aplayerhttps://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=activeapi=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/timelinehttps://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/friendshttps://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/exampleshttps://github.com/volantis-x/examples/issues Hexo 通用标签在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。详见 Hexo 官方文档: Hexo 官方文档 #标签插件https://hexo.io/zh-cn/docs/tag-plugins"},{"title":"标签插件","date":"2021-05-17T08:08:37.083Z","updated":"2021-05-17T08:08:37.083Z","comments":true,"path":"v5/tag-plugins/index.html","permalink":"https://volantis.js.org/v5/tag-plugins/","excerpt":"","text":"为了兼容老用户,旧的标签插件在重构之前依然沿用旧的格式,即 command + 空格 作为参数分隔符,而部分新增标签插件是 空格 + 英文竖线 + 空格 ,请注意区分。 我们也在探索哪种分隔符既简单又不容易引起冲突,所以可能存在多种格式,具体以对应文档描述为准。 text效果源码带 下划线 的文本;带 着重号 的文本;带 波浪线 的文本;带 删除线 的文本 键盘样式的文本:⌘ + D 密码样式的文本:这里没有验证码带 {% u 下划线 %} 的文本;带 {% emp 着重号 %} 的文本;带 {% wavy 波浪线 %} 的文本;带 {% del 删除线 %} 的文本键盘样式的文本:{% kbd ⌘ %} + {% kbd D %}密码样式的文本:{% psw 这里没有验证码 %} span语法效果源码参数本插件最后更新于 2.5 版本{% 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参数效果源码参数本插件最后更新于 2.5 版本{% 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 的简便写法。 最后更新于 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 noteblockNoteBlock 是 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 如果有 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最后更新于 3.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最后更新于 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.vercel.app site网站卡片可以显示网站截图、logo、标题、描述,使用方法和友链标签一模一样,唯一的区别是数据文件名称为 sites.yml,可以和友链数据混用,通过分组过滤实现不一样的效果。 示例写法{% sites only:community_team %} sites only:community_team MHuiG划水Colsrch开发者inkss摸鱼W4J1e打杂 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最后更新于 2.3 版本{% 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 标签是一种行内图片标签,可以用来在一段话中间插入表情。 本插件最后更新于 4.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 标签是一种针对单个图片应用场景的标签,支持图片描述文字和指定宽度。 本插件最后更新于 4.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本插件最后更新于 2.3 版本{% 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这是一个能够将图片或者视频套入设备框架中的标签,可以用来更优雅地显示截图、录屏。 本插件最后更新于 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-aplayerhttps://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=activeapi=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/timelinehttps://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/friendshttps://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/exampleshttps://github.com/volantis-x/examples/issues Hexo 通用标签在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。详见 Hexo 官方文档: Hexo 官方文档 #标签插件https://hexo.io/zh-cn/docs/tag-plugins"},{"title":"主题配置","date":"2021-05-17T08:08:37.083Z","updated":"2021-05-17T08:08:37.083Z","comments":true,"path":"v4/theme-settings/index.html","permalink":"https://volantis.js.org/v4/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: https://cdn.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.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: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/text.png pointer: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/pointer.png default: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/left_ptr.png not-allowed: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/circle.png zoom-out: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/zoom-out.png zoom-in: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/zoom-in.png grab: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/openhand.png 导航栏样式您可以设置导航栏的高度以及视觉特效,视觉特效目前可选的有: shadow:卡片阴影。 floatable:当鼠标移动到容器内时,呈现出浮起来的效果。 blur:背景模糊效果(毛玻璃),当浏览器不支持时显示为不透明。 blog/_config.volantis.ymlcustom_css: ... navbar: height: 64px 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 note: # style for default note: {% note text %} icon: '\\f054' color: '' 布局间距您可以设置几种标题的布局间距 h2/h3/h4、段落间距 line、区块内部的段落间距 inline。 blog/_config.volantis.ymlcustom_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.ymlcustom_css: ... fontfamily: logofont: fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'Varela Round' url: https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf weight: normal style: normal codefont: fontfamily: 'Menlo, Monaco' name: 'Monaco' url: 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% 自定义右键菜单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.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: '次浏览' # 文章评论数量:只支持 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://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: 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.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 分别对应文章的摘要、摘要后面的内容、全文。 选择评论系统目前支持的评论系统有: valine, twikoo, waline, minivaline, disqus, disqusjs, gitalk, vssue, livere, isso, hashover blog/_config.volantis.ymlcomments: title: <i class='fas fa-comments'></i> 评论 subtitle: service: valine # valine, twikoo, waline, minivaline, disqus, disqusjs, gitalk, vssue, livere, isso, hashover ValinetwikoowalineMiniValineVssueGitalkDisqusDisqusJSLivereIssoHashover... 一款快速、简洁且高效的无后端评论系统 https://valine.js.org blog/_config.volantis.ymlcomments: ... service: valine ... valine: # js: https://cdn.jsdelivr.net/npm/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.ymlcomments: ... service: twikoo ... twikoo: js: https://cdn.jsdelivr.net/npm/twikoo@latest # 建议锁定版本 path: # 全局评论地址 # 其他配置项按照yml格式继续填写即可 除了 [el path] 选项 envId: xxxxxxxxxxxxxxx # 腾讯云环境id 一个简洁、安全、免费的静态网站评论系统 | 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 ... 可选配置项详见源码 一款快速、简洁且高效的无后端评论系统 https://github.com/MiniValine/MiniValine/ blog/_config.volantis.ymlcomments: ... service: minivaline ... # MiniValine # https://github.com/MiniValine/MiniValine minivaline: js: https://cdn.jsdelivr.net/npm/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.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 - The #1 way to build an audience on your website. https://disqus.com/ blog/_config.volantis.ymlcomments: ... service: disqus ... disqus: shortname: Render Disqus comments in Mainland China using Disqus API https://github.com/SukkaW/DisqusJS blog/_config.volantis.ymlcomments: ... 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.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 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 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.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 的代码 收录更多评论系统 站内搜索blog/_config.volantis.ymlsearch: enable: true service: hexo # hexo, google, algolia, azure, baidu js: https://cdn.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.ymlplugins: ################# required plugins ################ # jquery jquery: https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js # fontawesome fontawesome: https://cdn.jsdelivr.net/npm/@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://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js flying_pages: https://cdn.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://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js onlypost: false loadingImg: # https://cdn.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://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js css: https://cdn.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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css js: https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js # fontawesome animation fontawesome_animation: enable: #true css: https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css # Typing Effects comment_typing: enable: #true js: https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js # Slide Background backstretch: enable: #true js: https://cdn.jsdelivr.net/npm/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://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/012.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/019.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/033.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/035.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/038.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/039.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/042.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/052.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/054.jpg - https://cdn.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://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 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://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 域名 # Tidio聊天功能 # https://www.tidio.com/ tidio: enable: #true id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 幻灯片背景blog/_config.volantis.ymlplugins: ... backstretch: enable: true js: https://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg ... 幻灯片背景图片显示的位置可以选择粘贴在封面上,跟随封面一起滑动,也可以选择固定作为网页背景图片。 highlight.jsblog/_config.volantis.ymlplugins: ... # highlight.js highlightjs: enable: true # Please set hexo.config.highlight.enable = false !!! js: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js css: https://cdn.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.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: ... # 样式:source/css/_plugins/dark.styl # 开关按钮:在 navbar.menu 中添加: # - name: 暗黑模式 # 可自定义 # icon: fas fa-moon # 可自定义 # toggle: darkmode darkmodejs: 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 `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接口 BBtalkblog/_config.volantis.ymlplugins: ... bbtalk: 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: ... # Tidio聊天功能 # https://www.tidio.com/ tidio: enable: true id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"},{"title":"主题配置","date":"2021-05-17T08:08:37.083Z","updated":"2021-05-17T08:08:37.083Z","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: https://cdn.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.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: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/text.png pointer: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/pointer.png default: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/left_ptr.png not-allowed: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/circle.png zoom-out: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/zoom-out.png zoom-in: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/zoom-in.png grab: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/openhand.png 导航栏样式您可以设置导航栏的高度以及视觉特效,视觉特效目前可选的有: shadow:卡片阴影。 floatable:当鼠标移动到容器内时,呈现出浮起来的效果。 blur:背景模糊效果(毛玻璃),当浏览器不支持时显示为不透明。 blog/_config.volantis.ymlcustom_css: ... navbar: height: 64px 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 note: # style for default note: {% note text %} icon: '\\f054' color: '' 布局间距您可以设置几种标题的布局间距 h2/h3/h4、段落间距 line、区块内部的段落间距 inline。 blog/_config.volantis.ymlcustom_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.ymlcustom_css: ... fontfamily: logofont: fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'Varela Round' url: https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf weight: normal style: normal codefont: fontfamily: 'Menlo, Monaco' name: 'Monaco' url: 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% 自定义右键菜单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.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: '次浏览' # 文章评论数量:只支持 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://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: 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.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 分别对应文章的摘要、摘要后面的内容、全文。 选择评论系统目前支持的评论系统有: valine, twikoo, waline, minivaline, disqus, disqusjs, gitalk, vssue, livere, isso, hashover blog/_config.volantis.ymlcomments: title: <i class='fas fa-comments'></i> 评论 subtitle: service: valine # valine, twikoo, waline, minivaline, disqus, disqusjs, gitalk, vssue, livere, isso, hashover ValinetwikoowalineMiniValineVssueGitalkDisqusDisqusJSLivereIssoHashover... 一款快速、简洁且高效的无后端评论系统 https://valine.js.org blog/_config.volantis.ymlcomments: ... service: valine ... valine: # js: https://cdn.jsdelivr.net/npm/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.ymlcomments: ... service: twikoo ... twikoo: js: https://cdn.jsdelivr.net/npm/twikoo@latest # 建议锁定版本 path: # 全局评论地址 # 其他配置项按照yml格式继续填写即可 除了 [el path] 选项 envId: xxxxxxxxxxxxxxx # 腾讯云环境id 一个简洁、安全、免费的静态网站评论系统 | 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 ... 可选配置项详见源码 一款快速、简洁且高效的无后端评论系统 https://github.com/MiniValine/MiniValine/ blog/_config.volantis.ymlcomments: ... service: minivaline ... # MiniValine # https://github.com/MiniValine/MiniValine minivaline: js: https://cdn.jsdelivr.net/npm/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.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 - The #1 way to build an audience on your website. https://disqus.com/ blog/_config.volantis.ymlcomments: ... service: disqus ... disqus: shortname: Render Disqus comments in Mainland China using Disqus API https://github.com/SukkaW/DisqusJS blog/_config.volantis.ymlcomments: ... 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.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 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 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.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 的代码 收录更多评论系统 站内搜索blog/_config.volantis.ymlsearch: enable: true service: hexo # hexo, google, algolia, azure, baidu js: https://cdn.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.ymlplugins: ################# required plugins ################ # jquery jquery: https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js # fontawesome fontawesome: https://cdn.jsdelivr.net/npm/@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://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js flying_pages: https://cdn.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://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js onlypost: false loadingImg: # https://cdn.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://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js css: https://cdn.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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css js: https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js # fontawesome animation fontawesome_animation: enable: #true css: https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css # Typing Effects comment_typing: enable: #true js: https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js # Slide Background backstretch: enable: #true js: https://cdn.jsdelivr.net/npm/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://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/012.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/019.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/033.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/035.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/038.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/039.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/042.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/052.jpg - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/054.jpg - https://cdn.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://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 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://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 域名 # Tidio聊天功能 # https://www.tidio.com/ tidio: enable: #true id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 幻灯片背景blog/_config.volantis.ymlplugins: ... backstretch: enable: true js: https://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg ... 幻灯片背景图片显示的位置可以选择粘贴在封面上,跟随封面一起滑动,也可以选择固定作为网页背景图片。 highlight.jsblog/_config.volantis.ymlplugins: ... # highlight.js highlightjs: enable: true # Please set hexo.config.highlight.enable = false !!! js: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js css: https://cdn.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.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: ... # 样式:source/css/_plugins/dark.styl # 开关按钮:在 navbar.menu 中添加: # - name: 暗黑模式 # 可自定义 # icon: fas fa-moon # 可自定义 # toggle: darkmode darkmodejs: 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 `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接口 BBtalkblog/_config.volantis.ymlplugins: ... bbtalk: 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: ... # Tidio聊天功能 # https://www.tidio.com/ tidio: enable: true id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}],"posts":[{"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":"2021-05-17T08:08:37.075Z","comments":true,"path":"blogs/2021-4-14-photos/","link":"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":"2021-05-17T08:08:37.075Z","comments":true,"path":"blogs/2021-4-1-hls/","link":"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":"2021-05-17T08:08:37.075Z","comments":true,"path":"blogs/2021-3-31-highlightjs/","link":"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":"2021-05-17T08:08:37.075Z","comments":true,"path":"blogs/2021-2-30-slider/","link":"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":"2021-05-17T08:08:37.075Z","comments":true,"path":"blogs/2021-3-7-framei8/","link":"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":"为 hexo 博客支持 sweetalert 弹窗","slug":"blogs/2021-2-19-hexo-supports-sweetalert","date":"2021-02-19T00:00:00.000Z","updated":"2021-02-19T00:00:00.000Z","comments":true,"path":"blogs/2021-2-19-hexo-supports-sweetalert/","link":"https://luosw.fun/post/e281.html","permalink":"https://volantis.js.org/blogs/2021-2-19-hexo-supports-sweetalert/","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":"luosw"},{"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://www.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://www.heson10.com/posts/15701.html","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://www.heson10.com/posts/59108.html","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/2020-08-23-issues-api/","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":"给 Volantis 主题调用 Valine 最新评论","slug":"blogs/2020-09-03-latest-comments","date":"2020-08-28T00:00:00.000Z","updated":"2020-09-03T00:00:00.000Z","comments":true,"path":"blogs/2020-09-03-latest-comments/","link":"https://www.heson10.com/posts/7207.html","permalink":"https://volantis.js.org/blogs/2020-09-03-latest-comments/","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":"给 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://www.heson10.com/posts/19736.html","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":"如何快速优雅地删除 Valine 的垃圾评论","slug":"blogs/2020-07-03-valine","date":"2020-07-03T00:00:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"blogs/2020-07-03-valine/","link":"","permalink":"https://volantis.js.org/blogs/2020-07-03-valine/","excerpt":"Valine 评论由于可以匿名,发言成本低、质量低,使用 app 可以方便的删除垃圾评论。","text":"Valine 评论由于可以匿名,发言成本低、质量低,使用 app 可以方便的删除垃圾评论。 操作演示Your browser does not support the video tag. App 只支持数据存储于 LeanCloud 的评论系统。 App 登录前需要配置 AppID 和 AppKey,由于字符比较长,输入不方便,所以支持 URL Scheme 配置。将 URL 生成一个二维码,然后用手机扫码就可以打开 App 并自动配置好。 格式为: valine://cfg/id=7yIoRlSmfX09vQCERsuWzFnx-MdYXbMMI&key=3zCL5GFePTUjwbqLop44QFbr&alias=测试项目 也可以把管理员用户的账号和密码配置上,扫码直接登录,但是注意不要泄露出去: valine://cfg/id=7yIoRlSmfX09vQCERsuWzFnx-MdYXbMMI&key=3zCL5GFePTUjwbqLop44QFbr&alias=测试项目&user=me@xaoxuu.com&psw=q 注意:这个管理员用户并不是 LeanCloud 的账号,而是当前 Valine 数据库中的 _User 表中的一个用户,可以在 App 中注册,然后在 LeanCloud 上把注册的用户设置为管理员。 设置管理员的方法:在 _Role 表中新建一个 admin 角色,然后在 admin 角色的 users 列中点击 Relations 把自己刚注册的用户添加进去,这个用户就有了修改和删除评论数据的权限。 App 测试版地址 Valine for iOS Valine for Android","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":"Volantis 主题部署 Pjax","slug":"blogs/2020-05-17-pjax","date":"2020-05-17T00:00:00.000Z","updated":"2020-08-07T00:00:00.000Z","comments":true,"path":"blogs/2020-05-17-pjax/","link":"https://inkss.cn/blog/76993423/","permalink":"https://volantis.js.org/blogs/2020-05-17-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"},{"title":"关于主题与文档的更新","slug":"news/2020-04-04","date":"2020-04-04T00:00:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"news/2020-04-04/","link":"https://github.com/volantis-x/hexo-theme-volantis/issues/215","permalink":"https://volantis.js.org/news/2020-04-04/","excerpt":"由于主题目前仍处于青少年阶段,更新迭代速度比较快,所以不会保留旧版本的文档,如果需要查看旧版本的文档,请下载主题文档的源码,回退到旧版本,本地运行查看。 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时,即最终会同时维护3个大版本的文档。 当主题稳定后会提供英文文档。","text":"由于主题目前仍处于青少年阶段,更新迭代速度比较快,所以不会保留旧版本的文档,如果需要查看旧版本的文档,请下载主题文档的源码,回退到旧版本,本地运行查看。 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时,即最终会同时维护3个大版本的文档。 当主题稳定后会提供英文文档。","categories":[{"name":"官方资讯","slug":"官方资讯","permalink":"https://volantis.js.org/categories/%E5%AE%98%E6%96%B9%E8%B5%84%E8%AE%AF/"}],"tags":[]},{"title":"新版本「2.0」正式版发布","slug":"news/2020-03-10-2.0","date":"2020-03-10T00:00:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"news/2020-03-10-2.0/","link":"","permalink":"https://volantis.js.org/news/2020-03-10-2.0/","excerpt":"本次更新内容非常多,主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户,请您卸载掉旧的样式渲染插件,并安装新的: 卸载 less npm uninstall hexo-renderer-less --save 安装 stylus npm install hexo-renderer-stylus --save","text":"本次更新内容非常多,主要升级了导航栏、使用新的语言重写了全部样式。旧版本 Volantis 用户,请您卸载掉旧的样式渲染插件,并安装新的: 卸载 less npm uninstall hexo-renderer-less --save 安装 stylus npm install hexo-renderer-stylus --save 新功能导航栏导航栏获得了史诗级的增强,可以设置N级子菜单。考虑到实用性,不太建议使用过多或者过深的菜单(超出屏幕的部分无法被看到)。 样式设置现在可以在主题配置文件中设置更多的样式: 最大布局宽度 导航栏高度、特效(阴影、毛玻璃、鼠标hover时浮起) 卡片特效(阴影、毛玻璃、鼠标hover时浮起) 代码框是否显示语言 标题和正文文本布局(靠左、靠右、居中) 正文字体 代码字体 各部分颜色 封面封面可以在主题配置文件中设置在首页、归档页面、其它页面默认是否显示。封面中可以同时显示logo图片、标题、副标题了。 小部件grid小部件可以设置 fixed: true 来固定网格宽度(适合文字长短不一的场景)。 其它可以设置「评论」的标题和副标题。可以创建多种颜色的折叠框。友链增加分组描述。 功能调整与优化样式渲染器使用 stylus 重写了所有样式,无需安装less插件了。相较于1.7.4,css文件体积缩小了19.75%。 主题配置文件 主题配置文件经过了较大改动,使得层级结构更加清晰。 优化了二维码(微信)分享的使用体验","categories":[{"name":"官方资讯","slug":"官方资讯","permalink":"https://volantis.js.org/categories/%E5%AE%98%E6%96%B9%E8%B5%84%E8%AE%AF/"}],"tags":[]},{"title":"新版本「2.0」测试版发布","slug":"news/2020-03-06-2.0-beta","date":"2020-03-06T19:43:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"news/2020-03-06-2.0-beta/","link":"","permalink":"https://volantis.js.org/news/2020-03-06-2.0-beta/","excerpt":"Beta6 导航栏N级菜单支持分割线和小标题,详见我的个人博客。","text":"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","categories":[{"name":"官方资讯","slug":"官方资讯","permalink":"https://volantis.js.org/categories/%E5%AE%98%E6%96%B9%E8%B5%84%E8%AE%AF/"}],"tags":[]},{"title":"测试「文章内链接作文本的话无法生成静态文件」","slug":"test/2020-03-06-test-url","date":"2020-03-06T00:00:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/2020-03-06-test-url/","link":"","permalink":"https://volantis.js.org/test/2020-03-06-test-url/","excerpt":"","text":"5、测试Tomcat是否配置成功:打开浏览器,输入在地址栏中输入: http://localhost:8080 的运行结果如下图即为即为配置成功!(因为Tomcat已经在运行再次打开会报错) 相关 Issue: #164 结论:存在这篇文章的情况下能够成功 deploy ,说明这不是主题的 BUG。 markdwon 解析插件为 hexo-renderer-marked 时此插件默认会自动识别 URL ,且原文链接前后没有空格,所以链接前后增加一个空格或者在根目录配置文件中设置 autolink: false 都可以避免 deploy 报错。插件:hexo-renderer-marked","categories":[],"tags":[]},{"title":"新增 pjax 开发分支","slug":"news/2020-02-25","date":"2020-02-25T00:00:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"news/2020-02-25/","link":"","permalink":"https://volantis.js.org/news/2020-02-25/","excerpt":"","text":"由于功能未完全兼容,如果想率先使用,尽量不要改主题配置文件。 不能使用封面 mathjax 有折叠框的页面,折叠框打开之后目录高亮位置不对应 很多未知问题 感谢 @inkss 发布的这篇教程 《Hexo 博客部署 Pjax 局部刷新》当所有兼容性问题解决或妥协之后,pjax 分支会合并入 master。","categories":[{"name":"官方资讯","slug":"官方资讯","permalink":"https://volantis.js.org/categories/%E5%AE%98%E6%96%B9%E8%B5%84%E8%AE%AF/"}],"tags":[]},{"title":"主题更名为「Volantis」","slug":"news/2020-02-22","date":"2020-02-22T00:00:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"news/2020-02-22/","link":"","permalink":"https://volantis.js.org/news/2020-02-22/","excerpt":"","text":"主题原名「Material X」,最初由「Material-Flow」改编,现已完全没有材质化设计的影子了。风格偏向简约风技术类博客,最大的特点是自由。现更名为「Volantis」,取自权力的游戏地名。","categories":[{"name":"官方资讯","slug":"官方资讯","permalink":"https://volantis.js.org/categories/%E5%AE%98%E6%96%B9%E8%B5%84%E8%AE%AF/"}],"tags":[]},{"title":"主题文档网页更新并开源","slug":"news/2020-02-21","date":"2020-02-21T00:00:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"news/2020-02-21/","link":"","permalink":"https://volantis.js.org/news/2020-02-21/","excerpt":"","text":"主题经过几年迭代,现已高度模块化和可定制化,功能相对完善,适合用作文档。原来的 文档主题 将不再维护和更新。 现在使用的文档页面源码是: volantis-docs","categories":[{"name":"官方资讯","slug":"官方资讯","permalink":"https://volantis.js.org/categories/%E5%AE%98%E6%96%B9%E8%B5%84%E8%AE%AF/"}],"tags":[]},{"title":"已关闭评论区","slug":"news/2020-02-20","date":"2020-02-20T00:00:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"news/2020-02-20/","link":"","permalink":"https://volantis.js.org/news/2020-02-20/","excerpt":"","text":"使用 GitHub Issue由于 Valine 匿名评论不适合追踪和解决问题,因此决定暂时关闭评论区。为了精准高效解决问题,请前往 GitHub Issue 遇到问题怎么办 确定已经查阅文档找不到相关内容。 前往「常见问题」页面,查看是否有解决方案。 访问在线示例,查看是否具有相同第问题。 如果在线示例表示正常,则说明自己配置有误,检查开发环境、主题配置是否正确。如果检查不出问题,提Issue询问。 如果在线示例也存在相同问题,则说明存在BUG,请提Issue反馈。 如果在线示例没有相关内容,下载示例博客源码,修改运行本地预览,进行第3步判断操作。","categories":[{"name":"官方资讯","slug":"官方资讯","permalink":"https://volantis.js.org/categories/%E5%AE%98%E6%96%B9%E8%B5%84%E8%AE%AF/"}],"tags":[]},{"title":"版本命名规范化","slug":"news/2020-02-19","date":"2020-02-19T00:00:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"news/2020-02-19/","link":"","permalink":"https://volantis.js.org/news/2020-02-19/","excerpt":"","text":"主版本号.子版本号.修订版本号 主题从2017年至今,已经经历了相当多的大版本迭代和数不尽的小版本更新,但是版本号的更新一直没有遵循规范。从下次更新开始,将遵循下述的规范: 主版本号: 较大改动、框架调整或重构 子版本号: 较小或局部的功能性更新 修订版本号: 修复BUG或无关紧要的细节调整","categories":[{"name":"官方资讯","slug":"官方资讯","permalink":"https://volantis.js.org/categories/%E5%AE%98%E6%96%B9%E8%B5%84%E8%AE%AF/"}],"tags":[]},{"title":"心率测量工具限免活动","slug":"news/2020-02-18","date":"2020-02-18T00:00:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"news/2020-02-18/","link":"","permalink":"https://volantis.js.org/news/2020-02-18/","excerpt":"","text":"心率管家 App(仅iOS端),专业版不定期限免,欢迎下载体验。 如果您看到的时候已经过了限免期,可以先下载免费版使用。为了吸引 app 推荐类网站的爬虫进行推荐,专业版的价格通常在0元到68元之间浮动变化的。 心率管家 专业版 心率管家 免费版","categories":[{"name":"官方资讯","slug":"官方资讯","permalink":"https://volantis.js.org/categories/%E5%AE%98%E6%96%B9%E8%B5%84%E8%AE%AF/"}],"tags":[]},{"title":"Code Highlight Style test","slug":"test/code-highlight","date":"2019-07-25T16:43:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/code-highlight/","link":"","permalink":"https://volantis.js.org/test/code-highlight/","excerpt":"Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org","text":"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_authorizationdef somefunc(param1='', param2=0): r'''A docstring''' if param1 > param2: # interesting print 'Gre\\'ater' return (param2 - param1 + 1 + 0b10l) or Noneclass 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");-- Initialsinsert 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 classclass Greeter def initialize(name) @name = name.capitalize end def salute puts "Hello #{@name}!" endendg = Greeter.new("world")g.salute # MakefileBUILDDIR = _buildEXTRAS ?= $(BUILDDIR)/extras.PHONY: main cleanmain: @echo "Building main facility..." build_main $(BUILDDIR)clean: rm -rf $(BUILDDIR)/* package mainimport "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###### CONFIGACCEPTED_HOSTS="/root/.hag_accepted.conf"BE_VERBOSE=falseif [ "$UID" -ne 0 ]then echo "Superuser rights required" exit 2figenApacheConf(){ echo -e "# Host ${HOME_DIR}$1/$2 :"} ; boilerplate[package]name = "some_name"authors = ["Author"]description = "This is \\a description"[[lib]]name = ${NAME}default = Trueauto = nocounter = 1_000","categories":[],"tags":[]},{"title":"Markdown Style test","slug":"test/markdown","date":"2018-07-24T23:31:06.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/markdown/","link":"","permalink":"https://volantis.js.org/test/markdown/","excerpt":"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.","text":"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###### H6Alternatively, for H1 and H2, an underline-ish style:Alt-H1======Alt-H2------ H1H2H3H4H5H6Alternatively, for H1 and H2, an underline-ish style: Alt-H1Alt-H2EmphasisEmphasis, 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. Lists1. First ordered list item2. Another item * Unordered sub-list.1. Actual numbers don't matter, just that it's a number 1. Ordered sub-list4. 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. First ordered list item Another item Unordered sub-list. Actual numbers don't matter, just that it's a number Ordered sub-list 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> Links[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://cdn.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. Imageshover 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: Reference-style: Code and Syntax HighlightingInline 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| 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 Colons can be used to align columns. | Tables | Are | Cool || ------------- |:-------------:| -----:|| col 3 is | right-aligned | || col 2 is | centered | || zebra stripes | are neat | Tables Are Cool col 3 is right-aligned col 2 is centered zebra stripes are 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 Markdown Less Pretty Still renders nicely 1 2 3 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 RuleThree or more... ---Hyphens***Asterisks___Underscores Hyphens Asterisks Underscores Line BreaksHere'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) Pure markdown version:","categories":[],"tags":[{"name":"Foo","slug":"foo","permalink":"https://volantis.js.org/tags/foo/"},{"name":"Bar","slug":"bar","permalink":"https://volantis.js.org/tags/bar/"}]},{"title":"","slug":"news/2017-10-24","date":"2017-10-24T00:00:00.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"news/2017-10-24/","link":"","permalink":"https://volantis.js.org/news/2017-10-24/","excerpt":"","text":"Volantis A Wonderful Theme for Hexo Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性,您可以轻松搭建一个极简风格的博客,也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。 开始使用","categories":[{"name":"官方资讯","slug":"官方资讯","permalink":"https://volantis.js.org/categories/%E5%AE%98%E6%96%B9%E8%B5%84%E8%AE%AF/"}],"tags":[]},{"title":"Images","slug":"test/images","date":"2013-12-26T22:46:49.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/images/","link":"","permalink":"https://volantis.js.org/test/images/","excerpt":"","text":"This is a image test post. 截屏2020-03-1317.25.10.png 截屏2020-03-1317.27.42.png 截屏2020-03-1317.28.02.png","categories":[],"tags":[]},{"title":"","slug":"test/no-title","date":"2013-12-25T22:57:49.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/no-title/","link":"","permalink":"https://volantis.js.org/test/no-title/","excerpt":"","text":"This post doesn't have a title. Make sure it's accessible.","categories":[],"tags":[]},{"title":"Excerpts","slug":"test/excerpts","date":"2013-12-25T00:23:23.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/excerpts/","link":"","permalink":"https://volantis.js.org/test/excerpts/","excerpt":"The following contents should be invisible in home/archive page.","text":"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.","categories":[],"tags":[]},{"title":"Videos","slug":"test/videos","date":"2013-12-25T00:19:15.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/videos/","link":"","permalink":"https://volantis.js.org/test/videos/","excerpt":"","text":"This is a video test post. Youtube Vimeo","categories":[],"tags":[]},{"title":"Gallery Post","slug":"test/gallery-post","date":"2013-12-25T00:16:18.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/gallery-post/","link":"","permalink":"https://volantis.js.org/test/gallery-post/","excerpt":"","text":"This post contains 4 photos: Widescreen wallpaper Portrait photo Dual widescreen wallpaper Small photo All photos should be displayed properly.","categories":[],"tags":[]},{"title":"Tag Plugins","slug":"test/tag-plugins","date":"2013-12-25T00:14:39.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/tag-plugins/","link":"","permalink":"https://volantis.js.org/test/tag-plugins/","excerpt":"","text":"This post is used for testing tag plugins. See docs for more info. Block QuoteNormal blockquote Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. Quote from a bookDo not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy. David LevithanWide Awake Quote from TwitterNEW: DevDocs now comes with syntax highlighting. http://devdocs.io @DevDocstwitter.com/devdocs/status/356095192085962752 Quote from an article on the webEvery 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 BlockNormal code blockalert('Hello World!'); With captionArray.maparray.map(callback[, thisArg]) With caption and URL.compactUnderscore.js.compact([0, 1, false, 2, ‘’, 3]);=> [1, 2, 3] With marked linesLine 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 PullquoteLeftLorem 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. RightLorem 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.","categories":[],"tags":[]},{"title":"www.google.com","slug":"test/link-post-without-title","date":"2013-12-24T23:44:13.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/link-post-without-title/","link":"http://www.google.com/","permalink":"https://volantis.js.org/test/link-post-without-title/","excerpt":"","text":"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.","categories":[],"tags":[]},{"title":"日本語テスト","slug":"test/日本語テスト","date":"2013-12-24T23:33:26.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/日本語テスト/","link":"","permalink":"https://volantis.js.org/test/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%86%E3%82%B9%E3%83%88/","excerpt":"","text":"This is a Japanese test post. 私は昨日ついにその助力家というのの上よりするたなけれ。 最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。 がたを知っないはずも同時に九月をいよいよたありた。 もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。 それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。 この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。 From すぐ使えるダミーテキスト - 日本語 Lorem ipsum","categories":[],"tags":[]},{"title":"中文測試","slug":"test/中文測試","date":"2013-12-24T23:31:30.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/中文測試/","link":"","permalink":"https://volantis.js.org/test/%E4%B8%AD%E6%96%87%E6%B8%AC%E8%A9%A6/","excerpt":"","text":"This is a Chinese test post. 善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時,安程幾?合學作。觀經而作建。都非子作這!法如言子你關!手師也。 以也座論頭室業放。要車時地變此親不老高小是統習直麼調未,行年香一? 就竟在,是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結,進快保的行戰從:弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影;全氣具些回童但倒影發狀在示,數上學大法很,如要我……月品大供這起服滿老?應學傳者國:山式排只不之然清同關;細車是!停屋常間又,資畫領生,相們制在?公別的人寫教資夠。資再我我!只臉夫藝量不路政吃息緊回力之;兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會,經時取頭,嚴了新科同?很夫營動通打,出和導一樂,查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。 國新故。 工步他始能詩的,裝進分星海演意學值例道……於財型目古香亮自和這乎?化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不? From 亂數假文產生器 - Chinese Lorem Ipsum","categories":[],"tags":[]},{"title":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.","slug":"test/long-title","date":"2013-12-24T23:31:06.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/long-title/","link":"","permalink":"https://volantis.js.org/test/long-title/","excerpt":"","text":"This post has a long title. Make sure the title displayed right.","categories":[],"tags":[]},{"title":"Link Post","slug":"test/link-post","date":"2013-12-24T23:30:04.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/link-post/","link":"http://www.google.com/","permalink":"https://volantis.js.org/test/link-post/","excerpt":"","text":"This is a link post. Clicking on the link should open Google in a new tab or window.","categories":[],"tags":[]},{"title":"Elements","slug":"test/elements","date":"2013-12-24T23:29:08.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/elements/","link":"","permalink":"https://volantis.js.org/test/elements/","excerpt":"","text":"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 1Heading 2Heading 3Heading 4Heading 5Heading 6 ParagraphLorem 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 TypesDefinition List (dl)Definition List TitleThis is a definition list division. Ordered List (ol) List Item 1 List Item 2 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 1 Table Header 2 Table Header 3 Division 1 Division 2 Division 3 Division 1 Division 2 Division 3 Division 1 Division 2 Division 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.","categories":[],"tags":[]},{"title":"Hello World","slug":"test/hello-world","date":"2013-12-24T17:49:32.000Z","updated":"2021-05-17T08:08:37.075Z","comments":true,"path":"test/hello-world/","link":"","permalink":"https://volantis.js.org/test/hello-world/","excerpt":"","text":"Welcome to Hexo! This is your very first post. Check documentation to learn how to use.","categories":[],"tags":[]}],"categories":[{"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/"},{"name":"官方资讯","slug":"官方资讯","permalink":"https://volantis.js.org/categories/%E5%AE%98%E6%96%B9%E8%B5%84%E8%AE%AF/"}],"tags":[{"name":"Foo","slug":"foo","permalink":"https://volantis.js.org/tags/foo/"},{"name":"Bar","slug":"bar","permalink":"https://volantis.js.org/tags/bar/"}]} \ 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":"2024-03-28T06:49:49.706Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"404.html","permalink":"https://volantis.js.org/404","excerpt":"","text":"404 很抱歉,您访问的页面不存在 可能是输入地址有误或该地址已被删除"},{"title":"鸣谢项目和社区贡献者","date":"2024-03-28T06:49:49.910Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"contributors/index.html","permalink":"https://volantis.js.org/contributors/","excerpt":"Volantis 社区的发展离不开团队大佬们的无私奉献和社区小伙伴们的热情互助。每一个心怀梦想、有着独特见解的朋友都可以成为团队的一员。目前 Volantis 社区正处于建设初期,我们缺少各方面的人才,如果您使用主题至少一个月且长期活跃于社区,例如: 解答 issues / discussions 提交有效的建议 官网文档补全/纠错 发现并收录有意思的文章(搭建博客方面)到官网 我们非常欢迎您的加入,请在论坛发帖告诉我们。","text":"Volantis 社区的发展离不开团队大佬们的无私奉献和社区小伙伴们的热情互助。每一个心怀梦想、有着独特见解的朋友都可以成为团队的一员。目前 Volantis 社区正处于建设初期,我们缺少各方面的人才,如果您使用主题至少一个月且长期活跃于社区,例如: 解答 issues / discussions 提交有效的建议 官网文档补全/纠错 发现并收录有意思的文章(搭建博客方面)到官网 我们非常欢迎您的加入,请在论坛发帖告诉我们。 感谢开发者 感谢社区建设者 如何参与社区建设社区建设主要包括 Issues Discussions(论坛) 官网博客收录 官网文档维护 几个方面。 如何维护文档目前 Volantis 已是已知的 Hexo 主题中文档最全面的,但仍有部分功能缺少明确的文档、部分文档已经过时,如果您发现了遗漏或者错误之处,我们非常希望您能够帮忙完善一下。 Volantis 官网支持 CI ,您可以直接在线编辑源码: 在线编辑文档https://github.com/volantis-x/community/tree/main/source 发布与分享文章每位用户在使用或更新主题的时候都需要阅读官网的文档,收录的相关内容能帮助用户更高效地上手,同时也能够提高被收录的文章的曝光率。如果在官网能看到更多的有价值的文章,就会有更多 Volantis 用户或者非 Volantis 用户来访问。 如果您有或者发现了与 Hexo 博客搭建相关的文章,可以转载外链到 Volantis 官网,示例如下: _posts/blogs/2020-05-17-pjax.md---title: Volantis 主题部署 Pjaxdate: 2020-05-17updated: 2020-08-07categories: [开发心得]author: inksslink: https://inkss.cn/blog/76993423/description: 本篇文章记录了我对 Volantis 主题做 Pjax 兼容的种种,大抵算是种记录吧~headimg: # 可以设置文章头图backup: https://web.archive.org/web/xxxxxxxxxx # 将页面存档到互联网档案馆 archive.org 的存档链接 https://web.archive.org/save--- 如果这篇文章的作者是第一次出现在官网,还需要在 _data/author.yml 文件中添加作者信息,例如: _data/author.yml...inkss: name: 枋柚梓 avatar: https://cdn.jsdelivr.net/gh/inkss/common@1.4.2/hexo/img/static/avatar.jpg url: https://inkss.cn 注意事项文章存放在 _posts/blogs/ 目录中,且文件名格式为「年-月-日-文章话题」。鼓励原创文章,摘要部分300字符以内。如果想不出摘要可以不写,不要在摘要里重复一遍文章标题。最好选择一个文章分类,如果现有的分类中没有合适的,可以自己新增。如果有文章头图,请确保图片内最多只有一个单词或短语,图片不清晰或者与文章无关的话不建议使用。不仅限于自己的文章,可以在征得文章作者同意的情况下将其链接收录到官网。 在线编辑文档https://github.com/volantis-x/community/tree/main/source/_posts/blogs"},{"title":"","date":"2024-03-28T06:49:49.910Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"examples/index.html","permalink":"https://volantis.js.org/examples/","excerpt":"示 例 博 客 社区维护团队的博客xaoxuu开发者MHuiG划水Colsrch开发者inkss摸鱼volantis-x.js.orgTest Site For Development 使用 Volantis 的博客示例","text":"示 例 博 客 社区维护团队的博客xaoxuu开发者MHuiG划水Colsrch开发者inkss摸鱼volantis-x.js.orgTest Site For Development 使用 Volantis 的博客示例 如何添加自己的博客链接 第一步:新建 Issue 按照格式填写并提交 { "title": "", "description": "", "screenshot": "", "url": "", "avatar": "", "version": "版本:^4.0"}为了提高图片加载速度,建议优化图片尺寸:打开 压缩图 上传自己的截图,将图片的高度调整到 360px 后下载。将压缩后的图片上传到 ImgURL免费图床 或 去不图床 并使用此图片链接作为截图链接。 第二步:刷新 回来刷新即可生效。 如何更新自己的博客链接 如果是自己创建的 issue ,可以自己修改。 如果是管理员创建的,请自己重新创建一份,然后让管理员删掉旧的。"},{"title":"常见问题与反馈渠道","date":"2024-03-28T06:49:49.914Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"faqs/index.html","permalink":"https://volantis.js.org/faqs/","excerpt":"通常来说,一个全新的工程全部使用默认配置是正常没有故障的。如果无法使用或者效果与示例有较大区别,可以使用 Hexo 官方提供的用于单元测试的博客应用本主题查看样式是否正常,对比 _config.yml 文件排查问题。 Hexo 官方的单元测试项目: https://github.com/hexojs/hexo-theme-unit-test 向开发者反馈问题","text":"通常来说,一个全新的工程全部使用默认配置是正常没有故障的。如果无法使用或者效果与示例有较大区别,可以使用 Hexo 官方提供的用于单元测试的博客应用本主题查看样式是否正常,对比 _config.yml 文件排查问题。 Hexo 官方的单元测试项目: https://github.com/hexojs/hexo-theme-unit-test 向开发者反馈问题 如何更新主题使用主题的时候,尽量 fork 主题到自己的 GitHub,然后进行修改并使用。这样做的好处是:当主题进行重要更新的时候可以根据需要拉取合并代码,使自己 DIY 的主题能够通过更新获取 BUG 修复或者新特性。 如果不懂请自行搜索关键词:fork 更新 实用小技巧所有需要写在主题配置文件中的配置都可以写在站点配置文件的 theme_config: 中,在 Hexo 5.0 后,还可以写在 _config.volantis.yml 文件中,详见 Hexo 官方文档:覆盖主题配置https://hexo.io/zh-cn/docs/configuration#覆盖主题配置也可以直接查看本站源码中站点配置文件的写法:_config.volantis.yml 无法成功运行本地预览 可能是没有安装依赖,请按照「开始」页面中的步骤进行安装,并安装所需依赖。 如果开启了某些第三方服务,请查看文档中是否要求安装插件。 如果报错信息有 lastIndex,你可以尝试把博客根目录配置文件中找到 highlight,并将 auto_detect 设置为 false。 主题配置修改没有生效请确认文档中要求修改的是博客主目录的配置文件 blog/_config.yml 还是主题的配置文件 blog/_config.volantis.yml。 主题样式修改没有生效如果主题配置文件中开启了 cdn 服务,那么修改本地的样式是不会生效的,需要关闭 cdn 服务。 修改什么都没有生效需要 hexo clean 然后重新 hexo s 如果安装了「相关文章推荐」插件后,每次修改 md 文件后都需要重新 hexo s 关掉 CDN 之后样式错乱 请前往文档「开始」页面,检查是否安装了必要的依赖包。 搜索无法使用 请前往文档「开始」页面,检查是否安装了必要的依赖包。 检查根目录配置文件是否有 search 字段冲突。 如果以上两步都无法找到问题,请下载示例源码进行对比。 搜索结果链接不正确请检查根目录配置文件中的链接是否正确,如: blog/_config.ymlurl: https://xaoxuu.comroot: / 教程与指南 Hexo 官方文档请一定要阅读官方文档! 可供交流的渠道解决问题 渠道 方式 用途 Issues @volantis-x/hexo-theme-volantis 和开发者沟通的唯一渠道,用于跟进和解决问题 请不要发送邮件开源项目的开发者很反感别人不通过正确的途径如 Issues 而是通过私人邮件询问开源项目问题,所以一般不会回复此类邮件。 交流 渠道 方式 用途 论坛 @volantis-x/discussions 慢,相对正式,方便检索,可以给其他用户参考 QQ群 1146399464 (验证码: vlts-2021) 非正式,即时通讯,易于斗图;不利于给其他用户参考 Telegram t.me/volantis_x 非正式,即时通讯,佛系交流互动 Gitter hexo-theme-volantis/community 佛系交流互动 评论区 留言 佛系交流互动 可以测试、灌水、推广自己的博客。"},{"title":"如何正确地更新主题","date":"2024-03-28T06:49:49.950Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"how-to-update/index.html","permalink":"https://volantis.js.org/how-to-update/","excerpt":"","text":"如何正确地更新主题https://github.com/volantis-x/hexo-theme-volantis/issues/459 稳定版本如果您以内容创作为主,推荐使用稳定版本:npm i hexo-theme-volantis 更新时,把 package.json 中的版本号改为 * 再执行 npm i 就可以了。 如果您需要对主题的源文件进行修改,推荐 fork引用并修改自己 fork 的那份,当主题有更新时,合并到自己的分支。 如果您不 fork 而直接修改主题源码,是没办法获得更新的!Fork 篇本文以 GitKraken 软件的使用展开,相关链接:GitKraken: Free Git GUI Client - Windows, Mac, Linux 如果您按照主题文章中的 设置子模块 已经克隆了一份主题并添加到自己的博客仓库中,那么本篇文章将极大的帮助到您,如果您还没有如此操作,不妨尝试一番。这里是本文的仓库环境:博客仓库 Hexo-Blog 、主题仓库 volantis 。 一、GitKraken 的简单操作在 GitKraken 的软件界面中,位于正中间面积最大的区域是仓库的历史提交信息,右边为选中提交记录的详情,左边则放有一些仓库相关的信息,将目光集中到左边的 SUBMODULES 选项栏,如果您已经正常的将 Fork 的主题仓库添加到博客仓库中,您便可以在这里看到。展开 SUBMODULES 选项卡,右键并选择 Open this submodlue 打开子模块: 博客仓库 打开子模块 如此进入的仓库为您的主题仓库,可以在当前页面中查看到所有提交的历史记录等等。为了避免一些拗口的称呼所带来的不良影响,这里设定如下:将 Fork 的仓库称为 主题仓库 ,将 hexo-theme-volantis 仓库称为 volantis 仓库。 主题仓库 在图中,当前 Fork 的主题仓库所处的分支为 master-theme ,图中右侧展示的是个人主题仓库的最后一次提交信息。中间区域,较上部分在写有 master 标记的为 volantis 仓库的分支(您可以通过右侧的 Logo 图片进行区别)。显而易见的,当前主题仓库已经落后 Volantis 仓库,下面我们便需要合并代码到自己的主题仓库中。如果您打开后的界面并没有看到 Volantis 的仓库信息,意味着当前没有添加 Volantis 仓库为远端,您可以按照如下操作添加: 添加 Volantis 远端仓库信息 在左侧面板的 REMOTE 选项卡处,点击加号,进入如下图所示界面,选中 volantis-x/hexo-theme-volantis 后添加即可。 二、GitKraken 的合并操作1. Merge在 volantis 仓库的 master 分支处右键,选择 Merge volantis/master into xxxx,进行合并操作。至于为什么不选择变基(Rebase),个人认为保留仓库的提交历史比修改历史更好。通常,合并操作会自动完成,但是如若冲突时,会收到如此提醒:Merge Failed ,There are merge conflicts that need tobe resolved. 如它所说存在需要解决的冲突,此时右侧选项卡会展示 Merge conflicted detected 窗口,已解决的和冲突文件会显示在其中。 点击待解决冲突的窗口,在这个页面中,上半部分为本地和远端的代码,下半部分为合并后的内容。您可以根据实际情况,如回忆修改历史,选择是选中左边本地,还是右边远端,抑或是两边都选择,如果对选择后的结果不满意,您还可以手动修改 Output 窗口中的内容,当一切结束后,点击 Save 结束操作。(原则上您必须选择其中的一方,而不是直接修改 Output 的内容) 有时,可能遇到远端删除了某个文件,收到如下提示:GitKraken was unable to determine whether to keep source/css/_plugins/gitalkstyl, would you like to keep it? GitKraken 不会主动删除您的文件,不过一般情形下无需保留,Delete The File 即可。 最后,在解决完所有冲突文件后,回到仓库列表界面,点击 Commit and Merge 完成提交。 A. 合并操作 B. 合并冲突检测 C. 选择合适的内容 D. 提交内容 2. Rebase简言之,Rebase 将你的所有修改(提交)重新放到了公共分支的最后面,当然后果是可能会经常面临是否强制提交,而且不太适合与 Merge 操作共同使用。以下内容摘抄自:Rebase - 廖雪峰的官方网站 多人在同一个分支上协作时,很容易出现冲突。后 Push 的童鞋不得不先 Pull ,在本地合并,然后才能 Push 成功。 总之看上去很乱,有强迫症的童鞋会问:为什么 Git 的提交历史不能是一条干净的直线?其实是可以做到的!Git 有一种称为 Rebase 的操作,有人把它翻译成“变基”。 Rebase 操作的特点:把分叉的提交历史“整理”成一条直线,看上去更直观。缺点是本地的分叉提交已经被修改过了。 Rebase 操作可以把本地未push的分叉提交历史整理成直线; Rebase 的目的是使得我们在查看历史提交的变化时更容易,因为分叉的提交需要三方对比。 三、冲突的产生与避免冲突一般产生于同一处被不同人修改时,Git 无法自动处理,抛出错误让用户解决。由于主题目前仍处于青少年阶段,更新迭代速度比较快,冲突现象可能会比较明显,下面提供一些思路减少这类情况。 1.首先是配置文件,根据 Hexo 的规则,所有对配置的修改都可以独立出来,无需直接修改主题仓库下的 config.yml ,这里可以参阅:创建主题配置文件。配置类文件是最不该产生冲突的地方。 2.样式文件,根据 css 的覆盖规则,使用样式覆盖比直接修改样式来的欢快,例如主题中的光标便是采用的样式覆盖的思路。 四、代码历史维护您可以对单个文件进行历史查看操作,以此来对比您所做出的个人修改,最大程度上的避免代码丢失。正所谓熟能生巧,多加操作后主题更新将不再是一件麻烦的事情,末尾愿您一路走来,最终回归创建博客的初心,完结撒花 ★,°:.☆( ̄▽ ̄)/$:.°★ 。 历史记录"},{"title":"文章分类","date":"2024-03-28T06:49:49.902Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blog/categories/index.html","permalink":"https://volantis.js.org/blog/categories/","excerpt":"","text":""},{"title":"所有标签","date":"2024-03-28T06:49:49.906Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blog/tags/index.html","permalink":"https://volantis.js.org/blog/tags/","excerpt":"","text":""},{"title":"进阶设定","date":"2024-03-28T06:49:50.066Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/advanced-settings/index.html","permalink":"https://volantis.js.org/v5/advanced-settings/","excerpt":"","text":"设置子模块 将主题添加为子模块 开始前需要确认不存在 themes/volantis 文件夹, 如果有, 请自行删除.sshhttpsgit submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantisgit submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis 多人协同默认的作者信息在主题配置文件中设置: blog/themes/volantis/_config.yml# 文章布局article: ... body: ... meta_library: author: avatar: name: 请设置文章作者 url: / Volantis 支持多个作者在一个站点发布文章,其他作者信息需要写在数据文件中,例如: blog/source/_data/author.ymlJon: name: Jon Snow avatar: https://cn.bing.com/th?id=AMMS_fc8f99fd41ebd737a71c4e13806db9a0&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=2&pid=16.1 url: https://gameofthrones.fandom.com/wiki/Jon_SnowDany: name: Daenerys Targaryen avatar: https://tse1-mm.cn.bing.net/th?id=OIP.Yax4wLzIFbcBVUa_RsKywQHaLH&w=80&h=80&c=8&rs=1&qlt=90&dpr=2&pid=3.1&rm=2 url: https://gameofthrones.fandom.com/wiki/Daenerys_Targaryen 在文章的 front-matter 中新增 author 即可: ---title: Jon Snow | Game of Thrones Wiki | Fandomauthor: Jon--- 内容安全策略(CSP)blog/_config.volantis.yml# 内容安全策略( CSP ) meta 标签 http-equiv="Content-Security-Policy"# https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP# https://content-security-policy.com/# 也可以设为 false 在 HTTP 标头中设置 https://volantis.js.org/v5/advanced-settings/#设置-HTTP-响应标头csp: enable: true content: " default-src 'self' https:; block-all-mixed-content; base-uri 'self' https:; form-action 'self' https:; worker-src 'self' https:; connect-src 'self' https: *; img-src 'self' data: https: *; media-src 'self' https: *; font-src 'self' data: https: *; frame-src 'self' https: *; manifest-src 'self' https: *; child-src https:; script-src 'self' https: 'unsafe-inline' *; style-src 'self' https: 'unsafe-inline' *; " # 可以使用自动程序替换默认的 'unsafe-inline' 和 * 生成更严格的内容安全策略. # 另可以参考官网的 gulp 方案. # gulpfile.js https://github.com/volantis-x/community/blob/main/gulpfile.js 设置 HTTP 响应标头以 Cloudflare 为例, 在 规则 > 转换规则 > HTTP 响应头修改 中,可以添加以下设置: 内容安全策略( CSP ) Content-Security-Policy: default-src 'self' https:; block-all-mixed-content; base-uri 'self' https:; form-action 'self' https:; worker-src 'self' https:; connect-src 'self' https: *; img-src 'self' data: https: *; media-src 'self' https: *; font-src 'self' data: https: *; frame-src 'self' https: *; manifest-src 'self' https: *; child-src https:; script-src 'self' https: 'unsafe-inline' *; style-src 'self' https: 'unsafe-inline' *; Doc for Content-Security-Policy 不允许在 frame 中展示 x-frame-options: DENY Doc for X-Frame-Options 为网站提速加载速度 减少不必要的 js 插件,例如字数统计、动态背景。 查找并解决拖慢速度的资源,以 Chrome 浏览器为例: 页面中点击右键,选择「检查」。 在右边的窗口中「Network」选项卡,并勾选「Disable cache」。 刷新网页,查看加载速度慢的资源。 3.1. 加载缓慢的图片,建议使用 CDN。 3.2. 加载缓慢的可以不用的 js 插件,建议舍弃。 3.3. 加载缓慢却必须使用的 js 插件,建议下载并自己上传至 CDN。 运行速度 访问具有动态特效背景(如雪花、粒子等)的网站时,手机很快会发烫变卡,笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。 优化 SEORobotsblog/_config.volantis.ymlseo: # When there are no keywords in the article's front-matter, use tags as keywords. use_tags_as_keywords: true # When there is no description in the article's front-matter, use excerpt as the description. use_excerpt_as_description: true robots: home_first_page: index,follow home_other_pages: noindex,follow archive: noindex,follow category: noindex,follow tag: noindex,follow # robots can be written in front-matter 在 front-matter 中,可以设置 keywords、description、robots 和 seo_title。其中 seo_title 仅仅用作网页标题,优先级高于 title。 文章内部不要使用 H1 标题。 通过死链检测工具检查并删除无法访问的链接。 安装 SEO 优化插件: hexo-autonofollowhttps://github.com/liuzc/hexo-autonofollow hexo-generator-seo-friendly-sitemaphttps://github.com/ludoviclefevre/hexo-generator-seo-friendly-sitemap 页面不要堆砌关键词,不要频繁更改路径。 Open Graphblog/_config.volantis.yml# https://ogp.me/# https://hexo.io/zh-cn/docs/helpers#open-graphopen_graph: image: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/android-chrome-192x192.png twitter_card: summary # summary_large_image , summary #twitter_id: #twitter_site: Structured Datablog/_config.volantis.yml# SEO 入门文档: https://developers.google.com/search/docs# https://schema.org.cn/# 结构化数据用于更改搜索结果的显示效果# 目前内置的结构化数据: blogposting, breadcrumblist, organization, person, website# 目前内置的富媒体搜索结果: 路径(面包屑导航), 徽标(Logo), 站点链接搜索框(SearchAction)# https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data# 富媒体搜索结果测试: https://search.google.com/test/rich-resultsstructured_data: enable: true # 以下是覆盖配置, 默认配置见 scripts/helpers/structured-data/lib/config.js data: person: sns: - https://github.com/volantis-x logo: path: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/android-chrome-192x192.png width: 192 height: 192 使用 CDN对于大部分将博客 deploy 到 GitHub 的用户来说,直接加载本地资源速度比较慢,可以使用 jsdelivr 为开源项目提供的 CDN 服务。 开启方法blog/_config.volantis.yml# 本地静态文件使用 CDN 加速# 默认使用 https://unpkg.com/hexo-theme-volantis@<%- theme.info.theme_version %>/source/js/*.js ,注意版本号对应关系!!可以通过修改以下配置项覆盖# 开发者注意 cdn.enable 设置为 falsecdn: enable: true # CDN 前缀,为空使用默认值,链接最后不加 "/", # 例如: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page 填写最后编译生成的源码CDN地址前缀,此路径下应该含有/js与/css目录, # 该配置默认值是:"https://unpkg.com/hexo-theme-volantis@"+ theme.info.theme_version +"/source" prefix: #https://unpkg.com/hexo-theme-volantis/source # 以下配置可以覆盖 cdn.prefix,配置项的值可以为空,但是要使用CDN必须依据路径填写配置项的键 set: js: app: /js/app.js css: style: /css/style.css # (异步加载样式)# 静态资源版本控制# 本地文件使用文件内容的hash值作为版本号(app.8c1e7c88.js) 其他为时间戳 (?time=1648684470140)# 建议静态资源设置标头浏览器缓存一年边缘缓存一个月 cache-control: max-age=86400, s-maxage=31536000 如果有更新记得刷新缓存cdn_version: true# volantis static 静态资源文件 npm 包 CDN 地址 (后面加 "/" )# https://github.com/volantis-x/volantis-staticvolantis_static_cdn: https://unpkg.com/volantis-static/ 如果你需要对样式进行 DIY,可以只关闭 style 文件的 CDN。 从V5版本开始,首屏样式采用硬编码的方式写在HTML中。首屏样式内含 cover navbar search 的样式,其他样式放入/css/style.css异步加载。 如果你需要对样式进行 DIY,请注意首屏渲染和异步延迟加载的差异。 自定义 CDN如果你把对应的文件上传到自己的 CDN 服务器,可以把对应的链接改为自己的 CDN 链接。 尝试使用 gulp 压缩静态文件安装压缩工具npm install -g gulpnpm install --save-dev gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-terser gulp-sourcemaps gulp 配置文件参考文档: gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-terser gulp-sourcemaps gulp 配置文件 https://github.com/volantis-x/community/blob/main/gulpfile.js 运行 gulpgulp 尝试使用 babel 转换兼容 ES6如果想要兼容旧版浏览器,可以尝试使用 gulp-babel 将 ES6 转换为 ES5。 安装 gulp-babel 工具npm install -g gulpnpm install --save-dev gulp-babel @babel/core @babel/preset-env gulp 配置文件参考文档: gulp gulp-babel gulp 配置文件 https://github.com/volantis-x/community/blob/main/gulpfile.jsgulp.src(['./public/**/*.js', '!./public/**/*.min.js', '!./public/{lib,lib/**}', '!./public/{libs,libs/**}', '!./public/{media,media/**}']) .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(gulp.dest('./public')) 运行 gulpgulp 安装 Service Worker 服务方案一 安装插件安装 hexo-offline-popup 或者 hexo-offline 插件,初次加载速度不变,后期切换页面和刷新网页速度越来越快。 方案二 使用 workbox 自定义配置 step 1. 修改 blog/_config.yml 文件。 blog/_config.yml# 全局导入import: body_end: - <script>"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(n){n.onupdatefound=function(){var e=n.installing;e.onstatechange=function(){switch(e.state){case"installed":navigator.serviceWorker.controller?console.log("Updated serviceWorker."):console.log("serviceWorker Sucess!");break;case"redundant":console.log("The installing service worker became redundant.")}}}}).catch(function(e){console.log("Error during service worker registration:",e)}); </script> step 2. 在 blog/source 中创建 sw.js 文件。 https://gist.github.com/MHuiG/a423c0a953ed5645840a651c33dcd60c 如果你使用了此方案,修改静态文件后发布网页一定要修改缓存版本号。 方案三 参考官网 volantis-sw.jsvolantis-sw.js discussions/791 安装「相关文章」插件 安装插件 npm i -S hexo-related-popular-posts 插件的自定义配置方法: hexo-related-popular-postshttps://github.com/tea3/hexo-related-popular-posts 如果您使用了头图,可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图: blog/_config.ymlpopularPosts: eyeCatchImageAttributeName: headimg 注意需要升级到 5.0.1 及以上版本才可以支持自定义头图,详见 #29 分析与统计数据统计PV 和 UV支持 不蒜子 的访问统计和 leancloud 统计,在配置文件中设置。 若你选择 leancloud 统计, 你还需前往 leancloud 创建应用并填写下面 leancloud 相关配置 若你选择 不蒜子 统计, 请取消下面 busuanzi 的配置注释 blog/_config.volantis.ymlanalytics: busuanzi: #/libs/busuanzi/js/busuanzi.pure.mini.js #https://cdn.jsdelivr.net/gh/volantis-x/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js leancloud: # 请使用自己的 id & key 以防止数据丢失 app_id: # 应用 APP_ID app_key: # 应用 APP_KEY custom_api_server: # 国际版一般不需要写,除非自定义了 API Server 我们还支持以下评论系统提供的访问统计: waline、twikoo、discuss、artalk 如需使用它们,请将上面 leancloud 和 busuanzi 的所有配置注释,并启用对应评论系统的统计功能 字数和阅读时长 安装以下插件:npm i --save hexo-wordcount 修改配置文件,将 wordcount 插件打开blog/_config.volantis.ymlplugins: ... # 文章字数统计、阅读时长,开启需要安装插件: npm i --save hexo-wordcount wordcount: enable: #true 然后修改配置文件,将 wordcount 写入需要显示的 meta 位置:blog/_config.volantis.yml# 文章布局article: ... # 文章详情页面的文章卡片本体布局方案 body: # 文章顶部信息 # 从 meta_library 中取 top_meta: [..., wordcount, ...] ... # 文章底部信息 # 从 meta_library 中取 bottom_meta: [..., wordcount, ...] 数据分析百度统计blog/_config.ymlbaidu_analytics_key: 百度统计的key Google Analyticsblog/_config.ymlgoogle_analytics_key: Google Analytics Key 腾讯前端性能监控blog/_config.ymltencent_aegis_id: 上报 id 51LA统计blog/_config.ymlv6_51_la: 应用id 灵雀监控blog/_config.ymlperf_51_la: 应用id CNZZ 统计请参考 ZYMIN 的这篇教程: Hexo hexo+ejs+material x 添加CNZZ统计代码https://zymin.cn/arcticle/hexo+ejs+material.html 更多进阶玩法详见 @TRHX 的这篇博客: Hexo 博客主题个性化https://www.itbob.cn/article/003/ 内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。 主题官网 #进阶玩法https://volantis.js.org/categories/进阶玩法/"},{"title":"开发文档","date":"2024-03-28T06:49:50.070Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/development-api/index.html","permalink":"https://volantis.js.org/v5/development-api/","excerpt":"","text":" Volantis5 Development API for Volantis 样式文件说明/source/css/Readme.md 全局变量volantis我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。 源码参考:layout/_partial/scripts/global.ejs VolantisApp我们提供了全局变量 VolantisApp 和一些全局函数等主题开发调用接口。 源码参考:/source/js/app.js PjaxPjax 重载区域划分接口我们提供了可以实现Pjax重载区域灵活划分的开发接口。 源码参考:layout/_plugins/pjax/index.ejs <pjax></pjax> 标签所有被 <pjax></pjax> 标签包裹的所有元素将被pjax重载。 请检查并确保 pjax 标签必须存在于所有页面 否则 pjax error. <pjax> <!--我是将被pjax重载的内容 begin--> <div> <div></div> <script></script> </div> <!--我是将被pjax重载的内容 end--></pjax> 使用案例:/layout/_partial/scripts/index.ejs script[data-pjax]所有含有 data-pjax 标记的 script 标签将被pjax重载。 <script data-pjax>我是将被pjax重载的内容</script> .pjax-reload script所有在 pjax-reload Class元素内部的 script 标签将被pjax重载。 <div class="pjax-reload"> <div> <div>我不是将被pjax重载的内容</div> <script>我是将被pjax重载的内容</script> </div></div> Pjax 回调方法我们提供了灵活的 Pjax 回调方法。 源码参考: layout/_partial/scripts/global.ejs layout/_plugins/pjax/index.ejs 使用案例:layout/_plugins/pjax/animate.ejs 中括号[]里面的内容表示选项是可选的,可以不填。下同,不再赘述。 volantis.pjax.push 在Pjax请求完成后触发。使用 volantis.pjax.push(callBack[,"callBackName"]) 传入pjax:complete回调函数。 callBack是回调函数,必填。 "callBackName" string类型 默认值是回调函数的函数名,选填。 volantis.pjax.send 在Pjax请求开始后触发。使用 volantis.pjax.send(callBack[,"callBackName"]) 传入pjax:send回调函数。 callBack是回调函数,必填。 "callBackName" string类型 默认值是回调函数的函数名,选填。 volantis.pjax.error 在Pjax请求失败后触发。使用 volantis.pjax.error(callBack[,"callBackName"]) 传入pjax:error回调函数。 callBack是回调函数,必填。 "callBackName" string类型 默认值是回调函数的函数名,选填。 暗黑模式我们提供了暗黑模式灵活的开发接口。 源码参考: layout/_partial/scripts/global.ejs layout/_plugins/darkmode/script.ejs 暗黑模式样式详见:/source/css/Readme.md 当前模式调用 volantis.dark.mode 查看当前模式。返回值为字符串 dark 或者 light。 暗黑模式触发器调用 volantis.dark.toggle() 触发切换亮黑模式。 暗黑模式触发器回调函数调用 volantis.dark.push(callBack[,"callBackName"]) 传入触发器回调函数. 使用案例:layout/_plugins/comments/utterances/script.ejs Message 消息提示我们在 iziToast 的基础上封装了一个简单的消息提示: 源码参考: 源码参考:/source/js/app.js VolantisApp.message(title, message, option, done);VolantisApp.question(title, message, option, success, cancel, done); title:标题(必填),字符串(String) message:内容(必填),字符串(String) option:配置项,对象(Object) done:完成时回调,函数(Function) success:确认时回调,函数(Function) cancel: 取消时回调,函数(Function) option 可选参数: icon, // Fontawesome 图标 time, // 持续时间 position, // 弹出位置 transitionIn, // 弹窗打开动画 transitionOut, // 弹窗关闭动画 messageColor, // 消息颜色 titleColor, // 标题颜色 backgroundColor, // 默认背景色 zindex // 层级 option 配置优先级大于配置文件设置值。 使用范例: // 同样弹窗VolantisApp.message('这里是标题', '这里是弹窗内容');// 居中弹窗VolantisApp.message('系统提示', '这里是 Volantis 主题站,欢迎访问。', { icon: 'fad fa-smile-wink light-blue', position: 'topCenter', transitionIn:'bounceInDown', transitionOut: 'fadeOutDown', time: 10000});// 询问弹窗VolantisApp.question('问卷调查', '你是否喜欢 Volantis 主题', {}, () => { alert('谢谢支持')}, () => { console.log('再接再厉')}); 如果以上两个接口仍然不能满足您的需求,可以参考 iziToast 的内容直接调用 iziToast 动态加载脚本源码参考: layout/_partial/scripts/global.ejs volantis.js("src", cb)volantis.css("src") src String类型 加载脚本URL cb 可选 可以传入onload回调函数 或者 JSON对象 例如: volantis.js("src", ()=>{}) 或 volantis.js("src", {defer:true,onload:()=>{}}) 返回 Promise 对象 如下方法同步加载资源,这利于处理文件资源之间的依赖关系,例如:APlayer 需要在 MetingJS 之前加载 (async () => { await volantis.js("...theme.plugins.aplayer.js.aplayer...") await volantis.js("...theme.plugins.aplayer.js.meting...")})(); 使用案例:layout/_plugins/aplayer/script.ejs 由于返回的是 Promise 对象,也可以采用以下方式实现加载完成后调用回调函数: volantis.js("https://cdn.jsdelivr.net/npm/jquery").then(()=>{ console.log("我在脚本加载完成后调用")}) 按需加载的插件源码参考: layout/_partial/scripts/global.ejs jQueryvolantis.import.jQuery().then(()=>{ // 依赖 jQuery 的代码段 // ..... // .....}) requestAnimationFrame1、requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。 2、在隐藏或不可见的元素中,requestAnimationFrame 将不会进行重绘或回流,这当然就意味着更少的的 cpu,gpu 和内存使用量。 volantis.requestAnimationFrame(() => { // 包含 DOM 操作的代码段 // ......... // .........}) Layout Helper向目标元素动态注入 HTML volantis.layoutHelper(helper, html, opt) helper:Helper id(必填),字符串(String) html:HTML(必填),字符串(String) opt:配置项,对象(Object) opt 可选参数: clean, // 清除 Layout Helper 原有的所有内容, 默认 false pjax, // 支持 pjax, 默认 true helper 可选参数: page-plugins, // 页面插件 Layout, 位于 layout/_partial/article.ejs comments, // 评论 Layout, 位于 layout/_plugins/comments/index.ejs // 向 page-plugins 入口动态注入 id 为 artitalk_main 的 div, 不启用 pjax, 不清除 Layout Helper 原有的内容volantis.layoutHelper("page-plugins",`<div id="artitalk_main"></div>`, { pjax:false, clean:false }) 滚动事件处理源码参考:layout/_partial/scripts/global.ejs 获取滚动条距离顶部的距离volantis.scroll.getScrollTop() 获取滚动方向volantis.scroll.del volantis.scroll.del 中存储了一个数值, 该数值检测一定时间间隔内滚动条滚动的位移, 数值的检测频率是浏览器的刷新频率. 数值为正数时, 表示向下滚动. 数值为负数时, 表示向上滚动. 滚动事件回调函数使用 volantis.scroll.push(callBack[,"callBackName"]) 传入滚动事件回调函数, 当页面滚动时触发回调函数。 volantis.scroll.push(()=>{ if (volantis.scroll.del > 0) { console.log("向下滚动"); } else { console.log("向上滚动"); }}) 使用 volantis.scroll.unengine.push(callBack[,"callBackName"]) 传入非滚动事件回调函数, 当页面没有滚动时触发回调函数。 使用 volantis.scroll.unengine.remove("callBackName") 移除名称为 "callBackName" 的非滚动事件回调函数。 触发页面滚动至目标元素位置// 滚动到目标 Dom 元素 "ele" 位置volantis.scroll.to(ele, option) ele:Dom 元素(必填) option 可选参数: top, // 类型 Float,文档中的纵轴坐标, 默认值 ele.getBoundingClientRect().top + document.documentElement.scrollTop addTop, // 类型 Float,向上面的 top 参数中 添加补偿值. behavior, // 类型 String, 表示滚动行为, 支持参数 smooth (平滑滚动), instant (瞬间滚动) observer, // 类型 Boolean, 是否启用监视器,默认值 false, 监视器用于监视元素是否滚动到指定位置 目前用于处理 toc 部分 lazyload 引起的 cls 导致的定位失败问题. observerDic, // 类型 Float, 监视器监视距离, 默认值 25. 例如: volantis.scroll.to(document.getElementById("locationID"),{addTop: - volantis.dom.header.offsetHeight - 10, behavior: 'instant'}) 对本地文件使用CDN源码参考: layout/_partial/scripts/_ctrl/cdnCtrl.ejs theme.cdn.addJS("name","source","force")theme.cdn.addCSS("name","source","force") 参数都为 String 类型,其中 source 和 force 是可选的。 返回值为 CDN 处理后的链接,并存入theme.cdn.map.js和theme.cdn.map.css中 可以使用theme.cdn.map.js["name"]再次调用。 "name" 是自定义名称 "source" 是资源路径 "force" 是强制覆盖的资源路径 如果"source"为空,则将"name"赋值给"source"。 例如: 对于文件source/js/plugins/sites.js使用CND链接,使用如下方法生成。 theme.cdn.addJS("sites","plugins/sites") 生成的CDN链接可使用 theme.cdn.map.js.sites 回调。 以下用于配置项 cdn.set 覆盖配置,下面是覆盖配置的方法 cdn: enable: true # 以下配置可以覆盖 cdn.prefix,配置项的值可以为空,但是要使用CDN必须依据路径填写配置项的键 set: js: app: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/app.js rightMenu: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/rightMenu.js parallax: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/parallax.js plugins: contributors: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/contributors.js friends: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/friends.js sites: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/js/plugins/sites.js css: style: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/css/style.css message: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page/css/message.css 直接使用cdn配置项,不使用theme.cdn.addJS("sites","plugins/sites") 也可以生成 theme.cdn.map.js.sites CDN链接回调 Custom Files 自定义文件在不修改主题原始源代码的情况下添加自定义内容 注入点我们提供了一些注入点接口: let points={ styles:[ "first", "style", "dark", "darkVar", ], views:[ "headBegin", "headEnd", "header", "side", "topMeta", "bottomMeta", "footer", "postEnd", "bodyBegin", "bodyEnd", ]} 样式注入点 first: 向 theme/source/css/first.styl 文件末尾注入自定义内容, 该文件中包含首屏样式,首屏样式采用硬编码的方式写在HTML中。首屏样式内含 cover navbar search 的样式. style: 向 theme/source/css/style.styl 文件末尾注入自定义内容, 该文件中包含异步延迟加载的样式,除首屏样式,其他样式放入此处异步加载. dark: 向 theme/source/css/_style/_plugins/_dark/dark_plugins.styl 文件末尾注入自定义内容, 该文件中包含异步暗黑模式样式 的 强制覆盖样式. darkVar: 向 theme/source/css/_style/_plugins/_dark/dark_async.styl 调用函数 async_dark() 末尾注入自定义内容, 该文件中包含异步暗黑模式样式 的 暗黑模式 CSS 变量. 布局视图注入点 headBegin: 向 theme/layout/_partial/head.ejs 文件 <head> 标签开头注入自定义内容. headEnd: 向 theme/layout/_partial/head.ejs 文件 <head> 标签末尾注入自定义内容. header: 向 theme/layout/_partial/header.ejs 文件 导航栏 .nav-main 末尾注入自定义内容. side: 向 theme/layout/_partial/side.ejs 文件 侧边栏 #l_side 末尾注入自定义内容. topMeta: 向 theme/layout/_partial/meta.ejs 文件 topMetas 末尾注入自定义内容. bottomMeta: 向 theme/layout/_partial/meta.ejs 文件 bottomMetas 末尾注入自定义内容. footer: 向 theme/layout/_partial/footer.ejs 文件 <footer> 标签末尾注入自定义内容. postEnd: 向 theme/layout/_partial/article.ejs 文件 <article> 标签末尾注入自定义内容. bodyBegin: 向 theme/layout/layout.ejs 文件 <body> 标签开头注入自定义内容. bodyEnd: 向 theme/layout/layout.ejs 文件 <body> 标签末尾注入自定义内容. blog/source/_volantis/ 文件夹一般的, 创建 blog/source/_volantis/ 文件夹并在此文件夹下创建与注入点同名同扩展名的文件,用以写入注入点自定义内容. blog/source/_volantis/ ├─ first.styl ├─ style.styl ├─ dark.styl ├─ darkVar.styl ├─ headBegin.ejs ├─ headEnd.ejs ├─ header.ejs ├─ topMeta.ejs ├─ bottomMeta.ejs ├─ postEnd.ejs ├─ bodyBegin.ejs └─ bodyEnd.ejs 当然,你仍然可以修改主题配置文件将自定义布局或样式放置在特定位置.以下是默认配置,该配置已隐藏. blog/_config.volantis.ymlcustom_files: first: source/_volantis/first.styl style: source/_volantis/style.styl dark: source/_volantis/dark.styl darkVar: source/_volantis/darkVar.styl headBegin: source/_volantis/headBegin.ejs headEnd: source/_volantis/headEnd.ejs header: source/_volantis/header.ejs topMeta: source/_volantis/topMeta.ejs bottomMeta: source/_volantis/bottomMeta.ejs postEnd: source/_volantis/postEnd.ejs bodyBegin: source/_volantis/bodyBegin.ejs bodyEnd: source/_volantis/bodyEnd.ejs 示例: blog/source/_volantis/darkVar.stylbody --color-site-body: blue !important theme_inject 过滤器使用 Hexo 过滤器 theme_inject ,可以将所需的自定义内容添加到任何注入点。 如果您的代码很简单,建议您编写脚本,您只需要把 JavaScript 文件放到 scripts 文件夹,在启动时就会自动载入。您可以直接在 blog 文件夹下创建 scripts 文件夹. hexo.extend.filter.register('theme_inject', function(injects) { // ...}); 对于注入布局视图: // The name of same `injectPoint` suggest be unique. If same, it will override low priority configurations.// `locals` and `options` is the same as partial https://hexo.io/docs/helpers#partial.// `order` defines the order of injection, which by default depends on the priority of injection.hexo.extend.filter.register('theme_inject', function(injects) { // it will put code from this filePath into injectPoint. injects.[injectPoint].file(name, filePath, [locals, options, order]); // it will put raw string as code into injectPoint. injects.[injectPoint].raw(name, raw, [locals, options, order]);}); 对于注入样式: hexo.extend.filter.register('theme_inject', function(injects) { // it will put styleFile into injectPoint. injects.[injectPoint].push(styleFile);}); Examples以文件的形式向 theme/css/style.styl 文件末尾注入自定义样式 blog/scripts/example-1.jshexo.extend.filter.register('theme_inject', function(injects) { injects.style.push('source/_data/mystyle.styl');}); 以文本的形式向 <body> 标签末尾注入自定义脚本内容 blog/scripts/example-2.jshexo.extend.filter.register('theme_inject', function(injects) { injects.bodyEnd.raw('load-custom-js', '<script src="js-path-or-cdn.js"></script>');}); 以文件的形式向侧栏注入自定义布局视图内容 blog/scripts/example-3.jshexo.extend.filter.register('theme_inject', function(injects) { injects.side.file('my-favourite-food', 'source/_data/my-favourite-food.ejs');}); 插件系统我们还支持 hexo 的插件系统,无需修改核心模块的源代码即可轻松扩展功能。你可以参考 https://hexo.io/docs/plugins.html#Plugin 学习如何创建插件。 请注意,以上是主题开发文档,不是使用文档!"},{"title":"FAQ","date":"2024-03-28T06:49:50.078Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/faq/index.html","permalink":"https://volantis.js.org/v5/faq/","excerpt":"","text":" Volantis5 FAQ List For Volantis 5 这是什么?我在哪里?我也不知道 我这里出现了故障,需要先做什么? Troubleshooting any problem without the error log is like driving with your eyes closed. 在没有错误日志的情况下诊断任何问题无异于闭眼开车 控制台报错 SyntaxError: Unexpected token '.'SyntaxError: Unexpected token '.' at new Script (vm.js:88:7) at createScript (vm.js:263:10) at runInThisContext (vm.js:311:10) node.js 版本过低,请升级至 v16.x 及以上版本! 配置和使用 volantis 5.x 之前请确保 node.js 升级至 v16.x 及以上版本! 我应该使用哪个版本?使用最新的版本 如何在魔改主题的情况下还能兼顾更新?使用 Custom Files 自定义文件 和 Development API for Volantis. 使用 Hexo Theme Plus 替换掉在 layout 文件夹下的主题文件. 使用 Hexo 插件系统 在 blog 目录根下创建 scripts 文件夹编写脚本. 如何更新主题?RTFM 如何修改 favicon?RTFM 文档为什么和配置文件不一样?以配置文件为准,文档更新的不是非常及时 如何设置主页的背景图?主题有俩种背景图片设置方式 background 仅能设置一张背景图,且背景图范围仅为 cover 区域 parallax 可以设置一张或更多的背景图,当 position 取值为 cover 时,背景图仅为 cover 区域,具有视差滚动效果。position 取值为 fixed 时,背景图固定在整个页面,不具有视差滚动效果。 原 parallax 和 backstretch 已合并为 parallax注意:背景图配置只能生效一个 volantis-x/community/issues/115#issuecomment-907983622 到哪里查找 fontawesome 图标? https://fontawesome.com/icons 为什么无法正常显示 aplayer?可能是网易云 API 崩溃了 图片怎么添加灯箱放大效果?使用 gallery 标签 控制台有一个奇怪的 Warning?(node:7973) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency(Use `node --trace-warnings ...` to show where the warning was created)(node:7973) Warning: Accessing non-existent property 'column' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'column' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency 我想把它命名为 Warning-738. volantis-x/hexo-theme-volantis/discussions/738 5.0 的友情链接页有啥变化?volantis-x/hexo-theme-volantis/discussions/734 如何正确渲染多行 MathJax 公式?使用 pandoc 正确渲染多行 MathJax 公式 或者直接放图片... 为什么文章会被截断? What is the answer to Life, the Universe, and Everything?42 上面没有我要找的答案?尝试 打开搜索 或 常见问题与反馈渠道"},{"title":"","date":"2024-03-28T06:49:50.082Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/getting-started/index.html","permalink":"https://volantis.js.org/v5/getting-started/","excerpt":"","text":" Volantis5 A Wonderful Theme for Hexo Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性,您可以轻松搭建一个极简风格的博客,也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。 示例博客/examples/ 所有的 Volantis 用户都可以按照格式自行创建 Issue 来将自己的博客添加到官网的示例博客页面中。 准备工作能力条件环境配置条件自建博客需要一定的相关知识,在开始前,请务必确保您会使用 markdown 语法,掌握简单的 git 知识,最最重要的是,遇到困难知道该怎么寻求解决: 翻阅和搜索文档 搜索 issues 中是否有解决办法 新建 issue 并按照要求进行操作,详尽地描述您遇到的问题 如果您没有使用过 Hexo 也不要着急,可以先通读一遍 Hexo 中文文档,要想使用地得心应手,最好参照团队提供的开源项目的源码进行搭建: Demo 源码 | 官网源码如果您从旧版本更新或着其它主题迁移,请确保环境版本不要太低,否则会产生兼容性问题。 Hexo: 5.4 ~ 6.xhexo-cli: 4.3 ~ latestnode.js: 16.x LTS ~ latest LTSnpm: 8.x ~ latest LTS 配置和使用 volantis 5.x 之前请确保 node.js 升级至 v16.x 及以上版本! FAQ List For Volantis 5/v5/faq/ 快速体验如果您已经具备环境配置条件,可以在终端中输入下面这行代码,稍等片刻即可尝鲜体验: git clone https://github.com/volantis-x/demo.git && cd demo && npm i && hexo s 下载与安装volantis 5.x 目前正处于 「stable 阶段」 volantis 4.x 目前正处于 「EOL(End of Life) 阶段」 Tips: volantis 开发发布周期 volantis 开发发布周期依次经过: 「alpha 阶段」=>「beta 阶段」=>「rc 阶段」=>「stable 阶段」=>「EOL 阶段」rc 阶段的测试版本和 stable 阶段的正式版本 我们统称为 「稳定版本」 , 只有 「稳定版本」 发布到 npmalpha 阶段的开发测试版本 和 beta 阶段的测试版本 我们统称为 「小白鼠测试版本」, 「小白鼠测试版本」 仅存在于 Github 仓库的 dev 分支 安装或更新 「稳定版本」 (rc 阶段的测试版本 或 stable 阶段的正式版本) 全新博客安装从其它主题迁移第 1/2 步:修改站点配置文件在 blog/_config.yml 文件中找到并修改:theme: volantis第 2/2 步:下载主题在终端中输入:npm i hexo-theme-volantis 如果您是 Mac 用户,可以使用脚本完成全部流程 在博客路径打开终端,下载安装并应用主题:curl -s https://volantis.js.org/start | bash这行命令将会自动检测并安装所需环境,初始化博客,然后下载安装并应用主题。脚本详细使用方法:#hexo.sh 第 1/3 步:修改站点配置文件在 blog/_config.yml 文件中找到并修改:theme: volantis第 2/3 步:下载主题如果您已经升级到 Hexo 5.0.2 及以上,可以直接使用 npm 命令安装:npm i hexo-theme-volantis对于旧版本,需要下载主题源码到 themes/ 文件夹:git clone https://github.com/volantis-x/hexo-theme-volantis themes/volantis如果您无法访问 GitHub 可以使用国内镜像源:git clone https://e.coding.net/volantis-x/p/hexo-theme-volantis.git themes/volantis第 3/3 步:检查并安装依赖安装 Hexo 搜索的依赖包:npm i hexo-generator-json-content安装 Stylus 渲染器:npm i hexo-renderer-stylus 安装或更新 「小白鼠测试版本」 (alpha 阶段的开发测试版本 或 beta 阶段的测试版本) 第 1/3 步:修改站点配置文件在 blog/_config.yml 文件中找到并修改:theme: volantis第 2/3 步:将主题仓库添加为子模块 将主题添加为子模块 开始前需要确认不存在 themes/volantis 文件夹, 如果有, 请自行删除.sshhttpsgit submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantisgit submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis 第 3/3 步:将主题仓库切换为 dev 分支在终端中输入:cd themes/volantisgit checkout dev第 n/n 步:更新主题在终端中输入:git pull 版本更新注意事项使用主题的时候,尽量 fork 主题到自己的 GitHub,然后进行修改并使用。这样做的好处是:当主题进行重要更新的时候可以根据需要拉取合并代码,使自己 DIY 的主题能够通过更新获取 BUG 修复或者新特性。 如果不懂请自行搜索关键词:fork 更新 实用小技巧所有需要写在主题配置文件中的配置都可以写在站点配置文件的 theme_config: 中,在 Hexo 5.0 后,还可以写在 _config.volantis.yml 文件中,详见 Hexo 官方文档:覆盖主题配置https://hexo.io/zh-cn/docs/configuration#覆盖主题配置也可以直接查看本站源码中站点配置文件的写法:_config.volantis.yml 请对照 更新日志 进行更新. 如何正确地更新主题/how-to-update/ 许可协议本主题采用 MIT开源许可协议 ,永久无限制免费使用。 MIT开源许可协议被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。被授权人可根据程式的需要修改授权条款为适当的内容。在软件和软件的所有副本中都必须包含版权声明和许可声明。 配置与使用配置与使用/v5/site-settings/"},{"title":"页面配置","date":"2024-03-28T06:49:50.086Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/page-settings/index.html","permalink":"https://volantis.js.org/v5/page-settings/","excerpt":"","text":"页面布局模板布局模板 取值 含义 page 独立页面 post 文章页面 docs 文档页面 category 分类页面 tag 标签页面 friends 友链页面 list 列表页面 page & post & docs这三种页面相同,但是有以下细微区别: post 文章有 title 时,向下滚动网页,导航栏会向上移出屏幕显出文章标题,而 page 和 docs 不会。 post 文章末尾最多可以显示「参考资料」、「相关文章」、「版权标识」、「打赏」四个模块。 docs 文章末尾最多可以显示「参考资料」一个模块。 除了归档页面是自动生成的,其它独立页面都需要手动创建 md 文件。 归档页面归档页面是自动生成的,并且初始化的时候已经生成,路径如下: blog/_config.yml# Directoryarchive_dir: archives 关于页面Create file if not exists: source/about/index.md---layout: docsseo_title: 关于bottom_meta: falsesidebar: []twikoo: placeholder: 有什么想对我说的呢?---下面写关于自己的内容 分类页面Create file if not exists: source/categories/index.md---layout: categoryindex: truetitle: 所有分类--- 标签页面Create file if not exists: source/tags/index.md---layout: tagindex: truetitle: 所有标签--- 列表页面Create file if not exists: source/mylist/index.md---layout: listgroup: mylistindex: true--- 结果就是筛选出所有文章中 front-matter 部分含有 group: mylist 的文章。 友链页面创建页面文件Create file if not exists: source/friends/index.md---layout: friends # 必须title: 我的朋友们 # 可选,这是友链页的标题---这里写友链上方的内容。<!-- more -->这里可以写友链页面下方的文字备注,例如自己的友链规范、示例等。 插入友链数据可以 选择布局方案 或 使用友链标签 选择布局方案在主题配置文件中找到以下内容: pages: # 友链页面配置 friends: layout_scheme: traditional # simple: 简单布局, traditional: 传统布局 目前提供2种布局方案: simple: 简单布局,只有头像和标题。 traditional: 传统布局,是 Volantis 旧版本的风格。 以上2种友链的数据源写在以下路径,如果没有请自行创建: blog/source/_data/friends.yml 内容格式为: blog/source/_data/friends.yml- group: # 分组标题 description: # 分组描述 items: - title: # 名称 avatar: # 头像 url: # 链接 screenshot: # 截图 keywords: # 关键词 description: # 描述 - title: # 名称 avatar: # 头像 url: # 链接 screenshot: # 截图 keywords: # 关键词 description: # 描述 不同的布局方式,会用到一部分的字段,一般来说,title、avatar 和 url 都是必须的。这些数据被转成 HTML 标签插入到友链页面的 <!-- more --> 部分。 Volantis 4.x 新增的网站卡片标签的样式 sites 网站卡片布局 在5.0版本移除 被 sites标签 friends标签 contributors标签 替代 issues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代 使用友链标签使用 友链标签 您可以在任何位置插入友链,支持静态数据和动态数据, 关于如何使用 友链标签 插入友链,详见: volantis 主题文档 #友链标签/v5/tag-plugins/#友链标签 404页面Create file if not exists: source/404.md---cover: truerobots: noindex,nofollowsitemap: falseseo_title: 404 Not Foundbottom_meta: falsesidebar: []twikoo: path: /404.html placeholder: 请留言告诉我您要访问哪个页面找不到了---{% p logo center huge, 404 %}{% p center bold, 很抱歉,您访问的页面不存在 %}{% p center small, 可能是输入地址有误或该地址已被删除 %} front-matterfront-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量。更多请见 Hexo 官方文档:#front-matter 字段 含义 值类型 默认值 layout 布局模版 String - title 页面标题 String - seo_title 网页标题 String page.title short_title 页面标题(在group列表中显示) String page.title date 创建时间 Date 文件创建时间 updated 更新日期 Date 文件修改时间 link 外部文章网址 String - music 内部音乐控件 [Object] - robots robots String - keywords 页面关键词 String - description 页面描述、摘要 String - cover 是否显示封面 Bool true top_meta 是否显示文章或页面顶部的meta信息 Bool true bottom_meta 是否显示文章或页面底部的meta信息 Bool true sidebar 页面侧边栏 Bool, Array theme.layout.*.sidebar body 页面主体元素 Array theme.layout.on_page.body thumbnail 缩略图 String false icons 图标 Array [] pin 是否置顶 Bool false headimg 文章头图 url - layout:post 时特有的字段: 字段 含义 值类型 默认值 author 文章作者 [Object] config.author categories 分类 String, Array - tags 标签 String, Array - toc 是否生成目录 Bool true music 字段 是否必须 值类型 server 是 netease, tencent, kugou, xiami, baidu type 是 song, playlist, album, search, artist id 是 song id / playlist id / album id / search keyword 文章置顶在 front-matter 中设置以下值: front-matterpin: true 文章分类多个分类有两种关系,一种是层级(等同于文件夹),一种是并列(等同于标签)。 多级分类: front-matter---categories: [分类A, 分类B]--- 或者 front-matter---categories: - 分类A - 分类B--- 并列分类 front-mattercategories: - [分类A] - [分类B] 多级+并列分类 front-mattercategories: - [分类A, 分类B] - [分类C, 分类D] 文章摘要在文章中插入 <!-- more -->,前面的部分即为摘要。 某篇文章源码---title: xxxdate: 2020-02-21---这是摘要<!-- more -->这是正文 注意: <!-- more --> 前后一定要有空行,不然可能导致显示错位。 设置文章作者Volantis 支持多个作者在一个站点发布文章,其他作者信息需要写在数据文件中,例如: blog/source/_data/author.ymlJon: name: Jon Snow avatar: https://cn.bing.com/th?id=AMMS_fc8f99fd41ebd737a71c4e13806db9a0&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=2&pid=16.1 url: https://gameofthrones.fandom.com/wiki/Jon_SnowDany: name: Daenerys Targaryen avatar: https://tse1-mm.cn.bing.net/th?id=OIP.Yax4wLzIFbcBVUa_RsKywQHaLH&w=80&h=80&c=8&rs=1&qlt=90&dpr=2&pid=3.1&rm=2 url: https://gameofthrones.fandom.com/wiki/Daenerys_Targaryen 在文章的 front-matter 中新增 author 即可: front-matter---title: Jon Snow | Game of Thrones Wiki | Fandomauthor: Jon--- 引入外部文章利用 link,搭配自定义的文章作者信息,你可以在文章列表中显示外部文章或者网址,例如: blog/source/_data/author.ymlxaoxuu: name: xaoxuu avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png url: https://xaoxuu.com front-matter---layout: postdate: 2017-07-05title: [转]如何搭建基于Hexo的独立博客categories: [Dev, Hexo]tags: - Hexoauthor: xaoxuulink: https://xaoxuu.com/blog/2017-07-05-hexo-blog/---![](https://img.vim-cn.com/d9/a9af7dc49fc0af8ca3e6dd2450a2f7095a87db.png) 置顶对于任何文章或者页面,设置 pin: true 即可置顶在首页。 front-matter---pin: true--- 这会导致一个小问题:首页 post 卡片数量多于设定值,如果有强迫症希望每一个分页数量一致,可以安装插件来实现,详见:#421 不归档存放在 _posts 文件夹下的文章一般都会出现在归档页,如果某篇文章不希望出现在归档页面: front-matter---archive: false--- 页面自定义布局显示迷你音乐播放器标题右边显示迷你音乐播放器,支持的字段有:server、type、id。 front-matter---music: server: netease # netease, tencent, kugou, xiami, baidu type: song # song, playlist, album, search, artist id: 16846091 # song id / playlist id / album id / search keyword--- 实际效果见: #contributors 显示 meta 标签文章顶部和底部的日期、分类、更新日期、标签、分享等属于 meta 标签。 front-matter---top_meta: falsebottom_meta: false--- 如果一个页面没有 title 则不会显示 top_meta ,像404、关于页面就可以完全隐藏: front-matter---seo_title: 关于top_meta: falsebottom_meta: false--- 标题右边显示缩略图front-matter---thumbnail: https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png--- 缩略图仅在文章列表和文章页面显示,不会在归档页面显示。 标题右边显示图标front-matter---icons: [fas fa-fire red, fas fa-star green]--- 图标仅在归档页面中显示,可以用来标注热门文章。 可以通过 red / blue / green / yellow / orange / theme / accent 来设置图标的颜色 是否要显示封面如果某个页面需要封面,可以这样写: front-matter---cover: true--- 显示侧边栏通过自由设置边栏卡片来删减对应页面的冗余信息,提高有价值的信息在页面中的权重。 如果某个页面不需要侧边栏,可以这样写: front-matter---sidebar: []--- 某个页面想指定显示某几个侧边栏,就这样写: front-matter---sidebar: [grid, toc, tags] # 放置任何你想要显示的侧边栏部件--- 关闭评论front-matter---comments: false--- 页面插件 (page plugins)在 front-matter 中配置页面插件 front-matter---plugins: - mathjax - katex - artitalk - bbtalk - fcircle - gitter - indent - snackbar: oldversion--- 说说页面以 Artitalk页面 为例: 创建页面文件Create file if not exists: source/artitalk/index.md---seo_title: 说说comments: falseplugins: - artitalk # - bbtalk # - fcircle--- 配置Artitalk在主题配置文件中找到以下内容 # Artitalk https://artitalk.js.org# 配置过程请参考:https://artitalk.js.org/doc.html# 使用过旧版本的请修改Leancloud shuoshuo class部分列名:https://artitalk.js.org/release.html# 除appID和appKEY外均为选填项artitalk: # Set `plugins: ["artitalk"]` to enable in front-matter # 不支持 Pjax # 配置项按照yml格式继续填写即可 appId: # your appID appKey: # your appKEY # serverURL: #leancloud绑定的api访问域名,使用国际版的话不需要填写 # lang: # 语言设置,zh为汉语,en为英语,es为西班牙语。默认为汉语 # pageSize: #每页说说的显示数量 # shuoPla: #在编辑说说的输入框中的占位符 # avatarPla: #自定义头像url的输入框的占位符 # motion: #加载动画的开关,1为开,0为关,默认为开 # bgImg: #说说输入框背景图片url # color1: #说说背景颜色1&按钮颜色1 # color2: #说说背景颜色2&按钮颜色2 # color3: #说说字体颜色 # cssUrl: #自定义css接口 渲染公式默认是不渲染的,如果文章内有公式,需要在 front-matter 中设置开启。即便开启了,文章列表中也不会进行渲染,请注意不要把公式写在文章开头。 example.md:---title: 渲染公式(MathJax)date: 2020-02-23plugins: - mathjax---添加一段描述性文字<!-- more -->$$t+1=2$$$$\\mbox{积累因子}=\\begin{cases}1+ni & \\mbox{单利}\\\\\\\\(1+i)^n & \\mbox{复利}\\end{cases}$$$$\\begin{equation}\\sum_{i=0}^n F_i \\cdot \\phi (H, p_i) - \\sum_{i=1}^n a_i \\cdot ( \\tilde{x_i}, \\tilde{y_i}) + b_i \\cdot ( \\tilde{x_i}^2 , \\tilde{y_i}^2 )\\end{equation}$$$$\\begin{equation}\\beta^*(D) = \\mathop{argmin} \\limits_{\\beta} \\lambda {||\\beta||}^2 + \\sum_{i=1}^n max(0, 1 - y_i f_{\\beta}(x_i))\\end{equation}$$ 查看公式渲染效果 $$t+1=2$$$$\\mbox{积累因子}=\\begin{cases}1+ni & \\mbox{单利}\\\\(1+i)^n & \\mbox{复利}\\end{cases}$$$$\\begin{equation}\\sum_{i=0}^n F_i \\cdot \\phi (H, p_i) - \\sum_{i=1}^n a_i \\cdot ( \\tilde{x_i}, \\tilde{y_i}) + b_i \\cdot ( \\tilde{x_i}^2 , \\tilde{y_i}^2 )\\end{equation}$$$$\\begin{equation}\\beta^*(D) = \\mathop{argmin} \\limits_{\\beta} \\lambda {||\\beta||}^2 + \\sum_{i=1}^n max(0, 1 - y_i f_{\\beta}(x_i))\\end{equation}$$ 如果公式仍无法正确渲染可以阅读 @MicDZ 的这篇文章: 在Material-X上使用KaTeXhttps://www.micdz.cn/article/katex-on-volantis/ 页面 gitter页面配置 front-matter---plugins: - gitter--- 配置 gitter在主题配置文件中找到以下内容 plugins: .... # Gitter # https://gitter.im gitter: room: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 文章页首行缩进front-matter---plugins: - indent--- Snackbar (页面通知)配置数据源数据源写在以下路径,如果没有请自行创建: blog/source/_data/notification.yml 内容格式为: blog/source/_data/notification.ymloldversion: title: 过期的文档 message: 这份文档过于久远,如果您使用的是新版的主题,请查看新版本的文档。 position: bottom # bottom (底部通知), right (右侧通知,会自动消失) theme: warning # default, warning cache: false # 是否记住选项(下次不再弹出) buttons: - title: 查看新版文档 url: /getting-started/ dismiss: false # 点击了是否关闭底部横幅 配置 front-matterfront-matter---plugins: - snackbar: oldversion---"},{"title":"站点配置","date":"2024-03-28T06:49:50.086Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/site-settings/index.html","permalink":"https://volantis.js.org/v5/site-settings/","excerpt":"","text":"博客根目录下的 _config.yml 文件通常负责站点相关配置、第三方 npm 插件相关的配置。 网站标题blog/_config.yml# 网站标题title: my blog 网站图标简单方式完全自定义blog/_config.yml# 网站图标,更多尺寸等图标请使用import方式批量导入favicon: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.icoblog/_config.ymlimport: head_begin: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/browserconfig.xml"> - <meta name="theme-color" content="#ffffff"> - <link rel="apple-touch-icon" sizes="180x180" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon.ico"> - <meta name="apple-mobile-web-app-title" content="Volantis"> - <meta name="application-name" content="Volantis"> - <meta name="msapplication-TileColor" content="#f4f4f4"> - <meta name="msapplication-TileImage" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"> - '<meta name="theme-color" content="#f4f4f4" media="(prefers-color-scheme: light)">' - '<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">' head_end: body_begin: body_end: 多语言设置blog/_config.ymllanguage: - zh-CN - en - zh-HK - zh-TW 对应的翻译文件路径: themes/volantis/languages/ 使用 Import 导入外部文件Volantis 用户可以在不修改主题文件的情况下向 head 和 body 中添加各种标签。 代码片段注入的位置: head_begin: 注入在 <head> 之后 head_end: 注入在 </head> 之前 body_begin: 注入在 <body> 之后 body_end: 注入在 </body> 之前 blog/_config.ymlimport: head_begin: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/browserconfig.xml"> - <meta name="theme-color" content="#ffffff"> - <link rel="apple-touch-icon" sizes="180x180" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon.ico"> - <meta name="apple-mobile-web-app-title" content="Volantis"> - <meta name="application-name" content="Volantis"> - <meta name="msapplication-TileColor" content="#f4f4f4"> - <meta name="msapplication-TileImage" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"> - '<meta name="theme-color" content="#f4f4f4" media="(prefers-color-scheme: light)">' - '<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">' head_end: - <meta name="hello" content="world"> body_begin: - <script></script> body_end: - <script></script> 更多Hexo 官方文档 #配置https://hexo.io/zh-cn/docs/configuration"},{"title":"标签插件","date":"2024-03-28T06:49:50.090Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/tag-plugins/index.html","permalink":"https://volantis.js.org/v5/tag-plugins/","excerpt":"","text":"为了兼容老用户,旧的标签插件在重构之前依然沿用旧的格式,即 command + 空格 作为参数分隔符,而部分新增标签插件是 空格 + 英文竖线 + 空格 ,请注意区分。 我们也在探索哪种分隔符既简单又不容易引起冲突,所以可能存在多种格式,具体以对应文档描述为准。 5.0 版本起临时实验使用英文双冒号 ( :: ) 作为分隔符,之前版本的分隔符写法向下兼容 6.0 版本的分隔符最终计划使用 stellar 的分隔符,之前版本的分隔符写法没有兼容计划 text效果源码带 下划线 的文本;带 着重号 的文本;带 波浪线 的文本;带 删除线 的文本 键盘样式的文本:⌘ + D 密码样式的文本:这里没有验证码带 {% u 下划线 %} 的文本;带 {% emp 着重号 %} 的文本;带 {% wavy 波浪线 %} 的文本;带 {% del 删除线 %} 的文本键盘样式的文本:{% kbd ⌘ %} + {% kbd D %}密码样式的文本:{% psw 这里没有验证码 %} span语法效果源码参数本插件最后更新于 5.0 版本{% span 样式参数::文本内容 %}各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 超大号文字: Volantis A Wonderful Theme for Hexo各种颜色的标签,包括:{% span red::红色 %}、{% span yellow::黄色 %}、{% span green::绿色 %}、{% span cyan::青色 %}、{% span blue::蓝色 %}、{% span gray::灰色 %}。超大号文字:{% span center logo large::Volantis %} {% span center small::A Wonderful Theme for Hexo %} 属性 可选值 字体 logo, code 颜色 red, yellow, green, cyan, blue, gray 大小 small, h4, h3, h2, h1, large, huge, ultra 对齐方向 left, center, right p参数效果源码参数本插件最后更新于 5.0 版本{% p 样式参数::文本内容 %}红色 黄色 绿色 青色 蓝色 灰色 Volantis A Wonderful Theme for Hexo{% p red::红色 %}{% p yellow::黄色 %}{% p green::绿色 %}{% p cyan::青色 %}{% p blue::蓝色 %}{% p gray::灰色 %}{% p center logo large::Volantis %}{% p center small::A Wonderful Theme for Hexo %} 属性 可选值 字体 logo, code 颜色 red, yellow, green, cyan, blue, gray 大小 small, h4, h3, h2, h1, large, huge, ultra 对齐方向 left, center, right noteNoteBlock 是 Blockquote 的增强版,在左边显示图标,并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。 最后更新于 5.0 版本{% note 样式参数::文本内容 %} 演示效果经典用法可以在配置文件中设置默认样式,为简单的一句话提供最的简便写法。 note quote 适合引用一段话 note info 默认主题色,适合中性的信息 note warning 默认黄色,适合警告性的信息 note error/danger 默认红色,适合危险性的信息 note done/success 默认绿色,适合正确操作的信息 更多图标这些都是默认样式,可以手动加上颜色: note radiation 默认样式 note radiation yellow 可以加上颜色 note bug red 说明还存在的一些故障 note link green 可以放置一些链接 note paperclip blue 放置一些附件链接 note todo 待办事项 note guide clear 可以加上一段向导 note download 可以放置下载链接 note message gray 一段消息 note up 可以说明如何进行更新 note undo light 可以说明如何撤销或者回退 上述示例的源码example:#### 经典用法{% note::可以在配置文件中设置默认样式,为简单的一句话提供最的简便写法。 %}{% note quote::note quote 适合引用一段话 %}{% note info::note info 默认主题色,适合中性的信息 %}{% note warning::note warning 默认黄色,适合警告性的信息 %}{% note danger::note error/danger 默认红色,适合危险性的信息 %}{% note success::note done/success 默认绿色,适合正确操作的信息 %}#### 更多图标这些都是默认样式,可以手动加上颜色:{% note radiation::note radiation 默认样式 %}{% note radiation yellow::note radiation yellow 可以加上颜色 %}{% note bug red::note bug red 说明还存在的一些故障 %}{% note link green::note link green 可以放置一些链接 %}{% note paperclip blue::note paperclip blue 放置一些附件链接 %}{% note todo::note todo 待办事项 %}{% note guide clear::note guide clear 可以加上一段向导 %}{% note download::note download 可以放置下载链接 %}{% note message gray::note message gray 一段消息 %}{% note up::note up 可以说明如何进行更新 %}{% note undo light::note undo light 可以说明如何撤销或者回退 %} 可以支持的参数样式参数位置可以写图标和颜色,多个样式参数用空格隔开。 图标彩色的quote, info, warning, done/success, error/danger 灰色的,也可以指定颜色radiation, bug, idea, link, paperclip, todo, message, guide, download, up, undo 颜色指定颜色clear, light, gray, red, yellow, green, cyan, blue noteblockNoteBlock 是 Blockquote 的增强版,在左边显示图标,并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。 最后更新于 5.0 版本{% noteblock 样式参数(可选)::标题(可选) %}文本段落{% endnoteblock %} 演示效果可以在区块中放置一些复杂的结构,支持嵌套。 标题(可选)Windows 10不是為所有人設計,而是為每個人設計嵌套测试: 请坐和放宽,我正在帮你搞定一切... Folding 测试: 点击查看更多 不要说我们没有警告过你我们都有不顺利的时候 上述示例的源码example:{% noteblock::标题(可选) %}Windows 10不是為所有人設計,而是為每個人設計{% noteblock done %}嵌套测试: 请坐和放宽,我正在帮你搞定一切...{% endnoteblock %}{% folding yellow::Folding 测试: 点击查看更多 %}{% note warning::不要说我们没有警告过你 %}{% noteblock bug red %}我们都有不顺利的时候{% endnoteblock %}{% endfolding %}{% endnoteblock %} 可以支持的参数样式参数位置可以写图标和颜色,多个样式参数用空格隔开。 图标彩色的quote, info, warning, done/success, error/danger 灰色的,也可以指定颜色radiation, bug, idea, link, paperclip, todo, message, guide, download, up, undo 颜色指定颜色clear, light, gray, red, yellow, green, cyan, blue checkbox最后更新于 5.0 版本{% checkbox 样式参数(可选)::文本(支持简单md) %} 演示效果 纯文本测试 支持简单的 markdown 语法 支持自定义颜色 绿色 + 默认选中 黄色 + 默认选中 青色 + 默认选中 蓝色 + 默认选中 增加 减少 叉 上述示例的源码example:{% checkbox 纯文本测试 %}{% checkbox checked::支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}{% checkbox red::支持自定义颜色 %}{% checkbox green checked::绿色 + 默认选中 %}{% checkbox yellow checked::黄色 + 默认选中 %}{% checkbox cyan checked::青色 + 默认选中 %}{% checkbox blue checked::蓝色 + 默认选中 %}{% checkbox plus green checked::增加 %}{% checkbox minus yellow checked::减少 %}{% checkbox times red checked::叉 %} 可以支持的参数颜色red, yellow, green, cyan, blue 样式plus, minus, times 选中状态checked radio最后更新于 5.0 版本{% checkbox 样式参数(可选)::文本(支持简单md) %} 演示效果 纯文本测试 支持简单的 markdown 语法 支持自定义颜色 绿色 黄色 青色 蓝色 上述示例的源码example:{% radio 纯文本测试 %}{% radio checked::支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}{% radio red::支持自定义颜色 %}{% radio green::绿色 %}{% radio yellow::黄色 %}{% radio cyan::青色 %}{% radio blue::蓝色 %} 可以支持的参数颜色red, yellow, green, cyan, blue 选中状态checked timeline最后更新于 3.0 版本{% timeline 时间线标题(可选) %}{% timenode 时间节点(标题) %}正文内容{% endtimenode %}{% timenode 时间节点(标题) %}正文内容{% endtimenode %}{% endtimeline %} 演示效果 2020-07-24 2.6.6 -> 3.0 如果有 hexo-lazyload-image 插件,需要删除并重新安装最新版本,设置 lazyload.isSPA: true。2.x 版本的 css 和 js 不适用于 3.x 版本,如果使用了 use_cdn: true 则需要删除。2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。2.x 版本的置顶 top: true 改为了 pin: true,并且同样适用于 layout: page 的页面。如果使用了 hexo-offline 插件,建议卸载,3.0 版本默认开启了 pjax 服务。 2020-05-15 2.6.3 -> 2.6.6 不需要额外处理。 2020-04-20 2.6.2 -> 2.6.3 全局搜索 seotitle 并替换为 seo_title。group 组件的索引规则有变,使用 group 组件的文章内,group: group_name 对应的组件名必须是 group_name。group 组件的列表名优先显示文章的 short_title 其次是 title。 上述示例的源码example:{% timeline %}{% timenode 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) %}1. 如果有 `hexo-lazyload-image` 插件,需要删除并重新安装最新版本,设置 `lazyload.isSPA: true`。2. 2.x 版本的 css 和 js 不适用于 3.x 版本,如果使用了 `use_cdn: true` 则需要删除。3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。4. 2.x 版本的置顶 `top: true` 改为了 `pin: true`,并且同样适用于 `layout: page` 的页面。5. 如果使用了 `hexo-offline` 插件,建议卸载,3.0 版本默认开启了 pjax 服务。{% endtimenode %}{% timenode 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) %}不需要额外处理。{% endtimenode %}{% timenode 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) %}1. 全局搜索 `seotitle` 并替换为 `seo_title`。2. group 组件的索引规则有变,使用 group 组件的文章内,`group: group_name` 对应的组件名必须是 `group_name`。2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`。{% endtimenode %}{% endtimeline %} link最后更新于 5.0 版本{% link 标题::链接::图片链接(可选) %} 演示效果如何参与项目https://volantis.js.org/contributors/ 上述示例的源码example:{% link 如何参与项目::https://volantis.js.org/contributors/::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets@master/logo/256/safari.png %} button这个页面的标签将会在不久后重构 基础按钮请将您的 Volantis 升级至 2.4 版本以上使用。 语法格式参数列表示例写法示例效果{% btn 样式参数(可选)::标题::链接::图标(可选) %} 可选的参数可以省略,但是前后顺序不能乱。样式参数 regular, large, center 图标 第1个或者第2个参数包含 fa- 的那个被识别为图标。example.md:不设置任何参数的 {% btn 按钮:: / %} 适合融入段落中。regular 按钮适合独立于段落之外:{% btn regular::示例博客::https://xaoxuu.com::fas fa-play-circle %}large 按钮更具有强调作用,建议搭配 center 使用:{% btn center large::开始使用::https://volantis.js.org/v3/getting-started/::fas fa-download %}行内按钮 不设置任何参数的 按钮 适合融入段落中。 空心按钮 示例博客 示例博客 示例博客 示例博客 居中: 开始使用 实心按钮 示例博客 示例博客 示例博客 示例博客 居中: 开始使用 富文本按钮请将您的 Volantis 升级至 2.3 版本以上使用。 语法格式参数列表示例写法示例效果{% btns 样式参数 %}{% cell 标题::链接::图片或者图标 %}{% cell 标题::链接::图片或者图标 %}{% endbtns %}样式参数位置可以写图片样式、布局方式,多个样式参数用空格隔开。 圆角样式 默认为方形 rounded, circle 布局方式 默认为自动宽度,适合视野内只有一两个的情况。 参数 含义 wide 宽一点的按钮 fill 填充布局,自动铺满至少一行,多了会换行。 center 居中,按钮之间是固定间距。 around 居中分散 grid2 等宽最多2列,屏幕变窄会适当减少列数。 grid3 等宽最多3列,屏幕变窄会适当减少列数。 grid4 等宽最多4列,屏幕变窄会适当减少列数。 grid5 等宽最多5列,屏幕变窄会适当减少列数。 增加文字样式 可以在容器内增加 <b>标题</b> 和 <p>描述文字</p>如果需要显示类似「团队成员」之类的一组含有头像的链接: example.md:{% btns circle grid5 %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% endbtns %} 或者含有图标的按钮: example.md:{% btns rounded grid5 %}{% cell 下载源码::/::fas fa-download %}{% cell 查看文档::/::fas fa-book-open %}{% endbtns %} 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中 example.md:{% btns circle center grid5 %}<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'> <i class='fab fa-apple'></i> <b>心率管家</b> {% p red::专业版 %} <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'></a><a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'> <i class='fab fa-apple'></i> <b>心率管家</b> {% p green::免费版 %} <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'></a>{% endbtns %}如果需要显示类似「团队成员」之类的一组含有头像的链接: xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu 或者含有图标的按钮: 下载源码 查看文档 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中 心率管家 专业版 心率管家 免费版 ghcard最后更新于 5.0 版本{% ghcard 用户名::其它参数(可选) %}{% ghcard 用户名/仓库::其它参数(可选) %} 用户信息卡片 上述示例的源码: example:| {% ghcard xaoxuu %} | {% ghcard xaoxuu::theme=vue %} || -- | -- || {% ghcard xaoxuu::theme=buefy %} | {% ghcard xaoxuu::theme=solarized-light %} || {% ghcard xaoxuu::theme=onedark %} | {% ghcard xaoxuu::theme=solarized-dark %} || {% ghcard xaoxuu::theme=algolia %} | {% ghcard xaoxuu::theme=calm %} | 仓库信息卡片 上述示例的源码: example:| {% ghcard volantis-x/hexo-theme-volantis %} | {% ghcard volantis-x/hexo-theme-volantis::theme=vue %} || -- | -- || {% ghcard volantis-x/hexo-theme-volantis::theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis::theme=solarized-light %} || {% ghcard volantis-x/hexo-theme-volantis::theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis::theme=solarized-dark %} || {% ghcard volantis-x/hexo-theme-volantis::theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis::theme=calm %} | 更多参数选择GitHub 卡片 API 参数https://github-readme-stats.xaoxuu.com site网站卡片可以显示网站截图、logo、标题、描述,使用方法和 友链标签 一模一样,唯一的区别是数据文件名称为 sites.yml,可以和友链数据混用,通过分组过滤实现不一样的效果。 最后更新于 5.0 版本{% sites [筛选方式]:[组名] %} 演示效果xaoxuu开发者MHuiG划水Colsrch开发者inkss摸鱼 上述示例的源码example{% sites only:community_team %} 可以支持的参数数据按组筛选支持分组(白名单模式和黑名单模式)显示: // 显示 communtiy_team{% sites only:communtiy_team %}// 除了 communtiy_team 别的都显示{% sites not:community_team %}// 多个分组使用 `,` 分隔{% sites only:communtiy_team, communtiy_builder %} dropmenu这个页面的标签将会在不久后重构 下拉菜单请将您的 Volantis 升级至 3.0 版本以上使用。 语法格式示例写法示例效果容器 {% menu 前缀(可省略)::标题::后缀(可省略) %}菜单内容{% endmenu %} 菜单内容 菜单项 {% menuitem 文本::链接::图标 %} 分割线 {% menuitem hr %} 子菜单 {% submenu 嵌套菜单::图标 %}菜单内容{% endsubmenu %}示例1 {% menu 下拉菜单 %}{% menuitem 主题源码::https://github.com/volantis-x/hexo-theme-volantis/::fas fa-file-code %}{% menuitem 更新日志::https://github.com/volantis-x/hexo-theme-volantis/releases/::fas fa-clipboard-list %}{% menuitem hr %}{% submenu 有疑问?::fas fa-question-circle %}{% menuitem 看 FAQ::/faqs/ %}{% menuitem 看 本站源码::https://github.com/volantis-x/volantis-docs/ %}{% menuitem 提 Issue::https://github.com/volantis-x/hexo-theme-volantis/issues/ %}{% endsubmenu %}{% endmenu %} 示例2 {% menu 这个是::下拉菜单 %}(同上){% endmenu %} 示例3 {% menu 这个是::下拉菜单::的示例效果。 %}(同上){% endmenu %}示例1 下拉菜单 主题源码 更新日志 有疑问? 看 FAQ 看 本站源码 提 Issue 示例2 这个是 下拉菜单 主题源码 更新日志 有疑问? 看 FAQ 看 本站源码 提 Issue 示例3 这个是 下拉菜单 主题源码 更新日志 有疑问? 看 FAQ 看 本站源码 提 Issue 的示例效果。 tab此插件移植自 NexT #tabs 最后更新于 2.1 版本{% tabs 页面内不重复的ID %}<!-- tab 栏目1 -->内容<!-- endtab --><!-- tab 栏目2 -->内容<!-- endtab -->{% endtabs %} 演示效果栏目1栏目2。。。!!! 上述示例的源码example:{% tabs tab-id %}<!-- tab 栏目1 -->。。。<!-- endtab --><!-- tab 栏目2 -->!!!<!-- endtab -->{% endtabs %} folding最后更新于 5.0 版本{% folding 参数(可选)::标题 %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endfolding %} 演示效果 查看图片测试 查看默认打开的折叠框 这是一个默认打开的折叠框。 查看代码测试 {% folding green::查看代码测试 %}查看代码测试{% endfolding %} 查看列表测试 hahahehe 查看嵌套测试 查看嵌套测试2 查看嵌套测试3 hahaha 上述示例的源码example:{% folding 查看图片测试 %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endfolding %}{% folding cyan open::查看默认打开的折叠框 %}这是一个默认打开的折叠框。{% endfolding %}{% folding green::查看代码测试 %}{% endfolding %}{% folding yellow::查看列表测试 %}- haha- hehe{% endfolding %}{% folding red::查看嵌套测试 %}{% folding blue::查看嵌套测试2 %}{% folding 查看嵌套测试3 %}hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>{% endfolding %}{% endfolding %}{% endfolding %} 可以支持的参数参数位置可以填写颜色和状态,多个参数用空格隔开。 颜色blue, cyan, green, yellow, red 状态状态填写 open 代表默认打开。 inlineimageInlineimage 标签是一种行内图片标签,可以用来在一段话中间插入表情。 本插件最后更新于 5.0 版本{% inlineimage 图片链接::height=高度(可选) %} 演示效果这是 一段话。 这又是 一段话。 上述示例的源码example:这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif::height=40px %} 一段话。 可以支持的参数高度height=20px imageImage 标签是一种针对单个图片应用场景的标签,支持图片描述文字和指定宽度。 本插件最后更新于 5.0 版本{% image 链接::width=宽度(可选)::height=高度(可选)::alt=描述(可选)::bg=占位颜色(可选) %} 演示效果添加描述: 每天下课回宿舍的路,没有什么故事。 指定宽度: 指定宽度并添加描述: 每天下课回宿舍的路,没有什么故事。 设置占位背景色: 优化不同宽度浏览的观感 上述示例的源码example:添加描述:{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::alt=每天下课回宿舍的路,没有什么故事。 %}指定宽度:{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px %}指定宽度并添加描述:{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::alt=每天下课回宿舍的路,没有什么故事。 %}设置占位背景色:{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::bg=#1D0C04::alt=优化不同宽度浏览的观感 %} 可以支持的参数图片宽高度example:width=300px::height=32px 图片描述example:alt=图片描述 占位背景色example:bg=#f2f2f2 galleryGallery 标签是一种针对一组图片应用场景的标签。 本插件最后更新于 5.0 版本{% gallery 参数::列数::分组 %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg){% endgallery %} 演示效果一行一个图片 图片描述 一行多个图片(不换行) 图片描述图片描述图片描述 多行多个图片(每行2~8个图片) 上述示例的源码一行一个图片 example.md:{% gallery %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endgallery %} 一行多个图片(不换行) example.md:{% gallery::::one %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg){% endgallery %} 多行多个图片(每行2~8个图片) example.md:{% gallery stretch::6::two %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/007.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/008.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/009.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/010.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/011.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/013.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/014.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/015.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/017.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/018.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/020.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/021.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/022.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/023.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/024.jpg){% endgallery %} 可以支持的参数对齐方向left::center::right 缩放stretch 列数::后面直接写列数,支持 2 ~ 8 列。设定列数之后就是「多行多图」布局,此时图片默认左对齐。为了避免图片大小不一,建议搭配 stretch 来时图片放大填充。 测试中 设定列数之后 不会产生 累积布局偏移; 没有设定列数 产生了累积布局偏移 分组相同内容的会被归档在一个分组中。 audio本插件最后更新于 2.4 版本{% audio 音频链接 %} 演示效果Your browser does not support the audio tag. 上述示例的源码example:{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %} video本插件最后更新于 5.0 版本{% video 视频链接 %} 演示效果100%宽度 Your browser does not support the video tag. 50%宽度 Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. 25%宽度 Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. 上述示例的源码100%宽度 example.md:{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %} 50%宽度 example.md:{% videos::2 %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% endvideos %} 25%宽度 example.md:{% videos::4 %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% endvideos %} 可以支持的参数对齐方向left::center::right 列数::后面直接写列数,支持 1 ~ 4 列。 frame这是一个能够将图片或者视频套入设备框架中的标签,可以用来更优雅地显示截图、录屏。 本插件最后更新于 5.0 版本{% frame 框架名::img=图片链接::alt=图片描述(可选)::part=top/bottom(可选) %}{% frame 框架名::video=视频链接::part=top/bottom(可选) %} {% frame iphone11::img=https://bu.dusays.com/2020/09/28/baa33914a34ec.jpg::video=https://bu.dusays.com/2020/09/28/39db723f1e200.mp4::part=top %} 在这个示例中同时出现了 img 和 video 那么它就是一个带有封面的视频,在视频加载完成之前会先显示视频封面。 设备框架目前支持的有: iphone11 如果您有以下其它设备框架图(svg),欢迎 PR 兼容。 android, ipad, macbook, watch 剪裁通过设置 part=top 或者 part=bottom 来显示上半部分或者下半部分,否则将显示完整的框架及其中的图片/视频。 aplayer主题对 APlayer 插件的样式进行了兼容。安装插件: npm i -S hexo-tag-aplayer 使用方法: hexo-tag-aplayerhttps://github.com/MoePlayer/hexo-tag-aplayer issuesissues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代 md在局部渲染外部md文件。 示例写法{% md https://cdn.jsdelivr.net/gh/volantis-x/hexo-theme-volantis/README.md %} md (()=>{ volantis.css(\"https://cdn.bootcdn.net/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css\"); const contentEl = document.getElementById(\"md-3a48fc80-bb3b-1341-af9b-92e7d053bb76\"); const loadMarkdown = (url) => { if (!window.fetch) { contentEl.innerHTML = 'Your browser outdated. Please use the latest version of Chrome or Firefox!您的浏览器版本过低,请使用最新版的 Chrome 或 Firefox 浏览器!'; } else { contentEl.innerHTML = 'Loading ... | 加载中。。。'; fetch(url, { method: \"GET\" }) .then((resp) => { return Promise.all([ resp.ok, resp.status, resp.text(), resp.headers, ]); }) .then(([ok, status, data, headers]) => { if (ok) { return { ok, status, data, headers, }; } else { throw new Error(JSON.stringify(json.error)); } }) .then((resp) => { let data = marked.parse(resp.data); contentEl.innerHTML = data; }) .catch((error) => { console.log(error); contentEl.innerHTML = 'There was a problem loading the file!加载文件时出现问题!'; }); }; }; volantis.js(\"https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js\").then(()=>{ loadMarkdown(\"https://cdn.jsdelivr.net/gh/volantis-x/hexo-theme-volantis/README.md?t=\" + new Date().getTime()); })})(); swiper轮播标签默认一张图片是 50% 宽度,通过设置 width:min 设置为 25% 宽度,width:max 设置为 100% 宽度。 最大图片宽度 {% swiper width:max %}![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot11.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot12.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot13.png){% endswiper %} 最小图片宽度 {% swiper width:min %}![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot01.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot02.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot03.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot04.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot05.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot06.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot07.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot08.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot09.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot10.png){% endswiper %} pandown本插件最后更新于 5.0 版本{% pandown 网盘类型::网盘链接::提取码(可为空)::文件名 %} 演示效果volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) 上述示例的源码example:{% pandown baidu::https://example.com::1234::百度网盘 %}{% pandown tx::https://example.com::1234::腾讯微云 %}{% pandown onedrive::https://example.com::1234::onedrive %}{% pandown hc::https://example.com::1234::和彩云 %}{% pandown ty::https://example.com::1234::天翼云 %}{% pandown aliyun::https://example.com::1234::阿里网盘 %}{% pandown 115::https://example.com::1234::115网盘 %}{% pandown jg::https://example.com::1234::坚果云 %}{% pandown 360::https://example.com::1234::360安全云盘 %}{% pandown 123::https://example.com::1234::123网盘 %}{% pandown qn::https://example.com::1234::七牛云 %}{% pandown github::https://example.com::::Github %}{% pandown lz::https://example.com::1234::蓝奏云 %} 可以支持的参数网盘类型baidu, tx, onedrive, hc, ty, aliyun, 115, jg, 360, 123, qn, github, lz 如果里的主题版本不支持或有问题可查看如下文档 原版文档https://www.yt-blog.top/docs/vls-pandown-tags 友链标签您可以在任何位置插入友链,支持静态数据和动态数据,静态数据需要写在数据文件中: blog/source/_data/friends.ymlvolantis_developer: title: description: items: - title: xaoxuu url: https://github.com/xaoxuu avatar: https://avatars.githubusercontent.com/u/16400144?s=60&v=4 - title: MHuiG url: https://github.com/MHuiG avatar: https://avatars.githubusercontent.com/u/38281581?s=60&v=4 - title: inkss url: https://github.com/inkss avatar: https://avatars.githubusercontent.com/u/31947043?s=60&v=4 - title: Colsrch url: https://github.com/Colsrch avatar: https://avatars.githubusercontent.com/u/58458181?s=60&v=4 - title: Drew233 url: https://github.com/Drew233 avatar: https://avatars.githubusercontent.com/u/47592224?s=60&v=4 - title: Linhk1606 url: https://github.com/Linhk1606 avatar: https://avatars.githubusercontent.com/u/50829219?s=60&v=4 - title: W4J1e url: https://github.com/W4J1e avatar: https://avatars.githubusercontent.com/u/74824162?s=60&v=4community_builder: title: description: items: - title: xaoxuu url: https://github.com/xaoxuu avatar: https://avatars.githubusercontent.com/u/16400144?s=60&v=4 - title: MHuiG url: https://github.com/MHuiG avatar: https://avatars.githubusercontent.com/u/38281581?s=60&v=4 - title: Colsrch url: https://github.com/Colsrch avatar: https://avatars.githubusercontent.com/u/58458181?s=60&v=4 - title: penndu url: https://github.com/penndu avatar: https://avatars.githubusercontent.com/u/46226528?s=60&v=4 - title: heson525 url: https://github.com/heson525 avatar: https://avatars.githubusercontent.com/u/32234343?s=60&v=4 - title: W4J1e url: https://github.com/W4J1e avatar: https://avatars.githubusercontent.com/u/74824162?s=60&v=4 - title: luosiwei-cmd url: https://github.com/luosiwei-cmd avatar: https://avatars.githubusercontent.com/u/61175380?s=60&v=4groupGitHub: title: 来自 GitHub 的朋友 description: '以下友链通过 [GitHub Issue](https://github.com/xaoxuu/friends/issues/) 提交,按 issue 最后更新时间排序:' api: https://issues-api.xaoxuu.com repo: xaoxuu/friends 标题和描述都支持 md 格式,需要写在引号中。如果指定了 api 和 repo 字段,则从 issues 中取第一个 json 代码块数据作为友链。 写法如下{% friends %} 数据按组筛选友链支持分组(白名单模式和黑名单模式)显示: 写法如下// 显示 volantis_developer{% friends only:volantis_developer %}// 显示 volantis_developer 和 community_builder{% friends only:volantis_developer,community_builder %}// 除了 community_builder 别的都显示{% friends not:community_builder %} friends only:volantis_developer xaoxuuMHuiGinkssColsrchDrew233Linhk1606W4J1eericcloseheson525CRainyDayFlexistonMicDZzhaohaihaolixiang810WillyChen123ic3evi1pennduPHIKN1GHTzsStrikecode004AcceptedqinxsXuxuGoodTRHXcofmlunhui1994gyl-coderfi6 实现动态友链可以加载来自 issues 的友链数据,除了需要在 _data/friends.yml 中指定 api 和 repo 外,还需要做一下几件事: 从 xaoxuu/issues-api 作为模板克隆或者 fork 仓库,然后提交一个 issue 进行测试,不出意外的话,仓库中已经配置好了 issue 模板,只需要在模板中指定的位置填写信息就可以了。 提交完 issue 一分钟左右,如果仓库中出现了 output 分支提交,可以点击查看一下文件内容是否已经包含了刚刚提交的 issue 中的数据,如果包含,那么再次回到前端页面刷新就可以看到来自 issue 的友链数据了。 关于自建&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":"2024-03-28T06:49:50.094Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v5/theme-settings/index.html","permalink":"https://volantis.js.org/v5/theme-settings/","excerpt":"","text":"创建主题配置文件主题目录下的 _config.yml 文件通常负责主题相关配置,我们强烈建议您使用代替的主题配置文件以防止自己的配置丢失。那么如何使用代替主题配置文件呢? 第 1/2 步:创建配置文件 在博客根目录的 _config.yml 文件旁边新建一个文件: _config.volantis.yml ,这个文件中的配置信息优先级高于主题文件夹中的配置文件。 第 2/2 步:覆盖自定义配置 当您需要修改某项内容时,例如导航栏菜单,那么您需要在主题配置文件中找到相关内容,复制进自己创建的配置文件中:blog/_config.volantis.ymlnavbar: visiable: auto # always, auto logo: # choose [img] or [icon + title] img: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png icon: title: menu: - name: 博客 icon: fa-solid fa-rss url: /小提示使用「npm i hexo-theme-volantis」方式安装的主题,主题配置文件在「blog/node_modules/hexo-theme-volantis/_config.yml」使用传统方式安装的主题,主题配置文件在「blog/themes/volantis/_config.yml」 自定义主题外观最大布局宽度blog/_config.volantis.ymlcustom_css: ... max_width: 1080px # Sum of body width and sidebar width 网页所呈现的内容的最大宽度,即 body 和 sidebar 的宽度之和。 抗锯齿blog/_config.volantis.ymlcustom_css: ... font_smoothing: true # font-smoothing for webkit 自定义光标样式blog/_config.volantis.ymlcustom_css: ... cursor: enable: true text: volantis-static/media/cursor/text.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/text.png pointer: volantis-static/media/cursor/pointer.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/pointer.png default: volantis-static/media/cursor/left_ptr.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/left_ptr.png not-allowed: volantis-static/media/cursor/circle.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/circle.png zoom-out: volantis-static/media/cursor/zoom-out.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/zoom-out.png zoom-in: volantis-static/media/cursor/zoom-in.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/zoom-in.png grab: volantis-static/media/cursor/openhand.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/openhand.png 导航栏样式您可以设置导航栏的高度以及视觉特效,视觉特效目前可选的有: shadow:卡片阴影。 floatable:当鼠标移动到容器内时,呈现出浮起来的效果。 blur:背景模糊效果(毛玻璃),当浏览器不支持时显示为不透明。 blog/_config.volantis.ymlcustom_css: ... navbar: height: 64px width: auto # auto, max effect: [shadow, blur] # [shadow, floatable, blur] 滚动条样式blog/_config.volantis.ymlcustom_css: ... scrollbar: size: 4px border: 2px color: '#2196f3' hover: '#ff5722' 侧边栏样式视觉特效参数同上,值得注意的是:卡片的 floatable 效果和 blur 效果相冲突。 blog/_config.volantis.ymlcustom_css: ... sidebar: effect: [shadow] # [shadow, floatable, blur] 正文区域样式视觉特效参数同上,值得注意的是:卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。 blog/_config.volantis.ymlcustom_css: ... body: effect: [shadow] # [shadow, floatable, blur] highlight: language: true # show language of codeblock copy_btn: true text_align: # left, right, justify, center h1: left h2: left h3: left h4: left p: justify 布局间距您可以设置几种标题的布局间距 h2/h3/h4、段落间距 line、区块内部的段落间距 inline。 blog/_config.volantis.ymlcustom_css: ... gap: h2: 48px # Spacing above H2 (only px unit) h3: 24px # Spacing above H3 (only px unit) h4: 16px # Spacing above H4 (only px unit) p: 1em # Paragraph spacing between paragraphs line_height: 1.6 # normal, 1.5, 1.75, 2 ... 自定义字体您可以自定义正文和代码字体。 blog/_config.volantis.ymlcustom_css: ... fontfamily: logofont: fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'Varela Round' url: volantis-static/media/fonts/VarelaRound/VarelaRound-Regular.ttf # https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf weight: normal style: normal bodyfont: fontfamily: 'UbuntuMono, "Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'UbuntuMono' url: volantis-static/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf # https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf weight: normal style: normal codefont: fontfamily: 'Menlo, UbuntuMono, Monaco' # name: 'Monaco' # url: volantis-static/media/fonts/Monaco/Monaco.ttf # https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf # weight: normal # style: normal 自定义颜色多彩配色方案 blog/_config.volantis.ymlcolor_scheme: # ------------ # 通用颜色 common: # 主题色 theme: '#44D7B6' # 链接色 link: '#2196f3' # 按钮色 button: '#44D7B6' # 鼠标放到交互元素上时的色 hover: '#ff5722' # 主题色块内部的文字颜色 inner: '#fff' # 选中区域文字的背景颜色 selection: 'alpha(#2196f3, 0.2)' # ------------ # 亮色主题(默认) light: # 网站背景色 site_bg: '#f4f4f4' # 网站背景上的文字 site_inner: '#fff' # 网站页脚文字 site_footer: '#666' # 卡片背景色 card: '#fff' # 卡片上的普通文字 text: '#444' # 区块和代码块背景色 block: '#f6f6f6' # 代码块高亮时的背景色 codeblock: '#FFF7EA' # 行内代码颜色 inlinecode: '#D56D28' # 文章部分 h1: '#444' h2: '#444' h3: '#444' h4: '#444' h5: '#444' h6: '#444' p: '#444' # 列表文字 list: '#666' # 列表 hover 时的文字 list_hl: 'mix($color-theme, #000, 80)' # 辅助性文字 meta: '#888' # ------------ # 暗色主题 dark: # 网站背景色 site_bg: '#222' # 网站背景上的文字 site_inner: '#eee' # 网站页脚文字 site_footer: '#aaa' # 卡片背景色 card: '#444' # 卡片上的普通文字 text: '#eee' # 区块和代码块背景色 block: '#3a3a3a' # 代码块高亮时的背景色 codeblock: '#343a3c' # 行内代码颜色 inlinecode: '#D56D28' # 文章部分 h1: '#eee' h2: '#eee' h3: '#ddd' h4: '#ddd' h5: '#ddd' h6: '#ddd' p: '#bbb' # 列表文字 list: '#aaa' # 列表 hover 时的文字 list_hl: 'mix($color-theme, #fff, 80)' # 辅助性文字 meta: '#888' # 夜间图片亮度 brightness: 70% 自定义右键菜单自定义右键菜单自 5.0.0-rc.8 版本进行了全新重构,与历史版本相比,重构版右键菜单拥有更灵活的配置。 由于新版右键菜单配置较为复杂,原版菜单暂时性保留,在配置文件上新版右键以 rightmenus 命名。 为了方面称呼,以新版右键代指重构版右键菜单,老版右键代指历史版本右键菜单。 差异对比新旧两版右键菜单的差异如下: 对比项 老版右键 新版右键 自定义菜单项 只支持新增链接型菜单 同时支持事件型和链接型菜单 菜单项显示与顺序调整 部分支持 完全支持 内置菜单自定义调整 部分支持 完全支持修改文字描述、图标显示、功能实现等内容 自定义响应事件处理 不支持 支持自行添加 复制图片至剪切板 仅支持 PNG 格式图片 任意格式的图片 全局音乐控制 支持 支持 新版右键菜单新版右键在菜单项上根据配置文件自行生成前端代码,所以统一了一个共用的菜单对象: {id: '', name: '', icon: '', link: '', event: '', group: ''} 同时为了响应不同状态下的右键行为,提出了内置组 (defaultGroup)的概念,相应的对于右键默认提供的功能实现则定义为内置实现(defaultEvent)。 { defaultEvent: ['copyText', 'copyLink', 'copyPaste', 'copyAll', 'copyCut', 'copyImg', 'printMode', 'readMode'], defaultGroup: ['navigation', 'inputBox', 'seletctText', 'elementCheck', 'elementImage', 'articlePage']} 具体来说,内置组对应右键行为,例如 inputBox 代表在输入框下右键行为;内置实现对应自定义右键默认提供的功能实现,例如 readMode 代表了阅读模式。 参数解释plugins/menus 类的组内数据支持对象(单个菜单)或数组(一系列菜单)rightmenus: order: menus.groupName plugins: defaultGroupItem menus: groupName: - {menu} - {menu} groupName1: {menu} 右键菜单加载菜单的具体加载由 order 控制,可供使用的内容为:plugins.[组名], menus.[组名], hr, music 这四大类。 右键菜单排序菜单的排序由 order 字段的先后顺序和组内菜单项的先后顺序决定。 右键菜单类菜单项共分为两大类:plugins 和 menus,前者放置内置组及内置菜单,允许添加/修改组内菜单;后者为用户自建菜单类,允许添加/修改组及组内菜单。一般意义上 plugins 类的组为动态组,根据实际的右键状态进行显示;menus 类中内容由用户添加,菜单项默认显示。 右键菜单项菜单项共六个字段:id, name, icon, link, event, group,具体作用如下: id: 唯一值 name: 用于菜单名称显示 icon: 用于菜单图标显示 link: 跳转链接 event: 事件,当输入内容不为内置事件时,作 JavaScript 代码执行 group: 菜单项所处分组名称 note link/event 二选一,同时出现时仅处理 link。 内置功能内置组 组名 描述 备注 navigation 导航组件,横向排列,共用一行,仅显示图标 原则上支持的数量不限 inputBox 文本输入框相关组件 生效于 input/textarea seletctText 文本选中类组件 生效于右键选中文本,text 为选中的文本 elementCheck 链接判断组件 生效于链接处的右键行为,link 为链接地址 elementImage 图片判断类组件 生效于图片类的右键行为,link 为链接地址 articlePage 文章页面组件 生效于 post.article 页面 note 除 navigation 外的内置组,在显示时会隐藏含 link 属性的菜单项。 内置实现 事件名 描述 备注 copyText 复制文本 复制选中文本 copyLink 复制链接地址 复制 a 或 image 下的链接至剪切板 copyPaste 粘贴文本 需要用户批准相应权限,仅支持粘贴文本至输入框(暂不支持粘贴图片) copyAll 全选文本 选中输入框内的文本内容 copyCut 剪切文本 剪切输入框中选中的文本内容 copyImg 复制图片 支持 Chrome 浏览器,复制图片资源至剪切板 printMode 打印页面 一个调制过样式的打印功能 readMode 阅读模式 一个简单的阅读模式功能 默认设置iconPrefixFontawesome 图标前缀,音乐类组件使用,参考内容:fa-solid, fa-regular, fa-light, fa-thin, fa-duotone, fa-brands。 articleShowLink在 articlePage 组显示时(文章页)时依旧显示含 link 属性的菜单项。 musicAlwaysShow当设定全局音乐播放器时,是否一直显示音乐控制菜单。false:仅当音乐播放时启用。 corsAnywhere适用于复制图片文件的场景,当图片源未设置 Access-Control-Allow-Origin 时,图片复制由于 CORS 问题失败。 你可以自行部署相应项目解决该问题,详见:Rob--W/cors-anywhere 或者 Zibri/cloudflare-cors-anywhere。 回调方法volantis.rightmenu.handle 在右键菜单打开时执行。 volantis.rightmenu.handle(callBack[,"callBackName", "setRequestAnimationFrame = true"])。 此外,你还可以在 volantis.mouseEvent 处获得 MouseEvent 信息。 配置文件 blog/_config.volantis.yml ### 自定义右键 新rightmenus: enable: true # 右键菜单项及加载顺序 # 内容示例:plugins.[组名], menus.[组名], hr(分割线,推荐去线留白), music(音乐控制器) order: - plugins.navigation - hr - plugins.inputBox - plugins.seletctText - plugins.elementCheck - plugins.elementImage - menus.link - hr - menus.darkMode - plugins.articlePage - music ############################ # - {id: '', name: '', icon: '', link: '', event: '', group: ''} # id: 唯一值 # name: 用于菜单名称显示 # icon: 用于菜单图标显示 # link: 跳转链接 # event: 事件,当输入内容不为内置事件时,作 JavaScript 代码执行 # group: 菜单项所处分组名称 # 注: # 1. link/event 二选一,同时出现时仅处理 link # 2. 内置事件列表: copyText, copyLink, copyPaste, copyAll, copyCut, copyImg, printMode, readMode # 3. 内置组列表:navigation, inputBox, seletctText, elementCheck, elementImage, articlePage # 4. plugins 列允许自定义组内项目 # 5. menus 列允许自定义组及其内容 # 6. 除 navigation 外的内置组,在显示时会隐藏含 link 属性的菜单项 ########################### # 基础项设置 options: # 图标前缀 fa-solid, fa-regular, fa-light, fa-thin, fa-duotone, fa-brands iconPrefix: fa-solid # 例外,在 articlePage 组显示时(文章页)时依旧显示含 link 属性的菜单项 articleShowLink: false # 当设定全局音乐播放器时,是否一直显示音乐控制菜单。false:仅当音乐播放时启用 musicAlwaysShow: false # 适用于复制图片文件的场景,当图片源未设置 Access-Control-Allow-Origin 时,图片复制由于 CORS 问题失败 # 你可以自行部署相应项目解决该问题,详见:https://github.com/Rob--W/cors-anywhere 或者 https://github.com/Zibri/cloudflare-cors-anywhere corsAnywhere: # 右键内置组,预置实现 plugins: # 导航组件 # 横向排列,共用一行,仅显示图标 (原则上支持的数量不限) navigation: - {id: 'left', name: '转到上一页', icon: 'fa-solid fa-arrow-left', event: 'history.back()', group: 'navigation'} - {id: 'right', name: '转到下一页', icon: 'fa-solid fa-arrow-right', event: 'history.forward()', group: 'navigation'} - {id: 'redo', name: '刷新当前页面', icon: 'fa-solid fa-redo', event: 'window.location.reload()', group: 'navigation'} - {id: 'up', name: '回到顶部', icon: 'fa-solid fa-arrow-up', event: 'VolantisApp.scrolltoElement(volantis.dom.bodyAnchor)', group: 'navigation'} #- {id: 'home', name: '回到首页', icon: 'fa-solid fa-home', link: '/', group: 'navigation'} # 文本输入框相关组件 # 生效于 input/textarea,粘贴、剪切、全选 inputBox: - {id: 'copyPaste', name: '粘贴文本', icon: 'fa-solid fa-paste', event: 'copyPaste', group: 'inputBox'} - {id: 'copyAll', name: '全选文本', icon: 'fa-solid fa-object-ungroup', event: 'copyAll', group: 'inputBox'} - {id: 'copyCut', name: '剪切文本', icon: 'fa-solid fa-cut', event: 'copyCut', group: 'inputBox'} # 文本选中类组件 # 生效于右键选中文本,__text__ 为选中的文本。 seletctText: - {id: 'copyText', name: '复制文本', icon: 'fa-solid fa-copy', event: 'copyText', group: 'seletctText'} - {id: 'searchWord', name: '站内搜索', icon: 'fa-solid fa-search', event: 'OpenSearch(__text__)', group: 'seletctText'} - {id: 'bingSearch', name: '必应搜索', icon: 'fa-solid fa-search', event: 'window.open(`https://cn.bing.com/search?q=${__text__}`)', group: 'seletctText'} #- {id: 'googleSearch', name: '谷歌搜索', icon: 'fa-solid fa-search', event: 'window.open(`https://www.google.com/search?q=${__text__}`)', group: 'seletctText'} # 链接判断组件 # 生效于链接处的右键行为,__link__ 为链接地址 elementCheck: - {id: 'openTab', name: '新标签页打开', icon: 'fa-solid fa-external-link-square-alt', event: 'window.open(__link__)', group: 'elementCheck'} - {id: 'copyLink', name: '复制链接地址', icon: 'fa-solid fa-link', event: 'copyLink', group: 'elementCheck'} # 图片判断类组件 # 生效于图片类的右键行为,__link__ 为链接地址 elementImage: - {id: 'copyImg', name: '复制图片', icon: 'fa-solid fa-image', event: 'copyImg', group: 'elementImage'} - {id: 'googleImg', name: '谷歌识图', icon: 'fa-solid fa-images', event: 'window.open(`https://www.google.com.hk/searchbyimage?image_url=${__link__}`)', group: 'elementImage'} # 文章页面组件 # 生效于 post.article 页面 articlePage: - {id: 'printMode', name: '打印页面', icon: 'fa-solid fa-print', event: 'printMode', group: 'articlePage'} - {id: 'readMode', name: '阅读模式', icon: 'fa-solid fa-book-open', event: 'readMode', group: 'articlePage'} # 右键自定义菜单区域 menus: link: - {id: 'help', name: '常见问题', icon: 'fa-solid fa-question', link: 'https://volantis.js.org/faqs/', group: 'link'} - {id: 'examples', name: '示例博客', icon: 'fa-solid fa-rss', link: 'https://volantis.js.org/examples/', group: 'link'} - {id: 'contributors', name: '加入社区', icon: 'fa-solid fa-fan', link: 'https://volantis.js.org/contributors/', group: 'link'} - hr - {id: 'source_docs', name: '本站源码', icon: 'fa-solid fa-code-branch', link: 'https://github.com/volantis-x/volantis-docs/', group: 'link'} - {id: 'source_theme', name: '主题源码', icon: 'fa-solid fa-code-branch', link: 'https://github.com/volantis-x/hexo-theme-volantis/', group: 'link'} darkMode: - {id: 'darkMode', name: '暗黑模式', icon: 'fa-solid fa-moon', event: 'volantis.dark.toggle()', group: 'darkMode'}### 高级玩法可以利用 Custom Files 自定义文件 功能,实现自定义右键菜单脚本及菜单项控制。 一个在右键菜单中添加 查看上一篇、查看下一篇 菜单项的范例: blog/_config.volantis.ymlblog/source/_volantis/bodyEnd.ejs省略了部分不相关内容rightmenus: order: - menus.prevNext menus: prevNext: - {id: 'prev', name: '查看上一篇', icon: 'fa-solid fa-angles-left', event: "volantis.rightmenu.jump('prev')", group: 'prevNext'} - {id: 'next', name: '查看下一篇', icon: 'fa-solid fa-angles-right', event: "volantis.rightmenu.jump('next')", group: 'prevNext'}为了方便管理,将函数挂在 volantis.rightmenu 对象下<script> volantis.rightmenu.jump = (type) => { const selector = type === 'prev' ? 'article .prev-next a.prev' : 'article .prev-next a.next'; const item = document.querySelector(selector); if(!!item) { if(typeof pjax !== 'undefined') { pjax.loadUrl(item.href) } else { window.location.href = item.href; } } } volantis.rightmenu.handle(() => { const prev = document.querySelector('#prev').parentElement, next = document.querySelector('#next').parentElement, articlePrev = document.querySelector('article .prev-next a.prev p.title'), articleNext = document.querySelector('article .prev-next a.next p.title'); prev.style.display = articlePrev ? 'block' : 'none'; prev.title = articlePrev ? articlePrev.innerText : null; next.style.display = articleNext ? 'block' : 'none'; next.title = articleNext ? articleNext.innerText : null; }, 'prevNext', false) </script> 老版右键菜单目前老版右键与新版右键共存,但同时只能开启一个自定义右键菜单。 配置文件 blog/_config.volantis.yml # 自定义右键菜单rightmenu: enable: false faicon: fa # 公共图标类型 fa fal fa-solid fa-duotone # hr: 分割线, music: 音乐控制器 layout: [home, hr, help, examples, contributors, hr, source_docs, source_theme, hr, print, darkmode, reading, music] ### 可选功能项 ### print: # 只有文章页才允许自定义打印 name: 打印页面 icon: fa fa-print darkmode: # 需开启 plugins.darkmodejs name: 暗黑模式 icon: fa fa-moon reading: name: 阅读模式 icon: fa fa-book-open customPicUrl: # 右键的图片复制:只有 Chrome 支持,且只支持 PNG 格式的图片。 enable: false # 如果使用了对象存储且开启了自适应 Webp,那么可以提供额外的链接用以替换图片的访问地址 old: #https://static.inkss.cn/img/article/ new: #https://cdn.jsdelivr.net/gh/inkss/inkss-cdn@master/img/article/ music: # 当设定全局音乐播放器时,是否一直显示音乐控制菜单。false:仅当音乐播放时启用 alwaysShow: true ### 自定义菜单 ### help: name: 常见问题 icon: fa fa-question url: https://volantis.js.org/faqs/ examples: name: 示例博客 icon: fa fa-rss url: https://volantis.js.org/examples/ contributors: name: 加入社区 icon: fa fa-fan fa-spin url: https://volantis.js.org/contributors/ source_docs: name: 本站源码 icon: fa fa-code-branch url: https://github.com/volantis-x/volantis-docs/ source_theme: name: 主题源码 icon: fa fa-code-branch url: https://github.com/volantis-x/hexo-theme-volantis/#### 设置网站导航栏导航栏配置导航栏分为 logo、menu、search 三个区域设置,其中 logo 区域如果设置了图片,则不能显示图标和标题, menu 区域的设置可以写在一个单独的文件中。 blog/_config.volantis.yml# 注意事项:建议规范全站路径 URL 最后带一个 "/" 例如 "about/"navbar: visiable: auto # always, auto logo: # choose [img] or [icon + title] img: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png icon: title: menu: - name: 博客 icon: fa-solid fa-rss url: / - name: 分类 icon: fa-solid fa-folder-open url: categories/ - name: 标签 icon: fa-solid fa-tags url: tags/ - name: 归档 icon: fa-solid fa-archive url: archives/ - name: 友链 icon: fa-solid fa-link url: friends/ - name: 关于 icon: fa-solid fa-info-circle url: about/ search: Search... # Search bar placeholder 菜单嵌套导航栏菜单支持嵌套,嵌套的属性名为 rows ,写法示例: ...- name: 更多 icon: fa-solid fa-ellipsis-v rows: - name: 主题源码 url: https://github.com/volantis-x/hexo-theme-volantis/ - name: 更新日志 url: https://github.com/volantis-x/hexo-theme-volantis/releases/ - name: hr - name: 有疑问? rows: - name: 看 FAQ url: faqs/ - name: 看 本站源码 url: https://github.com/volantis-x/volantis-docs/ - name: 提 Issue url: https://github.com/volantis-x/hexo-theme-volantis/issues/ - name: hr - name: 公告和测试博文 url: archives/ - name: 示例博客 url: examples/ - name: 特别感谢 url: contributors/ 分割线在子菜单中,新增一个只有 name: hr 的“菜单”就会被渲染成一个分割线。 - name: hr 小标题在子菜单中,新增一个只有 name: 小标题内容(也可以有 icon: 小标题的图标)的“菜单”就会被渲染成一个小标题。 ...- name: 近期 icon: fa-solid fa-clock url: / rows: - name: 热门文章 icon: fa-solid fa-fire - name: ProHUD 开源库的设计思路 url: blog/2019-08-27-prohud/ - name: ValueX:实用的安全对象类型转换库 url: blog/2019-08-29-valuex/ - name: 心率管家 App 的设计与开发 url: blog/2019-07-23-heartmate/ 播放器在子菜单中,新增一个 icon: fa-solid fa-compact-disc 的“菜单”就会被渲染成一个 APlayer 播放器。 - name: 背景音乐 icon: fa-solid fa-compact-disc 设置网站页脚您通过 layout 可以自由布局网站页脚内容 aplayer, social, license, info, copyright。 blog/_config.volantis.ymlsite_footer: # layout of footer: [aplayer, social, license, info, copyright] layout: [aplayer, social, license, info, copyright] social: - icon: fas fa-rss url: atom.xml - icon: fas fa-envelope url: mailto:me@xaoxuu.com - icon: fab fa-github url: https://github.com/xaoxuu - icon: fas fa-headphones-alt url: https://music.163.com/#/user/home?id=63035382 copyright: '[Copyright © 2017-2021 XXX](/)' # You can add your own property here. (Support markdown, for example: br: '<br>') br: '<br>' 其中,aplayer 需要在插件部分设置中启用。您可以新增文字属性,用于展示其它文字信息,例如: blog/_config.volantis.ymlsite_footer: layout: [..., br, hello, ...] ... # You can add your own property here. (Support markdown, for example: br: '<br>') br: '<br>' hello: '[Hello World](/)' 网站与文章封面封面高度blog/_config.volantis.ymlcover: height_scheme: full # full, half ... 目前主题提供两种首页封面高度方案,其它页面均为半屏幕高度。 封面布局方案blog/_config.volantis.ymlcover: ... layout_scheme: dock # search (搜索), dock (坞), featured (精选), focus (焦点) ... 布局方案 适合场景 search 注重搜索 dock 入口选项比较多 featured 选项在4个左右 focus 选项在4个左右 默认显示设置blog/_config.volantis.ymlcover: ... display: home: true archive: false others: false # can be written in front-matter 'cover: true' 由于主页、归档是 hexo 自动生成的,您需要在主题配置文件中设置是否显示封面,而其它页面则可以在 front-matter 中通过设置 cover: true/false 来决定显示封面或者不显示封面。 文章布局配置# 文章布局article: # 文章列表页面的文章卡片布局方案 preview: scheme: landscape # landscape # pin icon for post pin_icon: https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f4cc.svg # auto generate title if not exist auto_title: true # false, true # auto generate excerpt if not exist auto_excerpt: true # false, true # show split line or not line_style: solid # hidden, solid, dashed, dotted # show readmore button readmore: auto # auto, always # 文章详情页面的文章卡片本体布局方案 body: # 文章顶部信息 # 从 meta_library 中取 top_meta: [author, category, date, counter] # ---------------- # 文章页脚组件 footer_widget: # ---------------- # 参考资料、相关资料等 (for layout: post/docs) references: title: 参考资料 icon: fas fa-quote-left # 在 front-matter 中: # references: # - title: 某篇文章 # url: https:// # 即可显示此组件。 # ---------------- # 相关文章,需要安装插件 (for layout: post) # npm i hexo-related-popular-posts related_posts: enable: false title: 相关文章 icon: fas fa-bookmark max_count: 5 # 设为空则不使用文章头图 placeholder_img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg # ---------------- # 版权声明组件 (for layout: post/docs) copyright: enable: true permalink: '本文永久链接是:' content: - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议' - permalink # ---------------- # 打赏组件 (for layout: post/docs) donate: enable: false images: - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png # 文章底部信息 # 从 meta_library 中取 bottom_meta: [updated, tags, share] # meta library meta_library: # 默认文章作者(可在 front-matter 中覆盖) author: avatar: name: 请设置文章作者 url: / # 文章创建日期 date: icon: fas fa-calendar-alt title: '发布于:' format: 'll' # 日期格式 http://momentjs.com/docs/ # 文章更新日期 updated: icon: fas fa-edit title: '更新于:' format: 'll' # 日期格式 http://momentjs.com/docs/ # 文章分类 category: icon: fas fa-folder-open # 文章浏览计数 counter: icon: fas fa-eye unit: '次浏览' # 文章字数和阅读时长 wordcount: icon_wordcount: fas fa-keyboard icon_duration: fas fa-hourglass-half # 文章标签 tags: icon: fas fa-hashtag # 分享 share: - id: qq img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png - id: qzone img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png - id: weibo img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png - id: # qrcode # 当id为qrcode时需要安装插件 npm i hexo-helper-qrcode img: # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png - id: # telegram img: # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/telegram.png 其中 top_meta 和 bottom_meta 部分的取值自 meta_library 库。 侧边栏配置侧边栏小组件与 meta 库不同的是:除了现有的 widget ,您可以很轻易地创建自己的 widget ,然后放在需要的地方。此外,您还可以将 widget 写在单独的文件中。 查看所有相关配置 blog/_config.volantis.ymlsidebar: # 主页、分类、归档等独立页面 for_page: [blogger, category, tagcloud, qrcode] # layout: docs/post 这类文章页面 for_post: [toc] # 侧边栏组件库 widget_library: # --------------------------------------- # blogger info widget blogger: class: blogger display: [desktop, mobile] # [desktop, mobile] avatar: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png shape: rectangle # circle, rectangle url: /about/ title: subtitle: jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails. social: true # --------------------------------------- # toc widget (valid only in articles) toc: class: toc display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-list title: 本文目录 list_number: false min_depth: 2 max_depth: 5 # --------------------------------------- # category widget category: class: category display: [desktop] # [desktop, mobile] header: icon: fas fa-folder-open title: 文章分类 url: /blog/categories/ # --------------------------------------- # tagcloud widget tagcloud: class: tagcloud display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-tags title: 热门标签 url: /blog/tags/ min_font: 14 max_font: 24 color: true start_color: '#999' end_color: '#555' # --------------------------------------- # qrcode widget donate: class: qrcode display: [desktop, mobile] # [desktop, mobile] height: 64px # Automatic height if not set images: - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png # --------------------------------------- # webinfo widget webinfo: class: webinfo display: [desktop] header: icon: fa-solid fa-award title: 站点信息 type: article: enable: true text: '文章数目:' unit: '篇' runtime: enable: true data: '2020/01/01' # 填写建站日期 text: '已运行时间:' unit: '天' wordcount: enable: true text: '本站总字数:' # 需要启用 wordcount unit: '字' visitcounter: siteuv: enable: true text: '本站访客数:' unit: '人' sitepv: enable: true text: '本站总访问量:' unit: '次' lastupd: enable: true friendlyShow: true # 更友好的时间显示 text: '最后活动时间:' unit: '日' 每一个小部件都有 class 和 display,前者代表这个小部件是什么,后者代表这个小部件在什么桌面和移动平台中是否显示,如果在移动平台显示,由于屏幕宽度有限,侧边栏的小部件则会被移动到正文区域下方,因此部分侧边栏小部件便失去意义,建议设置为仅桌面端显示。 小部件名: class: 小部件类别 display: [小部件在桌面端是否显示, 小部件在移动设备是否显示] pjaxReload: true # 是否 pjax 重载 默认 true; 设置为 false 时 确保所有页面都含有该小部件 sticky: true # 是否开启粘性定位,默认 false;设置为 true 时固定在屏幕中 博主信息部件blog/_config.volantis.ymlblogger: class: blogger display: [desktop] # [desktop, mobile] avatar: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png title: subtitle: jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails. social: true 其中,今日诗词 jinrishici 如果设置为一个字符串,这个字符串会变成占位文字,加载失败时显示。如果不需要,就请设置为 jinrishici: false。social 的具体内容请在网站页脚部分设置。 文章目录部件blog/_config.volantis.ymltoc: class: toc display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-list title: 本文目录 list_number: false min_depth: 2 max_depth: 5 这个部件只能放置在侧边栏,并且在文章中有效。在移动设备中预览时,手指向上滑动时,导航栏右边会出现 TOC 按钮,点击即可展开 TOC 部件。如果您需要显示章节序号,请设置 list_number。 min_depth 和 max_depth 代表 TOC 支持的标题层级,最大范围是2~6。 文章分类部件blog/_config.volantis.ymlcategory: class: category display: [desktop] # [desktop, mobile] header: icon: fas fa-folder-open title: 文章分类 url: /blog/categories/ 这个部件可以直接显示所有文章分类,如果您希望有一个独立的页面来展示,需要自己创建一个文件,具体操作在「页面」部分文档中。 标签云部件blog/_config.volantis.ymltagcloud: class: tagcloud display: [desktop] # [desktop, mobile] header: icon: fas fa-tags title: 热门标签 url: /blog/tags/ min_font: 14 max_font: 24 color: true start_color: '#999' end_color: '#555' 这个部件可以直接显示所有文章的标签,如果您希望有一个独立的页面来展示,需要自己创建一个文件,具体操作在「页面」部分文档中。 二维码部件blog/_config.volantis.ymldonate: class: qrcode display: [desktop, mobile] # [desktop, mobile] height: 64px # Automatic height if not set images: - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png 您可以放置在文章页脚用于展示打赏图片,也可以放置在侧边栏。 通用文本部件blog/_config.volantis.ymlrepos: class: text display: [desktop] # [desktop, mobile] header: icon: fab fa-github title: 点个赞吧 url: https://github.com/xaoxuu/ content: - '您的赞对我来说很重要,如果您喜欢本主题,希望能够给下面的项目点个赞来支持一下。' - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)' - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)' - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)' 您可以创建用于展示任何文本内容的文本部件。 通用列表部件blog/_config.volantis.ymlwiki-hexo-theme: class: list display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-chevron-left title: Hexo Themes url: /wiki/ rows: - name: Volantis for Hexo url: /wiki/volantis/ - name: Resume for Hexo url: /wiki/resume/ 您可以创建用于展示任何链接列表的列表部件。列表的 rows 中的每一项支持的属性有: name、url、icon、img、avatar,其中 img 是方形图片的链接,avatar 是圆形图片的链接。 组索引这个部件的布局继承自 list 部件,用于展示文章所属的分组的文章列表。请将您的 Volantis 升级至 2.5 版本以上使用。 blog/_config.volantis.ymlgroup-1: class: group display: [desktop, mobile] # [desktop, mobile] header: icon: fab fa-github title: Git url: /wiki/git/ 在文章的 front-matter 中设置: front-mattergroup: group-1order: 16sidebar: [group-1, toc] 「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章,顺序按照 order 从小到大排列。 通用网格部件blog/_config.volantis.ymlfeedback: class: grid display: [desktop, mobile] header: icon: fas fa-headset title: 联系开发者 url: https://github.com/volantis-x/hexo-theme-volantis fixed: true # 固定宽度 rows: - name: 反馈BUG icon: fas fa-bug url: https://github.com/volantis-x/hexo-theme-volantis/issues/ - name: 疑问求助 icon: fas fa-question-circle url: https://github.com/volantis-x/hexo-theme-volantis/issues/ - name: 提个建议 icon: fas fa-lightbulb url: https://github.com/volantis-x/hexo-theme-volantis/issues/ 您可以创建用于展示任何链接列表的网格部件。网格默认根据文字长度自动确定每一个格子的宽度,如果文字长短不一,建议通过设置 fixed: true 来固定宽度,此时文字过长的格子中的文字会换行显示。 通用页面部件blog/_config.volantis.ymltest: class: page display: [desktop, mobile] pid: haha content: excerpt # excerpt, more, content 您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容,可选 excerpt,more,content 分别对应文章的摘要、摘要后面的内容、全文。 音乐部件blog/_config.volantis.ymlmusic: class: music display: [desktop, mobile] # [desktop, mobile] pjaxReload: false 选择评论系统目前共支持 14 款评论系统: artalk, giscus, beaudar, utterances, twikoo, waline, discuss, disqus, disqusjs, gitalk, vssue, livere, isso, hashover blog/_config.volantis.ymlcomments: title: <i class='fas fa-comments'></i> 评论 subtitle: service: giscus GitHub Discussions 系列 giscus A comments system powered by GitHub Discussions. https://giscus.app/blog/_config.volantis.ymlcomments: ... service: giscus ... # giscus # https://giscus.app # https://github.com/laymonage/giscus giscus: # 以下配置按照 yml 格式增删填写即可 # repo: xxx/xxx # repo-id: xxx # category: xxx # category-id: xxx # mapping: "pathname" # reactions-enabled: "1" # emit-metadata: "0" # lang: "zh-CN" # 以上配置按照 yml 格式增删填写即可 theme: light: "light" # https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/light.css dark: "dark" # https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/dark.css GitHub Issues 系列 beaudarutterancesVssueGitalk Beaudar 名称源于粤语“表达”的发音,是 Utterances 的中文版本。 https://beaudar.lipk.org/blog/_config.volantis.ymlcomments: ... service: beaudar ... # beaudar # https://beaudar.lipk.org/ beaudar: repo: xxx/xxx issue-term: pathname issue-number: branch: main position: top order: desc theme: light: github-light dark: github-dark label: ✨💬✨ A lightweight comments widget built on GitHub issues. https://utteranc.es/blog/_config.volantis.ymlcomments: ... service: utterances ... # utterances # https://utteranc.es/ utterances: repo: xxx/xxx issue-term: pathname issue-number: theme: light: github-light dark: github-dark label: ✨💬✨ Vue 驱动的、基于 Issue 的评论插件 https://vssue.js.org/zh/blog/_config.volantis.ymlcomments: ... service: vssue ... vssue: owner: repo: clientId: clientSecret: A modern comment component based on Github Issue and Preact. https://gitalk.github.io/blog/_config.volantis.ymlcomments: ... service: gitalk ... gitalk: clientID: clientSecret: repo: owner: admin: # []clientID 和 clientSecret 的获取方法可自行搜索教程,这里仅简单描述一下步骤:点击 GitHub -> Settings https://github.com/settings/profile点击 Developer settings https://github.com/settings/developers点击 New OAuth App https://github.com/settings/applications/new填写信息:Application name 随便填,我的是:xaoxuu.comHomepage URL 和 Authorization callback URL 都写你的网址,我的是:https://xaoxuu.com可以通过设置 gitalk.id 实现多个页面共用一个评论框。front-matter---gitalk: id: /wiki/volantis/--- Disqus 系列 DisqusDisqusJSIsso Disqus - The #1 way to build an audience on your website. https://disqus.com/blog/_config.volantis.ymlcomments: ... service: disqus ... disqus: shortname:可以通过设置 disqus.path 实现多个页面共用一个评论框。front-matter---disqus: path: /wiki/volantis/--- Render Disqus comments in Mainland China using Disqus API https://github.com/SukkaW/DisqusJSblog/_config.volantis.ymlcomments: ... service: disqusjs ... # DisqusJS # https://github.com/SukkaW/DisqusJS disqusjs: path: # 全局评论地址 # 配置项按照yml格式继续填写即可 除了 [siteName url identifier] 选项 #shortname: #api: #apikey: #admin: #nesting: A commenting server similar to Disqus. https://posativ.org/isso/blog/_config.volantis.ymlcomments: ... service: isso ... isso: url: https://example.com/(path/) src: https://example.com/(path/)js/embed.min.js Valine 衍生系列 Valine 在 5.0 版本被移除,具体原因可参考hexo-theme-next#188#issuecomment-766578906以下是在解决 valine 遗留问题同一时期产生的评论系统故归为一类, 然在其社区issue中也报告了类似的攻击事件(eg: twikoo#157 waline#424 waline#430),故请谨慎选择.discusstwikooWaline 一款简单,安全,免费的评论系统 | A simple, safe, free comment system https://discuss.js.orgblog/_config.volantis.ymlcomments: ... service: discuss ... # Discuss # https://discuss.js.org discuss: js: https://cdn.jsdelivr.net/npm/discuss/dist/Discuss.js # 建议锁定版本 serverURLs: # Discuss server address url # https://discuss.js.org/Quick-Start.html#path其中,placeholder 支持在 front-matter 中设置。front-matter---discuss: placeholder: 你觉得xxx怎么样呢?---也可以通过设置 discuss.path 实现多个页面共用一个评论框。front-matter---discuss: path: /--- 一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system. https://twikoo.js.org/blog/_config.volantis.ymlcomments: ... service: twikoo ... twikoo: js: https://cdn.jsdelivr.net/npm/twikoo@latest # 建议锁定版本 path: # 全局评论地址 # 其他配置项按照yml格式继续填写即可 除了 [el path] 选项 envId: xxxxxxxxxxxxxxx # 腾讯云环境id其中,placeholder 支持在 front-matter 中设置。front-matter---twikoo: placeholder: 你觉得xxx怎么样呢?---也可以通过设置 twikoo.path 实现多个页面共用一个评论框。front-matter---twikoo: path: /--- 一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system. https://waline.js.org/blog/_config.volantis.ymlcomments: ... service: waline ... # Waline # https://waline.js.org/ waline: js: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js path: # 全局评论地址 目前设置全局评论地址后visitor失效,这是waline的问题 placeholder: 快来评论吧~ # 评论占位提示 imageHosting: https://7bu.top/api/upload # 图床api(默认使用去不图床) # 其他配置项按照yml格式继续填写即可 除了 [el path placeholder uploadImage] 选项 serverURL: xxxxxxxxxxxxxxx # Waline 的服务端地址(必填) 测试用地址: https://waline-ruddy.vercel.app ... 可选配置项详见源码其中,placeholder 支持在 front-matter 中设置。front-matter---waline: placeholder: 你觉得xxx怎么样呢?---也可以通过设置 waline.path 实现多个页面共用一个评论框。front-matter---waline: path: /--- Others 其他系列 ArtalkLivereHashoverMore... 一款简洁的自托管评论系统 | A Selfhosted Comment System. https://artalk.js.org/blog/_config.volantis.ymlcomments: ... service: artalk ... artalk: js: https://cdn.jsdelivr.net/npm/artalk@2.1.3/dist/Artalk.js css: https://cdn.jsdelivr.net/npm/artalk@2.1.3/dist/Artalk.css server: http://127.0.0.1:8080/api # 修改为自建的后端服务地址其中,placeholder 支持在 front-matter 中设置。front-matter---artalk: placeholder: 你觉得xxx怎么样呢?---也可以通过设置 artalk.path 实现多个页面共用一个评论框。front-matter---artalk: path: /--- Communication makes better world. https://www.livere.com/blog/_config.volantis.ymlcomments: ... service: livere ... livere: uid: #你的livere的uid在这里查看你的 uid:https://livere.com/insight/myCode,在【代码管理 -> 一般网站】中找到如下这段代码,其中 data-uid 中的内容就是你的 livere_uid。<!-- 来必力City版安装代码 --><div id="lv-container" data-id="city" data-uid="你的livere的uid">... A free and open source PHP comment system designed to allow completely anonymous comments and easy theming. https://www.barkdull.org/software/hashoverblog/_config.volantis.ymlcomments: ... service: hashover ... hashover: src: https://example.com/(path/)comments.phpblog/themes/volantis/layout/_third-party/comments/评论系统名称/layout.ejs这里写布局代码blog/themes/volantis/layout/_third-party/comments/评论系统名称/script.ejs这里要写加载 js 的代码收录更多评论系统 可以通过在 front-matter 设置 config 实现在特定页面修改评论系统的相关配置。 支持的有(按字母顺序): discuss, giscus, gitalk, twikoo, waline front-matter---gitalk: config: id: /233/--- 站内搜索blog/_config.volantis.ymlsearch: enable: true service: hexo # hexo js: https://cdn.jsdelivr.net/xxxxxxxx/js/search/hexo.js 默认配置为 Hexo 搜索,但是需要安装插件才能使用: npm i -S hexo-generator-json-content 原 google, algolia, azure, baidu 站内搜索 系祖传代码, 且文档丢失, 不便后续维护 在 5.0 版本移除 插件库概述Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭,无需进行设置。 幻灯片背景(视差滚动效果)jquery.backstretch 在 5.0 版本 移除, 被 parallax 替代 blog/_config.volantis.ymlplugins: ... parallax: enable: true position: cover # cover: sticky on the cover. fixed: Fixed as background for the site. shuffle: true # shuffle playlist duration: 10000 # Duration (ms) fade: 1500 # fade duration (ms) (Not more than 1500) images: # For personal use only. At your own risk if used for commercial purposes !!! - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg ... 幻灯片背景图片显示的位置可以选择粘贴在封面上,跟随封面一起滑动,也可以选择固定作为网页背景图片。 highlight.jsblog/_config.volantis.ymlplugins: ... # 代码高亮 code_highlight: highlightjs # highlightjs or prismjs # highlight.js highlightjs: copy_code: true # 如果开启 js, hexo.config.highlight.enable 需要设置为 false js: #https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/highlight.min.js # Please set hexo.config.highlight.enable = false !!! css: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.1.0/build/styles/default.min.css # more: https://www.jsdelivr.com/package/npm/highlight.js?path=styles 如果需要使用 highlight.js 进行语法高亮,请将站点配置文件中的 highlight.enable 设置为 false 否则不会加载插件。您可以在 94 种 语法高亮主题 中挑选喜爱的主题,然后替换上面的 css 链接。 如果您使用 highlight.js 请确保没有使用 hexo 官方的 codeblock 标签,否则会报错。 经测试,使用 highlight.js 的情况下,部分容器内的代码可能仍然会被渲染甚至报错。 APlayer 音乐播放器blog/_config.volantis.ymlplugins: ... # APlayer is only available in mainland China. # APlayer config: https://github.com/metowolf/MetingJS aplayer: enable: true js: aplayer: https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js meting: https://cdn.jsdelivr.net/npm/meting@2.0/dist/Meting.min.js # Required server: netease # netease, tencent, kugou, xiami, baidu type: playlist # song, playlist, album, search, artist id: 3175833810 # song id / playlist id / album id / search keyword # Optional fixed: false # enable fixed mode theme: '#1BCDFC' # main color autoplay: false # audio autoplay order: list # player play order, values: 'list', 'random' loop: all # player loop play, values: 'all', 'one', 'none' volume: 0.7 # default volume, notice that player will remember user setting, default volume will not work after user set volume themselves list_max_height: 320px # list max height list_folded: true APlayer播放器只可以在中国大陆地区使用。相关文档: APlayer | MetingJS 暗黑模式blog/_config.volantis.ymlplugins: ... # 暗黑模式 darkmode # 开关按钮:在 navbar.menu 中添加: # - name: 暗黑模式 # 可自定义 # icon: fas fa-moon # 可自定义 # toggle: darkmode darkmode: enable: true 结束支持blog/_config.volantis.ymlplugins: ... # 旧版 Internet Explorer 淘汰行动 # https://www.microsoft.com/zh-cn/WindowsForBusiness/End-of-IE-support # 本主题不支持Internet Explorer的任何版本!!! killOldVersionsOfIE: enable: true # 禁用JavaScript提示 # 本页面需要浏览器支持(启用)JavaScript # 主题中的某些插件必须启用JavaScript才能正常工作,例如开启scrollreveal如果禁用JavaScript会导致卡片消失 killNoScript: enable: true Artitalkblog/_config.volantis.ymlplugins: ... # Artitalk https://artitalk.js.org # 配置过程请参考:https://artitalk.js.org/doc.html # 使用过旧版本的请修改Leancloud shuoshuo class部分列名:https://artitalk.js.org/release.html # 除appID和appKEY外均为选填项 artitalk: # Set `plugins: ["artitalk"]` to enable in front-matter # 不支持 Pjax # 配置项按照yml格式继续填写即可 appId: ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI # your appID appKey: nHXLd3N3Jgh460t2iRQKWAtr # your appKEY # serverURL: #leancloud绑定的api访问域名,使用国际版的话不需要填写 # lang: # 语言设置,zh为汉语,en为英语,es为西班牙语。默认为汉语 # pageSize: #每页说说的显示数量 # shuoPla: #在编辑说说的输入框中的占位符 # avatarPla: #自定义头像url的输入框的占位符 # motion: #加载动画的开关,1为开,0为关,默认为开 # bgImg: #说说输入框背景图片url # color1: #说说背景颜色1&按钮颜色1 # color2: #说说背景颜色2&按钮颜色2 # color3: #说说字体颜色 # cssUrl: #自定义css接口 BBtalkblog/_config.volantis.ymlplugins: ... # BBtalk https://bb.js.org bbtalk: # Set `plugins: ["bbtalk"]` to enable in front-matter # 支持 Pjax js: https://cdn.jsdelivr.net/npm/bbtalk@0.1.5/dist/bbtalk.min.js # BBtalk.js appId: 0KzOX4vC7Jsk6vzUGNeEiUaI-gzGzoHsz # your appID appKey: HwCiWuxfpvKiLm4teCUgTIba # your appKEY serverURLs: https://bbapi.heson10.com # Request Api 域名 Tidioblog/_config.volantis.ymlplugins: ... # 聊天功能 chat_service: tidio # tidio or gitter # Tidio # https://www.tidio.com/ tidio: id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 友链朋友圈blog/_config.volantis.ymlplugins: ... # 友链朋友圈 hexo-circle-of-friends # https://github.com/Rock-Candy-Tea/hexo-circle-of-friends # https://fcircle-doc.js.cool/ fcircle: # Set `plugins: ["fcircle"]` to enable in front-matter # 支持 Pjax api: https://fcircle-api.example.com/ # api 地址 message: 与主机通讯中…… # 占位文字 css: volantis-static/libs/fcircle/fcircle.css js: volantis-static/libs/fcircle/fcircle.js 消息提示blog/_config.volantis.ymlplugins: ... # 消息提示 # izitoast@1.4.0 message: enable: true css: volantis-static/libs/izitoast/dist/css/iziToast.min.css js: volantis-static/libs/izitoast/dist/js/iziToast.min.js icon: # 默认图标,支持对图标添加颜色,可选值:see:/source/css/_style/_plugins/fontcolor.styl default: fa-solid fa-info-circle light-blue quection: fa-solid fa-question-circle light-blue time: # 默认持续时间 default: 5000 quection: 20000 position: 'topRight' # 弹出位置 可选值:topRight, bottomRight, bottomLeft, topLeft, topCenter, bottomCenter, center transitionIn: 'bounceInLeft' # 弹窗打开动画 可选值:bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX transitionOut: 'fadeOutRight' # 弹窗关闭动画 可选值:fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX titleColor: 'var(--color-text)' # 标题颜色 messageColor: 'var(--color-text)' # 消息颜色 backgroundColor: 'var(--color-card)' # 默认背景色 zindex: 2147483647 # 层级 copyright: # 是否在复制时弹出版权提示,影响范围:ctrl+c、代码块复制按钮、右键复制选项 enable: true title: '知识共享许可协议' message: '请遵守 CC BY-NC-SA 4.0 协议。' icon: 'far fa-copyright light-blue' aplayer: # 是否开启音乐通知;播放、暂停、失败 时的图标 enable: true play: fa-solid fa-play pause: fa-solid fa-pause rightmenu: enable: true # 是否开启右键模块的消息通知 notice: true # 唤醒原右键菜单的通知 轮播标签使用方法参见:swiper blog/_config.volantis.ymlswiper: enable: true css: https://unpkg.com/swiper@6/swiper-bundle.min.css js: https://unpkg.com/swiper@6/swiper-bundle.min.js"},{"title":"进阶设定","date":"2024-03-28T06:49:50.094Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/advanced-settings/index.html","permalink":"https://volantis.js.org/v6/advanced-settings/","excerpt":"","text":"设置子模块 将主题添加为子模块 开始前需要确认不存在 themes/volantis 文件夹, 如果有, 请自行删除.sshhttpsgit submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantisgit submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis 多人协同默认的作者信息在主题配置文件中设置: blog/themes/volantis/_config.yml# 文章布局article: ... body: ... meta_library: author: avatar: name: 请设置文章作者 url: / Volantis 支持多个作者在一个站点发布文章,其他作者信息需要写在数据文件中,例如: blog/source/_data/author.ymlJon: name: Jon Snow avatar: https://cn.bing.com/th?id=AMMS_fc8f99fd41ebd737a71c4e13806db9a0&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=2&pid=16.1 url: https://gameofthrones.fandom.com/wiki/Jon_SnowDany: name: Daenerys Targaryen avatar: https://tse1-mm.cn.bing.net/th?id=OIP.Yax4wLzIFbcBVUa_RsKywQHaLH&w=80&h=80&c=8&rs=1&qlt=90&dpr=2&pid=3.1&rm=2 url: https://gameofthrones.fandom.com/wiki/Daenerys_Targaryen 在文章的 front-matter 中新增 author 即可: ---title: Jon Snow | Game of Thrones Wiki | Fandomauthor: Jon--- 内容安全策略(CSP)blog/_config.volantis.yml# 内容安全策略( CSP ) meta 标签 http-equiv="Content-Security-Policy"# https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP# https://content-security-policy.com/# 也可以设为 false 在 HTTP 标头中设置 https://volantis.js.org/v6/advanced-settings/#设置-HTTP-响应标头csp: enable: true content: " default-src 'self' https:; block-all-mixed-content; base-uri 'self' https:; form-action 'self' https:; worker-src 'self' https:; connect-src 'self' https: *; img-src 'self' data: https: *; media-src 'self' https: *; font-src 'self' data: https: *; frame-src 'self' https: *; manifest-src 'self' https: *; child-src https:; script-src 'self' https: 'unsafe-inline' *; style-src 'self' https: 'unsafe-inline' *; " # 可以使用自动程序替换默认的 'unsafe-inline' 和 * 生成更严格的内容安全策略. # 另可以参考官网之前的 gulp 方案.(CSP Level 3 :Safari 15.4+ Chrome 59+ Firefox 58+ Edge 79+) # gulpfile.js https://gist.github.com/MHuiG/e50ce64fd94f641f679a0736fef925e4 设置 HTTP 响应标头以 Cloudflare 为例, 在 规则 > 转换规则 > HTTP 响应头修改 中,可以添加以下设置: 内容安全策略( CSP ) Content-Security-Policy: default-src 'self' https:; block-all-mixed-content; base-uri 'self' https:; form-action 'self' https:; worker-src 'self' https:; connect-src 'self' https: *; img-src 'self' data: https: *; media-src 'self' https: *; font-src 'self' data: https: *; frame-src 'self' https: *; manifest-src 'self' https: *; child-src https:; script-src 'self' https: 'unsafe-inline' *; style-src 'self' https: 'unsafe-inline' *; Doc for Content-Security-Policy 不允许在 frame 中展示 x-frame-options: DENY Doc for X-Frame-Options 为网站提速加载速度 减少不必要的 js 插件,例如字数统计、动态背景。 查找并解决拖慢速度的资源,以 Chrome 浏览器为例: 页面中点击右键,选择「检查」。 在右边的窗口中「Network」选项卡,并勾选「Disable cache」。 刷新网页,查看加载速度慢的资源。 3.1. 加载缓慢的图片,建议使用 CDN。 3.2. 加载缓慢的可以不用的 js 插件,建议舍弃。 3.3. 加载缓慢却必须使用的 js 插件,建议下载并自己上传至 CDN。 运行速度 访问具有动态特效背景(如雪花、粒子等)的网站时,手机很快会发烫变卡,笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。 优化 SEORobotsblog/_config.volantis.ymlseo: # When there are no keywords in the article's front-matter, use tags as keywords. use_tags_as_keywords: true # When there is no description in the article's front-matter, use excerpt as the description. use_excerpt_as_description: true robots: home_first_page: index,follow home_other_pages: noindex,follow archive: noindex,follow category: noindex,follow tag: noindex,follow # robots can be written in front-matter 在 front-matter 中,可以设置 keywords、description、robots 和 seo_title。其中 seo_title 仅仅用作网页标题,优先级高于 title。 文章内部不要使用 H1 标题。 通过死链检测工具检查并删除无法访问的链接。 安装 SEO 优化插件: hexo-autonofollowhttps://github.com/liuzc/hexo-autonofollow hexo-generator-seo-friendly-sitemaphttps://github.com/ludoviclefevre/hexo-generator-seo-friendly-sitemap 页面不要堆砌关键词,不要频繁更改路径。 Open Graphblog/_config.volantis.yml# https://ogp.me/# https://hexo.io/zh-cn/docs/helpers#open-graphopen_graph: image: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/android-chrome-192x192.png twitter_card: summary # summary_large_image , summary #twitter_id: #twitter_site: Structured Datablog/_config.volantis.yml# SEO 入门文档: https://developers.google.com/search/docs# https://schema.org.cn/# 结构化数据用于更改搜索结果的显示效果# 目前内置的结构化数据: blogposting, breadcrumblist, organization, person, website# 目前内置的富媒体搜索结果: 路径(面包屑导航), 徽标(Logo), 站点链接搜索框(SearchAction)# https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data# 富媒体搜索结果测试: https://search.google.com/test/rich-resultsstructured_data: enable: true # 以下是覆盖配置, 默认配置见 scripts/helpers/structured-data/lib/config.js data: person: sns: - https://github.com/volantis-x logo: path: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/android-chrome-192x192.png width: 192 height: 192 使用 CDN对于大部分将博客 deploy 到 GitHub 的用户来说,直接加载本地资源速度比较慢,可以使用 jsdelivr 为开源项目提供的 CDN 服务。 开启方法blog/_config.volantis.ymlcdn_system: # CDN 优先级 从高到低排序 写入 priority 列表即表示启用(enable) priority: [custom, local, cdnjs, npm, static] # ======================================================================== # cdn数据配置文件见 "theme/_cdn.yml", 可以在 source/_data/cdn.yml 覆盖 theme/_cdn.yml # 变量说明: # 以下变量只能在 `prefix` 中使用。 # ${site_root} 站点根目录 一般是 "/" # 以下变量只能在 `format` 中使用。 # ${prefix} CDN 链接前缀 # ${name} package 名称 见 "theme/_cdn.yml" # ${version} package 版本 见 "theme/_cdn.yml" # ${file} 文件路径 见 "theme/_cdn.yml" # ${min_file} 文件路径 ${file} 后添加 .min. (jsdelivr、cdnjs 官方自带压缩) # ${timestamp} Hexo运行时的时间戳(eg:1661246702300), 可用于静态资源版本控制 format: ${prefix}${file}?v=${timestamp} system_config: # 自定义配置 使用 "theme/_cdn.yml" 中的名称作为配置项的键 custom: #volantis_style: /css/style.css #volantis_app: /js/app.js # 主题 /js与/css目录 (一般放在本地,可以在此处配置站点CDN),"theme/_cdn.yml" 中以 "volantis_" 开头的名称 # Tip: 在本配置文件中 匹配以 "volantis-local" 开头的链接路径替换为该格式的前缀开头 prefix local: # CDN 链接前缀 prefix: ${site_root} # local CDN 格式 format: ${prefix}${file} # npm # https://www.npmjs.com/ # Tip: 在本配置文件中 匹配以 "volantis-npm" 开头的链接路径替换为该格式的前缀开头 prefix npm: # CDN 链接前缀 prefix: https://unpkg.com # npm CDN 格式 format: ${prefix}/${name}@${version}/${file} # volantis static 静态资源文件 npm 包 CDN 地址 # https://github.com/volantis-x/volantis-static # Tip: 在本配置文件中 匹配以 "volantis-static" 开头的链接路径替换为该格式的前缀开头 prefix static: # CDN 链接前缀 prefix: https://unpkg.com/volantis-static@0.0.1660614606622 # volantis-static CDN 格式 format: ${prefix}/libs/${name}/${file} # cdnjs # https://cdnjs.com/ # Tip: 在本配置文件中 匹配以 "volantis-cdnjs" 开头的链接路径替换为该格式的前缀开头 prefix cdnjs: # CDN 链接前缀 prefix: https://cdnjs.cloudflare.com/ajax/libs # cdnjs CDN 格式 format: ${prefix}/${name}/${version}/${min_file} # ======================================================================== 如果你需要对样式进行 DIY,可以只关闭 style 文件的 CDN。 从V5版本开始,首屏样式采用硬编码的方式写在HTML中。首屏样式内含 cover navbar search 的样式,其他样式放入/css/style.css异步加载。 如果你需要对样式进行 DIY,请注意首屏渲染和异步延迟加载的差异。 自定义 CDN如果你把对应的文件上传到自己的 CDN 服务器,可以把对应的链接改为自己的 CDN 链接。 尝试使用 gulp 压缩静态文件安装压缩工具npm install -g gulpnpm install --save-dev gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-terser gulp-sourcemaps gulp 配置文件参考文档: gulp gulp-html-minifier-terser gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-terser gulp-sourcemaps gulp 配置文件 https://github.com/volantis-x/community/blob/main/gulpfile.js 运行 gulpgulp 尝试使用 babel 转换兼容 ES6如果想要兼容旧版浏览器,可以尝试使用 gulp-babel 将 ES6 转换为 ES5。 安装 gulp-babel 工具npm install -g gulpnpm install --save-dev gulp-babel @babel/core @babel/preset-env gulp 配置文件参考文档: gulp gulp-babel gulp 配置文件 https://github.com/volantis-x/community/blob/main/gulpfile.jsgulp.src(['./public/**/*.js', '!./public/**/*.min.js', '!./public/{lib,lib/**}', '!./public/{libs,libs/**}', '!./public/{media,media/**}']) .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(gulp.dest('./public')) 运行 gulpgulp 安装 Service Worker 服务方案一 安装插件安装 hexo-offline-popup 或者 hexo-offline 插件,初次加载速度不变,后期切换页面和刷新网页速度越来越快。 方案二 使用 workbox 自定义配置 step 1. 修改 blog/_config.yml 文件。 blog/_config.yml# 全局导入import: body_end: - <script>"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(n){n.onupdatefound=function(){var e=n.installing;e.onstatechange=function(){switch(e.state){case"installed":navigator.serviceWorker.controller?console.log("Updated serviceWorker."):console.log("serviceWorker Sucess!");break;case"redundant":console.log("The installing service worker became redundant.")}}}}).catch(function(e){console.log("Error during service worker registration:",e)}); </script> step 2. 在 blog/source 中创建 sw.js 文件。 https://gist.github.com/MHuiG/a423c0a953ed5645840a651c33dcd60c 如果你使用了此方案,修改静态文件后发布网页一定要修改缓存版本号。 方案三 参考官网 volantis-sw.jsvolantis-sw.js discussions/791 安装「相关文章」插件 安装插件 npm i -S hexo-related-popular-posts 插件的自定义配置方法: hexo-related-popular-postshttps://github.com/tea3/hexo-related-popular-posts 如果您使用了头图,可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图: blog/_config.ymlpopularPosts: eyeCatchImageAttributeName: headimg 注意需要升级到 5.0.1 及以上版本才可以支持自定义头图,详见 #29 分析与统计数据统计PV 和 UV支持 不蒜子 的访问统计,在配置文件中设置。 blog/_config.volantis.ymlplugins: busuanzi: enable: true 我们还支持以下评论系统提供的访问统计: waline、twikoo、discuss、artalk 如需使用它们,请开启对应评论系统的相关设置,此时将接管含评论页面的 PV 量统计。 推广:杜老师自建国内不蒜子统计平台:4H8G,60G,下行 500M,上行 50M,阿里 CDN。 字数和阅读时长 安装以下插件:npm i --save hexo-wordcount 修改配置文件,将 wordcount 插件打开blog/_config.volantis.ymlplugins: ... # 文章字数统计、阅读时长,开启需要安装插件: npm i --save hexo-wordcount wordcount: enable: #true 然后修改配置文件,将 wordcount 写入需要显示的 meta 位置:blog/_config.volantis.yml# 文章布局article: ... # 文章详情页面的文章卡片本体布局方案 body: # 文章顶部信息 # 从 meta_library 中取 top_meta: [..., wordcount, ...] ... # 文章底部信息 # 从 meta_library 中取 bottom_meta: [..., wordcount, ...] 数据分析百度统计blog/_config.ymlbaidu_analytics_key: 百度统计的key Google Analyticsblog/_config.ymlgoogle_analytics_key: Google Analytics Key 腾讯前端性能监控blog/_config.ymltencent_aegis_id: 上报 id 51LA统计blog/_config.ymlv6_51_la: 应用id 灵雀监控blog/_config.ymlperf_51_la: 应用id CNZZ 统计请参考 ZYMIN 的这篇教程: Hexo hexo+ejs+material x 添加CNZZ统计代码https://zymin.cn/arcticle/hexo+ejs+material.html 更多进阶玩法详见 @TRHX 的这篇博客: Hexo 博客主题个性化https://www.itbob.cn/article/003/ 内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。 主题官网 #进阶玩法https://volantis.js.org/categories/进阶玩法/"},{"title":"开发文档","date":"2024-03-28T06:49:50.098Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/development-api/index.html","permalink":"https://volantis.js.org/v6/development-api/","excerpt":"","text":" Volantis6 Development API for Volantis 样式文件说明/source/css/Readme.md 全局变量volantis我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。 源码参考:layout/_partial/scripts/global.ejs VolantisApp我们提供了全局变量 VolantisApp 和一些全局函数等主题开发调用接口。 源码参考:/source/js/app.js PjaxPjax 重载区域划分接口我们提供了可以实现Pjax重载区域灵活划分的开发接口。 源码参考:layout/_plugins/pjax/index.ejs <pjax></pjax> 标签所有被 <pjax></pjax> 标签包裹的所有元素将被pjax重载。 请检查并确保 pjax 标签必须存在于所有页面 否则 pjax error. <pjax> <!--我是将被pjax重载的内容 begin--> <div> <div></div> <script></script> </div> <!--我是将被pjax重载的内容 end--></pjax> 使用案例:/layout/_partial/scripts/index.ejs script[data-pjax]所有含有 data-pjax 标记的 script 标签将被pjax重载。 <script data-pjax>我是将被pjax重载的内容</script> .pjax-reload script所有在 pjax-reload Class元素内部的 script 标签将被pjax重载。 <div class="pjax-reload"> <div> <div>我不是将被pjax重载的内容</div> <script>我是将被pjax重载的内容</script> </div></div> Pjax 回调方法我们提供了灵活的 Pjax 回调方法。 源码参考: layout/_partial/scripts/global.ejs layout/_plugins/pjax/index.ejs 使用案例:layout/_plugins/pjax/animate.ejs 中括号[]里面的内容表示选项是可选的,可以不填。下同,不再赘述。 volantis.pjax.push 在Pjax请求完成后触发。使用 volantis.pjax.push(callBack[,"callBackName"]) 传入pjax:complete回调函数。 callBack是回调函数,必填。 "callBackName" string类型 默认值是回调函数的函数名,选填。 volantis.pjax.send 在Pjax请求开始后触发。使用 volantis.pjax.send(callBack[,"callBackName"]) 传入pjax:send回调函数。 callBack是回调函数,必填。 "callBackName" string类型 默认值是回调函数的函数名,选填。 volantis.pjax.error 在Pjax请求失败后触发。使用 volantis.pjax.error(callBack[,"callBackName"]) 传入pjax:error回调函数。 callBack是回调函数,必填。 "callBackName" string类型 默认值是回调函数的函数名,选填。 暗黑模式我们提供了暗黑模式灵活的开发接口。 源码参考: layout/_partial/scripts/global.ejs layout/_plugins/darkmode/script.ejs 暗黑模式样式详见:/source/css/Readme.md 当前模式调用 volantis.dark.mode 查看当前模式。返回值为字符串 dark 或者 light。 暗黑模式触发器调用 volantis.dark.toggle() 触发切换亮黑模式。 暗黑模式触发器回调函数调用 volantis.dark.push(callBack[,"callBackName"]) 传入触发器回调函数. 使用案例:layout/_plugins/comments/utterances/script.ejs Message 消息提示我们在 iziToast 的基础上封装了一个简单的消息提示: 源码参考: 源码参考:/source/js/app.js VolantisApp.message(title, message, option, done);VolantisApp.question(title, message, option, success, cancel, done); title:标题(必填),字符串(String) message:内容(必填),字符串(String) option:配置项,对象(Object) done:完成时回调,函数(Function) success:确认时回调,函数(Function) cancel: 取消时回调,函数(Function) option 可选参数: icon, // Fontawesome 图标 time, // 持续时间 position, // 弹出位置 transitionIn, // 弹窗打开动画 transitionOut, // 弹窗关闭动画 messageColor, // 消息颜色 titleColor, // 标题颜色 backgroundColor, // 默认背景色 zindex // 层级 option 配置优先级大于配置文件设置值。 使用范例: // 同样弹窗VolantisApp.message('这里是标题', '这里是弹窗内容');// 居中弹窗VolantisApp.message('系统提示', '这里是 Volantis 主题站,欢迎访问。', { icon: 'fad fa-smile-wink light-blue', position: 'topCenter', transitionIn:'bounceInDown', transitionOut: 'fadeOutDown', time: 10000});// 询问弹窗VolantisApp.question('问卷调查', '你是否喜欢 Volantis 主题', {}, () => { alert('谢谢支持')}, () => { console.log('再接再厉')}); 如果以上两个接口仍然不能满足您的需求,可以参考 iziToast 的内容直接调用 iziToast 动态加载脚本源码参考: layout/_partial/scripts/global.ejs volantis.js("src", cb)volantis.css("src") src String类型 加载脚本URL cb 可选 可以传入onload回调函数 或者 JSON对象 例如: volantis.js("src", ()=>{}) 或 volantis.js("src", {defer:true,onload:()=>{}}) 返回 Promise 对象 如下方法同步加载资源,这利于处理文件资源之间的依赖关系,例如:APlayer 需要在 MetingJS 之前加载 (async () => { await volantis.js("...theme.plugins.aplayer.js.aplayer...") await volantis.js("...theme.plugins.aplayer.js.meting...")})(); 使用案例:layout/_plugins/aplayer/script.ejs 由于返回的是 Promise 对象,也可以采用以下方式实现加载完成后调用回调函数: volantis.js("https://cdn.jsdelivr.net/npm/jquery").then(()=>{ console.log("我在脚本加载完成后调用")}) 按需加载的插件源码参考: layout/_partial/scripts/global.ejs jQueryvolantis.import.jQuery().then(()=>{ // 依赖 jQuery 的代码段 // ..... // .....}) requestAnimationFrame1、requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。 2、在隐藏或不可见的元素中,requestAnimationFrame 将不会进行重绘或回流,这当然就意味着更少的的 cpu,gpu 和内存使用量。 volantis.requestAnimationFrame(() => { // 包含 DOM 操作的代码段 // ......... // .........}) Layout Helper向目标元素动态注入 HTML volantis.layoutHelper(helper, html, opt) helper:Helper id(必填),字符串(String) html:HTML(必填),字符串(String) opt:配置项,对象(Object) opt 可选参数: clean, // 清除 Layout Helper 原有的所有内容, 默认 false pjax, // 支持 pjax, 默认 true helper 可选参数: page-plugins, // 页面插件 Layout, 位于 layout/_partial/article.ejs comments, // 评论 Layout, 位于 layout/_plugins/comments/index.ejs // 向 page-plugins 入口动态注入 id 为 artitalk_main 的 div, 不启用 pjax, 不清除 Layout Helper 原有的内容volantis.layoutHelper("page-plugins",`<div id="artitalk_main"></div>`, { pjax:false, clean:false }) 滚动事件处理源码参考:layout/_partial/scripts/global.ejs 获取滚动条距离顶部的距离volantis.scroll.getScrollTop() 获取滚动方向volantis.scroll.del volantis.scroll.del 中存储了一个数值, 该数值检测一定时间间隔内滚动条滚动的位移, 数值的检测频率是浏览器的刷新频率. 数值为正数时, 表示向下滚动. 数值为负数时, 表示向上滚动. 滚动事件回调函数使用 volantis.scroll.push(callBack[,"callBackName"]) 传入滚动事件回调函数, 当页面滚动时触发回调函数。 volantis.scroll.push(()=>{ if (volantis.scroll.del > 0) { console.log("向下滚动"); } else { console.log("向上滚动"); }}) 使用 volantis.scroll.unengine.push(callBack[,"callBackName"]) 传入非滚动事件回调函数, 当页面没有滚动时触发回调函数。 使用 volantis.scroll.unengine.remove("callBackName") 移除名称为 "callBackName" 的非滚动事件回调函数。 触发页面滚动至目标元素位置// 滚动到目标 Dom 元素 "ele" 位置volantis.scroll.to(ele, option) ele:Dom 元素(必填) option 可选参数: top, // 类型 Float,文档中的纵轴坐标, 默认值 ele.getBoundingClientRect().top + document.documentElement.scrollTop addTop, // 类型 Float,向上面的 top 参数中 添加补偿值. behavior, // 类型 String, 表示滚动行为, 支持参数 smooth (平滑滚动), instant (瞬间滚动) observer, // 类型 Boolean, 是否启用监视器,默认值 false, 监视器用于监视元素是否滚动到指定位置 目前用于处理 toc 部分 lazyload 引起的 cls 导致的定位失败问题. observerDic, // 类型 Float, 监视器监视距离, 默认值 25. 例如: volantis.scroll.to(document.getElementById("locationID"),{addTop: - volantis.dom.header.offsetHeight - 10, behavior: 'instant'}) 对本地文件使用CDN源码参考: /scripts/events/lib/cdn.js 生成的CDN链接可使用 theme.cdn.[keyword] 回调。 Custom Files 自定义文件在不修改主题原始源代码的情况下添加自定义内容 注入点我们提供了一些注入点接口: let points={ styles:[ "first", "style", "dark", "darkVar", ], views:[ "headBegin", "headEnd", "header", "side", "topMeta", "bottomMeta", "footer", "postEnd", "bodyBegin", "bodyEnd", ]} 样式注入点 first: 向 theme/source/css/first.styl 文件末尾注入自定义内容, 该文件中包含首屏样式,首屏样式采用硬编码的方式写在HTML中。首屏样式内含 cover navbar search 的样式. style: 向 theme/source/css/style.styl 文件末尾注入自定义内容, 该文件中包含异步延迟加载的样式,除首屏样式,其他样式放入此处异步加载. dark: 向 theme/source/css/_style/_plugins/_dark/dark_plugins.styl 文件末尾注入自定义内容, 该文件中包含异步暗黑模式样式 的 强制覆盖样式. darkVar: 向 theme/source/css/_style/_plugins/_dark/dark_async.styl 调用函数 async_dark() 末尾注入自定义内容, 该文件中包含异步暗黑模式样式 的 暗黑模式 CSS 变量. 布局视图注入点 headBegin: 向 theme/layout/_partial/head.ejs 文件 <head> 标签开头注入自定义内容. headEnd: 向 theme/layout/_partial/head.ejs 文件 <head> 标签末尾注入自定义内容. header: 向 theme/layout/_partial/header.ejs 文件 导航栏 .nav-main 末尾注入自定义内容. side: 向 theme/layout/_partial/side.ejs 文件 侧边栏 #l_side 末尾注入自定义内容. topMeta: 向 theme/layout/_partial/meta.ejs 文件 topMetas 末尾注入自定义内容. bottomMeta: 向 theme/layout/_partial/meta.ejs 文件 bottomMetas 末尾注入自定义内容. footer: 向 theme/layout/_partial/footer.ejs 文件 <footer> 标签末尾注入自定义内容. postEnd: 向 theme/layout/_partial/article.ejs 文件 <article> 标签末尾注入自定义内容. bodyBegin: 向 theme/layout/layout.ejs 文件 <body> 标签开头注入自定义内容. bodyEnd: 向 theme/layout/layout.ejs 文件 <body> 标签末尾注入自定义内容. blog/source/_volantis/ 文件夹一般的, 创建 blog/source/_volantis/ 文件夹并在此文件夹下创建与注入点同名同扩展名的文件,用以写入注入点自定义内容. blog/source/_volantis/ ├─ first.styl ├─ style.styl ├─ dark.styl ├─ darkVar.styl ├─ headBegin.ejs ├─ headEnd.ejs ├─ header.ejs ├─ topMeta.ejs ├─ bottomMeta.ejs ├─ postEnd.ejs ├─ bodyBegin.ejs └─ bodyEnd.ejs 当然,你仍然可以修改主题配置文件将自定义布局或样式放置在特定位置.以下是默认配置,该配置已隐藏. blog/_config.volantis.ymlcustom_files: first: source/_volantis/first.styl style: source/_volantis/style.styl dark: source/_volantis/dark.styl darkVar: source/_volantis/darkVar.styl headBegin: source/_volantis/headBegin.ejs headEnd: source/_volantis/headEnd.ejs header: source/_volantis/header.ejs topMeta: source/_volantis/topMeta.ejs bottomMeta: source/_volantis/bottomMeta.ejs postEnd: source/_volantis/postEnd.ejs bodyBegin: source/_volantis/bodyBegin.ejs bodyEnd: source/_volantis/bodyEnd.ejs 示例: blog/source/_volantis/darkVar.stylbody --color-site-body: blue !important theme_inject 过滤器使用 Hexo 过滤器 theme_inject ,可以将所需的自定义内容添加到任何注入点。 如果您的代码很简单,建议您编写脚本,您只需要把 JavaScript 文件放到 scripts 文件夹,在启动时就会自动载入。您可以直接在 blog 文件夹下创建 scripts 文件夹. hexo.extend.filter.register('theme_inject', function(injects) { // ...}); 对于注入布局视图: // The name of same `injectPoint` suggest be unique. If same, it will override low priority configurations.// `locals` and `options` is the same as partial https://hexo.io/docs/helpers#partial.// `order` defines the order of injection, which by default depends on the priority of injection.hexo.extend.filter.register('theme_inject', function(injects) { // it will put code from this filePath into injectPoint. injects.[injectPoint].file(name, filePath, [locals, options, order]); // it will put raw string as code into injectPoint. injects.[injectPoint].raw(name, raw, [locals, options, order]);}); 对于注入样式: hexo.extend.filter.register('theme_inject', function(injects) { // it will put styleFile into injectPoint. injects.[injectPoint].push(styleFile);}); Examples以文件的形式向 theme/css/style.styl 文件末尾注入自定义样式 blog/scripts/example-1.jshexo.extend.filter.register('theme_inject', function(injects) { injects.style.push('source/_data/mystyle.styl');}); 以文本的形式向 <body> 标签末尾注入自定义脚本内容 blog/scripts/example-2.jshexo.extend.filter.register('theme_inject', function(injects) { injects.bodyEnd.raw('load-custom-js', '<script src="js-path-or-cdn.js"></script>');}); 以文件的形式向侧栏注入自定义布局视图内容 blog/scripts/example-3.jshexo.extend.filter.register('theme_inject', function(injects) { injects.side.file('my-favourite-food', 'source/_data/my-favourite-food.ejs');}); 插件系统我们还支持 hexo 的插件系统,无需修改核心模块的源代码即可轻松扩展功能。你可以参考 https://hexo.io/docs/plugins.html#Plugin 学习如何创建插件。 请注意,以上是主题开发文档,不是使用文档!"},{"title":"FAQ","date":"2024-03-28T06:49:50.106Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/faq/index.html","permalink":"https://volantis.js.org/v6/faq/","excerpt":"","text":" Volantis6 FAQ List For Volantis 6 这是什么?我在哪里?我也不知道 我这里出现了故障,需要先做什么? Troubleshooting any problem without the error log is like driving with your eyes closed. 在没有错误日志的情况下诊断任何问题无异于闭眼开车 控制台报错 SyntaxError: Unexpected token '.'SyntaxError: Unexpected token '.' at new Script (vm.js:88:7) at createScript (vm.js:263:10) at runInThisContext (vm.js:311:10) node.js 版本过低,请升级至 v16.x 及以上版本! 配置和使用 volantis 6.x 之前请确保 node.js 升级至 v16.x 及以上版本! 我应该使用哪个版本?使用最新的版本 如何在魔改主题的情况下还能兼顾更新?使用 Custom Files 自定义文件 和 Development API for Volantis. 使用 Hexo Theme Plus 替换掉在 layout 文件夹下的主题文件. 使用 Hexo 插件系统 在 blog 目录根下创建 scripts 文件夹编写脚本. 如何更新主题?RTFM 如何修改 favicon?RTFM 文档为什么和配置文件不一样?以配置文件为准,文档更新的不是非常及时 如何设置主页的背景图?主题有俩种背景图片设置方式 background 仅能设置一张背景图,且背景图范围仅为 cover 区域 parallax 可以设置一张或更多的背景图,当 position 取值为 cover 时,背景图仅为 cover 区域,具有视差滚动效果。position 取值为 fixed 时,背景图固定在整个页面,不具有视差滚动效果。 原 parallax 和 backstretch 已合并为 parallax注意:背景图配置只能生效一个 volantis-x/community/issues/115#issuecomment-907983622 到哪里查找 fontawesome 图标? https://fontawesome.com/icons 为什么无法正常显示 aplayer?可能是网易云 API 崩溃了 图片怎么添加灯箱放大效果?使用 gallery 标签 控制台有一个奇怪的 Warning?(node:7973) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency(Use `node --trace-warnings ...` to show where the warning was created)(node:7973) Warning: Accessing non-existent property 'column' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'column' of module exports inside circular dependency(node:7973) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency 我想把它命名为 Warning-738. volantis-x/hexo-theme-volantis/discussions/738 5.0 的友情链接页有啥变化?volantis-x/hexo-theme-volantis/discussions/734 如何正确渲染多行 MathJax 公式?使用 pandoc 正确渲染多行 MathJax 公式 或者直接放图片... 为什么文章会被截断? What is the answer to Life, the Universe, and Everything?42 上面没有我要找的答案?尝试 打开搜索 或 常见问题与反馈渠道"},{"title":"","date":"2024-03-28T06:49:50.110Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/getting-started/index.html","permalink":"https://volantis.js.org/v6/getting-started/","excerpt":"","text":" Volantis6 A Wonderful Theme for Hexo Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性,您可以轻松搭建一个极简风格的博客,也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。 示例博客/examples/ 所有的 Volantis 用户都可以按照格式自行创建 Issue 来将自己的博客添加到官网的示例博客页面中。 准备工作能力条件环境配置条件自建博客需要一定的相关知识,在开始前,请务必确保您会使用 markdown 语法,掌握简单的 git 知识,最最重要的是,遇到困难知道该怎么寻求解决: 翻阅和搜索文档 搜索 issues 中是否有解决办法 新建 issue 并按照要求进行操作,详尽地描述您遇到的问题 如果您没有使用过 Hexo 也不要着急,可以先通读一遍 Hexo 中文文档,要想使用地得心应手,最好参照团队提供的开源项目的源码进行搭建: Demo 源码 | 官网源码如果您从旧版本更新或着其它主题迁移,请确保环境版本不要太低,否则会产生兼容性问题。 Hexo: 5.4 ~ 6.xhexo-cli: 4.3 ~ latestnode.js: 16.x LTS ~ latest LTSnpm: 8.x ~ latest LTS 配置和使用 volantis 6.x 之前请确保 node.js 升级至 v16.x 及以上版本! FAQ List For Volantis 6/v6/faq/ 快速体验如果您已经具备环境配置条件,可以在终端中输入下面这行代码,稍等片刻即可尝鲜体验: git clone https://github.com/volantis-x/demo.git && cd demo && npm i && hexo s 下载与安装volantis 6.x 目前正处于 「alpha 阶段」 volantis 5.x 目前正处于 「stable 阶段」 volantis 4.x 目前正处于 「EOL(End of Life) 阶段」 Tips: volantis 开发发布周期 volantis 开发发布周期依次经过: 「alpha 阶段」=>「beta 阶段」=>「rc 阶段」=>「stable 阶段」=>「EOL 阶段」rc 阶段的测试版本和 stable 阶段的正式版本 我们统称为 「稳定版本」 , 只有 「稳定版本」 发布到 npmalpha 阶段的开发测试版本 和 beta 阶段的测试版本 我们统称为 「小白鼠测试版本」, 「小白鼠测试版本」 仅存在于 Github 仓库的 dev 分支 和 Github 仓库的 6.0 分支 安装或更新 「稳定版本」 全新博客安装从其它主题迁移第 1/2 步:修改站点配置文件在 blog/_config.yml 文件中找到并修改:theme: volantis第 2/2 步:下载主题在终端中输入:npm i hexo-theme-volantis 如果您是 Mac 用户,可以使用脚本完成全部流程 在博客路径打开终端,下载安装并应用主题:curl -s https://volantis.js.org/start | bash这行命令将会自动检测并安装所需环境,初始化博客,然后下载安装并应用主题。脚本详细使用方法:#blog脚本 第 1/3 步:修改站点配置文件在 blog/_config.yml 文件中找到并修改:theme: volantis第 2/3 步:下载主题如果您已经升级到 Hexo 5.0.2 及以上,可以直接使用 npm 命令安装:npm i hexo-theme-volantis对于旧版本,需要下载主题源码到 themes/ 文件夹:git clone https://github.com/volantis-x/hexo-theme-volantis themes/volantis如果您无法访问 GitHub 可以使用国内镜像源:git clone https://e.coding.net/volantis-x/p/hexo-theme-volantis.git themes/volantis第 3/3 步:检查并安装依赖安装 Hexo 搜索的依赖包:npm i hexo-generator-json-content安装 Stylus 渲染器:npm i hexo-renderer-stylus 安装或更新 「小白鼠测试版本」 第 1/3 步:修改站点配置文件在 blog/_config.yml 文件中找到并修改:theme: volantis第 2/3 步:将主题仓库添加为子模块 将主题添加为子模块 开始前需要确认不存在 themes/volantis 文件夹, 如果有, 请自行删除.sshhttpsgit submodule add git@github.com:volantis-x/hexo-theme-volantis.git themes/volantisgit submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis 第 3/3 步:将主题仓库切换为 6.0 分支在终端中输入:cd themes/volantisgit checkout 6.0第 n/n 步:更新主题在终端中输入:git pull 版本更新注意事项使用主题的时候,尽量 fork 主题到自己的 GitHub,然后进行修改并使用。这样做的好处是:当主题进行重要更新的时候可以根据需要拉取合并代码,使自己 DIY 的主题能够通过更新获取 BUG 修复或者新特性。 如果不懂请自行搜索关键词:fork 更新 实用小技巧所有需要写在主题配置文件中的配置都可以写在站点配置文件的 theme_config: 中,在 Hexo 5.0 后,还可以写在 _config.volantis.yml 文件中,详见 Hexo 官方文档:覆盖主题配置https://hexo.io/zh-cn/docs/configuration#覆盖主题配置也可以直接查看本站源码中站点配置文件的写法:_config.volantis.yml 请对照 更新日志 进行更新. 如何正确地更新主题/how-to-update/ 许可协议本主题采用 MIT开源许可协议 ,永久无限制免费使用。 MIT开源许可协议被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。被授权人可根据程式的需要修改授权条款为适当的内容。在软件和软件的所有副本中都必须包含版权声明和许可声明。 配置与使用配置与使用/v6/site-settings/"},{"title":"页面配置","date":"2024-03-28T06:49:50.114Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/page-settings/index.html","permalink":"https://volantis.js.org/v6/page-settings/","excerpt":"","text":"页面布局模板布局模板 取值 含义 page 独立页面 post 文章页面 docs 文档页面 category 分类页面 tag 标签页面 friends 友链页面 list 列表页面 page & post & docs这三种页面相同,但是有以下细微区别: post 文章有 title 时,向下滚动网页,导航栏会向上移出屏幕显出文章标题,而 page 和 docs 不会。 post 文章末尾最多可以显示「参考资料」、「相关文章」、「版权标识」、「打赏」四个模块。 docs 文章末尾最多可以显示「参考资料」一个模块。 除了归档页面是自动生成的,其它独立页面都需要手动创建 md 文件。 归档页面归档页面是自动生成的,并且初始化的时候已经生成,路径如下: blog/_config.yml# Directoryarchive_dir: archives 关于页面Create file if not exists: source/about/index.md---layout: docsseo_title: 关于bottom_meta: falsesidebar: []twikoo: placeholder: 有什么想对我说的呢?---下面写关于自己的内容 分类页面Create file if not exists: source/categories/index.md---layout: categoryindex: truetitle: 所有分类--- 标签页面Create file if not exists: source/tags/index.md---layout: tagindex: truetitle: 所有标签--- 列表页面Create file if not exists: source/mylist/index.md---layout: listgroup: mylistindex: true--- 结果就是筛选出所有文章中 front-matter 部分含有 group: mylist 的文章。 友链页面创建页面文件Create file if not exists: source/friends/index.md---layout: friends # 必须title: 我的朋友们 # 可选,这是友链页的标题---这里写友链上方的内容。<!-- more -->这里可以写友链页面下方的文字备注,例如自己的友链规范、示例等。 插入友链数据可以 选择布局方案 或 使用友链标签 选择布局方案在主题配置文件中找到以下内容: pages: # 友链页面配置 friends: layout_scheme: traditional # simple: 简单布局, traditional: 传统布局 目前提供2种布局方案: simple: 简单布局,只有头像和标题。 traditional: 传统布局,是 Volantis 旧版本的风格。 以上2种友链的数据源写在以下路径,如果没有请自行创建: blog/source/_data/friends.yml 内容格式为: blog/source/_data/friends.yml- group: # 分组标题 description: # 分组描述 items: - title: # 名称 avatar: # 头像 url: # 链接 screenshot: # 截图 keywords: # 关键词 description: # 描述 - title: # 名称 avatar: # 头像 url: # 链接 screenshot: # 截图 keywords: # 关键词 description: # 描述 不同的布局方式,会用到一部分的字段,一般来说,title、avatar 和 url 都是必须的。这些数据被转成 HTML 标签插入到友链页面的 <!-- more --> 部分。 Volantis 4.x 新增的网站卡片标签的样式 sites 网站卡片布局 在5.0版本移除 被 sites标签 friends标签 contributors标签 替代 issues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代 使用友链标签使用 友链标签 您可以在任何位置插入友链,支持静态数据和动态数据, 关于如何使用 友链标签 插入友链,详见: volantis 主题文档 #友链标签/v6/tag-plugins/#友链标签 404页面Create file if not exists: source/404.md---cover: truerobots: noindex,nofollowsitemap: falseseo_title: 404 Not Foundbottom_meta: falsesidebar: []twikoo: path: /404.html placeholder: 请留言告诉我您要访问哪个页面找不到了---{% p logo center huge, 404 %}{% p center bold, 很抱歉,您访问的页面不存在 %}{% p center small, 可能是输入地址有误或该地址已被删除 %} front-matterfront-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量。更多请见 Hexo 官方文档:#front-matter 字段 含义 值类型 默认值 layout 布局模版 String - title 页面标题 String - seo_title 网页标题 String page.title short_title 页面标题(在group列表中显示) String page.title date 创建时间 Date 文件创建时间 updated 更新日期 Date 文件修改时间 link 外部文章网址 String - music 内部音乐控件 [Object] - robots robots String - keywords 页面关键词 String - description 页面描述、摘要 String - cover 是否显示封面 Bool true top_meta 是否显示文章或页面顶部的meta信息 Bool true bottom_meta 是否显示文章或页面底部的meta信息 Bool true sidebar 页面侧边栏 Bool, Array theme.layout.*.sidebar body 页面主体元素 Array theme.layout.on_page.body thumbnail 缩略图 String false icons 图标 Array [] pin 是否置顶 Bool false headimg 文章头图 url - readmore 阅读更多按钮 Bool - layout:post 时特有的字段: 字段 含义 值类型 默认值 author 文章作者 [Object] config.author categories 分类 String, Array - tags 标签 String, Array - toc 是否生成目录 Bool true music 字段 是否必须 值类型 server 是 netease, tencent, kugou, xiami, baidu type 是 song, playlist, album, search, artist id 是 song id / playlist id / album id / search keyword 文章置顶在 front-matter 中设置以下值: front-matterpin: true 文章分类多个分类有两种关系,一种是层级(等同于文件夹),一种是并列(等同于标签)。 多级分类: front-matter---categories: [分类A, 分类B]--- 或者 front-matter---categories: - 分类A - 分类B--- 并列分类 front-mattercategories: - [分类A] - [分类B] 多级+并列分类 front-mattercategories: - [分类A, 分类B] - [分类C, 分类D] 文章摘要在文章中插入 <!-- more -->,前面的部分即为摘要。 某篇文章源码---title: xxxdate: 2020-02-21---这是摘要<!-- more -->这是正文 注意: <!-- more --> 前后一定要有空行,不然可能导致显示错位。 设置文章作者Volantis 支持多个作者在一个站点发布文章,其他作者信息需要写在数据文件中,例如: blog/source/_data/author.ymlJon: name: Jon Snow avatar: https://cn.bing.com/th?id=AMMS_fc8f99fd41ebd737a71c4e13806db9a0&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=2&pid=16.1 url: https://gameofthrones.fandom.com/wiki/Jon_SnowDany: name: Daenerys Targaryen avatar: https://tse1-mm.cn.bing.net/th?id=OIP.Yax4wLzIFbcBVUa_RsKywQHaLH&w=80&h=80&c=8&rs=1&qlt=90&dpr=2&pid=3.1&rm=2 url: https://gameofthrones.fandom.com/wiki/Daenerys_Targaryen 在文章的 front-matter 中新增 author 即可: front-matter---title: Jon Snow | Game of Thrones Wiki | Fandomauthor: Jon--- 引入外部文章利用 link,搭配自定义的文章作者信息,你可以在文章列表中显示外部文章或者网址,例如: blog/source/_data/author.ymlxaoxuu: name: xaoxuu avatar: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png url: https://xaoxuu.com front-matter---layout: postdate: 2017-07-05title: [转]如何搭建基于Hexo的独立博客categories: [Dev, Hexo]tags: - Hexoauthor: xaoxuulink: https://xaoxuu.com/blog/2017-07-05-hexo-blog/---![](https://img.vim-cn.com/d9/a9af7dc49fc0af8ca3e6dd2450a2f7095a87db.png) 置顶对于任何文章或者页面,设置 pin: true 即可置顶在首页。 front-matter---pin: true--- 这会导致一个小问题:首页 post 卡片数量多于设定值,如果有强迫症希望每一个分页数量一致,可以安装插件来实现,详见:#421 不显示阅读更多对于任何文章或者页面,默认在有摘要的情况下,会显示阅读更多按钮,设置 readmore: false 即可隐藏阅读更多按钮 front-matter---readmore: false--- 不归档存放在 _posts 文件夹下的文章一般都会出现在归档页,如果某篇文章不希望出现在归档页面: front-matter---archive: false--- 页面自定义布局显示迷你音乐播放器标题右边显示迷你音乐播放器,支持的字段有:server、type、id。 front-matter---music: server: netease # netease, tencent, kugou, xiami, baidu type: song # song, playlist, album, search, artist id: 16846091 # song id / playlist id / album id / search keyword--- 实际效果见: #contributors 显示 meta 标签文章顶部和底部的日期、分类、更新日期、标签、分享等属于 meta 标签。 front-matter---top_meta: falsebottom_meta: false--- 如果一个页面没有 title 则不会显示 top_meta ,像404、关于页面就可以完全隐藏: front-matter---seo_title: 关于top_meta: falsebottom_meta: false--- 标题右边显示缩略图front-matter---thumbnail: https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png--- 缩略图仅在文章列表和文章页面显示,不会在归档页面显示。 标题右边显示图标front-matter---icons: [fas fa-fire red, fas fa-star green]--- 图标仅在归档页面中显示,可以用来标注热门文章。 可以通过 red / blue / green / yellow / orange / theme / accent 来设置图标的颜色 是否要显示封面如果某个页面需要封面,可以这样写: front-matter---cover: true--- 显示侧边栏通过自由设置边栏卡片来删减对应页面的冗余信息,提高有价值的信息在页面中的权重。 如果某个页面不需要侧边栏,可以这样写: front-matter---sidebar: []--- 某个页面想指定显示某几个侧边栏,就这样写: front-matter---sidebar: [grid, toc, tags] # 放置任何你想要显示的侧边栏部件--- 关闭评论front-matter---comments: false--- 页面插件 (page plugins)在 front-matter 中配置页面插件 front-matter---plugins: - mathjax - katex - artitalk - bbtalk - fcircle - gitter - indent - snackbar: oldversion--- 说说页面以 Artitalk页面 为例: 创建页面文件Create file if not exists: source/artitalk/index.md---seo_title: 说说comments: falseplugins: - artitalk # - bbtalk # - fcircle--- 配置Artitalk在主题配置文件中找到以下内容 # Artitalk https://artitalk.js.org# 配置过程请参考:https://artitalk.js.org/doc.html# 使用过旧版本的请修改Leancloud shuoshuo class部分列名:https://artitalk.js.org/release.html# 除appID和appKEY外均为选填项artitalk: # Set `plugins: ["artitalk"]` to enable in front-matter # 不支持 Pjax # 配置项按照yml格式继续填写即可 appId: # your appID appKey: # your appKEY # serverURL: #leancloud绑定的api访问域名,使用国际版的话不需要填写 # lang: # 语言设置,zh为汉语,en为英语,es为西班牙语。默认为汉语 # pageSize: #每页说说的显示数量 # shuoPla: #在编辑说说的输入框中的占位符 # avatarPla: #自定义头像url的输入框的占位符 # motion: #加载动画的开关,1为开,0为关,默认为开 # bgImg: #说说输入框背景图片url # color1: #说说背景颜色1&按钮颜色1 # color2: #说说背景颜色2&按钮颜色2 # color3: #说说字体颜色 # cssUrl: #自定义css接口 渲染公式默认是不渲染的,如果文章内有公式,需要在 front-matter 中设置开启。即便开启了,文章列表中也不会进行渲染,请注意不要把公式写在文章开头。 example.md:---title: 渲染公式(MathJax)date: 2020-02-23plugins: - mathjax---添加一段描述性文字<!-- more -->$$t+1=2$$$$\\mbox{积累因子}=\\begin{cases}1+ni & \\mbox{单利}\\\\\\\\(1+i)^n & \\mbox{复利}\\end{cases}$$$$\\begin{equation}\\sum_{i=0}^n F_i \\cdot \\phi (H, p_i) - \\sum_{i=1}^n a_i \\cdot ( \\tilde{x_i}, \\tilde{y_i}) + b_i \\cdot ( \\tilde{x_i}^2 , \\tilde{y_i}^2 )\\end{equation}$$$$\\begin{equation}\\beta^*(D) = \\mathop{argmin} \\limits_{\\beta} \\lambda {||\\beta||}^2 + \\sum_{i=1}^n max(0, 1 - y_i f_{\\beta}(x_i))\\end{equation}$$ 查看公式渲染效果 $$t+1=2$$$$\\mbox{积累因子}=\\begin{cases}1+ni & \\mbox{单利}\\\\(1+i)^n & \\mbox{复利}\\end{cases}$$$$\\begin{equation}\\sum_{i=0}^n F_i \\cdot \\phi (H, p_i) - \\sum_{i=1}^n a_i \\cdot ( \\tilde{x_i}, \\tilde{y_i}) + b_i \\cdot ( \\tilde{x_i}^2 , \\tilde{y_i}^2 )\\end{equation}$$$$\\begin{equation}\\beta^*(D) = \\mathop{argmin} \\limits_{\\beta} \\lambda {||\\beta||}^2 + \\sum_{i=1}^n max(0, 1 - y_i f_{\\beta}(x_i))\\end{equation}$$ 如果公式仍无法正确渲染可以阅读 @MicDZ 的这篇文章: 在Material-X上使用KaTeXhttps://www.micdz.cn/article/katex-on-volantis/ 页面 gitter页面配置 front-matter---plugins: - gitter--- 配置 gitter在主题配置文件中找到以下内容 plugins: .... # Gitter # https://gitter.im gitter: room: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 文章页首行缩进front-matter---plugins: - indent--- Snackbar (页面通知)配置数据源数据源写在以下路径,如果没有请自行创建: blog/source/_data/notification.yml 内容格式为: blog/source/_data/notification.ymloldversion: title: 过期的文档 message: 这份文档过于久远,如果您使用的是新版的主题,请查看新版本的文档。 position: bottom # bottom (底部通知), right (右侧通知,会自动消失) theme: warning # default, warning cache: false # 是否记住选项(下次不再弹出) buttons: - title: 查看新版文档 url: /getting-started/ dismiss: false # 点击了是否关闭底部横幅 配置 front-matterfront-matter---plugins: - snackbar: oldversion---"},{"title":"站点配置","date":"2024-03-28T06:49:50.118Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/site-settings/index.html","permalink":"https://volantis.js.org/v6/site-settings/","excerpt":"","text":"博客根目录下的 _config.yml 文件通常负责站点相关配置、第三方 npm 插件相关的配置。 网站标题blog/_config.yml# 网站标题title: my blog 网站图标简单方式完全自定义文件导入blog/_config.yml# 网站图标,更多尺寸等图标请使用 import 方式批量导入favicon: https://cdn.jsdelivr.net/gh/xaoxuu/assets@master/favicon/favicon.icoblog/_config.ymlimport: head_begin: - <meta name="msapplication-TileColor" content="#ffffff"> - <meta name="msapplication-config" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/browserconfig.xml"> - <meta name="theme-color" content="#ffffff"> - <link rel="apple-touch-icon" sizes="180x180" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-16x16.png"> - <link rel="manifest" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/site.webmanifest"> - <link rel="mask-icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <link rel="shortcut icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon.ico"> - <meta name="apple-mobile-web-app-title" content="Volantis"> - <meta name="application-name" content="Volantis"> - <meta name="msapplication-TileColor" content="#f4f4f4"> - <meta name="msapplication-TileImage" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"> - '<meta name="theme-color" content="#f4f4f4" media="(prefers-color-scheme: light)">' - '<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">' head_end: body_begin: body_end:blog/source/_volantis/headBegin.ejs<meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-config" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/browserconfig.xml"><meta name="theme-color" content="#ffffff"><link rel="apple-touch-icon" sizes="180x180" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-16x16.png"><link rel="manifest" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/site.webmanifest"><link rel="mask-icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/safari-pinned-tab.svg" color="#5bbad5"><link rel="shortcut icon" href="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon.ico"><meta name="apple-mobile-web-app-title" content="Volantis"><meta name="application-name" content="Volantis"><meta name="msapplication-TileColor" content="#f4f4f4"><meta name="msapplication-TileImage" content="https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/favicon-32x32.png"><meta name="theme-color" content="#f4f4f4" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)"> 多语言设置blog/_config.ymllanguage: - zh-CN - en - zh-TW 对应的翻译文件路径: themes/volantis/languages/ 导入外部文件Volantis 用户可以在不修改主题文件的情况下向 head 和 body 中添加各种标签。 代码片段注入的位置: head_begin: 注入在 <head> 之后 head_end: 注入在 </head> 之前 body_begin: 注入在 <body> 之后 body_end: 注入在 </body> 之前 blog/_config.ymlimport: head_begin: - <meta name="theme-color" content="#ffffff"> head_end: - <meta name="hello" content="world"> body_begin: - <script></script> body_end: - <script></script> 如果您注入的内容较多,不方便放置在 _config.yml 文件内,你可以将其导入至文件中,对应结构为: 注入点 注入文件 head_begin blog/source/_volantis/headBegin.ejs head_end blog/source/_volantis/headEnd.ejs body_begin blog/source/_volantis/ bodyBegin.ejs body_end blog/source/_volantis/bodyEnd.ejs 更多Hexo 官方文档 #配置https://hexo.io/zh-cn/docs/configuration"},{"title":"标签插件","date":"2024-03-28T06:49:50.118Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/tag-plugins/index.html","permalink":"https://volantis.js.org/v6/tag-plugins/","excerpt":"","text":"为了兼容老用户,旧的标签插件在重构之前依然沿用旧的格式,即 command + 空格 作为参数分隔符,而部分新增标签插件是 空格 + 英文竖线 + 空格 ,请注意区分。 我们也在探索哪种分隔符既简单又不容易引起冲突,所以可能存在多种格式,具体以对应文档描述为准。 5.0 版本起临时实验使用英文双冒号 ( :: ) 作为分隔符,之前版本的分隔符写法向下兼容 6.0 版本的分隔符最终计划使用 stellar 的分隔符,之前版本的分隔符写法没有兼容计划 text效果源码带 下划线 的文本;带 着重号 的文本;带 波浪线 的文本;带 删除线 的文本 键盘样式的文本:⌘ + D 密码样式的文本:这里没有验证码带 {% u 下划线 %} 的文本;带 {% emp 着重号 %} 的文本;带 {% wavy 波浪线 %} 的文本;带 {% del 删除线 %} 的文本键盘样式的文本:{% kbd ⌘ %} + {% kbd D %}密码样式的文本:{% psw 这里没有验证码 %} span语法效果源码参数本插件最后更新于 5.0 版本{% span 样式参数::文本内容 %}各种颜色的标签,包括:红色、黄色、绿色、青色、蓝色、灰色。 超大号文字: Volantis A Wonderful Theme for Hexo各种颜色的标签,包括:{% span red::红色 %}、{% span yellow::黄色 %}、{% span green::绿色 %}、{% span cyan::青色 %}、{% span blue::蓝色 %}、{% span gray::灰色 %}。超大号文字:{% span center logo large::Volantis %} {% span center small::A Wonderful Theme for Hexo %} 属性 可选值 字体 logo, code 颜色 red, yellow, green, cyan, blue, gray 大小 small, h4, h3, h2, h1, large, huge, ultra 对齐方向 left, center, right p参数效果源码参数本插件最后更新于 5.0 版本{% p 样式参数::文本内容 %}红色 黄色 绿色 青色 蓝色 灰色 Volantis A Wonderful Theme for Hexo{% p red::红色 %}{% p yellow::黄色 %}{% p green::绿色 %}{% p cyan::青色 %}{% p blue::蓝色 %}{% p gray::灰色 %}{% p center logo large::Volantis %}{% p center small::A Wonderful Theme for Hexo %} 属性 可选值 字体 logo, code 颜色 red, yellow, green, cyan, blue, gray 大小 small, h4, h3, h2, h1, large, huge, ultra 对齐方向 left, center, right noteNoteBlock 是 Blockquote 的增强版,在左边显示图标,并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。 最后更新于 5.0 版本{% note 样式参数::文本内容 %} 演示效果经典用法可以在配置文件中设置默认样式,为简单的一句话提供最的简便写法。 note quote 适合引用一段话 note info 默认主题色,适合中性的信息 note warning 默认黄色,适合警告性的信息 note error/danger 默认红色,适合危险性的信息 note done/success 默认绿色,适合正确操作的信息 更多图标这些都是默认样式,可以手动加上颜色: note radiation 默认样式 note radiation yellow 可以加上颜色 note bug red 说明还存在的一些故障 note link green 可以放置一些链接 note paperclip blue 放置一些附件链接 note todo 待办事项 note guide clear 可以加上一段向导 note download 可以放置下载链接 note message gray 一段消息 note up 可以说明如何进行更新 note undo light 可以说明如何撤销或者回退 上述示例的源码example:#### 经典用法{% note::可以在配置文件中设置默认样式,为简单的一句话提供最的简便写法。 %}{% note quote::note quote 适合引用一段话 %}{% note info::note info 默认主题色,适合中性的信息 %}{% note warning::note warning 默认黄色,适合警告性的信息 %}{% note danger::note error/danger 默认红色,适合危险性的信息 %}{% note success::note done/success 默认绿色,适合正确操作的信息 %}#### 更多图标这些都是默认样式,可以手动加上颜色:{% note radiation::note radiation 默认样式 %}{% note radiation yellow::note radiation yellow 可以加上颜色 %}{% note bug red::note bug red 说明还存在的一些故障 %}{% note link green::note link green 可以放置一些链接 %}{% note paperclip blue::note paperclip blue 放置一些附件链接 %}{% note todo::note todo 待办事项 %}{% note guide clear::note guide clear 可以加上一段向导 %}{% note download::note download 可以放置下载链接 %}{% note message gray::note message gray 一段消息 %}{% note up::note up 可以说明如何进行更新 %}{% note undo light::note undo light 可以说明如何撤销或者回退 %} 可以支持的参数样式参数位置可以写图标和颜色,多个样式参数用空格隔开。 图标彩色的quote, info, warning, done/success, error/danger 灰色的,也可以指定颜色radiation, bug, idea, link, paperclip, todo, message, guide, download, up, undo 颜色指定颜色clear, light, gray, red, yellow, green, cyan, blue noteblockNoteBlock 是 Blockquote 的增强版,在左边显示图标,并且可以自定颜色。而 Note 是 NoteBlock 的简便写法。 最后更新于 5.0 版本{% noteblock 样式参数(可选)::标题(可选) %}文本段落{% endnoteblock %} 演示效果可以在区块中放置一些复杂的结构,支持嵌套。 标题(可选)Windows 10不是為所有人設計,而是為每個人設計嵌套测试: 请坐和放宽,我正在帮你搞定一切... Folding 测试: 点击查看更多 不要说我们没有警告过你我们都有不顺利的时候 上述示例的源码example:{% noteblock::标题(可选) %}Windows 10不是為所有人設計,而是為每個人設計{% noteblock done %}嵌套测试: 请坐和放宽,我正在帮你搞定一切...{% endnoteblock %}{% folding yellow::Folding 测试: 点击查看更多 %}{% note warning::不要说我们没有警告过你 %}{% noteblock bug red %}我们都有不顺利的时候{% endnoteblock %}{% endfolding %}{% endnoteblock %} 可以支持的参数样式参数位置可以写图标和颜色,多个样式参数用空格隔开。 图标彩色的quote, info, warning, done/success, error/danger 灰色的,也可以指定颜色radiation, bug, idea, link, paperclip, todo, message, guide, download, up, undo 颜色指定颜色clear, light, gray, red, yellow, green, cyan, blue checkbox最后更新于 5.0 版本{% checkbox 样式参数(可选)::文本(支持简单md) %} 演示效果 纯文本测试 支持简单的 markdown 语法 支持自定义颜色 绿色 + 默认选中 黄色 + 默认选中 青色 + 默认选中 蓝色 + 默认选中 增加 减少 叉 上述示例的源码example:{% checkbox 纯文本测试 %}{% checkbox checked::支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}{% checkbox red::支持自定义颜色 %}{% checkbox green checked::绿色 + 默认选中 %}{% checkbox yellow checked::黄色 + 默认选中 %}{% checkbox cyan checked::青色 + 默认选中 %}{% checkbox blue checked::蓝色 + 默认选中 %}{% checkbox plus green checked::增加 %}{% checkbox minus yellow checked::减少 %}{% checkbox times red checked::叉 %} 可以支持的参数颜色red, yellow, green, cyan, blue 样式plus, minus, times 选中状态checked radio最后更新于 5.0 版本{% checkbox 样式参数(可选)::文本(支持简单md) %} 演示效果 纯文本测试 支持简单的 markdown 语法 支持自定义颜色 绿色 黄色 青色 蓝色 上述示例的源码example:{% radio 纯文本测试 %}{% radio checked::支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}{% radio red::支持自定义颜色 %}{% radio green::绿色 %}{% radio yellow::黄色 %}{% radio cyan::青色 %}{% radio blue::蓝色 %} 可以支持的参数颜色red, yellow, green, cyan, blue 选中状态checked timeline最后更新于 3.0 版本{% timeline 时间线标题(可选) %}{% timenode 时间节点(标题) %}正文内容{% endtimenode %}{% timenode 时间节点(标题) %}正文内容{% endtimenode %}{% endtimeline %} 演示效果 2020-07-24 2.6.6 -> 3.0 如果有 hexo-lazyload-image 插件,需要删除并重新安装最新版本,设置 lazyload.isSPA: true。2.x 版本的 css 和 js 不适用于 3.x 版本,如果使用了 use_cdn: true 则需要删除。2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。2.x 版本的置顶 top: true 改为了 pin: true,并且同样适用于 layout: page 的页面。如果使用了 hexo-offline 插件,建议卸载,3.0 版本默认开启了 pjax 服务。 2020-05-15 2.6.3 -> 2.6.6 不需要额外处理。 2020-04-20 2.6.2 -> 2.6.3 全局搜索 seotitle 并替换为 seo_title。group 组件的索引规则有变,使用 group 组件的文章内,group: group_name 对应的组件名必须是 group_name。group 组件的列表名优先显示文章的 short_title 其次是 title。 上述示例的源码example:{% timeline %}{% timenode 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) %}1. 如果有 `hexo-lazyload-image` 插件,需要删除并重新安装最新版本,设置 `lazyload.isSPA: true`。2. 2.x 版本的 css 和 js 不适用于 3.x 版本,如果使用了 `use_cdn: true` 则需要删除。3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。4. 2.x 版本的置顶 `top: true` 改为了 `pin: true`,并且同样适用于 `layout: page` 的页面。5. 如果使用了 `hexo-offline` 插件,建议卸载,3.0 版本默认开启了 pjax 服务。{% endtimenode %}{% timenode 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) %}不需要额外处理。{% endtimenode %}{% timenode 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) %}1. 全局搜索 `seotitle` 并替换为 `seo_title`。2. group 组件的索引规则有变,使用 group 组件的文章内,`group: group_name` 对应的组件名必须是 `group_name`。2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`。{% endtimenode %}{% endtimeline %} link最后更新于 5.0 版本{% link 标题::链接::图片链接(可选) %} 演示效果如何参与项目https://volantis.js.org/contributors/ 上述示例的源码example:{% link 如何参与项目::https://volantis.js.org/contributors/::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets@master/logo/256/safari.png %} button这个页面的标签将会在不久后重构 基础按钮请将您的 Volantis 升级至 2.4 版本以上使用。 语法格式参数列表示例写法示例效果{% btn 样式参数(可选)::标题::链接::图标(可选) %} 可选的参数可以省略,但是前后顺序不能乱。样式参数 regular, large, center 图标 第1个或者第2个参数包含 fa- 的那个被识别为图标。example.md:不设置任何参数的 {% btn 按钮:: / %} 适合融入段落中。regular 按钮适合独立于段落之外:{% btn regular::示例博客::https://xaoxuu.com::fas fa-play-circle %}large 按钮更具有强调作用,建议搭配 center 使用:{% btn center large::开始使用::https://volantis.js.org/v3/getting-started/::fas fa-download %}行内按钮 不设置任何参数的 按钮 适合融入段落中。 空心按钮 示例博客 示例博客 示例博客 示例博客 居中: 开始使用 实心按钮 示例博客 示例博客 示例博客 示例博客 居中: 开始使用 富文本按钮请将您的 Volantis 升级至 2.3 版本以上使用。 语法格式参数列表示例写法示例效果{% btns 样式参数 %}{% cell 标题::链接::图片或者图标 %}{% cell 标题::链接::图片或者图标 %}{% endbtns %}样式参数位置可以写图片样式、布局方式,多个样式参数用空格隔开。 圆角样式 默认为方形 rounded, circle 布局方式 默认为自动宽度,适合视野内只有一两个的情况。 参数 含义 wide 宽一点的按钮 fill 填充布局,自动铺满至少一行,多了会换行。 center 居中,按钮之间是固定间距。 around 居中分散 grid2 等宽最多2列,屏幕变窄会适当减少列数。 grid3 等宽最多3列,屏幕变窄会适当减少列数。 grid4 等宽最多4列,屏幕变窄会适当减少列数。 grid5 等宽最多5列,屏幕变窄会适当减少列数。 增加文字样式 可以在容器内增加 <b>标题</b> 和 <p>描述文字</p>如果需要显示类似「团队成员」之类的一组含有头像的链接: example.md:{% btns circle grid5 %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% cell xaoxuu::https://xaoxuu.com::https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}{% endbtns %} 或者含有图标的按钮: example.md:{% btns rounded grid5 %}{% cell 下载源码::/::fas fa-download %}{% cell 查看文档::/::fas fa-book-open %}{% endbtns %} 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中 example.md:{% btns circle center grid5 %}<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'> <i class='fab fa-apple'></i> <b>心率管家</b> {% p red::专业版 %} <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'></a><a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'> <i class='fab fa-apple'></i> <b>心率管家</b> {% p green::免费版 %} <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'></a>{% endbtns %}如果需要显示类似「团队成员」之类的一组含有头像的链接: xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu 或者含有图标的按钮: 下载源码 查看文档 圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中 心率管家 专业版 心率管家 免费版 ghcard最后更新于 5.0 版本{% ghcard 用户名::其它参数(可选) %}{% ghcard 用户名/仓库::其它参数(可选) %} 用户信息卡片 上述示例的源码: example:| {% ghcard xaoxuu %} | {% ghcard xaoxuu::theme=vue %} || -- | -- || {% ghcard xaoxuu::theme=buefy %} | {% ghcard xaoxuu::theme=solarized-light %} || {% ghcard xaoxuu::theme=onedark %} | {% ghcard xaoxuu::theme=solarized-dark %} || {% ghcard xaoxuu::theme=algolia %} | {% ghcard xaoxuu::theme=calm %} | 仓库信息卡片 上述示例的源码: example:| {% ghcard volantis-x/hexo-theme-volantis %} | {% ghcard volantis-x/hexo-theme-volantis::theme=vue %} || -- | -- || {% ghcard volantis-x/hexo-theme-volantis::theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis::theme=solarized-light %} || {% ghcard volantis-x/hexo-theme-volantis::theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis::theme=solarized-dark %} || {% ghcard volantis-x/hexo-theme-volantis::theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis::theme=calm %} | 更多参数选择GitHub 卡片 API 参数https://github-readme-stats.xaoxuu.com site网站卡片可以显示网站截图、logo、标题、描述,使用方法和 友链标签 一模一样,唯一的区别是数据文件名称为 sites.yml,可以和友链数据混用,通过分组过滤实现不一样的效果。 最后更新于 5.0 版本{% sites [筛选方式]:[组名] %} 演示效果xaoxuu开发者MHuiG划水Colsrch开发者inkss摸鱼 上述示例的源码example{% sites only:community_team %} 可以支持的参数数据按组筛选支持分组(白名单模式和黑名单模式)显示: // 显示 communtiy_team{% sites only:communtiy_team %}// 除了 communtiy_team 别的都显示{% sites not:community_team %}// 多个分组使用 `,` 分隔{% sites only:communtiy_team, communtiy_builder %} dropmenu这个页面的标签将会在不久后重构 下拉菜单请将您的 Volantis 升级至 3.0 版本以上使用。 语法格式示例写法示例效果容器 {% menu 前缀(可省略)::标题::后缀(可省略) %}菜单内容{% endmenu %} 菜单内容 菜单项 {% menuitem 文本::链接::图标 %} 分割线 {% menuitem hr %} 子菜单 {% submenu 嵌套菜单::图标 %}菜单内容{% endsubmenu %}示例1 {% menu 下拉菜单 %}{% menuitem 主题源码::https://github.com/volantis-x/hexo-theme-volantis/::fas fa-file-code %}{% menuitem 更新日志::https://github.com/volantis-x/hexo-theme-volantis/releases/::fas fa-clipboard-list %}{% menuitem hr %}{% submenu 有疑问?::fas fa-question-circle %}{% menuitem 看 FAQ::/faqs/ %}{% menuitem 看 本站源码::https://github.com/volantis-x/volantis-docs/ %}{% menuitem 提 Issue::https://github.com/volantis-x/hexo-theme-volantis/issues/ %}{% endsubmenu %}{% endmenu %} 示例2 {% menu 这个是::下拉菜单 %}(同上){% endmenu %} 示例3 {% menu 这个是::下拉菜单::的示例效果。 %}(同上){% endmenu %}示例1 下拉菜单 主题源码 更新日志 有疑问? 看 FAQ 看 本站源码 提 Issue 示例2 这个是 下拉菜单 主题源码 更新日志 有疑问? 看 FAQ 看 本站源码 提 Issue 示例3 这个是 下拉菜单 主题源码 更新日志 有疑问? 看 FAQ 看 本站源码 提 Issue 的示例效果。 tab此插件移植自 NexT #tabs 最后更新于 2.1 版本{% tabs 页面内不重复的ID %}<!-- tab 栏目1 -->内容<!-- endtab --><!-- tab 栏目2 -->内容<!-- endtab -->{% endtabs %} 演示效果栏目1栏目2。。。!!! 上述示例的源码example:{% tabs tab-id %}<!-- tab 栏目1 -->。。。<!-- endtab --><!-- tab 栏目2 -->!!!<!-- endtab -->{% endtabs %} folding最后更新于 5.0 版本{% folding 参数(可选)::标题 %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endfolding %} 演示效果 查看图片测试 查看默认打开的折叠框 这是一个默认打开的折叠框。 查看代码测试 {% folding green::查看代码测试 %}查看代码测试{% endfolding %} 查看列表测试 hahahehe 查看嵌套测试 查看嵌套测试2 查看嵌套测试3 hahaha 上述示例的源码example:{% folding 查看图片测试 %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endfolding %}{% folding cyan open::查看默认打开的折叠框 %}这是一个默认打开的折叠框。{% endfolding %}{% folding green::查看代码测试 %}{% endfolding %}{% folding yellow::查看列表测试 %}- haha- hehe{% endfolding %}{% folding red::查看嵌套测试 %}{% folding blue::查看嵌套测试2 %}{% folding 查看嵌套测试3 %}hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>{% endfolding %}{% endfolding %}{% endfolding %} 可以支持的参数参数位置可以填写颜色和状态,多个参数用空格隔开。 颜色blue, cyan, green, yellow, red 状态状态填写 open 代表默认打开。 inlineimageInlineimage 标签是一种行内图片标签,可以用来在一段话中间插入表情。 本插件最后更新于 5.0 版本{% inlineimage 图片链接::height=高度(可选) %} 演示效果这是 一段话。 这又是 一段话。 上述示例的源码example:这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif::height=40px %} 一段话。 可以支持的参数高度height=20px imageImage 标签是一种针对单个图片应用场景的标签,支持图片描述文字和指定宽度。 本插件最后更新于 5.0 版本{% image 链接::width=宽度(可选)::height=高度(可选)::alt=描述(可选)::bg=占位颜色(可选) %} 演示效果添加描述: 每天下课回宿舍的路,没有什么故事。 指定宽度: 指定宽度并添加描述: 每天下课回宿舍的路,没有什么故事。 设置占位背景色: 优化不同宽度浏览的观感 上述示例的源码example:添加描述:{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::alt=每天下课回宿舍的路,没有什么故事。 %}指定宽度:{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px %}指定宽度并添加描述:{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::alt=每天下课回宿舍的路,没有什么故事。 %}设置占位背景色:{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg::width=400px::bg=#1D0C04::alt=优化不同宽度浏览的观感 %} 可以支持的参数图片宽高度example:width=300px::height=32px 图片描述example:alt=图片描述 占位背景色example:bg=#f2f2f2 galleryGallery 标签是一种针对一组图片应用场景的标签。 本插件最后更新于 5.0 版本{% gallery 参数::列数::分组 %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg){% endgallery %} 演示效果一行一个图片 图片描述 一行多个图片(不换行) 图片描述图片描述图片描述 多行多个图片(每行2~8个图片) 上述示例的源码一行一个图片 example.md:{% gallery %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg){% endgallery %} 一行多个图片(不换行) example.md:{% gallery::::one %}![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg)![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg)![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg){% endgallery %} 多行多个图片(每行2~8个图片) example.md:{% gallery stretch::6::two %}![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/001.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/002.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/003.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/004.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/005.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/007.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/008.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/009.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/010.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/011.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/012.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/013.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/014.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/015.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/016.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/017.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/018.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/019.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/020.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/021.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/022.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/023.jpg)![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/024.jpg){% endgallery %} 可以支持的参数对齐方向left::center::right 缩放stretch 列数::后面直接写列数,支持 2 ~ 8 列。设定列数之后就是「多行多图」布局,此时图片默认左对齐。为了避免图片大小不一,建议搭配 stretch 来时图片放大填充。 测试中 设定列数之后 不会产生 累积布局偏移; 没有设定列数 产生了累积布局偏移 分组相同内容的会被归档在一个分组中。 audio本插件最后更新于 2.4 版本{% audio 音频链接 %} 演示效果Your browser does not support the audio tag. 上述示例的源码example:{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %} video本插件最后更新于 5.0 版本{% video 视频链接 %} 演示效果100%宽度 Your browser does not support the video tag. 50%宽度 Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. 25%宽度 Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. Your browser does not support the video tag. 上述示例的源码100%宽度 example.md:{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %} 50%宽度 example.md:{% videos::2 %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% endvideos %} 25%宽度 example.md:{% videos::4 %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov %}{% endvideos %} 可以支持的参数对齐方向left::center::right 列数::后面直接写列数,支持 1 ~ 4 列。 frame这是一个能够将图片或者视频套入设备框架中的标签,可以用来更优雅地显示截图、录屏。 本插件最后更新于 5.0 版本{% frame 框架名::img=图片链接::alt=图片描述(可选)::part=top/bottom(可选) %}{% frame 框架名::video=视频链接::part=top/bottom(可选) %} {% frame iphone11::img=https://bu.dusays.com/2020/09/28/baa33914a34ec.jpg::video=https://bu.dusays.com/2020/09/28/39db723f1e200.mp4::part=top %} 在这个示例中同时出现了 img 和 video 那么它就是一个带有封面的视频,在视频加载完成之前会先显示视频封面。 设备框架目前支持的有: iphone11 如果您有以下其它设备框架图(svg),欢迎 PR 兼容。 android, ipad, macbook, watch 剪裁通过设置 part=top 或者 part=bottom 来显示上半部分或者下半部分,否则将显示完整的框架及其中的图片/视频。 aplayer主题对 APlayer 插件的样式进行了兼容。安装插件: npm i -S hexo-tag-aplayer 使用方法: hexo-tag-aplayerhttps://github.com/MoePlayer/hexo-tag-aplayer issuesissues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代 md在局部渲染外部md文件。 示例写法{% md https://cdn.jsdelivr.net/gh/volantis-x/hexo-theme-volantis/README.md %} md (()=>{ volantis.css(\"https://cdn.bootcdn.net/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css\"); const contentEl = document.getElementById(\"md-0ca2a9e7-6c7c-1517-8b88-390c3c7cc049\"); const loadMarkdown = (url) => { if (!window.fetch) { contentEl.innerHTML = 'Your browser outdated. Please use the latest version of Chrome or Firefox!您的浏览器版本过低,请使用最新版的 Chrome 或 Firefox 浏览器!'; } else { contentEl.innerHTML = 'Loading ... | 加载中。。。'; fetch(url, { method: \"GET\" }) .then((resp) => { return Promise.all([ resp.ok, resp.status, resp.text(), resp.headers, ]); }) .then(([ok, status, data, headers]) => { if (ok) { return { ok, status, data, headers, }; } else { throw new Error(JSON.stringify(json.error)); } }) .then((resp) => { let data = marked.parse(resp.data); contentEl.innerHTML = data; }) .catch((error) => { console.log(error); contentEl.innerHTML = 'There was a problem loading the file!加载文件时出现问题!'; }); }; }; volantis.js(\"https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js\").then(()=>{ loadMarkdown(\"https://cdn.jsdelivr.net/gh/volantis-x/hexo-theme-volantis/README.md?t=\" + new Date().getTime()); })})(); swiper轮播标签默认一张图片是 50% 宽度,通过设置 width:min 设置为 25% 宽度,width:max 设置为 100% 宽度。 最大图片宽度 {% swiper width:max %}![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot11.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot12.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot13.png){% endswiper %} 最小图片宽度 {% swiper width:min %}![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot01.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot02.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot03.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot04.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot05.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot06.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot07.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot08.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot09.png)![](https://cdn.jsdelivr.net/gh/cdn-x/wiki@1.0.2/prohud/screenshot10.png){% endswiper %} pandown不支持 pjax 的标签插件#pandown/v6/tag-plugins/no-pjax#pandown 友链标签您可以在任何位置插入友链,支持静态数据和动态数据,静态数据需要写在数据文件中: blog/source/_data/friends.ymlvolantis_developer: title: description: items: - title: xaoxuu url: https://github.com/xaoxuu avatar: https://avatars.githubusercontent.com/u/16400144?s=60&v=4 - title: MHuiG url: https://github.com/MHuiG avatar: https://avatars.githubusercontent.com/u/38281581?s=60&v=4 - title: inkss url: https://github.com/inkss avatar: https://avatars.githubusercontent.com/u/31947043?s=60&v=4 - title: Colsrch url: https://github.com/Colsrch avatar: https://avatars.githubusercontent.com/u/58458181?s=60&v=4 - title: Drew233 url: https://github.com/Drew233 avatar: https://avatars.githubusercontent.com/u/47592224?s=60&v=4 - title: Linhk1606 url: https://github.com/Linhk1606 avatar: https://avatars.githubusercontent.com/u/50829219?s=60&v=4 - title: W4J1e url: https://github.com/W4J1e avatar: https://avatars.githubusercontent.com/u/74824162?s=60&v=4community_builder: title: description: items: - title: xaoxuu url: https://github.com/xaoxuu avatar: https://avatars.githubusercontent.com/u/16400144?s=60&v=4 - title: MHuiG url: https://github.com/MHuiG avatar: https://avatars.githubusercontent.com/u/38281581?s=60&v=4 - title: Colsrch url: https://github.com/Colsrch avatar: https://avatars.githubusercontent.com/u/58458181?s=60&v=4 - title: penndu url: https://github.com/penndu avatar: https://avatars.githubusercontent.com/u/46226528?s=60&v=4 - title: heson525 url: https://github.com/heson525 avatar: https://avatars.githubusercontent.com/u/32234343?s=60&v=4 - title: W4J1e url: https://github.com/W4J1e avatar: https://avatars.githubusercontent.com/u/74824162?s=60&v=4 - title: luosiwei-cmd url: https://github.com/luosiwei-cmd avatar: https://avatars.githubusercontent.com/u/61175380?s=60&v=4groupGitHub: title: 来自 GitHub 的朋友 description: '以下友链通过 [GitHub Issue](https://github.com/xaoxuu/friends/issues/) 提交,按 issue 最后更新时间排序:' api: https://issues-api.xaoxuu.com repo: xaoxuu/friends 标题和描述都支持 md 格式,需要写在引号中。如果指定了 api 和 repo 字段,则从 issues 中取第一个 json 代码块数据作为友链。 写法如下{% friends %} 数据按组筛选友链支持分组(白名单模式和黑名单模式)显示: 写法如下// 显示 volantis_developer{% friends only:volantis_developer %}// 显示 volantis_developer 和 community_builder{% friends only:volantis_developer,community_builder %}// 除了 community_builder 别的都显示{% friends not:community_builder %} friends only:volantis_developer xaoxuuMHuiGinkssColsrchDrew233Linhk1606W4J1eericcloseheson525CRainyDayFlexistonMicDZzhaohaihaolixiang810WillyChen123ic3evi1pennduPHIKN1GHTzsStrikecode004AcceptedqinxsXuxuGoodTRHXcofmlunhui1994gyl-coderfi6 实现动态友链可以加载来自 issues 的友链数据,除了需要在 _data/friends.yml 中指定 api 和 repo 外,还需要做一下几件事: 从 xaoxuu/issues-api 作为模板克隆或者 fork 仓库,然后提交一个 issue 进行测试,不出意外的话,仓库中已经配置好了 issue 模板,只需要在模板中指定的位置填写信息就可以了。 提交完 issue 一分钟左右,如果仓库中出现了 output 分支提交,可以点击查看一下文件内容是否已经包含了刚刚提交的 issue 中的数据,如果包含,那么再次回到前端页面刷新就可以看到来自 issue 的友链数据了。 关于自建&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":"2024-03-28T06:49:50.122Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/tag-plugins/no-pjax.html","permalink":"https://volantis.js.org/v6/tag-plugins/no-pjax","excerpt":"","text":"这里存放不支持 pjax 的标签插件 如果没有演示效果,多刷新几次即可。 pandown本插件最后更新于 5.0 版本{% pandown 网盘类型::网盘链接::提取码(可为空)::文件名 %} 演示效果volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) volantis.js(\"https://unpkg.com/pandown\").then(pandown) 上述示例的源码example:{% pandown baidu::https://example.com::1234::百度网盘 %}{% pandown tx::https://example.com::1234::腾讯微云 %}{% pandown onedrive::https://example.com::1234::onedrive %}{% pandown hc::https://example.com::1234::和彩云 %}{% pandown ty::https://example.com::1234::天翼云 %}{% pandown aliyun::https://example.com::1234::阿里网盘 %}{% pandown 115::https://example.com::1234::115网盘 %}{% pandown jg::https://example.com::1234::坚果云 %}{% pandown 360::https://example.com::1234::360安全云盘 %}{% pandown 123::https://example.com::1234::123网盘 %}{% pandown qn::https://example.com::1234::七牛云 %}{% pandown github::https://example.com::::Github %}{% pandown lz::https://example.com::1234::蓝奏云 %} 可以支持的参数网盘类型baidu, tx, onedrive, hc, ty, aliyun, 115, jg, 360, 123, qn, github, lz 如果里的主题版本不支持或有问题可查看如下文档 原版文档https://www.yt-blog.top/docs/vls-pandown-tags"},{"title":"主题配置","date":"2024-03-28T06:49:50.126Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"v6/theme-settings/index.html","permalink":"https://volantis.js.org/v6/theme-settings/","excerpt":"","text":"创建主题配置文件主题目录下的 _config.yml 文件通常负责主题相关配置,我们强烈建议您使用代替的主题配置文件以防止自己的配置丢失。那么如何使用代替主题配置文件呢? 第 1/2 步:创建配置文件 在博客根目录的 _config.yml 文件旁边新建一个文件: _config.volantis.yml ,这个文件中的配置信息优先级高于主题文件夹中的配置文件。 第 2/2 步:覆盖自定义配置 当您需要修改某项内容时,例如导航栏菜单,那么您需要在主题配置文件中找到相关内容,复制进自己创建的配置文件中:blog/_config.volantis.ymlnavbar: visiable: auto # always, auto logo: # choose [img] or [icon + title] img: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png icon: title: menu: - name: 博客 icon: fa-solid fa-rss url: /小提示使用「npm i hexo-theme-volantis」方式安装的主题,主题配置文件在「blog/node_modules/hexo-theme-volantis/_config.yml」使用传统方式安装的主题,主题配置文件在「blog/themes/volantis/_config.yml」 自定义主题外观最大布局宽度blog/_config.volantis.ymlcustom_css: ... max_width: 1080px # Sum of body width and sidebar width 网页所呈现的内容的最大宽度,即 body 和 sidebar 的宽度之和。 抗锯齿blog/_config.volantis.ymlcustom_css: ... font_smoothing: true # font-smoothing for webkit 自定义光标样式blog/_config.volantis.ymlcustom_css: ... cursor: enable: true text: volantis-static/media/cursor/text.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/text.png pointer: volantis-static/media/cursor/pointer.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/pointer.png default: volantis-static/media/cursor/left_ptr.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/left_ptr.png not-allowed: volantis-static/media/cursor/circle.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/circle.png zoom-out: volantis-static/media/cursor/zoom-out.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/zoom-out.png zoom-in: volantis-static/media/cursor/zoom-in.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/zoom-in.png grab: volantis-static/media/cursor/openhand.png # https://cdn.jsdelivr.net/gh/inkss/common@1/cursor/openhand.png 导航栏样式您可以设置导航栏的高度以及视觉特效,视觉特效目前可选的有: shadow:卡片阴影。 floatable:当鼠标移动到容器内时,呈现出浮起来的效果。 blur:背景模糊效果(毛玻璃),当浏览器不支持时显示为不透明。 blog/_config.volantis.ymlcustom_css: ... navbar: height: 64px width: auto # auto, max effect: [shadow, blur] # [shadow, floatable, blur] 滚动条样式blog/_config.volantis.ymlcustom_css: ... scrollbar: size: 4px border: 2px color: '#2196f3' hover: '#ff5722' 侧边栏样式视觉特效参数同上,值得注意的是:卡片的 floatable 效果和 blur 效果相冲突。 blog/_config.volantis.ymlcustom_css: ... sidebar: effect: [shadow] # [shadow, floatable, blur] 正文区域样式视觉特效参数同上,值得注意的是:卡片的 floatable 效果和 blur 效果相冲突。您可以在 language: true 这里设置代码块显示语言名称。text_align 可以设置 h1/h2/h3/h4/p 的文字对齐方向。 blog/_config.volantis.ymlcustom_css: ... body: effect: [shadow] # [shadow, floatable, blur] highlight: language: true # show language of codeblock copy_btn: true text_align: # left, right, justify, center h1: left h2: left h3: left h4: left p: justify 布局间距您可以设置几种标题的布局间距 h2/h3/h4、段落间距 line、区块内部的段落间距 inline。 blog/_config.volantis.ymlcustom_css: ... gap: h2: 48px # Spacing above H2 (only px unit) h3: 24px # Spacing above H3 (only px unit) h4: 16px # Spacing above H4 (only px unit) p: 1em # Paragraph spacing between paragraphs line_height: 1.6 # normal, 1.5, 1.75, 2 ... 自定义字体您可以自定义正文和代码字体。 blog/_config.volantis.ymlcustom_css: ... fontfamily: logofont: fontfamily: '"Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'Varela Round' url: volantis-static/media/fonts/VarelaRound/VarelaRound-Regular.ttf # https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/VarelaRound/VarelaRound-Regular.ttf weight: normal style: normal bodyfont: fontfamily: 'UbuntuMono, "Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial' name: 'UbuntuMono' url: volantis-static/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf # https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf weight: normal style: normal codefont: fontfamily: 'Menlo, UbuntuMono, Monaco' # name: 'Monaco' # url: volantis-static/media/fonts/Monaco/Monaco.ttf # https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/Monaco/Monaco.ttf # weight: normal # style: normal 自定义颜色多彩配色方案 查看所有相关配置 blog/_config.volantis.yml############################### Color Scheme ############################### > start# Accessibility: 背景色和前景色要有足够的对比度 https://web.dev/color-contrast/# https://ant.design/docs/spec/colors-cncolor_scheme: # ------------ # 通用颜色 common: # 主题色 theme: '#3dd9b6' # 链接色 link: '#2092ec' # 按钮色 button: '#44D7B6' # 鼠标放到交互元素上时的色 hover: '#ff5722' # 主题色块内部的文字颜色 inner: '#fff' # 选中区域文字的背景颜色 selection: 'alpha(#2196f3, 0.2)' # ------------ # 亮色主题(默认) light: # 网站背景色 site_bg: '#f4f4f4' # 网站背景上的文字 site_inner: '#fff' # 网站页脚文字 site_footer: '#666' # 卡片背景色 card: '#fff' # 卡片上的普通文字 text: '#444' # 区块和代码块背景色 block: '#f6f6f6' # 代码块高亮时的背景色 codeblock: '#FFF7EA' # 行内代码颜色 inlinecode: '#c74f00' # 文章部分 h1: '#3a3a3a' h2: '#3a3a3a' h3: '#333' h4: '#444' h5: '#555' h6: '#666' p: '#444' # 列表文字 list: '#666' # 列表 hover 时的文字 list_hl: 'mix($color-theme, #000, 80)' # 辅助性文字 meta: '#888' # 版权卡片背景色 copyright_bkg: '#f5f5f5' # ------------ # 暗色主题 # https://www.maijisheji.com/2094.html dark: # 网站最深底色 # Dark Grey 1 site_bd: '#121212' # 网站背景色 # Dark Grey 2 site_bg: '#1f1f1f' # 卡片背景色 # Dark Grey 3 card: '#262626' # 网站背景上的文字 site_inner: '#eeeeeede' # 网站页脚文字 site_footer: '#aaaaaade' # 卡片上的普通文字 text: '#eeeeeede' # 区块和代码块背景色 # Dark Grey 4 block: '#434343' # 代码块高亮时的背景色 # Dark Grey 2 codeblock: '#1f1f1f' # 行内代码颜色 inlinecode: '#D56D28' # 文章部分 高强度文本的不透明度应为87% 中等重点文字适用于60% h1: '#FFFFFFde' # Dark Grey 8 h2: '#FFFFFFde' h3: '#FFFFFF99' # Dark Grey 7 h4: '#FFFFFF99' h5: '#FFFFFF99' h6: '#FFFFFF99' p: '#d9d9d9de' # Dark Grey 6 # 列表文字 # Dark Grey 6 list: '#d9d9d9de' # 列表 hover 时的文字 list_hl: 'mix($color-theme, #fff, 80)' # 辅助性文字 # Dark Grey 5 meta: '#bfbfbfde' # 版权卡片背景色 copyright_bkg: '#21252b' # 夜间图片亮度 brightness: 70%############################### Color Scheme ############################### > end 自定义右键菜单右键菜单右键在菜单项上根据配置文件自行生成前端代码,所以统一了一个共用的菜单对象: {id: '', name: '', icon: '', link: '', event: '', group: ''} 同时为了响应不同状态下的右键行为,提出了内置组 (defaultGroup)的概念,相应的对于右键默认提供的功能实现则定义为内置实现(defaultEvent)。 { defaultEvent: ['copyText', 'copyLink', 'copyPaste', 'copyAll', 'copyCut', 'copyImg', 'printMode', 'readMode'], defaultGroup: ['navigation', 'inputBox', 'seletctText', 'elementCheck', 'elementImage', 'articlePage']} 具体来说,内置组对应右键行为,例如 inputBox 代表在输入框下右键行为;内置实现对应自定义右键默认提供的功能实现,例如 readMode 代表了阅读模式。 参数解释plugins/menus 类的组内数据支持对象(单个菜单)或数组(一系列菜单)rightmenus: order: menus.groupName plugins: defaultGroupItem menus: groupName: - {menu} - {menu} groupName1: {menu} 右键菜单加载菜单的具体加载由 order 控制,可供使用的内容为:plugins.[组名], menus.[组名], hr, music 这四大类。 右键菜单排序菜单的排序由 order 字段的先后顺序和组内菜单项的先后顺序决定。 右键菜单类菜单项共分为两大类:plugins 和 menus,前者放置内置组及内置菜单,允许添加/修改组内菜单;后者为用户自建菜单类,允许添加/修改组及组内菜单。一般意义上 plugins 类的组为动态组,根据实际的右键状态进行显示;menus 类中内容由用户添加,菜单项默认显示。 右键菜单项菜单项共六个字段:id, name, icon, link, event, group,具体作用如下: id: 唯一值 name: 用于菜单名称显示 icon: 用于菜单图标显示 link: 跳转链接 event: 事件,当输入内容不为内置事件时,作 JavaScript 代码执行 group: 菜单项所处分组名称 note link/event 二选一,同时出现时仅处理 link。 内置功能内置组 组名 描述 备注 navigation 导航组件,横向排列,共用一行,仅显示图标 原则上支持的数量不限 inputBox 文本输入框相关组件 生效于 input/textarea seletctText 文本选中类组件 生效于右键选中文本,text 为选中的文本 elementCheck 链接判断组件 生效于链接处的右键行为,link 为链接地址 elementImage 图片判断类组件 生效于图片类的右键行为,link 为链接地址 articlePage 文章页面组件 生效于 post.article 页面 note 除 navigation 外的内置组,在显示时会隐藏含 link 属性的菜单项。 内置实现 事件名 描述 备注 copyText 复制文本 复制选中文本 copyLink 复制链接地址 复制 a 或 image 下的链接至剪切板 copyPaste 粘贴文本 需要用户批准相应权限,仅支持粘贴文本至输入框(暂不支持粘贴图片) copyAll 全选文本 选中输入框内的文本内容 copyCut 剪切文本 剪切输入框中选中的文本内容 copyImg 复制图片 支持 Chrome 浏览器,复制图片资源至剪切板 printMode 打印页面 一个调制过样式的打印功能 readMode 阅读模式 一个简单的阅读模式功能 默认设置iconPrefix Fontawesome 图标前缀,音乐类组件使用,参考内容:fa-solid, fa-regular, fa-light, fa-thin, fa-duotone, fa-brands。 articleShowLink 在 articlePage 组显示时(文章页)时依旧显示含 link 属性的菜单项。 musicAlwaysShow 当设定全局音乐播放器时,是否一直显示音乐控制菜单。false:仅当音乐播放时启用。 回调方法volantis.rightmenu.handle 在右键菜单打开时执行。 volantis.rightmenu.handle(callBack[,"callBackName", "setRequestAnimationFrame = true"])。 此外,你还可以在 volantis.mouseEvent 处获得 MouseEvent 信息。 配置文件 blog/_config.volantis.yml ### 自定义右键 新rightmenus: enable: true # 右键菜单项及加载顺序 # 内容示例:plugins.[组名], menus.[组名], hr(分割线,推荐去线留白), music(音乐控制器) order: - plugins.navigation - hr - plugins.inputBox - plugins.seletctText - plugins.elementCheck - plugins.elementImage - menus.link - hr - menus.darkMode - plugins.articlePage - music ############################ # - {id: '', name: '', icon: '', link: '', event: '', group: ''} # id: 唯一值 # name: 用于菜单名称显示 # icon: 用于菜单图标显示 # link: 跳转链接 # event: 事件,当输入内容不为内置事件时,作 JavaScript 代码执行 # group: 菜单项所处分组名称 # 注: # 1. link/event 二选一,同时出现时仅处理 link # 2. 内置事件列表: copyText, copyLink, copyPaste, copyAll, copyCut, copyImg, printMode, readMode # 3. 内置组列表:navigation, inputBox, seletctText, elementCheck, elementImage, articlePage # 4. plugins 列允许自定义组内项目 # 5. menus 列允许自定义组及其内容 # 6. 除 navigation 外的内置组,在显示时会隐藏含 link 属性的菜单项 ########################### # 基础项设置 options: # 图标前缀 fa-solid, fa-regular, fa-light, fa-thin, fa-duotone, fa-brands iconPrefix: fa-solid # 例外,在 articlePage 组显示时(文章页)时依旧显示含 link 属性的菜单项 articleShowLink: false # 当设定全局音乐播放器时,是否一直显示音乐控制菜单。false:仅当音乐播放时启用 musicAlwaysShow: false # 右键内置组,预置实现 plugins: # 导航组件 # 横向排列,共用一行,仅显示图标 (原则上支持的数量不限) navigation: - {id: 'left', name: '转到上一页', icon: 'fa-solid fa-arrow-left', event: 'history.back()', group: 'navigation'} - {id: 'right', name: '转到下一页', icon: 'fa-solid fa-arrow-right', event: 'history.forward()', group: 'navigation'} - {id: 'redo', name: '刷新当前页面', icon: 'fa-solid fa-redo', event: 'window.location.reload()', group: 'navigation'} - {id: 'up', name: '回到顶部', icon: 'fa-solid fa-arrow-up', event: 'VolantisApp.scrolltoElement(volantis.dom.bodyAnchor)', group: 'navigation'} #- {id: 'home', name: '回到首页', icon: 'fa-solid fa-home', link: '/', group: 'navigation'} # 文本输入框相关组件 # 生效于 input/textarea,粘贴、剪切、全选 inputBox: - {id: 'copyPaste', name: '粘贴文本', icon: 'fa-solid fa-paste', event: 'copyPaste', group: 'inputBox'} - {id: 'copyAll', name: '全选文本', icon: 'fa-solid fa-object-ungroup', event: 'copyAll', group: 'inputBox'} - {id: 'copyCut', name: '剪切文本', icon: 'fa-solid fa-cut', event: 'copyCut', group: 'inputBox'} # 文本选中类组件 # 生效于右键选中文本,__text__ 为选中的文本。 seletctText: - {id: 'copyText', name: '复制文本', icon: 'fa-solid fa-copy', event: 'copyText', group: 'seletctText'} - {id: 'searchWord', name: '站内搜索', icon: 'fa-solid fa-search', event: 'OpenSearch(__text__)', group: 'seletctText'} - {id: 'bingSearch', name: '必应搜索', icon: 'fa-solid fa-search', event: 'window.open(`https://cn.bing.com/search?q=${__text__}`)', group: 'seletctText'} #- {id: 'googleSearch', name: '谷歌搜索', icon: 'fa-solid fa-search', event: 'window.open(`https://www.google.com/search?q=${__text__}`)', group: 'seletctText'} # 链接判断组件 # 生效于链接处的右键行为,__link__ 为链接地址 elementCheck: - {id: 'openTab', name: '新标签页打开', icon: 'fa-solid fa-external-link-square-alt', event: 'window.open(__link__)', group: 'elementCheck'} - {id: 'copyLink', name: '复制链接地址', icon: 'fa-solid fa-link', event: 'copyLink', group: 'elementCheck'} # 图片判断类组件 # 生效于图片类的右键行为,__link__ 为链接地址 elementImage: - {id: 'copyImg', name: '复制图片', icon: 'fa-solid fa-image', event: 'copyImg', group: 'elementImage'} - {id: 'googleImg', name: '谷歌识图', icon: 'fa-solid fa-images', event: 'window.open(`https://www.google.com.hk/searchbyimage?image_url=${__link__}`)', group: 'elementImage'} # 文章页面组件 # 生效于 post.article 页面 articlePage: - {id: 'printMode', name: '打印页面', icon: 'fa-solid fa-print', event: 'printMode', group: 'articlePage'} - {id: 'readMode', name: '阅读模式', icon: 'fa-solid fa-book-open', event: 'readMode', group: 'articlePage'} # 右键自定义菜单区域 menus: link: - {id: 'help', name: '常见问题', icon: 'fa-solid fa-question', link: 'https://volantis.js.org/faqs/', group: 'link'} - {id: 'examples', name: '示例博客', icon: 'fa-solid fa-rss', link: 'https://volantis.js.org/examples/', group: 'link'} - {id: 'contributors', name: '加入社区', icon: 'fa-solid fa-fan', link: 'https://volantis.js.org/contributors/', group: 'link'} - hr - {id: 'source_docs', name: '本站源码', icon: 'fa-solid fa-code-branch', link: 'https://github.com/volantis-x/volantis-docs/', group: 'link'} - {id: 'source_theme', name: '主题源码', icon: 'fa-solid fa-code-branch', link: 'https://github.com/volantis-x/hexo-theme-volantis/', group: 'link'} darkMode: - {id: 'darkMode', name: '暗黑模式', icon: 'fa-solid fa-moon', event: 'volantis.dark.toggle()', group: 'darkMode'}### 高级玩法可以利用 Custom Files 自定义文件 功能,实现自定义右键菜单脚本及菜单项控制。 一个在右键菜单中添加 查看上一篇、查看下一篇 菜单项的范例: blog/_config.volantis.ymlblog/source/_volantis/bodyEnd.ejs省略了部分不相关内容rightmenus: order: - menus.prevNext menus: prevNext: - {id: 'prev', name: '查看上一篇', icon: 'fa-solid fa-angles-left', event: "volantis.rightmenu.jump('prev')", group: 'prevNext'} - {id: 'next', name: '查看下一篇', icon: 'fa-solid fa-angles-right', event: "volantis.rightmenu.jump('next')", group: 'prevNext'}为了方便管理,将函数挂在 volantis.rightmenu 对象下<script> volantis.rightmenu.jump = (type) => { const selector = type === 'prev' ? 'article .prev-next a.prev' : 'article .prev-next a.next'; const item = document.querySelector(selector); if(!!item) { if(typeof pjax !== 'undefined') { pjax.loadUrl(item.href) } else { window.location.href = item.href; } } } volantis.rightmenu.handle(() => { const prev = document.querySelector('#prev').parentElement, next = document.querySelector('#next').parentElement, articlePrev = document.querySelector('article .prev-next a.prev p.title'), articleNext = document.querySelector('article .prev-next a.next p.title'); prev.style.display = articlePrev ? 'block' : 'none'; prev.title = articlePrev ? articlePrev.innerText : null; next.style.display = articleNext ? 'block' : 'none'; next.title = articleNext ? articleNext.innerText : null; }, 'prevNext', false) </script> 设置网站导航栏导航栏配置导航栏分为 logo、menu、search 三个区域设置,其中 logo 区域如果设置了图片,则不能显示图标和标题, menu 区域的设置可以写在一个单独的文件中。 blog/_config.volantis.yml############################### Navigation Bar ############################### > start# 注意事项:建议规范全站路径 URL 最后带一个 "/" 例如 "about/"navbar: visiable: auto # always, auto logo: # choose [img] or [icon + title] img: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png icon: title: menu: - name: 博客 icon: fa-solid fa-rss url: / - name: 分类 icon: fa-solid fa-folder-open url: categories/ - name: 标签 icon: fa-solid fa-tags url: tags/ - name: 归档 icon: fa-solid fa-archive url: archives/ - name: 友链 icon: fa-solid fa-link url: friends/ - name: 关于 icon: fa-solid fa-info-circle url: about/ search: Search... # Search bar placeholder############################### Navigation Bar ############################### > end 菜单嵌套导航栏菜单支持嵌套,嵌套的属性名为 rows ,写法示例: ...- name: 更多 icon: fa-solid fa-ellipsis-v rows: - name: 主题源码 url: https://github.com/volantis-x/hexo-theme-volantis/ - name: 更新日志 url: https://github.com/volantis-x/hexo-theme-volantis/releases/ - name: hr - name: 有疑问? rows: - name: 看 FAQ url: faqs/ - name: 看 本站源码 url: https://github.com/volantis-x/volantis-docs/ - name: 提 Issue url: https://github.com/volantis-x/hexo-theme-volantis/issues/ - name: hr - name: 公告和测试博文 url: archives/ - name: 示例博客 url: examples/ - name: 特别感谢 url: contributors/ 分割线在子菜单中,新增一个只有 name: hr 的“菜单”就会被渲染成一个分割线。 - name: hr 小标题在子菜单中,新增一个只有 name: 小标题内容(也可以有 icon: 小标题的图标)的“菜单”就会被渲染成一个小标题。 ...- name: 近期 icon: fa-solid fa-clock url: / rows: - name: 热门文章 icon: fa-solid fa-fire - name: ProHUD 开源库的设计思路 url: blog/2019-08-27-prohud/ - name: ValueX:实用的安全对象类型转换库 url: blog/2019-08-29-valuex/ - name: 心率管家 App 的设计与开发 url: blog/2019-07-23-heartmate/ 播放器在子菜单中,新增一个 icon: fa-solid fa-compact-disc 的“菜单”就会被渲染成一个 APlayer 播放器。 - name: 背景音乐 icon: fa-solid fa-compact-disc 设置网站页脚您通过 layout 可以自由布局网站页脚内容 aplayer, social, license, info, copyright。 blog/_config.volantis.ymlsite_footer: # layout of footer: [aplayer, social, license, info, copyright] layout: [aplayer, social, license, info, copyright] social: - icon: fas fa-rss url: atom.xml - icon: fas fa-envelope url: mailto:me@xaoxuu.com - icon: fab fa-github url: https://github.com/xaoxuu - icon: fas fa-headphones-alt url: https://music.163.com/#/user/home?id=63035382 copyright: '[Copyright © 2017-2021 XXX](/)' # You can add your own property here. (Support markdown, for example: br: '<br>') br: '<br>' 其中,aplayer 需要在插件部分设置中启用。您可以新增文字属性,用于展示其它文字信息,例如: blog/_config.volantis.ymlsite_footer: layout: [..., br, hello, ...] ... # You can add your own property here. (Support markdown, for example: br: '<br>') br: '<br>' hello: '[Hello World](/)' 网站与文章封面封面高度blog/_config.volantis.ymlcover: height_scheme: full # full, half ... 目前主题提供两种首页封面高度方案,其它页面均为半屏幕高度。 封面布局方案blog/_config.volantis.ymlcover: ... scheme: dock # search (搜索), dock (坞), featured (精选), focus (焦点) ... 布局方案 适合场景 search 注重搜索 dock 入口选项比较多 featured 选项在4个左右 focus 选项在4个左右 默认显示设置blog/_config.volantis.ymlcover: ... display: home: true archive: false others: false # can be written in front-matter 'cover: true' 由于主页、归档是 hexo 自动生成的,您需要在主题配置文件中设置是否显示封面,而其它页面则可以在 front-matter 中通过设置 cover: true/false 来决定显示封面或者不显示封面。 文章布局配置 查看所有相关配置 ############################### Article Layout ############################### > start# 文章布局article: # 文章列表页面的文章卡片布局方案 preview: scheme: landscape # landscape # pin icon for post pin_icon: volantis-static/media/twemoji/assets/svg/1f4cc.svg # https://cdn.jsdelivr.net/gh/twitter/twemoji@13.0/assets/svg/1f4cc.svg # auto generate title if not exist auto_title: true # false, true # auto generate excerpt if not exist auto_excerpt: true # false, true # hide excerpt hide_excerpt: false # show split line or not line_style: solid # hidden, solid, dashed, dotted # show author author: false # true, false # show readmore button readmore: auto # auto, always # 文章详情页面的文章卡片本体布局方案 body: # 文章顶部信息 # 从 meta_library 中取 top_meta: [author, category, date, counter] #启用评论数量需在此添加 # 文章底部信息 # 从 meta_library 中取 bottom_meta: [updated, tags, share] # ---------------- # 文章页脚组件 footer_widget: # ---------------- # 参考资料、相关资料等 (for layout: post/docs) references: title: 参考资料 icon: fa-solid fa-quote-left # 在 front-matter 中: # references: # - title: 某篇文章 # url: https:// # 即可显示此组件。 # ---------------- # 相关文章,需要安装插件 (for layout: post) # npm i hexo-related-popular-posts related_posts: enable: false title: 相关文章 icon: fa-solid fa-bookmark max_count: 5 # 设为空则不使用文章头图 placeholder_img: https://gcore.jsdelivr.net/gh/MHG-LAB/cron@gh-pages/bing/bing.jpg # ---------------- # 版权声明组件 (for layout: post) copyright: enable: false permalink: '本文永久链接是:' content: - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议' - permalink # 自定义版权组件:精细到文章的版权声明 custom: false # 开启后替代上方内容的版权显示 customData: default: type1 # 默认授权声明 ############################# # 你可以在文章的 front-matter 覆盖默认版权声明 # 配置示例(均可选): # copyright: # type: type3 # 当前文章版权声明类型 # author: 张三 # 本文作者 # ref: # 原文出处 # title: # 原文出处 - 标题 # url: # 原文出处 - 链接 ############################# rules: type1: text: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh#" target="_blank">CC BY-NC-SA 4.0</a> desc: 署名-非商业性使用-相同方式共享 4.0 国际。 type2: text: 禁止转载引用 desc: 除非获得原作者的单独授权,任何第三方不得转载! type3: text: 原作许可协议 desc: 本文转载自他站,转载或引用本文时,请遵守原作许可协议! type4: text: 来自互联网 desc: 本文来自互联网,未知来源,侵权请联系删除。 type5: text: 允许规范转载 desc: 转载请保留本文转载地址,著作权归作者所有! type6: text: 允许付费转载 desc: 您可以联系作者通过付费方式获得授权。 # 还能自行添加更多 # ---------------- # 打赏组件 (for layout: post) donate: enable: false images: - volantis-static/media/org.volantis/blog/qrcode/github@volantis.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png - volantis-static/media/org.volantis/blog/qrcode/github@volantis.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png # meta library meta_library: # 默认文章作者(可在 _data/author.yaml 中增加其他作者,并在 front-matter 中设置) # https://volantis.js.org/advanced-settings/#多人协同 author: avatar: volantis-static/media/org.volantis/blog/favicon/apple-touch-icon.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png name: 请设置文章作者 url: / # 文章创建日期 date: icon: fa-solid fa-calendar-alt title: '发布于:' format: 'll' # 日期格式 http://momentjs.com/docs/ # 文章更新日期 updated: icon: fa-solid fa-edit title: '更新于:' format: 'll' # 日期格式 http://momentjs.com/docs/ # 文章分类 category: icon: fa-solid fa-folder-open # 文章浏览计数 counter: icon: fa-solid fa-eye unit: '次浏览' # waline 文章评论数量 walinecount: icon: fa-solid fa-comment-dots desc: '条评论' # 条评论 # artalk 文章评论数量 artalkcount: icon: fa-solid fa-comment-dots desc: '条评论' # 条评论 # 文章字数和阅读时长 wordcount: icon_wordcount: fa-solid fa-keyboard icon_duration: fa-solid fa-hourglass-half # 文章标签 tags: icon: fa-solid fa-hashtag # 分享 share: - id: qq img: volantis-static/media/org.volantis/logo/128/qq.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png - id: qzone img: volantis-static/media/org.volantis/logo/128/qzone.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png - id: weibo img: volantis-static/media/org.volantis/logo/128/weibo.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png - id: # qrcode # 当id为qrcode时需要安装插件 npm i hexo-helper-qrcode img: # volantis-static/media/org.volantis/logo/128/wechat.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png - id: # telegram img: # volantis-static/media/org.volantis/logo/128/telegram.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/telegram.png############################### Article Layout ############################### > end 其中 top_meta 和 bottom_meta 部分的取值自 meta_library 库。 侧边栏配置侧边栏小组件与 meta 库不同的是:除了现有的 widget ,您可以很轻易地创建自己的 widget ,然后放在需要的地方。此外,您还可以将 widget 写在单独的文件中。 查看所有相关配置 blog/_config.volantis.yml############################### Sidebar ############################### > startsidebar: position: right # left right # 主页、分类、归档等独立页面 for_page: [blogger, category, tagcloud, donate] # layout: docs/post 这类文章页面 for_post: [toc] # 侧边栏组件库 widget_library: # --------------------------------------- # blogger info widget blogger: class: blogger display: [desktop, mobile] # [desktop, mobile] avatar: volantis-static/media/org.volantis/blog/Logo-NavBar@3x.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png shape: rectangle # circle, rectangle url: /about/ title: subtitle: jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails. social: - icon: fa-solid fa-rss url: /atom.xml - icon: fa-solid fa-envelope url: mailto:me@xxx.com - icon: fab fa-github url: https://github.com/volantis-x/ - icon: fa-solid fa-headphones-alt url: / # --------------------------------------- # toc widget (valid only in articles) toc: class: toc display: [desktop, mobile] # [desktop, mobile] sticky: true header: icon: fa-solid fa-list title: 本文目录 list_number: false min_depth: 2 max_depth: 5 # --------------------------------------- # music music: class: music display: [desktop, mobile] # [desktop, mobile] pjaxReload: false # --------------------------------------- # category widget category: class: category display: [desktop] # [desktop, mobile] header: icon: fa-solid fa-folder-open title: 文章分类 url: /blog/categories/ # --------------------------------------- # tagcloud widget tagcloud: class: tagcloud display: [desktop, mobile] # [desktop, mobile] header: icon: fa-solid fa-tags title: 热门标签 url: /blog/tags/ min_font: 14 max_font: 24 color: true start_color: '#999' end_color: '#555' # --------------------------------------- # qrcode widget qrcode: class: qrcode display: [desktop, mobile] # [desktop, mobile] height: 64px # Automatic height if not set images: - volantis-static/media/org.volantis/blog/qrcode/github@volantis.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png - volantis-static/media/org.volantis/blog/qrcode/github@volantis.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png # --------------------------------------- # webinfo widget webinfo: class: webinfo display: [desktop] header: icon: fa-solid fa-award title: 站点信息 type: article: enable: true text: '文章数目:' unit: '篇' runtime: enable: false data: '2020/01/01' # 填写建站日期 text: '已运行时间:' unit: '天' wordcount: enable: false text: '本站总字数:' # 需要启用 wordcount unit: '字' visitcounter: enable: true siteuv: text: '本站访客数:' unit: '人' sitepv: text: '本站总访问量:' unit: '次' lastupd: enable: true friendlyShow: true # 更友好的时间显示 text: '最后活动时间:' unit: '日' # --------------------------------------- # lastupdate widget lastupdate: class: lastupdate display: [desktop, mobile] header: icon: fa-solid fa-clock WISTERIA title: 最近更新############################### Sidebar ############################### > end 每一个小部件都有 class 和 display,前者代表这个小部件是什么,后者代表这个小部件在什么桌面和移动平台中是否显示,如果在移动平台显示,由于屏幕宽度有限,侧边栏的小部件则会被移动到正文区域下方,因此部分侧边栏小部件便失去意义,建议设置为仅桌面端显示。 小部件名: class: 小部件类别 display: [小部件在桌面端是否显示, 小部件在移动设备是否显示] pjaxReload: true # 是否 pjax 重载 默认 true; 设置为 false 时 确保所有页面都含有该小部件 sticky: true # 是否开启粘性定位,默认 false;设置为 true 时固定在屏幕中 博主信息部件blog/_config.volantis.ymlblogger: class: blogger display: [desktop] # [desktop, mobile] avatar: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png title: subtitle: jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails. social: true 其中,今日诗词 jinrishici 如果设置为一个字符串,这个字符串会变成占位文字,加载失败时显示。如果不需要,就请设置为 jinrishici: false。social 的具体内容请在网站页脚部分设置。 文章目录部件blog/_config.volantis.ymltoc: class: toc display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-list title: 本文目录 list_number: false min_depth: 2 max_depth: 5 这个部件只能放置在侧边栏,并且在文章中有效。在移动设备中预览时,手指向上滑动时,导航栏右边会出现 TOC 按钮,点击即可展开 TOC 部件。如果您需要显示章节序号,请设置 list_number。 min_depth 和 max_depth 代表 TOC 支持的标题层级,最大范围是2~6。 文章分类部件blog/_config.volantis.ymlcategory: class: category display: [desktop] # [desktop, mobile] header: icon: fas fa-folder-open title: 文章分类 url: /blog/categories/ 这个部件可以直接显示所有文章分类,如果您希望有一个独立的页面来展示,需要自己创建一个文件,具体操作在「页面」部分文档中。 标签云部件blog/_config.volantis.ymltagcloud: class: tagcloud display: [desktop] # [desktop, mobile] header: icon: fas fa-tags title: 热门标签 url: /blog/tags/ min_font: 14 max_font: 24 color: true start_color: '#999' end_color: '#555' 这个部件可以直接显示所有文章的标签,如果您希望有一个独立的页面来展示,需要自己创建一个文件,具体操作在「页面」部分文档中。 二维码部件blog/_config.volantis.ymldonate: class: qrcode display: [desktop, mobile] # [desktop, mobile] height: 64px # Automatic height if not set images: - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png - https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/qrcode/github@volantis.png 您可以放置在文章页脚用于展示打赏图片,也可以放置在侧边栏。 通用文本部件blog/_config.volantis.ymlrepos: class: text display: [desktop] # [desktop, mobile] header: icon: fab fa-github title: 点个赞吧 url: https://github.com/xaoxuu/ content: - '您的赞对我来说很重要,如果您喜欢本主题,希望能够给下面的项目点个赞来支持一下。' - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">](https://github.com/xaoxuu/ProHUD)' - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px">](https://github.com/xaoxuu/ValueX)' - '[<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px">](https://github.com/xaoxuu/Inspire)' 您可以创建用于展示任何文本内容的文本部件。 通用列表部件blog/_config.volantis.ymlwiki-hexo-theme: class: list display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-chevron-left title: Hexo Themes url: /wiki/ rows: - name: Volantis for Hexo url: /wiki/volantis/ - name: Resume for Hexo url: /wiki/resume/ 您可以创建用于展示任何链接列表的列表部件。列表的 rows 中的每一项支持的属性有: name、url、icon、img、avatar,其中 img 是方形图片的链接,avatar 是圆形图片的链接。 组索引这个部件的布局继承自 list 部件,用于展示文章所属的分组的文章列表。请将您的 Volantis 升级至 2.5 版本以上使用。 blog/_config.volantis.ymlgroup-1: class: group display: [desktop, mobile] # [desktop, mobile] header: icon: fab fa-github title: Git url: /wiki/git/ 在文章的 front-matter 中设置: front-mattergroup: group-1order: 16sidebar: [group-1, toc] 「group-1」卡片将会以列表的形式显示所有设置了 group: group-1 的文章,顺序按照 order 从小到大排列。 通用网格部件blog/_config.volantis.ymlfeedback: class: grid display: [desktop, mobile] header: icon: fas fa-headset title: 联系开发者 url: https://github.com/volantis-x/hexo-theme-volantis fixed: true # 固定宽度 rows: - name: 反馈BUG icon: fas fa-bug url: https://github.com/volantis-x/hexo-theme-volantis/issues/ - name: 疑问求助 icon: fas fa-question-circle url: https://github.com/volantis-x/hexo-theme-volantis/issues/ - name: 提个建议 icon: fas fa-lightbulb url: https://github.com/volantis-x/hexo-theme-volantis/issues/ 您可以创建用于展示任何链接列表的网格部件。网格默认根据文字长度自动确定每一个格子的宽度,如果文字长短不一,建议通过设置 fixed: true 来固定宽度,此时文字过长的格子中的文字会换行显示。 通用页面部件blog/_config.volantis.ymltest: class: page display: [desktop, mobile] pid: haha content: excerpt # excerpt, more, content 您可以把整个页面的md内容作为一个小部件渲染显示出来。只需要设置小部件里的 pid 属性和文章的 front-matter 中设置一样的 pid 即可。 content 代表这个部件显示的内容,可选 excerpt,more,content 分别对应文章的摘要、摘要后面的内容、全文。 音乐部件blog/_config.volantis.ymlmusic: class: music display: [desktop, mobile] # [desktop, mobile] pjaxReload: false 选择评论系统目前共支持 14 款评论系统: artalk, giscus, beaudar, utterances, twikoo, waline, discuss, disqus, disqusjs, gitalk, vssue, livere, isso, hashover blog/_config.volantis.ymlcomments: title: <i class='fas fa-comments'></i> 评论 subtitle: service: giscus GitHub Discussions 系列 giscus A comments system powered by GitHub Discussions. https://giscus.app/blog/_config.volantis.ymlcomments: ... service: giscus ... # giscus # https://giscus.app # https://github.com/laymonage/giscus giscus: # 以下配置按照 yml 格式增删填写即可 # repo: xxx/xxx # repo-id: xxx # category: xxx # category-id: xxx # mapping: "pathname" # reactions-enabled: "1" # emit-metadata: "0" # lang: "zh-CN" # 以上配置按照 yml 格式增删填写即可 theme: light: "light" # https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/light.css dark: "dark" # https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@master/css/giscus/dark.css GitHub Issues 系列 beaudarutterancesVssueGitalk Beaudar 名称源于粤语“表达”的发音,是 Utterances 的中文版本。 https://beaudar.lipk.org/blog/_config.volantis.ymlcomments: ... service: beaudar ... # beaudar # https://beaudar.lipk.org/ beaudar: repo: xxx/xxx issue-term: pathname issue-number: branch: main position: top order: desc theme: light: github-light dark: github-dark label: ✨💬✨ A lightweight comments widget built on GitHub issues. https://utteranc.es/blog/_config.volantis.ymlcomments: ... service: utterances ... # utterances # https://utteranc.es/ utterances: repo: xxx/xxx issue-term: pathname issue-number: theme: light: github-light dark: github-dark label: ✨💬✨ Vue 驱动的、基于 Issue 的评论插件 https://vssue.js.org/zh/blog/_config.volantis.ymlcomments: ... service: vssue ... vssue: owner: repo: clientId: clientSecret: A modern comment component based on Github Issue and Preact. https://gitalk.github.io/blog/_config.volantis.ymlcomments: ... service: gitalk ... gitalk: clientID: clientSecret: repo: owner: admin: # []clientID 和 clientSecret 的获取方法可自行搜索教程,这里仅简单描述一下步骤:点击 GitHub -> Settings https://github.com/settings/profile点击 Developer settings https://github.com/settings/developers点击 New OAuth App https://github.com/settings/applications/new填写信息:Application name 随便填,我的是:xaoxuu.comHomepage URL 和 Authorization callback URL 都写你的网址,我的是:https://xaoxuu.com可以通过设置 gitalk.id 实现多个页面共用一个评论框。front-matter---gitalk: id: /wiki/volantis/--- Disqus 系列 DisqusDisqusJSIsso Disqus - The #1 way to build an audience on your website. https://disqus.com/blog/_config.volantis.ymlcomments: ... service: disqus ... disqus: shortname:可以通过设置 disqus.path 实现多个页面共用一个评论框。front-matter---disqus: path: /wiki/volantis/--- Render Disqus comments in Mainland China using Disqus API https://github.com/SukkaW/DisqusJSblog/_config.volantis.ymlcomments: ... service: disqusjs ... # DisqusJS # https://github.com/SukkaW/DisqusJS disqusjs: path: # 全局评论地址 # 配置项按照yml格式继续填写即可 除了 [siteName url identifier] 选项 #shortname: #api: #apikey: #admin: #nesting: A commenting server similar to Disqus. https://posativ.org/isso/blog/_config.volantis.ymlcomments: ... service: isso ... isso: url: https://example.com/(path/) src: https://example.com/(path/)js/embed.min.js Valine 衍生系列 Valine 在 5.0 版本被移除,具体原因可参考hexo-theme-next#188#issuecomment-766578906以下是在解决 valine 遗留问题同一时期产生的评论系统故归为一类, 然在其社区issue中也报告了类似的攻击事件(eg: twikoo#157 waline#424 waline#430),故请谨慎选择.discusstwikooWaline 一款简单,安全,免费的评论系统 | A simple, safe, free comment system https://discuss.js.orgblog/_config.volantis.ymlcomments: ... service: discuss ... # Discuss # https://discuss.js.org discuss: serverURLs: # Discuss server address url # https://discuss.js.org/Quick-Start.html#path其中,placeholder 支持在 front-matter 中设置。front-matter---discuss: placeholder: 你觉得xxx怎么样呢?---也可以通过设置 discuss.path 实现多个页面共用一个评论框。front-matter---discuss: path: /--- 一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system. https://twikoo.js.org/blog/_config.volantis.ymlcomments: ... service: twikoo ... twikoo: path: # 全局评论地址 # 其他配置项按照yml格式继续填写即可 除了 [el path] 选项 envId: xxxxxxxxxxxxxxx # 腾讯云环境id其中,placeholder 支持在 front-matter 中设置。front-matter---twikoo: placeholder: 你觉得xxx怎么样呢?---也可以通过设置 twikoo.path 实现多个页面共用一个评论框。front-matter---twikoo: path: /--- 一个简洁、安全、免费的静态网站评论系统 | A simple, safe, free comment system. https://waline.js.org/blog/_config.volantis.ymlcomments: ... service: waline ... # Waline # https://waline.js.org/ waline: path: # 全局评论地址 目前设置全局评论地址后visitor失效,这是waline的问题 placeholder: 快来评论吧~ # 评论占位提示 imageHosting: https://7bu.top/api/upload # 图床api(默认使用去不图床) # 其他配置项按照yml格式继续填写即可 除了 [el path placeholder uploadImage] 选项 serverURL: xxxxxxxxxxxxxxx # Waline 的服务端地址(必填) 测试用地址: https://waline-ruddy.vercel.app ... 可选配置项详见源码其中,placeholder 支持在 front-matter 中设置。front-matter---waline: placeholder: 你觉得xxx怎么样呢?---也可以通过设置 waline.path 实现多个页面共用一个评论框。front-matter---waline: path: /--- Others 其他系列 ArtalkLivereHashoverMore... 一款简洁的自托管评论系统 | A Selfhosted Comment System. https://artalk.js.org/blog/_config.volantis.ymlcomments: ... service: artalk ... artalk: server: http://127.0.0.1:8080/api # 修改为自建的后端服务地址其中,placeholder 支持在 front-matter 中设置。front-matter---artalk: placeholder: 你觉得xxx怎么样呢?---也可以通过设置 artalk.path 实现多个页面共用一个评论框。front-matter---artalk: path: /--- Communication makes better world. https://www.livere.com/blog/_config.volantis.ymlcomments: ... service: livere ... livere: uid: #你的livere的uid在这里查看你的 uid:https://livere.com/insight/myCode,在【代码管理 -> 一般网站】中找到如下这段代码,其中 data-uid 中的内容就是你的 livere_uid。<!-- 来必力City版安装代码 --><div id="lv-container" data-id="city" data-uid="你的livere的uid">... A free and open source PHP comment system designed to allow completely anonymous comments and easy theming. https://www.barkdull.org/software/hashoverblog/_config.volantis.ymlcomments: ... service: hashover ... hashover: src: https://example.com/(path/)comments.phpblog/themes/volantis/layout/_third-party/comments/评论系统名称/layout.ejs这里写布局代码blog/themes/volantis/layout/_third-party/comments/评论系统名称/script.ejs这里要写加载 js 的代码收录更多评论系统 可以通过在 front-matter 设置 config 实现在特定页面修改评论系统的相关配置。 支持的有(按字母顺序): discuss, giscus, gitalk, twikoo, waline front-matter---gitalk: config: id: /233/--- 站内搜索 配置代码 blog/_config.volantis.yml# To use hexo search, you need to install the following plugins:# npm i hexo-generator-json-contentsearch: enable: true service: hexo # hexo, algolia, meilisearch algolia: searchAsYouType: true # If false, triggers the search only on submit. hitsPerPage: 5 # Set the number of hits per page. placeholder: 'Search...' # The placeholder text of the input. meilisearch: placeholder: 'Search...' searchKey: '' indexName: '' hostUrl: '' Hexo 搜索Algolia 搜索MeiliSearch 搜搜 你需要安装 hexo-generator-json-content,并根据它的文档去做相应配置。 修改 主题配置文件。 blog/_config.volantis.ymlsearch: enable: true service: hexo 你需要安装 hexo-algoliasearch 或 hexo-algolia,根据它们的说明文档去做相应的配置。 修改 主题配置文件。 blog/_config.volantis.ymlsearch: enable: true service: algolia 如果你使用 hexo-algoliasearch,请记得配置 fields 参数的 title, permalink 和 content:strip MeiliSearch 为自托管搜索引擎,需要服务器支撑,部署文档详见:Meilisearch Doc。 数据集需要自行上传,可使用 hexo-generator-json-content 生成索引,同时配置修改如下: blog/_config.ymljsonContent: meta: false pages: false posts: title: true path: true text: true uuid: true # <--- 做主键 你需要为文章分配一个唯一 ID 作为主键,此处推荐使用 hexo-uuid 生成。 修改 主题配置文件。 blog/_config.volantis.ymlsearch: enable: true service: meilisearch 原 google, azure, baidu 站内搜索 系祖传代码, 且文档丢失, 不便后续维护 在 5.0 版本移除 插件库概述Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭,无需进行设置。 幻灯片背景(视差滚动效果)jquery.backstretch 在 5.0 版本 移除, 被 parallax 替代 blog/_config.volantis.ymlplugins: ... parallax: enable: true position: cover # cover: sticky on the cover. fixed: Fixed as background for the site. shuffle: true # shuffle playlist duration: 10000 # Duration (ms) fade: 1500 # fade duration (ms) (Not more than 1500) images: # For personal use only. At your own risk if used for commercial purposes !!! - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg ... 幻灯片背景图片显示的位置可以选择粘贴在封面上,跟随封面一起滑动,也可以选择固定作为网页背景图片。 语法高亮blog/_config.volantis.ymlplugins: ... # 代码高亮 code_highlight: highlightjs # highlightjs or prismjs # highlight.js highlightjs: copy_code: true # 如果开启以下配置, hexo.config.highlight.enable 需要设置为 false ; hexo.config.highlight.enable 设置为 true, 则以下配置无效 # # 不再支持 v11.1.0 以下版本 # js: https://unpkg.com/@highlightjs/cdn-assets@11.5.1/highlight.min.js # Please set hexo.config.highlight.enable = false !!! # css: https://unpkg.com/@highlightjs/cdn-assets@11.5.1/styles/default.min.css # # # more: https://www.jsdelivr.com/package/npm/@highlightjs/cdn-assets?path=styles # prismjs # https://prismjs.com/ # https://hexo.io/zh-cn/docs/syntax-highlight#PrismJS prismjs: copy_code: true # Please set hexo.config.highlight.enable = false !!! set hexo.config.prismjs.enable = true !!! js: - https://unpkg.com/prismjs/components/prism-core.min.js - https://unpkg.com/prismjs/plugins/autoloader/prism-autoloader.min.js - https://unpkg.com/prismjs/plugins/line-numbers/prism-line-numbers.min.js css: - https://unpkg.com/prismjs/themes/prism-dark.css - https://unpkg.com/prismjs/plugins/line-numbers/prism-line-numbers.css 如果需要使用 highlight.js 进行语法高亮,请将站点配置文件中的 highlight.enable 设置为 false 否则不会加载插件。您可以在 94 种 语法高亮主题 中挑选喜爱的主题,然后替换上面的 css 链接。 如果您使用 highlight.js 请确保没有使用 hexo 官方的 codeblock 标签,否则会报错。 经测试,使用 highlight.js 的情况下,部分容器内的代码可能仍然会被渲染甚至报错。 APlayer 音乐播放器blog/_config.volantis.ymlplugins: ... # APlayer is only available in mainland China. # APlayer config: https://github.com/metowolf/MetingJS aplayer: enable: true # Required server: netease # netease, tencent, kugou, xiami, baidu type: playlist # song, playlist, album, search, artist id: 3175833810 # song id / playlist id / album id / search keyword # Optional fixed: false # enable fixed mode theme: '#1BCDFC' # main color autoplay: false # audio autoplay order: list # player play order, values: 'list', 'random' loop: all # player loop play, values: 'all', 'one', 'none' volume: 0.7 # default volume, notice that player will remember user setting, default volume will not work after user set volume themselves list_max_height: 320px # list max height list_folded: true autoHide: true # hide automaticaly APlayer播放器只可以在中国大陆地区使用。相关文档: APlayer | MetingJS 暗黑模式blog/_config.volantis.ymlplugins: ... # 暗黑模式 darkmode # 开关按钮:在 navbar.menu 中添加: # - name: 暗黑模式 # 可自定义 # icon: fas fa-moon # 可自定义 # toggle: darkmode darkmode: enable: true 结束支持blog/_config.volantis.ymlplugins: ... # 旧版 Internet Explorer 淘汰行动 # https://www.microsoft.com/zh-cn/WindowsForBusiness/End-of-IE-support # 本主题不支持Internet Explorer的任何版本!!! killOldVersionsOfIE: enable: true # 禁用JavaScript提示 # 本页面需要浏览器支持(启用)JavaScript # 主题中的某些插件必须启用JavaScript才能正常工作,例如开启scrollreveal如果禁用JavaScript会导致卡片消失 killNoScript: enable: true Artitalkblog/_config.volantis.ymlplugins: ... # Artitalk https://artitalk.js.org # 配置过程请参考:https://artitalk.js.org/doc.html # 使用过旧版本的请修改Leancloud shuoshuo class部分列名:https://artitalk.js.org/release.html # 除appID和appKEY外均为选填项 artitalk: # Set `plugins: ["artitalk"]` to enable in front-matter # 不支持 Pjax # 配置项按照yml格式继续填写即可 appId: ogP8qj3veMh0LFpFWMPOyF0X-MdYXbMMI # your appID appKey: nHXLd3N3Jgh460t2iRQKWAtr # your appKEY # serverURL: #leancloud绑定的api访问域名,使用国际版的话不需要填写 # lang: # 语言设置,zh为汉语,en为英语,es为西班牙语。默认为汉语 # pageSize: #每页说说的显示数量 # shuoPla: #在编辑说说的输入框中的占位符 # avatarPla: #自定义头像url的输入框的占位符 # motion: #加载动画的开关,1为开,0为关,默认为开 # bgImg: #说说输入框背景图片url # color1: #说说背景颜色1&按钮颜色1 # color2: #说说背景颜色2&按钮颜色2 # color3: #说说字体颜色 # cssUrl: #自定义css接口 BBtalkblog/_config.volantis.ymlplugins: ... # BBtalk https://bb.js.org bbtalk: # Set `plugins: ["bbtalk"]` to enable in front-matter # 支持 Pjax js: https://cdn.jsdelivr.net/npm/bbtalk@0.1.5/dist/bbtalk.min.js # BBtalk.js appId: 0KzOX4vC7Jsk6vzUGNeEiUaI-gzGzoHsz # your appID appKey: HwCiWuxfpvKiLm4teCUgTIba # your appKEY serverURLs: https://bbapi.heson10.com # Request Api 域名 Tidioblog/_config.volantis.ymlplugins: ... # 聊天功能 chat_service: tidio # tidio or gitter # Tidio # https://www.tidio.com/ tidio: id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 友链朋友圈blog/_config.volantis.ymlplugins: ... # 友链朋友圈 hexo-circle-of-friends # https://github.com/Rock-Candy-Tea/hexo-circle-of-friends # https://fcircle-doc.js.cool/ fcircle: # Set `plugins: ["fcircle"]` to enable in front-matter # 支持 Pjax private_api_url: https://fcircle-api.example.com/ # api 地址 page_turning_number: 10 # 点击加载更多时,一次最多加载几篇文章,默认10 error_img: https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c # 头像加载失败时,默认头像地址 sort_rule: updated # 进入页面时第一次的排序规则,可选值:created/updated app: https://unpkg.com/imgscdn@1.1.33/fcircle/app.min.js # app.min.js的url bundle: https://unpkg.com/imgscdn@1.1.33/fcircle/bundle.js # bundle.js的url 消息提示blog/_config.volantis.ymlplugins: ... # 消息提示 # izitoast message: enable: true icon: # 默认图标,支持对图标添加颜色,可选值:see:/source/css/_style/_plugins/fontcolor.styl default: fa-solid fa-info-circle light-blue quection: fa-solid fa-question-circle light-blue time: # 默认持续时间 default: 5000 quection: 20000 position: 'topRight' # 弹出位置 可选值:topRight, bottomRight, bottomLeft, topLeft, topCenter, bottomCenter, center transitionIn: 'bounceInLeft' # 弹窗打开动画 可选值:bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX transitionOut: 'fadeOutRight' # 弹窗关闭动画 可选值:fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX titleColor: 'var(--color-text)' # 标题颜色 messageColor: 'var(--color-text)' # 消息颜色 backgroundColor: 'var(--color-card)' # 默认背景色 zindex: 2147483647 # 层级 copyright: # 是否在复制时弹出版权提示,影响范围:ctrl+c、代码块复制按钮、右键复制选项 enable: true title: '知识共享许可协议' message: '请遵守 CC BY-NC-SA 4.0 协议。' icon: 'far fa-copyright light-blue' aplayer: # 是否开启音乐通知;播放、暂停、失败 时的图标 enable: true play: fa-solid fa-play pause: fa-solid fa-pause rightmenu: enable: true # 是否开启右键模块的消息通知 notice: true # 唤醒原右键菜单的通知 轮播标签使用方法参见:swiper blog/_config.volantis.yml# swiper# https://www.swiper.com.cn/swiper: enable: true"}],"posts":[{"title":"提升部署在vercel或netlify的网站在中国的访问速度和稳定性","slug":"blogs/2024-03-15-enhanced-FaaS-in-cn","date":"2024-03-15T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2024-03-15-enhanced-FaaS-in-cn/","link":"https://xingpingcn.top/enhanced-faas-in-cn.html","permalink":"https://volantis.js.org/blogs/2024-03-15-enhanced-FaaS-in-cn/","excerpt":"enhanced-FaaS-in-Chinahttps://github.com/xingpingcn/enhanced-FaaS-in-China 如果你的网站部署在vercel,则把cname记录改为: vercel-cname.xingpingcn.top 如果你的网站部署在netlify,则把cname记录改为: netlify-cname.xingpingcn.top 如果你的网站部署在netlify和vercel上,则把cname记录改为: verlify-cname.xingpingcn.top 使用此dns解析建议:先把cname记录改为官方提供的url,等ssl/tls证书生成之后再把cname记录改为verlify-cname.xingpingcn.top","text":"enhanced-FaaS-in-Chinahttps://github.com/xingpingcn/enhanced-FaaS-in-China 如果你的网站部署在vercel,则把cname记录改为: vercel-cname.xingpingcn.top 如果你的网站部署在netlify,则把cname记录改为: netlify-cname.xingpingcn.top 如果你的网站部署在netlify和vercel上,则把cname记录改为: verlify-cname.xingpingcn.top 使用此dns解析建议:先把cname记录改为官方提供的url,等ssl/tls证书生成之后再把cname记录改为verlify-cname.xingpingcn.top","categories":[],"tags":[],"author":"xingpingcn"},{"title":"免费通过NS1利用监控宝平台实现实时基于不同运营商的故障转移","slug":"blogs/2023-11-08-NS1-failover","date":"2023-11-18T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2023-11-08-NS1-failover/","link":"https://xingpingcn.top/%E5%85%8D%E8%B4%B9%E9%80%9A%E8%BF%87NS1%E5%88%A9%E7%94%A8%E7%9B%91%E6%8E%A7%E5%AE%9D%E5%B9%B3%E5%8F%B0%E5%AE%9E%E7%8E%B0%E5%AE%9E%E6%97%B6%E5%9F%BA%E4%BA%8E%E4%B8%8D%E5%90%8C%E8%BF%90%E8%90%A5%E5%95%86%E7%9A%84%E6%95%85%E9%9A%9C%E8%BD%AC%E7%A7%BB.html","permalink":"https://volantis.js.org/blogs/2023-11-08-NS1-failover/","excerpt":"本教程用到的资源全部都是免费且可持续使用的。NS1.com这个权威DNS服务器能根据ASN、国家或省份、DNS轮询(可加权)等方式解析域名,并且提供了API去控制某个解析(answer)是否响应。监控宝能实时监控网站(通过HTTP、PING、DNS方式等)并输出警告(webhook、Email、短信等),最高监控频率为2分钟。亚马逊的AWS Lambda是一个FaaS平台(serverless),可以作为连接NS1.com和监控宝之间的桥梁,当监控宝检测到网站速度变慢的时候发送信息到AWS Lambda,AWS Lambda得到信息后再传递给NS1.com,速度恢复的时候也是同样的操作。为什么要夹在一个AWS Lambda呢?这是因为监控宝发送的格式是固定的,并不能直接接入到NS1.com。","text":"本教程用到的资源全部都是免费且可持续使用的。NS1.com这个权威DNS服务器能根据ASN、国家或省份、DNS轮询(可加权)等方式解析域名,并且提供了API去控制某个解析(answer)是否响应。监控宝能实时监控网站(通过HTTP、PING、DNS方式等)并输出警告(webhook、Email、短信等),最高监控频率为2分钟。亚马逊的AWS Lambda是一个FaaS平台(serverless),可以作为连接NS1.com和监控宝之间的桥梁,当监控宝检测到网站速度变慢的时候发送信息到AWS Lambda,AWS Lambda得到信息后再传递给NS1.com,速度恢复的时候也是同样的操作。为什么要夹在一个AWS Lambda呢?这是因为监控宝发送的格式是固定的,并不能直接接入到NS1.com。","categories":[],"tags":[],"author":"xingpingcn"},{"title":"使用freecdn-js提高hexo博客的cdn稳定性","slug":"blogs/2023-10-01-enhanced-cdn","date":"2023-10-01T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2023-10-01-enhanced-cdn/","link":"https://xingpingcn.top/%E4%BD%BF%E7%94%A8freecdn-js%E6%8F%90%E9%AB%98hexo%E5%8D%9A%E5%AE%A2%E7%9A%84cdn%E7%A8%B3%E5%AE%9A%E6%80%A7.html","permalink":"https://volantis.js.org/blogs/2023-10-01-enhanced-cdn/","excerpt":"由于cdn.jsdelivr.net在国内不太稳定,替代的jsd.cdn.zzko.cn稳定性稍好,但是也不是100%稳定,因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求,但是我的文件(图片、js等)储存在GitHub图床,而freecdn-js本身需要被加速的文件的hash,因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的,所以写了一个正则脚本来提取cdn的链接。","text":"由于cdn.jsdelivr.net在国内不太稳定,替代的jsd.cdn.zzko.cn稳定性稍好,但是也不是100%稳定,因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求,但是我的文件(图片、js等)储存在GitHub图床,而freecdn-js本身需要被加速的文件的hash,因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的,所以写了一个正则脚本来提取cdn的链接。","categories":[],"tags":[],"author":"xingpingcn"},{"title":"为hexo博客添加自适应图片占位图(配合lazyload)","slug":"blogs/2023-09-03-lazyload","date":"2023-09-03T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2023-09-03-lazyload/","link":"https://www.xingpingcn.top/%E4%B8%BAhexo%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0%E8%87%AA%E9%80%82%E5%BA%94%E5%9B%BE%E7%89%87%E5%8D%A0%E4%BD%8D%E5%9B%BE.html","permalink":"https://volantis.js.org/blogs/2023-09-03-lazyload/","excerpt":"我们要得到的结果如封面所示 由于博客采用了图片懒加载(lazyload)插件,在加载dom后和图片加载成功之前,图片占位图为1px的像素,图片加载成功之后,则会把布局撑开,造成布局抖动。如果把和要加载的图片(本博客所有图片都放在了GitHub图床上,所以要用到image-size库访问远程图片)一样大小的占位图替代1px大小的占位图,则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中,这需要修改在生成hexo博客时会用到的fancybox.js(或许每个主题用到的文件里都不一样,但最终都会使用hexo.extend.tag.register()方法;本博客使用volantis主题)。","text":"我们要得到的结果如封面所示 由于博客采用了图片懒加载(lazyload)插件,在加载dom后和图片加载成功之前,图片占位图为1px的像素,图片加载成功之后,则会把布局撑开,造成布局抖动。如果把和要加载的图片(本博客所有图片都放在了GitHub图床上,所以要用到image-size库访问远程图片)一样大小的占位图替代1px大小的占位图,则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中,这需要修改在生成hexo博客时会用到的fancybox.js(或许每个主题用到的文件里都不一样,但最终都会使用hexo.extend.tag.register()方法;本博客使用volantis主题)。","categories":[{"name":"hexo折腾","slug":"hexo折腾","permalink":"https://volantis.js.org/categories/hexo%E6%8A%98%E8%85%BE/"}],"tags":[{"name":"volantis","slug":"volantis","permalink":"https://volantis.js.org/tags/volantis/"}],"author":"xingpingcn"},{"title":"Hexo Volantis Snippets的vscode扩展","slug":"blogs/2023-05-10-hexo-volantis-snippets","date":"2023-05-10T00:00:00.000Z","updated":"2023-05-10T00:00:00.000Z","comments":true,"path":"blogs/2023-05-10-hexo-volantis-snippets/","link":"https://www.qdovo.com/2023/05/10/hexo-volantis-snippets/","permalink":"https://volantis.js.org/blogs/2023-05-10-hexo-volantis-snippets/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"lovelyJason"},{"title":"Aplayer采用本地音源","slug":"blogs/2023-1-18-LocalMusic","date":"2023-01-18T00:00:00.000Z","updated":"2023-01-18T00:00:00.000Z","comments":true,"path":"blogs/2023-1-18-LocalMusic/","link":"https://blog.dearxuan.com/2023/01/07/Volantis%E9%AD%94%E6%94%B9%E6%95%99%E7%A8%8B/#aplayer%E9%87%87%E7%94%A8%E6%9C%AC%E5%9C%B0%E9%9F%B3%E6%BA%90%E9%80%9A%E7%94%A8","permalink":"https://volantis.js.org/blogs/2023-1-18-LocalMusic/","excerpt":"通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题 新的代码仅向metingjs增加了本地音源功能,原有功能保持不变","text":"通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题 新的代码仅向metingjs增加了本地音源功能,原有功能保持不变","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"DearXuan"},{"title":"Volantis魔改教程","slug":"blogs/2023-01-07-VolantisModify","date":"2023-01-07T00:00:00.000Z","updated":"2023-01-17T00:00:00.000Z","comments":true,"path":"blogs/2023-01-07-VolantisModify/","link":"https://blog.dearxuan.com/2023/01/07/Volantis%E9%AD%94%E6%94%B9%E6%95%99%E7%A8%8B/","permalink":"https://volantis.js.org/blogs/2023-01-07-VolantisModify/","excerpt":"暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等 部分内容非Volantis主题也适用 !function(){var l,n,i,r;function a(e){for(var t=document.createDocumentFragment(),l=0;l","text":"暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等 部分内容非Volantis主题也适用 !function(){var l,n,i,r;function a(e){for(var t=document.createDocumentFragment(),l=0;l","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"DearXuan"},{"title":"volantis使用php实现Gitee友链","slug":"blogs/2022-12-26-GiteeFriendsLink","date":"2022-12-26T00:00:00.000Z","updated":"2022-12-26T00:00:00.000Z","comments":true,"path":"blogs/2022-12-26-GiteeFriendsLink/","link":"https://blog.dearxuan.com/2022/12/26/volantis%E4%BD%BF%E7%94%A8php%E5%AE%9E%E7%8E%B0Gitee%E5%8F%8B%E9%93%BE/","permalink":"https://volantis.js.org/blogs/2022-12-26-GiteeFriendsLink/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"DearXuan"},{"title":"配置Volantis 主题遇到的问题和解决","slug":"blogs/2022-12-06-experience","date":"2022-12-06T00:00:00.000Z","updated":"2022-12-06T00:00:00.000Z","comments":true,"path":"blogs/2022-12-06-experience/","link":"https://mengfanjun020906.github.io/2022/12/06/%E7%BB%99%E8%87%AA%E5%B7%B1%E7%9A%84hexo%E5%8D%9A%E5%AE%A2%E4%B8%AA%E6%80%A7%E5%8C%96Volantis%E4%B8%BB%E9%A2%98/","permalink":"https://volantis.js.org/blogs/2022-12-06-experience/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"MengFanjun"},{"title":"volantis新版暗黑模式动画","slug":"blogs/2022-08-18-darkmode-new","date":"2022-08-18T00:00:00.000Z","updated":"2022-08-18T00:00:00.000Z","comments":true,"path":"blogs/2022-08-18-darkmode-new/","link":"https://blog.dearxuan.com/2022/08/18/volantis%E4%B8%BB%E9%A2%98%E8%87%AA%E5%AE%9A%E4%B9%89-%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F%E5%8A%A8%E7%94%BB-2022%E6%96%B0%E7%89%88/","permalink":"https://volantis.js.org/blogs/2022-08-18-darkmode-new/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"DearXuan"},{"title":"好看的网盘链接","slug":"blogs/2022-07-09-pandownjs","date":"2022-05-05T12:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2022-07-09-pandownjs/","link":"https://www.yt-blog.top/20220505/1200/pandown-js/","permalink":"https://volantis.js.org/blogs/2022-07-09-pandownjs/","excerpt":"这不是Node.js包! 这是个javascript的小工具? ↑↑↑和上次一样的开头↑↑↑","text":"这不是Node.js包! 这是个javascript的小工具? ↑↑↑和上次一样的开头↑↑↑","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"cysn"},{"title":"Volantis 多背景图的优化方案","slug":"blogs/2021-11-29-parallax","date":"2021-11-29T00:00:00.000Z","updated":"2022-04-20T00:00:00.000Z","comments":true,"path":"blogs/2021-11-29-parallax/","link":"https://blog.dearxuan.com/2021/11/29/volantis%E5%A4%9A%E8%83%8C%E6%99%AF%E5%9B%BE%E7%9A%84%E4%BC%98%E5%8C%96%E6%96%B9%E6%A1%88/","permalink":"https://volantis.js.org/blogs/2021-11-29-parallax/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"DearXuan"},{"title":"网站自定义字体及推荐","slug":"blogs/2021-09-02-inkss-font","date":"2021-09-02T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2021-09-02-inkss-font/","link":"https://inkss.cn/post/bbb93a9b/","permalink":"https://volantis.js.org/blogs/2021-09-02-inkss-font/","excerpt":"统计一下目前使用的自定义字体及调用。 Volantis 主题可直接参考使用。","text":"统计一下目前使用的自定义字体及调用。 Volantis 主题可直接参考使用。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"inkss"},{"title":"Volantis主题自定义-暗黑模式动画","slug":"blogs/2021-8-29-darkmode","date":"2021-08-25T00:00:00.000Z","updated":"2021-08-25T00:00:00.000Z","comments":true,"path":"blogs/2021-8-29-darkmode/","link":"https://blog.dearxuan.com/2021/08/25/Volantis%E4%B8%BB%E9%A2%98%E8%87%AA%E5%AE%9A%E4%B9%89%E2%80%94%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F%E5%8A%A8%E7%94%BB/","permalink":"https://volantis.js.org/blogs/2021-8-29-darkmode/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"DearXuan"},{"title":"Volantis 主题个性化修改合集","slug":"blogs/2021-08-15-inkss-theme","date":"2021-08-15T00:00:00.000Z","updated":"2021-08-15T00:00:00.000Z","comments":true,"path":"blogs/2021-08-15-inkss-theme/","link":"https://inkss.cn/post/610620a9/","permalink":"https://volantis.js.org/blogs/2021-08-15-inkss-theme/","excerpt":"","text":"","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"inkss"},{"title":"给博客添加捐赠小部件—sponsor-page","slug":"blogs/2021-08-13-sponsor-page","date":"2021-08-13T00:00:00.000Z","updated":"2021-08-13T00:00:00.000Z","comments":true,"path":"blogs/2021-08-13-sponsor-page/","link":"https://kelecn.top/posts/34795/","permalink":"https://volantis.js.org/blogs/2021-08-13-sponsor-page/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"kelecn"},{"title":"使用 pandoc 正确渲染多行 MathJax 公式","slug":"blogs/2021-4-18-pandoc-renderer","date":"2021-04-18T00:00:00.000Z","updated":"2021-04-18T00:00:00.000Z","comments":true,"path":"blogs/2021-4-18-pandoc-renderer/","link":"https://shiraha.cn/2021/use-pandoc-to-render-multiline-formulas-correctly/","permalink":"https://volantis.js.org/blogs/2021-4-18-pandoc-renderer/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"Nanami"},{"title":"为volantis添加瀑布流相册","slug":"blogs/2021-4-14-photos","date":"2021-04-14T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2021-4-14-photos/","link":"https://web.archive.org/web/20220410080025/https://goopher.tk/posts/7.html","permalink":"https://volantis.js.org/blogs/2021-4-14-photos/","excerpt":"经过折腾,目前相册功能可用了,就是还不支持分类和懒加载,等后续完善吧。","text":"经过折腾,目前相册功能可用了,就是还不支持分类和懒加载,等后续完善吧。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"GOOPHER"},{"title":"为volantis添加hls.js以在Chrome上播放m3u8视频","slug":"blogs/2021-4-1-hls","date":"2021-04-01T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2021-4-1-hls/","link":"https://web.archive.org/web/20220410080048/https://goopher.tk/posts/4.html","permalink":"https://volantis.js.org/blogs/2021-4-1-hls/","excerpt":"在文章中插入m3u8视频的时候,由于Chrome等浏览器原生播放不了这种格式,所以需要添加hls.js等让其支持播放,如果你也遇到了这样的问题就来看看吧。","text":"在文章中插入m3u8视频的时候,由于Chrome等浏览器原生播放不了这种格式,所以需要添加hls.js等让其支持播放,如果你也遇到了这样的问题就来看看吧。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"GOOPHER"},{"title":"volantis主题修改代码高亮样式","slug":"blogs/2021-3-31-highlightjs","date":"2021-03-31T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2021-3-31-highlightjs/","link":"https://web.archive.org/web/20220410080207/https://goopher.tk/posts/3.html","permalink":"https://volantis.js.org/blogs/2021-3-31-highlightjs/","excerpt":"在使用主题内的highlightjs的时候,你是否也遇到了它不换行、没有行号等问题?点进来看看吧。","text":"在使用主题内的highlightjs的时候,你是否也遇到了它不换行、没有行号等问题?点进来看看吧。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"GOOPHER"},{"title":"为volantis主题添加图片轮播和热门文章","slug":"blogs/2021-2-30-slider","date":"2021-03-30T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2021-2-30-slider/","link":"https://web.archive.org/web/20220410080335/https://goopher.tk/posts/1.html","permalink":"https://volantis.js.org/blogs/2021-2-30-slider/","excerpt":"这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的,由我将新的轮播模板迁移至主题内,由inkss大佬完善。在这感谢两位大佬,如果你也需要轮播插件,就进来看看吧。","text":"这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的,由我将新的轮播模板迁移至主题内,由inkss大佬完善。在这感谢两位大佬,如果你也需要轮播插件,就进来看看吧。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"GOOPHER"},{"title":"使用volantis更优雅地展示截图/录屏","slug":"blogs/2021-3-7-framei8","date":"2021-03-07T00:00:00.000Z","updated":"2024-03-28T06:49:35.000Z","comments":true,"path":"blogs/2021-3-7-framei8/","link":"https://web.archive.org/web/20220410080247/https://goopher.tk/posts/24004.html","permalink":"https://volantis.js.org/blogs/2021-3-7-framei8/","excerpt":"我在主题文档中看到了frame标签,可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架,想要使用其他的框架就得对齐修改,我经过折腾基本实现了,写下了这篇文章。","text":"我在主题文档中看到了frame标签,可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架,想要使用其他的框架就得对齐修改,我经过折腾基本实现了,写下了这篇文章。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"GOOPHER"},{"title":"通过CoolPush实时推送hexo评论到QQ","slug":"blogs/2020-12-17-comments-push","date":"2020-12-17T00:00:00.000Z","updated":"2020-12-17T00:00:00.000Z","comments":true,"path":"blogs/2020-12-17-comments-push/","link":"https://hin.cool/posts/cpush.html","permalink":"https://volantis.js.org/blogs/2020-12-17-comments-push/","excerpt":"","text":"","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"W4J1e"},{"title":"哔哔!换个姿势在静态博客上发短博文(volantis适配版)","slug":"blogs/2020-10-09-bb-on-volantis","date":"2020-10-09T00:00:00.000Z","updated":"2020-10-09T00:00:00.000Z","comments":true,"path":"blogs/2020-10-09-bb-on-volantis/","link":"https://archive.vn/I55RS","permalink":"https://volantis.js.org/blogs/2020-10-09-bb-on-volantis/","excerpt":"要在静态博客上发送短博文,不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk,已经有短博文的那种体验了,而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是:发文不是很方便,需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥,换个舒服的姿势》,顿时感觉爱了,这就是我梦寐以求发送短博文的姿势。","text":"要在静态博客上发送短博文,不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk,已经有短博文的那种体验了,而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是:发文不是很方便,需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥,换个舒服的姿势》,顿时感觉爱了,这就是我梦寐以求发送短博文的姿势。","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"Heson"},{"title":"Hexo 标签函数 list_tags 用法详解","slug":"blogs/2020-09-24-list-tags","date":"2020-09-24T00:00:00.000Z","updated":"2020-09-24T00:00:00.000Z","comments":true,"path":"blogs/2020-09-24-list-tags/","link":"https://archive.vn/EVrO6","permalink":"https://volantis.js.org/blogs/2020-09-24-list-tags/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"Heson"},{"title":"如何给博客添加弹窗通知","slug":"blogs/2020-09-03-message-prompt","date":"2020-09-03T00:00:00.000Z","updated":"2020-09-04T00:00:00.000Z","comments":true,"path":"blogs/2020-09-03-message-prompt/","link":"https://colsrch.cn/posts/72bb5148/","permalink":"https://volantis.js.org/blogs/2020-09-03-message-prompt/","excerpt":"","text":"","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"Colsrch"},{"title":"博客访问速度提升:最佳线路分流","slug":"blogs/2020-08-31-hexospeed","date":"2020-08-31T00:00:00.000Z","updated":"2020-08-31T00:00:00.000Z","comments":true,"path":"blogs/2020-08-31-hexospeed/","link":"https://colsrch.cn/posts/56951997/","permalink":"https://volantis.js.org/blogs/2020-08-31-hexospeed/","excerpt":"","text":"","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"Colsrch"},{"title":"静态博客使用 Issues API 发布动态、友链、书签","slug":"blogs/2020-08-28-issue-api","date":"2020-08-28T00:00:00.000Z","updated":"2020-08-28T00:00:00.000Z","comments":true,"path":"blogs/2020-08-28-issue-api/","link":"https://xaoxuu.com/blog/20200823/","permalink":"https://volantis.js.org/blogs/2020-08-28-issue-api/","excerpt":"","text":"","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"xaoxuu"},{"title":"给 Hexo Volantis 主题添加图片轮播功能","slug":"blogs/2020-08-21-main-banner","date":"2020-08-21T00:00:00.000Z","updated":"2020-08-22T00:00:00.000Z","comments":true,"path":"blogs/2020-08-21-main-banner/","link":"https://archive.vn/vRZgj","permalink":"https://volantis.js.org/blogs/2020-08-21-main-banner/","excerpt":"","text":"","categories":[{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[],"author":"Heson"},{"title":"Volantis 主题部署 Pjax","slug":"blogs/2020-05-17-inkss-pjax","date":"2020-05-17T00:00:00.000Z","updated":"2020-08-07T00:00:00.000Z","comments":true,"path":"blogs/2020-05-17-inkss-pjax/","link":"https://inkss.cn/post/76993423/","permalink":"https://volantis.js.org/blogs/2020-05-17-inkss-pjax/","excerpt":"","text":"","categories":[{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"}],"tags":[],"author":"inkss"}],"categories":[{"name":"hexo折腾","slug":"hexo折腾","permalink":"https://volantis.js.org/categories/hexo%E6%8A%98%E8%85%BE/"},{"name":"开发心得","slug":"开发心得","permalink":"https://volantis.js.org/categories/%E5%BC%80%E5%8F%91%E5%BF%83%E5%BE%97/"},{"name":"进阶玩法","slug":"进阶玩法","permalink":"https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/"}],"tags":[{"name":"volantis","slug":"volantis","permalink":"https://volantis.js.org/tags/volantis/"}]} \ No newline at end of file diff --git a/contributors/index.html b/contributors/index.html index caecb016f9..3fe8997c5f 100644 --- a/contributors/index.html +++ b/contributors/index.html @@ -1,25 +1,25 @@ -鸣谢项目和社区贡献者 - Volantis鸣谢项目和社区贡献者 - Volantis

Volantis

中文创作者社区

Volantis 社区的发展离不开团队大佬们的无私奉献和社区小伙伴们的热情互助。每一个心怀梦想、有着独特见解的朋友都可以成为团队的一员。目前 Volantis 社区正处于建设初期,我们缺少各方面的人才,如果您使用主题至少一个月且长期活跃于社区,例如:

  • 解答 issues / discussions
  • 提交有效的建议
  • 官网文档补全/纠错
  • 发现并收录有意思的文章(搭建博客方面)到官网

我们非常欢迎您的加入,请在论坛发帖告诉我们。

感谢开发者

感谢社区建设者

如何参与社区建设

社区建设主要包括 Issues Discussions(论坛) 官网博客收录 官网文档维护 几个方面。

如何维护文档

目前 Volantis 4.x 已是已知的 Hexo 主题中文档最全面的,但仍有部分功能缺少明确的文档、部分文档已经过时,如果您发现了遗漏或者错误之处,我们非常希望您能够帮忙完善一下。

Volantis 官网支持 CI ,您可以直接在线编辑源码:

如何收录博客

每位用户在使用或更新主题的时候都需要阅读官网的文档,收录的相关内容能帮助用户更高效地上手,同时也能够提高被收录的文章的曝光率。如果在官网能看到更多的有价值的文章,就会有更多 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://archive.vn/U36NG # 将页面存档到 archive.tody 网页快照档案馆的存档链接 https://archive.tody
---

如果这篇文章的作者是第一次出现在官网,还需要在 _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

注意事项

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

评论

\ No newline at end of file diff --git a/css/Readme.html b/css/Readme.html new file mode 100644 index 0000000000..a32de3d7c1 --- /dev/null +++ b/css/Readme.html @@ -0,0 +1 @@ +

样式文件说明

样式拆分说明

方案是对 https://blog.skk.moe/post/improve-fcp-for-my-blog/ 的开源实现

first.styl

首屏样式, 内含 首屏基础样式、 cover、 navbar、 首屏search、首屏暗黑模式、首屏字体 等样式, 首屏样式采用硬编码的方式写在HTML中.

内联硬编码自动化方案 see:scripts/helpers/first-style/index.js

style.styl

异步加载样式, 除首屏样式外的其他样式, 最终生成 /css/style.css 异步加载.

暗黑模式样式说明

暗黑模式样式被拆分为首屏暗黑模式样式和异步暗黑模式样式,其中在 source/css/ 文件夹下:

_first/dark_first.styl : 包含 首屏暗黑模式样式 的 暗黑模式 CSS 变量 和 强制覆盖样式

_style/_plugins/_dark : 异步暗黑模式样式文件夹

_style/_plugins/_dark/dark_async.styl : 包含 异步暗黑模式样式 的 暗黑模式 CSS 变量

_style/_plugins/_dark/dark_plugins.styl : 包含 异步暗黑模式样式 的 强制覆盖样式

\ No newline at end of file diff --git a/css/first.css b/css/first.css index d283377dad..7cc1b75174 100644 --- a/css/first.css +++ b/css/first.css @@ -1 +1,2 @@ -.shadow.floatable,a{transition:all .28s ease}*,a:active,a:hover{outline:0}article,body.modal-active,svg:not(:root){overflow:hidden}*,input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}*,legend,td,th{padding:0}.cover-wrapper,.cover-wrapper .list-h{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none}#u-search .modal-body .modal-results,ol li,ul li{list-style:none}#safearea{display:none}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.blur{background:rgba(255,255,255,.9)!important;-webkit-backdrop-filter:saturate(200%) blur(20px);backdrop-filter:saturate(200%) blur(20px)}}.shadow{box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.shadow.floatable{-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.shadow.floatable:hover{box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}@font-face{font-family:Dosis;src:url(https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf);font-weight:'normal';font-style:'normal';font-display:swap}@font-face{font-family:Dosis;src:url(https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf);font-weight:'normal';font-style:'normal';font-display:swap}:root{--site-bg:#f8f8f8;--block:#f2f2f2;--block-border:#e7e7e7;--block-hover:#ededed;--text-p0:#000;--text-p1:#222;--text-p2:#4c4c4c;--text-p3:#777;--text-meta:#cdcdcd;--card:#fff;--theme-highlight:#2fd3ae;--theme-bg:#ecfbf7;--color-site-body:#f4f4f4;--color-site-bg:#f4f4f4;--color-site-inner:#fff;--color-site-footer:#666;--color-card:#fff;--color-text:#444;--color-block:#f6f6f6;--color-inlinecode:#c74f00;--color-codeblock:#fff7ea;--color-h1:#3a3a3a;--color-h2:#3a3a3a;--color-h3:#333;--color-h4:#444;--color-h5:#555;--color-h6:#666;--color-p:#444;--color-list:#666;--color-list-hl:#36ac91;--color-meta:#888}body[theme=dark]{--site-bg:#000;--block:#111;--block-border:#282828;--block-hover:#1c1c1c;--text-p0:#fff;--text-p1:#fff;--text-p2:#b2b2b2;--text-p3:#727272;--text-meta:#4c4c4c;--card:#333;--theme-highlight:#44d7b6;--theme-bg:#344340}*{margin:0}html{color:var(--color-text);width:100%;height:100%;font-family:Dosis,"PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif;font-size:16px}html>::-webkit-scrollbar{height:4px;width:4px}html>::-webkit-scrollbar-track-piece{background:0 0}html>::-webkit-scrollbar-thumb{background:#44d7b6;cursor:pointer;border-radius:2px}a:not([href]),button[disabled],html input[disabled]{cursor:default}hr,img{border:0}html>::-webkit-scrollbar-thumb:hover{background:#ff5722}body{background-color:var(--color-site-body);text-rendering:optimizelegibility;-webkit-tap-highlight-color:transparent;line-height:1.6;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}pre,textarea{overflow:auto}@media screen and (max-width:680px){body.modal-active{position:fixed;top:0;right:0;bottom:0;left:0}}::-moz-selection{background:rgba(33,150,243,.2)}::selection{background:rgba(33,150,243,.2)}h1,h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.125rem}h5,h6{font-size:1rem}h1,h2,h3,h4,h6{font-weight:400}a{color:#2196f3;cursor:pointer;text-decoration:none;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}a:hover{color:#ff5722}pre{tab-size:4;-moz-tab-size:4;-o-tab-size:4;-webkit-tab-size:4}.clearfix{zoom:1}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.hidden{text-indent:-9999px;visibility:hidden;display:none}.inner{position:relative;width:80%;max-width:710px;margin:0 auto}.vertical{display:table-cell;vertical-align:middle}sup,table:not([class]){vertical-align:text-top}ol,ul{padding-left:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:50%;line-height:1em}sub{vertical-align:text-bottom}img{background:0 0;max-width:100%}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;border-radius:1px;border-bottom:1px solid rgba(68,68,68,.1)}span.dot,span.sep{font-size:.9em;margin:0 .2rem}span.dot:before{content:'·'}span.sep:before{content:'/'}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}.cover-wrapper .cover-body .title,.l_header #wrapper .nav-main .title{font-family:Dosis,"PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=submit],input[type=reset]{-webkit-appearance:button;cursor:pointer}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0}optgroup{font-weight:700}table:not([class]){border-collapse:collapse;overflow:auto;display:inline-block;max-width:100%}table:not([class]) th,table:not([class]) tr:hover{background-color:#f1f1f1}table:not([class]) td,table:not([class]) th{padding:8px 16px;border:2px solid #f1f1f1;line-height:1.5;font-size:90%}table:not([class]) tr{word-break:keep-all;background-color:#fefefe;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}#l_cover{min-height:64px}.cover-wrapper{top:0;left:0;height:100vh;display:flex;flex-wrap:nowrap;flex-direction:column;align-items:center;align-self:center;align-content:center;color:var(--color-site-inner);padding:0 16px;user-select:none;position:relative;overflow:hidden;margin-bottom:-100px}.cover-wrapper #cover-backstretch,.cover-wrapper .cover-bg{position:absolute;width:100%;height:100%;background-position:center;background-size:cover}.cover-wrapper #cover-backstretch.lazyload:not(.loaded),.cover-wrapper .cover-bg.lazyload:not(.loaded){opacity:0}.cover-wrapper #cover-backstretch.lazyload.loaded,.cover-wrapper .cover-bg.lazyload.loaded{-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeIn{0%{opacity:0;filter:blur(12px);transform:scale(1.02)}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0;filter:blur(12px);transform:scale(1.02)}100%{opacity:1}}.cover-wrapper .cover-body{z-index:1;position:relative;width:100%;height:100%;margin-top:64px;margin-bottom:100px}.cover-wrapper#full{height:calc(100vh + 100px);padding-bottom:100px}.cover-wrapper#half{max-height:640px;min-height:400px;height:calc(36vh - 64px + 200px)}.cover-wrapper #scroll-down{width:100%;height:64px;position:absolute;bottom:100px;text-align:center;cursor:pointer}.cover-wrapper #scroll-down .scroll-down-effects{color:#fff;font-size:24px;line-height:64px;position:absolute;width:24px;left:calc(50% - 12px);text-shadow:0 1px 2px rgba(0,0,0,.1);-webkit-animation:scroll-down-effect 1.5s infinite;animation:scroll-down-effect 1.5s infinite}@-webkit-keyframes scroll-down-effect{0%,100%{top:0;opacity:1}50%{top:-16px;opacity:.4}}@keyframes scroll-down-effect{0%,100%{top:0;opacity:1}50%{top:-16px;opacity:.4}}.cover-wrapper .cover-body,.cover-wrapper .cover-body .bottom,.cover-wrapper .cover-body .top{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%}.cover-wrapper .cover-body .bottom{margin-top:32px}.cover-wrapper .cover-body .title{font-size:3.125rem;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.1)}.cover-wrapper .cover-body .subtitle{font-size:20px}.cover-wrapper .cover-body .logo{max-height:120px;max-width:calc(100% - 4 * 16px)}@media screen and (min-height:1024px){.cover-wrapper .cover-body .title{font-size:3rem}.cover-wrapper .cover-body .subtitle{font-size:1.05rem}.cover-wrapper .cover-body .logo{max-height:150px}}.cover-wrapper .cover-body .m_search{position:relative;max-width:calc(100% - 16px);width:320px;vertical-align:middle}.cover-wrapper .cover-body .m_search .form{position:relative;display:block;width:100%}.cover-wrapper .cover-body .m_search .icon,.cover-wrapper .cover-body .m_search .input{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.cover-wrapper .cover-body .m_search .icon{position:absolute;display:block;line-height:2.5rem;width:32px;top:0;left:5px;color:rgba(68,68,68,.75)}.cover-wrapper .cover-body .m_search .input{display:block;height:2.5rem;width:100%;box-shadow:none;box-sizing:border-box;font-size:.875rem;-webkit-appearance:none;padding-left:36px;border-radius:1.4rem;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;color:var(--color-text)}.cover-wrapper .cover-body .m_search .input:hover{background:rgba(255,255,255,.8)}.cover-wrapper .cover-body .m_search .input:focus{background:#fff}.cover-wrapper .list-h{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;border-radius:4px;user-select:none}.cover-wrapper .list-h a{flex:1;display:flex;font-weight:600}.cover-wrapper .list-h a img{display:block;border-radius:2px;margin:4px;min-width:40px;max-width:44px}@media screen and (max-width:768px){.cover-wrapper .list-h a img{min-width:36px;max-width:40px}}@media screen and (max-width:500px){.cover-wrapper .cover-body .m_search .input{padding-left:36px}.cover-wrapper .list-h a img{margin:2px 4px;min-width:32px;max-width:36px}}@media screen and (max-width:375px){.cover-wrapper .list-h a img{min-width:28px;max-width:32px}}.cover-wrapper{max-width:100%}.cover-wrapper.search .bottom .menu{margin-top:16px}.cover-wrapper.search .bottom .menu .list-h a{white-space:nowrap;flex-direction:row;align-items:baseline;padding:2px;margin:4px;color:var(--color-site-inner);opacity:.75;text-shadow:0 1px 2px rgba(0,0,0,.05);border-bottom:2px solid transparent}.cover-wrapper.search .bottom .menu .list-h a i{margin-right:4px}.cover-wrapper.search .bottom .menu .list-h a p{font-size:.9375rem}.cover-wrapper.search .bottom .menu .list-h a.active,.cover-wrapper.search .bottom .menu .list-h a:active,.cover-wrapper.search .bottom .menu .list-h a:hover{opacity:1;border-bottom:2px solid var(--color-site-inner)}.cover-wrapper.dock .menu,.cover-wrapper.featured .menu,.cover-wrapper.focus .menu{border-radius:6px}.cover-wrapper.dock .menu .list-h a,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu .list-h a{flex-direction:column;align-items:center;padding:12px;line-height:24px;border-radius:4px;border-bottom:none;text-align:center;align-content:flex-end;color:rgba(68,68,68,.7);font-size:1.5rem}.cover-wrapper.dock .menu .list-h a i,.cover-wrapper.featured .menu .list-h a i,.cover-wrapper.focus .menu .list-h a i{margin:8px}.cover-wrapper.dock .menu .list-h a p,.cover-wrapper.featured .menu .list-h a p,.cover-wrapper.focus .menu .list-h a p{font-size:.875rem}.cover-wrapper.dock .menu .list-h a.active,.cover-wrapper.featured .menu .list-h a.active,.cover-wrapper.focus .menu .list-h a.active{background:var(--color-card);-webkit-backdrop-filter:none;backdrop-filter:none}.cover-wrapper.dock .menu .list-h a.active i,.cover-wrapper.dock .menu .list-h a.active i+p,.cover-wrapper.featured .menu .list-h a.active i,.cover-wrapper.featured .menu .list-h a.active i+p,.cover-wrapper.focus .menu .list-h a.active i,.cover-wrapper.focus .menu .list-h a.active i+p{color:#44d7b6}.cover-wrapper.dock .menu .list-h a.active img+p,.cover-wrapper.featured .menu .list-h a.active img+p,.cover-wrapper.focus .menu .list-h a.active img+p{color:var(--color-text)}.cover-wrapper.dock .menu .list-h a:hover,.cover-wrapper.featured .menu .list-h a:hover,.cover-wrapper.focus .menu .list-h a:hover{background:var(--color-card)}.cover-wrapper.dock .top{margin-bottom:48px}.cover-wrapper.dock .menu{background:rgba(255,255,255,.5);position:absolute;bottom:0;max-width:100%}.cover-wrapper.dock .menu .list-h{flex-wrap:nowrap;margin:4px}.cover-wrapper.dock .menu .list-h a+a{margin-left:4px}@media screen and (max-width:500px){.cover-wrapper.dock .menu .list-h a,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu .list-h a{padding:12px 8px}.cover-wrapper.dock .menu .list-h{overflow-x:scroll}.cover-wrapper.dock .menu .list-h::-webkit-scrollbar{height:0;width:0}.cover-wrapper.dock .menu .list-h::-webkit-scrollbar-track-piece{background:0 0}.cover-wrapper.dock .menu .list-h::-webkit-scrollbar-thumb{background:#44d7b6;cursor:pointer;border-radius:0}.cover-wrapper.dock .menu .list-h::-webkit-scrollbar-thumb:hover{background:#ff5722}}.cover-wrapper.featured .menu .list-h{margin:-2px}.cover-wrapper.focus .menu .list-h,.cover-wrapper.focus .menu .list-h a{margin:2px}.cover-wrapper.featured .menu .list-h a{margin:2px;background:rgba(255,255,255,.5)}.cover-wrapper.focus .menu{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.cover-wrapper.focus .menu:hover{background:rgba(255,255,255,.5)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.cover-wrapper.dock .menu,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu:hover{background:rgba(255,255,255,.5);-webkit-backdrop-filter:saturate(200%) blur(20px);backdrop-filter:saturate(200%) blur(20px)}}.cover-wrapper.focus .menu .list-h a:hover{opacity:1;background:var(--color-card)}.cover-wrapper #parallax-window{position:absolute;width:100%;height:100%;background:0 0}.parallax-mirror{-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeIn{0%{opacity:0;filter:blur(12px)}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0;filter:blur(12px)}100%{opacity:1}}.l_header{position:fixed;z-index:1000;top:0;width:100%;height:64px;background:var(--color-card);box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.l_header.auto{transition:opacity .4s ease;-moz-transition:opacity .4s ease;-webkit-transition:opacity .4s ease;-o-transition:opacity .4s ease;visibility:hidden}.l_header.auto.show{opacity:1!important;visibility:visible}.l_header .container{margin-left:16px;margin-right:16px}.l_header #wrapper{height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.l_header #wrapper .nav-main,.l_header #wrapper .nav-sub{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center}.l_header #wrapper .nav-main{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.l_header #wrapper.sub .nav-main{transform:translateY(-64px)}.l_header #wrapper .nav-sub{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;opacity:0;height:64px;width:calc(100% - 2 * 16px);position:absolute}@media screen and (min-width:2048px){.l_header #wrapper .nav-sub{max-width:55vw;margin:auto}}.l_header #wrapper.sub .nav-sub{opacity:1}.l_header #wrapper .title{position:relative;color:var(--color-text);padding-left:24px;max-height:64px}.l_header #wrapper .nav-main .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;line-height:64px;padding:0 24px;font-size:1.25rem}.l_header #wrapper .nav-main .title img{height:64px}.l_header .nav-sub{max-width:1080px;margin:auto}.l_header .nav-sub .title{font-weight:700;font-family:Dosis,"PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif;line-height:1.2;max-height:64px;white-space:normal;flex-shrink:1}.l_header .switcher{display:none;line-height:64px;align-items:center}.l_header .switcher .s-toc{display:none}@media screen and (max-width:768px){.l_header .switcher .s-toc{display:flex}}.l_header .switcher>li{height:48px;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;margin:2px}.l_header .switcher>li>a{display:flex;justify-content:center;align-items:center;width:48px;height:48px;padding:.85em 1.1em;border-radius:100px;border:none;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;color:#44d7b6}.l_header .switcher>li>a:hover{border:none}.l_header .switcher>li>a.active,.l_header .switcher>li>a:active{border:none;background:var(--color-site-bg)}@media screen and (max-width:500px){.l_header .switcher>li{margin:0 1px;height:48px}.l_header .switcher>li>a{width:36px;height:48px}}.l_header .nav-sub .switcher{display:flex}.l_header .m_search{display:flex;height:64px;width:240px;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}@media screen and (max-width:1024px){.l_header .m_search{width:44px;min-width:44px}.l_header .m_search input::-moz-placeholder{opacity:0}.l_header .m_search input:-ms-input-placeholder{opacity:0}.l_header .m_search input::placeholder{opacity:0}.l_header .m_search:hover{width:240px}.l_header .m_search:hover input::-moz-placeholder{opacity:1}.l_header .m_search:hover input:-ms-input-placeholder{opacity:1}.l_header .m_search:hover input::placeholder{opacity:1}}@media screen and (min-width:500px){.l_header .m_search:hover .input{width:100%}.l_header .m_search:hover .input::-moz-placeholder{opacity:1}.l_header .m_search:hover .input:-ms-input-placeholder{opacity:1}.l_header .m_search:hover .input::placeholder{opacity:1}}.l_header .m_search .form{position:relative;display:flex;width:100%;align-items:center}.l_header .m_search .icon{position:absolute;width:36px;left:5px;color:var(--color-meta)}@media screen and (max-width:500px){.l_header .m_search{min-width:0}.l_header .m_search input::-moz-placeholder{opacity:1}.l_header .m_search input:-ms-input-placeholder{opacity:1}.l_header .m_search input::placeholder{opacity:1}.l_header .m_search .icon{display:none}}.l_header .m_search .input{display:block;padding-top:8px;padding-bottom:8px;line-height:1.3;width:100%;color:var(--color-text);background:#fafafa;box-shadow:none;box-sizing:border-box;padding-left:40px;font-size:.875rem;border-radius:8px;border:none;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}@media screen and (min-width:500px){.l_header .m_search .input:focus{box-shadow:0 4px 8px 0 rgba(0,0,0,.1)}}@media screen and (max-width:500px){.l_header .m_search .input{background:var(--color-block);padding-left:8px;border:none}.l_header .m_search .input:focus,.l_header .m_search .input:hover{border:none}}@media (max-width:500px){.l_header .m_search{left:0;width:0;overflow:hidden;position:absolute;background:#fff;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.l_header .m_search .input{border-radius:32px;margin-left:16px;padding-left:16px}.l_header.z_search-open .m_search{width:100%}.l_header.z_search-open .m_search .input{width:calc(100% - 120px)}}ul.m-pc>li>a{color:inherit;border-bottom:2px solid transparent}ul.m-pc>li>a.active,ul.m-pc>li>a:active{border-bottom:2px solid #44d7b6}ul.list-v li:hover>ul.list-v,ul.m-pc li:hover>ul.list-v{display:block}ul.nav-list-h{display:flex;align-items:stretch}ul.nav-list-h>li{position:relative;justify-content:center;height:100%;line-height:2.4;border-radius:4px}ul.nav-list-h>li>a{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:600}ul.list-v{z-index:1;display:none;position:absolute;background:var(--color-card);box-shadow:0 2px 4px 0 rgba(0,0,0,.08),0 4px 8px 0 rgba(0,0,0,.08),0 8px 16px 0 rgba(0,0,0,.08);margin-top:-6px;border-radius:4px;padding:8px 0}#u-search,#u-search .modal{position:fixed;width:100%;top:0}ul.list-v.show{display:block}ul.list-v hr{margin-top:8px;margin-bottom:8px}ul.list-v>li{white-space:nowrap;word-break:keep-all}ul.list-v>li.header{font-size:.78125rem;font-weight:700;line-height:2em;color:var(--color-meta);margin:8px 16px 4px}ul.list-v>li.header i{margin-right:8px}ul.list-v>li ul{margin-left:0;display:none;margin-top:-40px}ul.list-v .aplayer-container{min-height:64px;padding:6px 16px}ul.list-v>li>a{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;display:block;color:var(--color-list);font-size:.875rem;font-weight:700;line-height:36px;padding:0 20px 0 16px;text-overflow:ellipsis;margin:0 4px;border-radius:4px}ul.list-v>li>a.active,ul.list-v>li>a:active,ul.list-v>li>a:hover{color:var(--color-list-hl)}@media screen and (max-width:1024px){ul.list-v>li>a{line-height:40px}}ul.list-v>li>a>i{margin-right:8px}ul.list-v>li>a:hover{background:var(--color-site-bg)}.l_header .menu>ul>li>a{display:block;padding:0 8px}.l_header .menu>ul>li>a>i{margin-right:4px}.l_header ul.nav-list-h>li{color:var(--color-list);line-height:64px}.l_header ul.nav-list-h>li>a{max-height:64px;overflow:hidden;color:inherit}.l_header ul.nav-list-h>li>a.active,.l_header ul.nav-list-h>li>a:active{color:#44d7b6}.l_header ul.nav-list-h>li:hover>a{color:var(--color-list-hl)}.l_header ul.nav-list-h>li i.music{-webkit-animation:rotate-effect 1.5s linear infinite;animation:rotate-effect 1.5s linear infinite}@-webkit-keyframes rotate-effect{0%{transform:rotate(0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}@keyframes rotate-effect{0%{transform:rotate(0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}.menu-phone li ul.list-v,.menu-phone li ul.list-v ul{right:calc(100% - .5 * 16px)}#wrapper{max-width:1080px;margin:auto}@media screen and (min-width:2048px){#wrapper{max-width:55vw}}#wrapper .menu{flex:1 1 auto;margin:0 16px 0 0}#wrapper .menu .list-v ul{left:calc(100% - .5 * 16px)}.menu-phone{display:none;margin-top:16px;right:8px;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.menu-phone ul{right:calc(100% - .5 * 16px)}.cover-wrapper .l_header{transition:all .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease;-o-transition:all .5s ease;transform:translateY(-128px)}.cover-wrapper .l_header.show{transform:translateY(0)}.l_header{max-width:65vw;left:calc((100% - 65vw) * .5);border-bottom-left-radius:8px;border-bottom-right-radius:8px}@media screen and (max-width:2048px){.l_header{max-width:1112px;left:calc((100% - 1112px) * .5)}}@media screen and (max-width:1112px){.l_header{left:0;border-radius:0;max-width:100%}}@media screen and (max-width:500px){.menu-phone{display:block}.l_header .container{margin-left:0;margin-right:0}.l_header #wrapper .nav-main .title{padding-left:16px;padding-right:16px}.l_header #wrapper .nav-sub{width:100%}.l_header #wrapper .nav-sub .title{overflow-y:scroll;margin-top:2px;padding:8px 16px}.l_header #wrapper .switcher{display:flex;margin-right:8px}.l_header .menu{display:none}.list-v li{max-width:270px}}#u-search{display:none;left:0;height:100%;padding:60px 20px;z-index:1001}#u-search .modal{height:80%;max-width:640px;left:50%;margin:64px 0 0 -320px;background:var(--color-card);z-index:3;border-radius:4px;overflow:hidden}@media screen and (max-width:680px){#u-search{padding:0}#u-search .modal{box-shadow:none;max-width:none;top:0;left:0;margin:0;height:100%;border-radius:0}}#u-search .modal-ajax-content{opacity:0;visibility:hidden;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}#u-search .modal-ajax-content.loaded{opacity:1;visibility:visible}#u-search .modal-header{position:relative;width:100%;height:64px;z-index:3;border-top-left-radius:4px;border-top-right-radius:4px;font-size:$fontsize;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);background:#fff;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}@media screen and (max-width:680px){#u-search .modal-header{border-radius:0;padding:0}}#u-search .modal-header .btn-close{display:block;position:absolute;width:55px;height:64px;top:0;right:0;color:#44d7b6;cursor:pointer;text-align:center;line-height:64px;vertical-align:middle;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;z-index:2}#u-search .modal-header .btn-close:hover{transform:rotate(90deg)}#u-search .modal-header .modal-loading{position:absolute;bottom:0;left:0;width:100%;height:2px;background:0 0;z-index:1}#u-search .modal-header .modal-loading .modal-loading-bar{display:block;position:relative;width:0%;height:100%;background:#44d7b6;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}#u-search .modal-header #u-search-modal-form{position:relative;width:100%;height:100%;z-index:2}#u-search .modal-header #u-search-modal-form input{color:var(--color-text)}#u-search .modal-header #u-search-modal-form #u-search-modal-input{margin:16px 50px;padding:0 8px;width:calc(100% - 100px - 16px);line-height:2rem;border-radius:4px;vertical-align:middle;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;background:0 0;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}@media screen and (max-width:680px){#u-search .modal-header #u-search-modal-form #u-search-modal-input{padding:0}}#u-search .modal-header #u-search-modal-form #u-search-modal-input:focus{border-top-left-radius:4px;border-top-right-radius:4px}#u-search .modal-header #u-search-modal-btn-submit{position:absolute;top:0;left:0;padding-left:5px;padding-top:2px;background:0 0;border:none;width:50px;height:64px;vertical-align:middle;color:#44d7b6;z-index:2}#u-search .modal-footer{position:absolute;display:none;bottom:0;left:0;width:100%;height:50px;padding:0 15px;background:var(--color-card)}#u-search .modal-footer .logo{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;z-index:0}#u-search .modal-footer .logo a{display:inline-block;height:50px}#u-search .modal-footer .logo.google img{height:24px;margin-top:13px}#u-search .modal-footer .logo.baidu img{height:22px;margin-top:14px}#u-search .modal-footer .logo img{position:relative;display:inline-block;width:auto;height:18px;margin-top:16px}#u-search .modal-footer .modal-error,#u-search .modal-footer .modal-metadata{position:relative;float:left;vertical-align:middle;line-height:50px;font-size:13px;z-index:1}#u-search .modal-footer .nav{position:relative;display:block;float:right;vertical-align:middle;font-size:.875rem;font-weight:700;line-height:50px;color:var(--color-meta);cursor:pointer;z-index:1}#u-search .modal-footer .nav:hover{color:#ff5722}#u-search .modal-footer .nav.btn-next{margin-left:16px}#u-search .modal-footer .nav .icon{font-size:.875rem}#u-search .modal-body{position:absolute;padding:16px;width:100%;height:calc(100% - 64px);top:64px;left:0;overflow-y:scroll;-webkit-overflow-scrolling:touch;background:var(--color-card);border-radius:4px}#u-search .modal-body::-webkit-scrollbar{height:4px;width:4px}#u-search .modal-body::-webkit-scrollbar-track-piece{background:0 0}#u-search .modal-body::-webkit-scrollbar-thumb{background:#44d7b6;cursor:pointer;border-radius:2px}#u-search .modal-body::-webkit-scrollbar-thumb:hover{background:#ff5722}#u-search .modal-body .modal-results .result{position:relative;display:block;padding:16px;border-radius:4px}#u-search .modal-body .modal-results .result b[mark]{color:#29bf9d;text-decoration:underline}#u-search .modal-body .modal-results .result:hover{background:var(--color-site-bg)}#u-search .modal-body .modal-results .result:hover .title{color:var(--color-list-hl)}#u-search .modal-body .modal-results .result .title{display:inline-block;max-width:100%;color:var(--color-list);font-weight:700;padding:1px;margin-bottom:2px;white-space:normal;overflow:hidden;text-overflow:ellipsis;font-size:1.125rem}#u-search .modal-body .modal-results .result .digest{display:block;white-space:inherit;overflow:hidden;word-break:break-all;text-overflow:ellipsis;font-size:.8125rem;color:var(--color-meta)}#u-search .modal-body .modal-results .result .icon{position:absolute;top:50%;right:0;margin-top:-4px;font-size:11px;color:var(--color-meta)}#u-search .modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:1}@media (prefers-color-scheme:dark){:root{--color-mode:'dark'}:root:not([data-user-color-scheme]){--color-site-body:#000;--color-site-bg:#222;--color-site-inner:#eee;--color-site-footer:#aaa;--color-card:#333;--color-text:#eee;--color-block:#3a3a3a;--color-codeblock:#343a3c;--color-inlinecode:#d56d28;--color-h1:#eee;--color-h2:#eee;--color-h3:#ddd;--color-h4:#ddd;--color-h5:#ddd;--color-h6:#ddd;--color-p:#bbb;--color-list:#aaa;--color-list-hl:#69dfc4;--color-meta:#888;--color-link:#888}:root:not([data-user-color-scheme]) #l_body{background-color:#000!important}:root:not([data-user-color-scheme]) #wrapper .title,:root:not([data-user-color-scheme]) .lazyload,:root:not([data-user-color-scheme]) fa,:root:not([data-user-color-scheme]) fad,:root:not([data-user-color-scheme]) fal,:root:not([data-user-color-scheme]) filter: brightness(convert(hexo-config('color_scheme.dark.brightness'))) !important,:root:not([data-user-color-scheme]) img,:root:not([data-user-color-scheme]) svg.iconfont{color:var(--color-meta)}:root:not([data-user-color-scheme]) .l_header ul.nav-list-h>li>a,:root:not([data-user-color-scheme]) ul.list-v>li>a{color:var(--color-list)}:root:not([data-user-color-scheme]) .blur{background:var(--color-site-bg)!important}:root:not([data-user-color-scheme]) .nav-main .u-search-input{background:var(--color-card)!important}:root:not([data-user-color-scheme]) #l_main .article .prev-next>a{background:var(--color-block)}:root:not([data-user-color-scheme]) #l_main .article .prev-next>a:hover{background:var(--color-card)}:root:not([data-user-color-scheme]) .article blockquote{background:var(--color-block)}:root:not([data-user-color-scheme]) .article-title a{color:var(--color-h1)}:root:not([data-user-color-scheme]) details>summary{color:var(--color-p);background:var(--color-site-bg)}:root:not([data-user-color-scheme]) details{border:1px solid var(--color-site-bg);background:var(--color-site-bg)}:root:not([data-user-color-scheme]) #u-search .modal,:root:not([data-user-color-scheme]) #u-search .modal-body,:root:not([data-user-color-scheme]) #u-search .modal-header{background:var(--color-card)!important}:root:not([data-user-color-scheme]) #u-search .modal-body .modal-results .result:hover{background:var(--color-block)!important}:root:not([data-user-color-scheme]) .widget.blogger .content .social-wrapper a.social:hover{background:var(--color-card)}:root:not([data-user-color-scheme]) .content{color:var(--color-p)}:root:not([data-user-color-scheme]) .note{background:var(--color-block)!important}:root:not([data-user-color-scheme]) div.tabs ul.nav-tabs li.tab.active a{color:var(--color-p);background:var(--color-card)}:root:not([data-user-color-scheme]) kbd{background:var(--color-block)!important}:root:not([data-user-color-scheme]) .cover-wrapper.dock .menu .list-h a:hover,:root:not([data-user-color-scheme]) .cover-wrapper.featured .menu .list-h a:hover,:root:not([data-user-color-scheme]) .cover-wrapper.focus .menu .list-h a:hover{color:var(--color-text)!important}:root:not([data-user-color-scheme]) .gutter{background:var(--color-card)!important;background-color:var(--color-card)!important}:root:not([data-user-color-scheme]) .highlight figcaption{background-color:#21252b}:root:not([data-user-color-scheme]) .highlight pre .line,:root:not([data-user-color-scheme]) .highlight pre .params{color:rgba(158,142,142,.9)}:root:not([data-user-color-scheme]) :not(.highlight)>table tr{background-color:var(--color-card)}:root:not([data-user-color-scheme]) :not(.highlight)>table th{background:var(--color-site-bg)}:root:not([data-user-color-scheme]) :not(.highlight) table td,:root:not([data-user-color-scheme]) :not(.highlight) table th{border-color:var(--color-site-bg)}:root:not([data-user-color-scheme]) :not(.highlight)>table tr:hover{background:var(--color-codeblock)}:root:not([data-user-color-scheme]) .timenode .highlight{border-color:var(--color-site-bg)!important}:root:not([data-user-color-scheme]) blockquote p{color:var(--color-p)}:root:not([data-user-color-scheme]) #archive-page .archive .all-tags ul li span{color:var(--color-text);background:#6f6f72}:root:not([data-user-color-scheme]) .aplayer{background:var(--color-site-bg)}:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li:hover{background:rgba(68,215,182,.2)}:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li.aplayer-list-light{background:var(--color-block)}:root:not([data-user-color-scheme]) .aplayer-info{background:var(--color-site-bg)!important}:root:not([data-user-color-scheme]) .aplayer .aplayer-lrc:before{background:linear-gradient(180deg,#282c34 0,rgba(255,255,255,0))}:root:not([data-user-color-scheme]) .aplayer .aplayer-lrc:after{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(33,33,33,.8))}:root:not([data-user-color-scheme]) .aplayer-pic{filter:brightness(70%)}:root:not([data-user-color-scheme]) .aplayer .aplayer-list ol li{border-top:1px solid var(--color-card)}:root:not([data-user-color-scheme]) .aplayer.aplayer-withlist .aplayer-info{border-bottom:1px solid var(--color-block)}}[data-user-color-scheme=dark]{--color-site-body:#000;--color-site-bg:#222;--color-site-inner:#eee;--color-site-footer:#aaa;--color-card:#333;--color-text:#eee;--color-block:#3a3a3a;--color-codeblock:#343a3c;--color-inlinecode:#d56d28;--color-h1:#eee;--color-h2:#eee;--color-h3:#ddd;--color-h4:#ddd;--color-h5:#ddd;--color-h6:#ddd;--color-p:#bbb;--color-list:#aaa;--color-list-hl:#69dfc4;--color-meta:#888;--color-link:#888}[data-user-color-scheme=dark] #l_body{background-color:#000!important}[data-user-color-scheme=dark] #wrapper .title,[data-user-color-scheme=dark] .lazyload,[data-user-color-scheme=dark] fa,[data-user-color-scheme=dark] fad,[data-user-color-scheme=dark] fal,[data-user-color-scheme=dark] filter: brightness(convert(hexo-config('color_scheme.dark.brightness'))) !important,[data-user-color-scheme=dark] img,[data-user-color-scheme=dark] svg.iconfont{color:var(--color-meta)}[data-user-color-scheme=dark] .l_header ul.nav-list-h>li>a,[data-user-color-scheme=dark] ul.list-v>li>a{color:var(--color-list)}[data-user-color-scheme=dark] .blur{background:var(--color-site-bg)!important}[data-user-color-scheme=dark] .nav-main .u-search-input{background:var(--color-card)!important}[data-user-color-scheme=dark] #l_main .article .prev-next>a{background:var(--color-block)}[data-user-color-scheme=dark] #l_main .article .prev-next>a:hover{background:var(--color-card)}[data-user-color-scheme=dark] .article blockquote{background:var(--color-block)}[data-user-color-scheme=dark] .article-title a{color:var(--color-h1)}[data-user-color-scheme=dark] details>summary{color:var(--color-p);background:var(--color-site-bg)}[data-user-color-scheme=dark] details{border:1px solid var(--color-site-bg);background:var(--color-site-bg)}[data-user-color-scheme=dark] #u-search .modal,[data-user-color-scheme=dark] #u-search .modal-body,[data-user-color-scheme=dark] #u-search .modal-header{background:var(--color-card)!important}[data-user-color-scheme=dark] #u-search .modal-body .modal-results .result:hover{background:var(--color-block)!important}@media screen and (max-width:500px){[data-user-color-scheme=dark] .l_header .m_search{background:var(--color-site-bg)!important}}[data-user-color-scheme=dark] .widget.blogger .content .social-wrapper a.social:hover{background:var(--color-card)}[data-user-color-scheme=dark] .content{color:var(--color-p)}[data-user-color-scheme=dark] .note{background:var(--color-block)!important}[data-user-color-scheme=dark] div.tabs ul.nav-tabs li.tab.active a{color:var(--color-p);background:var(--color-card)}[data-user-color-scheme=dark] kbd{background:var(--color-block)!important}[data-user-color-scheme=dark] .cover-wrapper.dock .menu .list-h a:hover,[data-user-color-scheme=dark] .cover-wrapper.featured .menu .list-h a:hover,[data-user-color-scheme=dark] .cover-wrapper.focus .menu .list-h a:hover{color:var(--color-text)!important}[data-user-color-scheme=dark] .gutter{background:var(--color-card)!important;background-color:var(--color-card)!important}[data-user-color-scheme=dark] .highlight figcaption{background-color:#21252b}[data-user-color-scheme=dark] .highlight pre .line,[data-user-color-scheme=dark] .highlight pre .params{color:rgba(158,142,142,.9)}[data-user-color-scheme=dark] :not(.highlight)>table tr{background-color:var(--color-card)}[data-user-color-scheme=dark] :not(.highlight)>table th{background:var(--color-site-bg)}[data-user-color-scheme=dark] :not(.highlight) table td,[data-user-color-scheme=dark] :not(.highlight) table th{border-color:var(--color-site-bg)}[data-user-color-scheme=dark] :not(.highlight)>table tr:hover{background:var(--color-codeblock)}[data-user-color-scheme=dark] .timenode .highlight{border-color:var(--color-site-bg)!important}[data-user-color-scheme=dark] blockquote p{color:var(--color-p)}[data-user-color-scheme=dark] #archive-page .archive .all-tags ul li span{color:var(--color-text);background:#6f6f72}[data-user-color-scheme=dark] .aplayer{background:var(--color-site-bg)}[data-user-color-scheme=dark] .aplayer .aplayer-list ol li:hover{background:rgba(68,215,182,.2)}[data-user-color-scheme=dark] .aplayer .aplayer-list ol li.aplayer-list-light{background:var(--color-block)}[data-user-color-scheme=dark] .aplayer-info{background:var(--color-site-bg)!important}[data-user-color-scheme=dark] .aplayer .aplayer-lrc:before{background:linear-gradient(180deg,#282c34 0,rgba(255,255,255,0))}[data-user-color-scheme=dark] .aplayer .aplayer-lrc:after{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(33,33,33,.8))}[data-user-color-scheme=dark] .aplayer-pic{filter:brightness(70%)}[data-user-color-scheme=dark] .aplayer .aplayer-list ol li{border-top:1px solid var(--color-card)}[data-user-color-scheme=dark] .aplayer.aplayer-withlist .aplayer-info{border-bottom:1px solid var(--color-block)}@media screen and (prefers-color-scheme:dark) and (max-width:500px){.l_header .m_search{background:var(--color-site-bg)!important}} \ No newline at end of file +#safearea{display:none}.post-story+.post-story{content-visibility:auto;contain-intrinsic-size:10px 500px}:root{--color-site-body:#f4f4f4;--color-site-bg:#f4f4f4;--color-site-inner:#fff;--color-site-footer:#666;--color-card:#fff;--color-text:#444;--color-block:#f6f6f6;--color-inlinecode:#c74f00;--color-codeblock:#fff7ea;--color-h1:#3a3a3a;--color-h2:#3a3a3a;--color-h3:#333;--color-h4:#444;--color-h5:#555;--color-h6:#666;--color-p:#444;--color-list:#666;--color-list-hl:#30ad91;--color-meta:#888;--color-read-bkg:#e0d8c8;--color-read-post:#f8f1e2;--color-copyright-bkg:#f5f5f5}*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;outline:0;margin:0;padding:0}::-webkit-scrollbar{height:4px;width:4px}::-webkit-scrollbar-track-piece{background:0 0}::-webkit-scrollbar-thumb{background:#3dd9b6;cursor:pointer;border-radius:2px;-webkit-border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#ff5722}html{color:var(--color-text);width:100%;height:100%;font-family:Dosis,"PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif;font-size:16px}html>::-webkit-scrollbar{height:4px;width:4px}html>::-webkit-scrollbar-track-piece{background:0 0}html>::-webkit-scrollbar-thumb{background:#3dd9b6;cursor:pointer;border-radius:2px;-webkit-border-radius:2px}html>::-webkit-scrollbar-thumb:hover{background:#ff5722}body{background-color:var(--color-site-body);text-rendering:optimizelegibility;-webkit-tap-highlight-color:rgba(0,0,0,0);line-height:1.6;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body.modal-active{overflow:hidden}@media screen and (max-width:680px){body.modal-active{position:fixed;top:0;right:0;bottom:0;left:0}}a{color:#2092ec;cursor:pointer;text-decoration:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}a:hover{color:#ff5722}a:active,a:hover{outline:0}ol,ul{padding-left:0}ol li,ul li{list-style:none}header{display:-webkit-box;display:-moz-box;display:block}img{border:0;background:0 0;max-width:100%}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;height:0;border:0;border-radius:1px;-webkit-border-radius:1px;border-bottom:1px solid rgba(68,68,68,.1)}button,input{color:inherit;font:inherit;margin:0}button{overflow:visible;text-transform:none;-webkit-appearance:button;cursor:pointer}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.blur{background:rgba(255,255,255,.9)!important;-webkit-backdrop-filter:saturate(200%) blur(20px);backdrop-filter:saturate(200%) blur(20px)}}.shadow{box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.shadow.floatable{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.shadow.floatable:hover{box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}#l_cover{min-height:64px}.cover-wrapper{top:0;left:0;max-width:100%;height:100vh;display:flex;display:flex;flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-khtml-flex-wrap:nowrap;-moz-flex-wrap:nowrap;-o-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-direction:column;align-items:center;align-self:center;align-content:center;color:var(--color-site-inner);padding:0 16px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;position:relative;overflow:hidden;margin-bottom:-100px}.cover-wrapper .cover-bg{position:absolute;width:100%;height:100%;background-position:center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover}.cover-wrapper .cover-bg.lazyload:not(.loaded){opacity:0;-webkit-opacity:0;-moz-opacity:0}.cover-wrapper .cover-bg.lazyload.loaded{animation-delay:0s;animation-duration:.5s;animation-fill-mode:forwards;animation-timing-function:ease-out;animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px);transform:scale(1.02);-webkit-transform:scale(1.02);-khtml-transform:scale(1.02);-moz-transform:scale(1.02);-o-transform:scale(1.02);-ms-transform:scale(1.02)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}.cover-wrapper .cover-body{z-index:1;position:relative;width:100%;height:100%}.cover-wrapper#full{height:calc(100vh + 100px);padding-bottom:100px}.cover-wrapper#half{max-height:640px;min-height:400px;height:calc(36vh - 64px + 200px)}.cover-wrapper #scroll-down{width:100%;height:64px;position:absolute;bottom:100px;text-align:center;cursor:pointer}.cover-wrapper #scroll-down .scroll-down-effects{color:#fff;font-size:24px;line-height:64px;position:absolute;width:24px;left:calc(50% - 12px);text-shadow:0 1px 2px rgba(0,0,0,.1);animation:scroll-down-effect 1.5s infinite;-webkit-animation:scroll-down-effect 1.5s infinite;-khtml-animation:scroll-down-effect 1.5s infinite;-moz-animation:scroll-down-effect 1.5s infinite;-o-animation:scroll-down-effect 1.5s infinite;-ms-animation:scroll-down-effect 1.5s infinite}@keyframes scroll-down-effect{0%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}50%{top:-16px;opacity:.4;-webkit-opacity:.4;-moz-opacity:.4}100%{top:0;opacity:1;-webkit-opacity:1;-moz-opacity:1}}.cover-wrapper .cover-body{margin-top:64px;margin-bottom:100px}.cover-wrapper .cover-body,.cover-wrapper .cover-body .bottom,.cover-wrapper .cover-body .top{display:flex;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;max-width:100%}.cover-wrapper .cover-body .bottom{margin-top:32px}.cover-wrapper .cover-body .title{font-family:Dosis,"PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace;font-size:3.125rem;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.1)}.cover-wrapper .cover-body .subtitle{font-size:20px}.cover-wrapper .cover-body .logo{max-height:120px;max-width:calc(100% - 4 * 16px)}@media screen and (min-height:1024px){.cover-wrapper .cover-body .title{font-size:3rem}.cover-wrapper .cover-body .subtitle{font-size:1.05rem}.cover-wrapper .cover-body .logo{max-height:150px}}.cover-wrapper .cover-body .m_search{position:relative;max-width:calc(100% - 16px);width:320px;vertical-align:middle}.cover-wrapper .cover-body .m_search .form{position:relative;display:-webkit-box;display:-moz-box;display:block;width:100%}.cover-wrapper .cover-body .m_search .icon,.cover-wrapper .cover-body .m_search .input{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.cover-wrapper .cover-body .m_search .icon{position:absolute;display:-webkit-box;display:-moz-box;display:block;line-height:2.5rem;width:32px;top:0;left:5px;color:rgba(68,68,68,.75)}.cover-wrapper .cover-body .m_search .input{display:-webkit-box;display:-moz-box;display:block;height:2.5rem;width:100%;box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;font-size:.875rem;-webkit-appearance:none;padding-left:36px;border-radius:1.4rem;-webkit-border-radius:1.4rem;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;color:var(--color-text)}@media screen and (max-width:500px){.cover-wrapper .cover-body .m_search .input{padding-left:36px}}.cover-wrapper .cover-body .m_search .input:hover{background:rgba(255,255,255,.8)}.cover-wrapper .cover-body .m_search .input:focus{background:#fff}.cover-wrapper .list-h{display:flex;display:flex;flex-direction:row;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;align-items:stretch;border-radius:4px;-webkit-border-radius:4px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.cover-wrapper .list-h a{flex:1 0;display:flex;display:flex;font-weight:600}.cover-wrapper .list-h a img{display:-webkit-box;display:-moz-box;display:block;border-radius:2px;-webkit-border-radius:2px;margin:4px;min-width:40px;max-width:44px}@media screen and (max-width:768px){.cover-wrapper .list-h a img{min-width:36px;max-width:40px}}@media screen and (max-width:500px){.cover-wrapper .list-h a img{margin:2px 4px;min-width:32px;max-width:36px}}@media screen and (max-width:375px){.cover-wrapper .list-h a img{min-width:28px;max-width:32px}}.cover-wrapper{max-width:100%}.cover-wrapper.search .bottom .menu{margin-top:16px}.cover-wrapper.search .bottom .menu .list-h a{white-space:nowrap;flex-direction:row;align-items:baseline;padding:2px;margin:4px;color:var(--color-site-inner);opacity:.75;-webkit-opacity:.75;-moz-opacity:.75;text-shadow:0 1px 2px rgba(0,0,0,.05);border-bottom:2px solid transparent}.cover-wrapper.search .bottom .menu .list-h a i{margin-right:4px}.cover-wrapper.search .bottom .menu .list-h a p{font-size:.9375rem}.cover-wrapper.search .bottom .menu .list-h a.active,.cover-wrapper.search .bottom .menu .list-h a:active,.cover-wrapper.search .bottom .menu .list-h a:hover{opacity:1;-webkit-opacity:1;-moz-opacity:1;border-bottom:2px solid var(--color-site-inner)}.cover-wrapper.dock .menu,.cover-wrapper.featured .menu,.cover-wrapper.focus .menu{border-radius:6px;-webkit-border-radius:6px}.cover-wrapper.dock .menu .list-h a,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu .list-h a{flex-direction:column;align-items:center;padding:12px;line-height:24px;border-radius:4px;-webkit-border-radius:4px;border-bottom:none;text-align:center;align-content:flex-end;color:rgba(68,68,68,.7);font-size:1.5rem}@media screen and (max-width:500px){.cover-wrapper.dock .menu .list-h a,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu .list-h a{padding:12px 8px}}.cover-wrapper.dock .menu .list-h a i,.cover-wrapper.featured .menu .list-h a i,.cover-wrapper.focus .menu .list-h a i{margin:8px}.cover-wrapper.dock .menu .list-h a p,.cover-wrapper.featured .menu .list-h a p,.cover-wrapper.focus .menu .list-h a p{font-size:.875rem}.cover-wrapper.dock .menu .list-h a.active,.cover-wrapper.featured .menu .list-h a.active,.cover-wrapper.focus .menu .list-h a.active{background:var(--color-card);-webkit-backdrop-filter:none;backdrop-filter:none}.cover-wrapper.dock .menu .list-h a.active i,.cover-wrapper.dock .menu .list-h a.active i+p,.cover-wrapper.featured .menu .list-h a.active i,.cover-wrapper.featured .menu .list-h a.active i+p,.cover-wrapper.focus .menu .list-h a.active i,.cover-wrapper.focus .menu .list-h a.active i+p{color:#3dd9b6}.cover-wrapper.dock .menu .list-h a.active img+p,.cover-wrapper.featured .menu .list-h a.active img+p,.cover-wrapper.focus .menu .list-h a.active img+p{color:var(--color-text)}.cover-wrapper.dock .menu .list-h a:hover,.cover-wrapper.featured .menu .list-h a:hover,.cover-wrapper.focus .menu .list-h a:hover{background:var(--color-card)}.cover-wrapper.dock .top{margin-bottom:48px}.cover-wrapper.dock .menu{background:rgba(255,255,255,.5);position:absolute;bottom:0;max-width:100%}.cover-wrapper.dock .menu .list-h{flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-khtml-flex-wrap:nowrap;-moz-flex-wrap:nowrap;-o-flex-wrap:nowrap;-ms-flex-wrap:nowrap;margin:4px}.cover-wrapper.dock .menu .list-h a+a{margin-left:4px}@media screen and (max-width:500px){.cover-wrapper.dock .menu .list-h{overflow-x:scroll}.cover-wrapper.dock .menu .list-h::-webkit-scrollbar{height:0;width:0}.cover-wrapper.dock .menu .list-h::-webkit-scrollbar-track-piece{background:0 0}.cover-wrapper.dock .menu .list-h::-webkit-scrollbar-thumb{background:#3dd9b6;cursor:pointer;border-radius:0;-webkit-border-radius:0}.cover-wrapper.dock .menu .list-h::-webkit-scrollbar-thumb:hover{background:#ff5722}}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.cover-wrapper.dock .menu{background:rgba(255,255,255,.5);-webkit-backdrop-filter:saturate(200%) blur(20px);backdrop-filter:saturate(200%) blur(20px)}}.cover-wrapper #parallax-window{position:absolute;width:100%;height:100%;background:0 0}.parallax-mirror{animation-delay:0s;animation-duration:.5s;animation-fill-mode:forwards;animation-timing-function:ease-out;animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0;-webkit-opacity:0;-moz-opacity:0;filter:blur(12px)}100%{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@media (prefers-color-scheme:dark){:root{--color-mode:'dark'}:root:not([color-scheme]){--color-site-body:#121212;--color-read-bkg:#1f1f1f;--color-read-post:#262626;--color-site-bg:#1f1f1f;--color-site-inner:rgba(238,238,238,0.871);--color-site-footer:rgba(170,170,170,0.871);--color-card:#262626;--color-text:rgba(238,238,238,0.871);--color-block:#434343;--color-codeblock:#1f1f1f;--color-inlinecode:#d56d28;--color-h1:rgba(255,255,255,0.871);--color-h2:rgba(255,255,255,0.871);--color-h3:rgba(255,255,255,0.6);--color-h4:rgba(255,255,255,0.6);--color-h5:rgba(255,255,255,0.6);--color-h6:rgba(255,255,255,0.6);--color-p:rgba(217,217,217,0.871);--color-list:rgba(217,217,217,0.871);--color-list-hl:#63e0c4;--color-meta:rgba(191,191,191,0.871);--color-link:rgba(191,191,191,0.871);--color-copyright-bkg:#21252b}:root:not([color-scheme]) img{filter:brightness(70%)!important}:root:not([color-scheme]) .blur{background:rgba(31,31,31,.9)!important}:root:not([color-scheme]) .white-box.blur{background:rgba(38,38,38,.9)!important}:root:not([color-scheme]) .nav-main .u-search-input{background:var(--color-card)!important}:root:not([color-scheme]) #l_main .article .prev-next>a{background:var(--color-block)!important}:root:not([color-scheme]) #l_main .article .prev-next>a:hover{background:var(--color-site-bg)!important}:root:not([color-scheme]) .article blockquote{background:var(--color-block)!important}:root:not([color-scheme]) .article-title a{color:var(--color-h1)!important}:root:not([color-scheme]) details>summary{color:var(--color-p)!important;background:var(--color-site-bg)!important}:root:not([color-scheme]) details{border:1px solid var(--color-site-bg)!important;background:var(--color-site-bg)!important}:root:not([color-scheme]) #u-search .modal,:root:not([color-scheme]) #u-search .modal-body,:root:not([color-scheme]) #u-search .modal-header{background:var(--color-card)!important}:root:not([color-scheme]) #u-search .modal-body .modal-results .result:hover{background:var(--color-block)!important}:root:not([color-scheme]) .u-search-input:hover{background:var(--color-block)!important}:root:not([color-scheme]) .u-search-input:focus{background:var(--color-site-body)!important}}[color-scheme=dark]{--color-site-body:#121212;--color-read-bkg:#1f1f1f;--color-read-post:#262626;--color-site-bg:#1f1f1f;--color-site-inner:rgba(238,238,238,0.871);--color-site-footer:rgba(170,170,170,0.871);--color-card:#262626;--color-text:rgba(238,238,238,0.871);--color-block:#434343;--color-codeblock:#1f1f1f;--color-inlinecode:#d56d28;--color-h1:rgba(255,255,255,0.871);--color-h2:rgba(255,255,255,0.871);--color-h3:rgba(255,255,255,0.6);--color-h4:rgba(255,255,255,0.6);--color-h5:rgba(255,255,255,0.6);--color-h6:rgba(255,255,255,0.6);--color-p:rgba(217,217,217,0.871);--color-list:rgba(217,217,217,0.871);--color-list-hl:#63e0c4;--color-meta:rgba(191,191,191,0.871);--color-link:rgba(191,191,191,0.871);--color-copyright-bkg:#21252b}[color-scheme=dark] img{filter:brightness(70%)!important}[color-scheme=dark] .blur{background:rgba(31,31,31,.9)!important}[color-scheme=dark] .white-box.blur{background:rgba(38,38,38,.9)!important}[color-scheme=dark] .nav-main .u-search-input{background:var(--color-card)!important}[color-scheme=dark] #l_main .article .prev-next>a{background:var(--color-block)!important}[color-scheme=dark] #l_main .article .prev-next>a:hover{background:var(--color-site-bg)!important}[color-scheme=dark] .article blockquote{background:var(--color-block)!important}[color-scheme=dark] .article-title a{color:var(--color-h1)!important}[color-scheme=dark] details>summary{color:var(--color-p)!important;background:var(--color-site-bg)!important}[color-scheme=dark] details{border:1px solid var(--color-site-bg)!important;background:var(--color-site-bg)!important}[color-scheme=dark] #u-search .modal,[color-scheme=dark] #u-search .modal-body,[color-scheme=dark] #u-search .modal-header{background:var(--color-card)!important}[color-scheme=dark] #u-search .modal-body .modal-results .result:hover{background:var(--color-block)!important}[color-scheme=dark] .u-search-input:hover{background:var(--color-block)!important}[color-scheme=dark] .u-search-input:focus{background:var(--color-site-body)!important}@media screen and (max-width:500px){[color-scheme=dark] .l_header .m_search{background:var(--color-site-bg)!important}}@font-face{font-family:Dosis;src:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/fonts/Dosis/Dosis-Medium.ttf);font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Dosis;src:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/fonts/Dosis/Dosis-Medium.ttf);font-weight:400;font-style:normal;font-display:swap}.l_header{position:fixed;z-index:1000;top:0;width:100%;height:64px;background:var(--color-card);box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.l_header.auto{transition:opacity .4s ease;-webkit-transition:opacity .4s ease;-khtml-transition:opacity .4s ease;-moz-transition:opacity .4s ease;-o-transition:opacity .4s ease;-ms-transition:opacity .4s ease;visibility:hidden}.l_header.auto.show{opacity:1!important;-webkit-opacity:1!important;-moz-opacity:1!important;visibility:visible}.l_header .container{margin-left:16px;margin-right:16px}.l_header #wrapper{height:100%;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.l_header #wrapper .nav-main,.l_header #wrapper .nav-sub{display:flex;display:flex;flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-khtml-flex-wrap:nowrap;-moz-flex-wrap:nowrap;-o-flex-wrap:nowrap;-ms-flex-wrap:nowrap;justify-content:space-between;-webkit-justify-content:space-between;-khtml-justify-content:space-between;-moz-justify-content:space-between;-o-justify-content:space-between;-ms-justify-content:space-between;align-items:center}.l_header #wrapper .nav-main{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.l_header #wrapper.sub .nav-main{transform:translateY(-64px);-webkit-transform:translateY(-64px);-khtml-transform:translateY(-64px);-moz-transform:translateY(-64px);-o-transform:translateY(-64px);-ms-transform:translateY(-64px)}.l_header #wrapper .nav-sub{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;opacity:0;-webkit-opacity:0;-moz-opacity:0;height:64px;width:calc(100% - 2 * 16px);position:absolute}.l_header #wrapper .nav-sub ::-webkit-scrollbar{display:-webkit-box;display:-moz-box;display:none}@media screen and (min-width:2048px){.l_header #wrapper .nav-sub{max-width:55vw;margin:auto}}.l_header #wrapper.sub .nav-sub{opacity:1;-webkit-opacity:1;-moz-opacity:1}.l_header #wrapper .title{position:relative;color:var(--color-text);padding-left:24px;max-height:64px}.l_header #wrapper .nav-main .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;line-height:64px;padding:0 24px;font-size:1.25rem;font-family:Dosis,"PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace}.l_header #wrapper .nav-main .title img{height:64px}.l_header .nav-sub{max-width:1080px;margin:auto}.l_header .nav-sub .title{font-weight:700;font-family:Dosis,"PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif;line-height:1.2;max-height:64px;white-space:normal;flex-shrink:1}.l_header .switcher{display:-webkit-box;display:-moz-box;display:none;line-height:64px;align-items:center}.l_header .switcher .s-toc{display:-webkit-box;display:-moz-box;display:none}@media screen and (max-width:768px){.l_header .switcher .s-toc{display:flex;display:flex}}.l_header .switcher>li{height:48px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;margin:2px}@media screen and (max-width:500px){.l_header .switcher>li{margin:0 1px;height:48px}}.l_header .switcher>li>a{display:flex;display:flex;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;align-items:center;width:48px;height:48px;padding:.85em 1.1em;border-radius:100px;-webkit-border-radius:100px;border:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;color:#3dd9b6}.l_header .switcher>li>a:hover{border:none}.l_header .switcher>li>a.active,.l_header .switcher>li>a:active{border:none;background:var(--color-site-bg)}@media screen and (max-width:500px){.l_header .switcher>li>a{width:36px;height:48px}}.l_header .nav-sub .switcher{display:flex;display:flex}.l_header .m_search{display:flex;display:flex;height:64px;width:240px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}@media screen and (max-width:1024px){.l_header .m_search{width:44px;min-width:44px}.l_header .m_search input::-moz-placeholder{opacity:0;-webkit-opacity:0;-moz-opacity:0}.l_header .m_search input::placeholder{opacity:0;-webkit-opacity:0;-moz-opacity:0}.l_header .m_search:hover{width:240px}.l_header .m_search:hover input::-moz-placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}.l_header .m_search:hover input::placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@media screen and (min-width:500px){.l_header .m_search:hover .input{width:100%}.l_header .m_search:hover .input::-moz-placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}.l_header .m_search:hover .input::placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}}@media screen and (max-width:500px){.l_header .m_search{min-width:0}.l_header .m_search input::-moz-placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}.l_header .m_search input::placeholder{opacity:1;-webkit-opacity:1;-moz-opacity:1}}.l_header .m_search .form{position:relative;display:flex;display:flex;width:100%;align-items:center}.l_header .m_search .icon{position:absolute;width:36px;left:5px;color:var(--color-meta)}@media screen and (max-width:500px){.l_header .m_search .icon{display:-webkit-box;display:-moz-box;display:none}}.l_header .m_search .input{display:-webkit-box;display:-moz-box;display:block;padding-top:8px;padding-bottom:8px;line-height:1.3;width:100%;color:var(--color-text);background:#fafafa;box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding-left:40px;font-size:.875rem;border-radius:8px;-webkit-border-radius:8px;border:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}@media screen and (min-width:500px){.l_header .m_search .input:focus{box-shadow:0 4px 8px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.1)}}@media screen and (max-width:500px){.l_header .m_search .input{background:var(--color-block);padding-left:8px;border:none}.l_header .m_search .input:focus,.l_header .m_search .input:hover{border:none}}@media (max-width:500px){.l_header .m_search{left:0;width:0;overflow:hidden;position:absolute;background:#fff;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.l_header .m_search .input{border-radius:32px;-webkit-border-radius:32px;margin-left:16px;padding-left:16px}.l_header.z_search-open .m_search{width:100%}.l_header.z_search-open .m_search .input{width:calc(100% - 120px)}}ul.m-pc>li>a{color:inherit;border-bottom:2px solid transparent}ul.m-pc>li>a.active,ul.m-pc>li>a:active{border-bottom:2px solid #3dd9b6}ul.list-v li:hover>ul.list-v,ul.m-pc li:hover>ul.list-v{display:-webkit-box;display:-moz-box;display:block}ul.nav-list-h{display:flex;display:flex;align-items:stretch}ul.nav-list-h>li{position:relative;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;height:100%;line-height:2.4;border-radius:4px;-webkit-border-radius:4px}ul.nav-list-h>li>a{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:600}ul.list-v{z-index:1;display:-webkit-box;display:-moz-box;display:none;position:absolute;background:var(--color-card);box-shadow:0 2px 4px 0 rgba(0,0,0,.08),0 4px 8px 0 rgba(0,0,0,.08),0 8px 16px 0 rgba(0,0,0,.08);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.08),0 4px 8px 0 rgba(0,0,0,.08),0 8px 16px 0 rgba(0,0,0,.08);margin-top:-6px;border-radius:4px;-webkit-border-radius:4px;padding:8px 0}ul.list-v.show{display:-webkit-box;display:-moz-box;display:block}ul.list-v hr{margin-top:8px;margin-bottom:8px}ul.list-v>li{white-space:nowrap;word-break:keep-all}ul.list-v>li.header{font-size:.78125rem;font-weight:700;line-height:2em;color:var(--color-meta);margin:8px 16px 4px}ul.list-v>li.header i{margin-right:8px}ul.list-v>li ul{margin-left:0;display:-webkit-box;display:-moz-box;display:none;margin-top:-40px}ul.list-v .aplayer-container{min-height:64px;padding:6px 16px}ul.list-v>li>a{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;display:-webkit-box;display:-moz-box;display:block;color:var(--color-list);font-size:.875rem;font-weight:700;line-height:36px;padding:0 20px 0 16px;text-overflow:ellipsis;margin:0 4px;border-radius:4px;-webkit-border-radius:4px}@media screen and (max-width:1024px){ul.list-v>li>a{line-height:40px}}ul.list-v>li>a>i{margin-right:8px}ul.list-v>li>a.active,ul.list-v>li>a:active{color:var(--color-list-hl)}ul.list-v>li>a:hover{color:var(--color-list-hl);background:var(--color-site-bg)}.l_header .menu>ul>li>a{display:-webkit-box;display:-moz-box;display:block;padding:0 8px}.l_header .menu>ul>li>a>i{margin-right:4px}.l_header ul.nav-list-h>li{color:var(--color-list);line-height:64px}.l_header ul.nav-list-h>li>a{max-height:64px;overflow:hidden;color:inherit}.l_header ul.nav-list-h>li>a.active,.l_header ul.nav-list-h>li>a:active{color:#3dd9b6}.l_header ul.nav-list-h>li:hover>a{color:var(--color-list-hl)}.l_header ul.nav-list-h>li i.music{animation:rotate-effect 1.5s linear infinite;-webkit-animation:rotate-effect 1.5s linear infinite;-khtml-animation:rotate-effect 1.5s linear infinite;-moz-animation:rotate-effect 1.5s linear infinite;-o-animation:rotate-effect 1.5s linear infinite;-ms-animation:rotate-effect 1.5s linear infinite}@keyframes rotate-effect{0%{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}25%{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}50%{transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg)}75%{transform:rotate(270deg);-webkit-transform:rotate(270deg);-khtml-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg)}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}.menu-phone li ul.list-v{right:calc(100% - .5 * 16px)}.menu-phone li ul.list-v ul{right:calc(100% - .5 * 16px)}#wrapper{max-width:1080px;margin:auto}@media screen and (min-width:2048px){#wrapper{max-width:55vw}}#wrapper .menu{flex:1 1;margin:0 16px 0 0}#wrapper .menu .list-v ul{left:calc(100% - .5 * 16px)}.menu-phone{display:-webkit-box;display:-moz-box;display:none;margin-top:16px;right:8px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.menu-phone ul{right:calc(100% - .5 * 16px)}@media screen and (max-width:500px){.menu-phone{display:-webkit-box;display:-moz-box;display:block}}.l_header{max-width:65vw;left:calc((100% - 65vw) * .5);border-bottom-left-radius:8px;border-bottom-right-radius:8px}@media screen and (max-width:2048px){.l_header{max-width:1112px;left:calc((100% - 1112px) * .5)}}@media screen and (max-width:1112px){.l_header{left:0;border-radius:0;-webkit-border-radius:0;max-width:100%}}@media screen and (max-width:500px){.l_header .container{margin-left:0;margin-right:0}.l_header #wrapper .nav-main .title{padding-left:16px;padding-right:16px}.l_header #wrapper .nav-sub{width:100%}.l_header #wrapper .nav-sub .title{overflow-y:scroll;margin-top:2px;padding:8px 16px}.l_header #wrapper .switcher{display:flex;display:flex;margin-right:8px}.l_header .menu{display:-webkit-box;display:-moz-box;display:none}}@media screen and (max-width:500px){.list-v li{max-width:270px}}#u-search{display:-webkit-box;display:-moz-box;display:none;position:fixed;top:0;left:0;width:100%;height:100%;padding:60px 20px;z-index:1001}@media screen and (max-width:680px){#u-search{padding:0}}@media screen and (prefers-color-scheme:dark) and (max-width:500px){.l_header .m_search{background:var(--color-site-bg)!important}}article hr{background-image:none;height:2em;border:none;margin:1em 0 1em;text-align:center}article hr:after{content:"···";letter-spacing:2em;padding-left:2em;font-weight:700} +/*# sourceMappingURL=../maps/css/first.css.map */ diff --git a/css/message.css b/css/message.css deleted file mode 100644 index 624d5ecec2..0000000000 --- a/css/message.css +++ /dev/null @@ -1 +0,0 @@ -.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:none;animation-fill-mode:none}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.c-message{top:16px;z-index:2000;width:300px;padding:14px 26px 14px 13px;box-sizing:border-box;position:fixed;right:16px;background-color:var(--color-card);transition:opacity .3s,transform .3s,right .3s,top .4s;overflow:hidden;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:8px;border:1px solid var(--color-block)}.c-message a{border-bottom:1px solid rgba(131,145,165,.8);color:inherit;text-decoration:none;word-break:break-all}.c-message a:hover{border-bottom:1px solid #5c6775}.c-message.messageFadeInDown{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:messageFadeInDown;animation-name:messageFadeInDown}.c-message.messageFadeOutUp{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:messageFadeOutUp;animation-name:messageFadeOutUp}.c-message__title{font-weight:400;font-size:15px;color:var(--color-text);margin:0}.c-message--icon{position:absolute;color:#fff;height:25px;width:25px;font-size:25px}.el-notification__content{font-size:13px;line-height:21px;margin:10px 0 0;color:var(--color-p);text-align:justify;word-break:break-all}.el-notification__group{margin-left:35px}.c-message--close{position:absolute;right:10px;color:#999;text-decoration:none;cursor:pointer;font-size:25px;top:0;line-height:34px;display:block;height:20px;font-weight:100}.c-message--close:hover{color:#666}.c-message--success{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTE2NDE5MDE4MjQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE3OTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQuMDIzNDM3NSIgaGVpZ2h0PSIyNCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNODEwLjAxNTg1Nzc4IDMzMy40MzYwMTc3OEw0ODAuMzkyNTMzMzMgNzI0LjkwNjY2NjY3Yy0xNC42NjkzNjg4OSAxNi41MDQ2MDQ0NS0zOS42ODIyNzU1NSAxOC42MzU2NjIyMi01Ni45MzQ0IDQuODA3MTExMTFMMjI0LjE5OTExMTExIDU0MS4wNTU0MzExMWMtMi4xNTM4MTMzMy0yLjA1MzY4ODg5LTMuOTE5NjQ0NDUtNC4zMjY5Njg4OS01LjQ2NzAyMjIyLTYuNzA0OTI0NDQtNC4xMTUzNDIyMi01Ljc1NjAxNzc4LTYuNjExNjI2NjctMTIuNzU1NjI2NjctNi42MTE2MjY2Ny0yMC4zOTM1Mjg4OSAwLTE5LjM5MDAwODg5IDE1LjcxMDQzNTU1LTM1LjExNjM3MzMzIDM1LjEyMzItMzUuMTE2MzczMzMgNi4wOTczNTExMSAwIDExLjc1MjEwNjY3IDEuNjg3MzI0NDUgMTYuNzQ1ODEzMzMgNC40MTc5OTExIDAuNDgyNDE3NzggMC4yNzE5Mjg4OSAxLjAzNDI0IDAuNDc1NTkxMTEgMS40ODU5Mzc3OCAwLjc1NDM0NjY3bDAuNzIzNjI2NjcgMC40NTA1NmMwLjM1NzI2MjIyIDAuMjMzMjQ0NDUgMC43MzE1OTExMSAwLjQ3NTU5MTExIDEuMDk3OTU1NTUgMC43MjQ3NjQ0NWwxNzUuNjM3NjE3NzggMTE0LjMyNjE4NjY2YzIuMzE3NjUzMzMgMS41MjQ2MjIyMiA1LjM1ODkzMzMzIDEuMjEyODcxMTEgNy4zMjUwMTMzNC0wLjcxNTY2MjIybDMxMy41NzA0MTc3OC0zMDguMTQyMDhjMTIuMjQyNDg4ODktMTIuMDI0MDM1NTUgMzEuODU3Nzc3NzgtMTIuMDMyIDQ0LjExMjc4MjIyLTAuMDMwNzJDODE5LjczODE2ODg5IDMwMi4xNTI4MTc3OCA4MjAuNjQwNDI2NjcgMzIwLjgyMDMzNzc4IDgxMC4wMTU4NTc3OCAzMzMuNDM2MDE3NzhNNTE0LjIxMDcwMjIyLTIuMTI5OTJjLTI4MS41MDg5Nzc3OCAwLTUwOS43MjQ0NDQ0NSAyMjguMjE1NDY2NjctNTA5LjcyNDQ0NDQ0IDUwOS43MjQ0NDQ0NXMyMjguMjE1NDY2NjcgNTA5LjcyNDQ0NDQ1IDUwOS43MjQ0NDQ0NCA1MDkuNzI0NDQ0NDRjMjgxLjUyNDkwNjY3IDAgNTA5LjcyNDQ0NDQ1LTIyOC4yMTU0NjY2NyA1MDkuNzI0NDQ0NDUtNTA5LjcyNDQ0NDQ0Uzc5NS43MzU2MDg4OS0yLjEyOTkyIDUxNC4yMTA3MDIyMi0yLjEyOTkyeiIgZmlsbD0iIzY3YzIzYSIgcC1pZD0iMTc5MSI+PC9wYXRoPjwvc3ZnPg==) 0 50% no-repeat}.c-message--error{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTE2NDE3MjY0NzM4IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NzMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTk4My44IDMxMi43Qzk1OCAyNTEuNyA5MjEgMTk3IDg3NCAxNTBjLTQ3LTQ3LTEwMS43LTg0LTE2Mi43LTEwOS43QzY0OC4yIDEzLjUgNTgxLjEgMCA1MTIgMFMzNzUuOCAxMy41IDMxMi43IDQwLjNDMjUxLjcgNjYgMTk3IDEwMyAxNTAgMTUwYy00NyA0Ny04NCAxMDEuNy0xMDkuNyAxNjIuN0MxMy41IDM3NS44IDAgNDQyLjkgMCA1MTJzMTMuNSAxMzYuMiA0MC4zIDE5OS4zQzY2IDc3Mi4zIDEwMyA4MjcgMTUwIDg3NGM0NyA0NyAxMDEuOCA4My45IDE2Mi43IDEwOS43IDYzLjEgMjYuNyAxMzAuMiA0MC4zIDE5OS4zIDQwLjNzMTM2LjItMTMuNSAxOTkuMy00MC4zQzc3Mi4zIDk1OCA4MjcgOTIxIDg3NCA4NzRjNDctNDcgODMuOS0xMDEuOCAxMDkuNy0xNjIuNyAyNi43LTYzLjEgNDAuMy0xMzAuMiA0MC4zLTE5OS4zcy0xMy41LTEzNi4yLTQwLjItMTk5LjN6TTY2NC43IDYxMy44YzE0LjEgMTQuMSAxNC4xIDM2LjkgMCA1MC45LTcgNy0xNi4yIDEwLjUtMjUuNSAxMC41cy0xOC40LTMuNS0yNS41LTEwLjVMNTEyIDU2Mi45IDQxMC4yIDY2NC43Yy03IDctMTYuMiAxMC41LTI1LjUgMTAuNXMtMTguNC0zLjUtMjUuNS0xMC41Yy0xNC4xLTE0LjEtMTQuMS0zNi45IDAtNTAuOUw0NjEuMSA1MTIgMzU5LjMgNDEwLjJjLTE0LjEtMTQuMS0xNC4xLTM2LjkgMC01MC45IDE0LjEtMTQuMSAzNi45LTE0LjEgNTAuOSAwTDUxMiA0NjEuMWwxMDEuOC0xMDEuOGMxNC4xLTE0LjEgMzYuOS0xNC4xIDUwLjkgMCAxNC4xIDE0LjEgMTQuMSAzNi45IDAgNTAuOUw1NjIuOSA1MTJsMTAxLjggMTAxLjh6IiBwLWlkPSI0NDc0IiBmaWxsPSIjZjY2YzZiIiBkYXRhLXNwbS1hbmNob3ItaWQ9ImEzMTN4Ljc3ODEwNjkuMC5pMiIgY2xhc3M9IiI+PC9wYXRoPjwvc3ZnPg==) 0 50% no-repeat}.c-message--info{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTE2NDE5MTk2ODQ3IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjExMzciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjUiIGhlaWdodD0iMjUiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiA3LjEzMDA3NDA4Yy0yNzguODQzNTQzNyAwLTUwNC44Njk5MjU5MiAyMjYuMDI2MzgyMjItNTA0Ljg2OTkyNTkyIDUwNC44Njk5MjU5MnMyMjYuMDI2MzgyMjIgNTA0Ljg2OTkyNTkyIDUwNC44Njk5MjU5MiA1MDQuODY5OTI1OTIgNTA0Ljg2OTkyNTkyLTIyNi4wMjYzODIyMiA1MDQuODY5OTI1OTItNTA0Ljg2OTkyNTkyLTIyNi4wMjYzODIyMi01MDQuODY5OTI1OTItNTA0Ljg2OTkyNTkyLTUwNC44Njk5MjU5MnpNNTkxLjE4NjkwNjA4IDY5Ny43NTMyOTY1OWMtMzguMDk4MjYxMzMgNTcuMjA1NjQ2MjItNzYuODU2NzM3MTggMTAxLjI4NDY3NDM3LTE0Mi4wNjI2Mjk5MyAxMDEuMjg0Njc0MzgtNDQuNTA2MjI1NzgtNy4yNjIzNTk3LTYyLjc5ODA1MTU1LTM5LjE0NjgzNzMzLTUzLjE2NjY4NjgyLTcxLjY1MjY5MzM0bDgzLjg4NjA4LTI3Ny44MzM4MDM4NWMyLjA1ODMxNTg1LTYuNzk2MzI1OTItMS4zNTkyNjUxOC0xNC4wNTg2ODU2My03LjU3MzA0ODg4LTE2LjI3MjM0NjA4LTYuMTc0OTQ3NTUtMi4xNzQ4MjQzLTE4LjI5MTgyNTc4IDUuODY0MjU4MzctMjguNzc3NTg1NzggMTcuMzU5NzU4MjJsLTUwLjcyMDAwOTQ5IDYxLjAxMTU4ODc1Yy0xLjM1OTI2NTE4LTEwLjI1Mjc0MzExLTAuMTU1MzQ0NTktMjcuMTg1MzAzNy0wLjE1NTM0NDU5LTM0LjAyMDQ2NTc4IDM4LjA5ODI2MTMzLTU3LjIwNTY0NjIyIDEwMC43MDIxMzIxNS0xMDIuMzMzMjUwMzcgMTQzLjE1MDA0MjA4LTEwMi4zMzMyNTAzNyA0MC4zNTA3NTc5MiA0LjExNjYzMTcgNTkuNDU4MTQyODIgMzYuMzg5NDcwODIgNTIuNDI4OCA3MS44NDY4NzQwN2wtODQuNDY4NjIyMjIgMjc5LjE5MzA2OTA0Yy0xLjEyNjI0ODMgNi4yOTE0NTYgMi4yMTM2NjA0NSAxMi42OTk0MjA0NSA3LjkyMjU3NDIyIDE0LjcxODkwMDE1IDYuMjEzNzgzNyAyLjE3NDgyNDMgMTkuMjYyNzI5NDgtNS44NjQyNTgzNyAyOS43ODczMjU2My0xNy4zNTk3NTgyM2w1MC42ODExNzMzMy02MC45NzI3NTI1OGMxLjM1OTI2NTE4IDEwLjI1Mjc0MzExLTAuOTMyMDY3NTUgMjguMTk1MDQzNTUtMC45MzIwNjc1NSAzNS4wMzAyMDU2MnpNNTc5Ljg4NTU4Njk3IDMzNC44NjgzMjgzYy0zMi4wNzg2NTgzNyAwLTU4LjA5ODg3NzYzLTIzLjM3OTM2MTE4LTU4LjA5ODg3NzY0LTU3Ljc4ODE4ODQ1czI2LjAyMDIxOTI1LTU3Ljc0OTM1MjMgNTguMDk4ODc3NjQtNTcuNzQ5MzUyMyA1OC4wOTg4Nzc2MyAyMy4zNzkzNjExOCA1OC4wOTg4Nzc2MiA1Ny43NDkzNTIzYzAgMzQuNDQ3NjYzNDEtMjYuMDIwMjE5MjUgNTcuNzg4MTg4NDUtNTguMDk4ODc3NjIgNTcuNzg4MTg4NDV6IiBmaWxsPSIjMjE5NmYzIiBwLWlkPSIxMTM4Ij48L3BhdGg+PC9zdmc+) 0 50% no-repeat}.c-message--warning{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTE2NDE4MzA1NDMxIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjcxOTciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiAxMDI0QzIyOS4yMzIgMTAyNCAwIDc5NC43NjggMCA1MTIgMCAyMjkuMjMyIDIyOS4yMzIgMCA1MTIgMGMyODIuNzY4IDAgNTEyIDIyOS4yMzIgNTEyIDUxMkMxMDI0IDc5NC43NjggNzk0Ljc2OCAxMDI0IDUxMiAxMDI0ek01NjAgMjQwYzAtMjYuNTEyLTIxLjQ4OC00OC00OC00OHMtNDggMjEuNDg4LTQ4IDQ4bDAgMzUyYzAgMjYuNTEyIDIxLjQ4OCA0OCA0OCA0OHM0OC0yMS40ODggNDgtNDhMNTYwIDI0MHpNNTEyIDczNmMtMjYuNTEyIDAtNDggMjEuNDg4LTQ4IDQ4czIxLjQ4OCA0OCA0OCA0OCA0OC0yMS40ODggNDgtNDhTNTM4LjUxMiA3MzYgNTEyIDczNnoiIHAtaWQ9IjcxOTgiIGZpbGw9IiNlNmEyM2MiPjwvcGF0aD48L3N2Zz4=) 0 50% no-repeat}@-webkit-keyframes slideOutRight{0%{transform:translate3d(0,0,0)}100%{visibility:hidden;transform:translate3d(100%,0,0)}}@-webkit-keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}100%{transform:translate3d(0,0,0)}}@keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}100%{transform:translate3d(0,0,0)}}@-webkit-keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}100%{transform:translate3d(0,0,0)}}@keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}100%{transform:translate3d(0,0,0)}}@-webkit-keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}100%{transform:translate3d(0,0,0)}}@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}100%{transform:translate3d(0,0,0)}}@-webkit-keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}100%{transform:translate3d(0,0,0)}}@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}100%{transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutDown{0%{transform:translate3d(0,0,0)}100%{visibility:hidden;transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{transform:translate3d(0,0,0)}100%{visibility:hidden;transform:translate3d(0,100%,0)}}@-webkit-keyframes slideOutLeft{0%{transform:translate3d(0,0,0)}100%{visibility:hidden;transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{transform:translate3d(0,0,0)}100%{visibility:hidden;transform:translate3d(-100%,0,0)}}@-webkit-keyframes slideOutRight{0%{transform:translate3d(0,0,0)}100%{visibility:hidden;transform:translate3d(120%,0,0)}}@keyframes slideOutRight{0%{transform:translate3d(0,0,0)}100%{visibility:hidden;transform:translate3d(120%,0,0)}}@-webkit-keyframes slideOutUp{0%{transform:translate3d(0,0,0)}100%{visibility:hidden;transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{transform:translate3d(0,0,0)}100%{visibility:hidden;transform:translate3d(0,-100%,0)}}@-webkit-keyframes messageFadeInDown{0%{transform:translate3d(0,-100%,0)}100%{transform:none}}@keyframes messageFadeInDown{0%{transform:translate3d(0,-100%,0)}100%{transform:none}}@-webkit-keyframes messageFadeOutUp{0%{opacity:1}100%{opacity:0;transform:translateY(-100%)}}@keyframes messageFadeOutUp{0%{opacity:1}100%{opacity:0;transform:translateY(-100%)}} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 150189b6bb..65545617de 100644 --- a/css/style.css +++ b/css/style.css @@ -1 +1,2 @@ -.highlight,.hljs{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.blur{background:rgba(255,255,255,.9)!important;-webkit-backdrop-filter:saturate(200%) blur(20px);backdrop-filter:saturate(200%) blur(20px)}}.shadow{box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.shadow.floatable{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.shadow.floatable:hover{box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}@font-face{font-family:Dosis;src:url(https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf);font-weight:'normal';font-style:'normal';font-display:swap}@font-face{font-family:Dosis;src:url(https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf);font-weight:'normal';font-style:'normal';font-display:swap}:root{--site-bg:#f8f8f8;--block:#f2f2f2;--block-border:#e7e7e7;--block-hover:#ededed;--text-p0:#000;--text-p1:#222;--text-p2:#4c4c4c;--text-p3:#777;--text-meta:#cdcdcd;--card:#fff;--theme-highlight:#2fd3ae;--theme-bg:#ecfbf7}body[theme=dark]{--site-bg:#000;--block:#111;--block-border:#282828;--block-hover:#1c1c1c;--text-p0:#fff;--text-p1:#fff;--text-p2:#b2b2b2;--text-p3:#727272;--text-meta:#4c4c4c;--card:#333;--theme-highlight:#44d7b6;--theme-bg:#344340}.article span.btn,.md span.btn{display:inline}.article span.btn a,.md span.btn a{text-decoration:none;display:inline-block;padding:3px 4px 2px;margin:2px;line-height:1.1;border-radius:2px;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.article span.btn a:not([href]),.md span.btn a:not([href]){opacity:.5}.article span.btn a:not([href]):hover,.md span.btn a:not([href]):hover{cursor:$not-allowed,not-allowed}.article span.btn a,.article span.btn.regular a,.md span.btn a,.md span.btn.regular a{color:#44d7b6;border:1px solid #44d7b6}.article span.btn a:hover,.article span.btn.regular a:hover,.md span.btn a:hover,.md span.btn.regular a:hover{color:#ff5722;border-color:#ff5722}.article span.btn a i,.article span.btn.regular a i,.md span.btn a i,.md span.btn.regular a i{margin-right:4px}.article span.btn.regular a,.article span.btn.solid a,.md span.btn.regular a,.md span.btn.solid a{padding:8px 12px}.article span.btn.solid a,.md span.btn.solid a{border:none;background:#44d7b6;color:#fff}.article span.btn.solid a:hover,.md span.btn.solid a:hover{color:#fff;background:#ff5722}.article span.btn.large a,.md span.btn.large a{font-size:1rem;padding:12px 36px}.article span.btn.large a i,.md span.btn.large a i{margin-right:8px}.article span.btn.center,.md span.btn.center{display:block;text-align:center}.article div.btns,.md div.btns{margin:0 -8px;display:flex;flex-wrap:wrap;align-items:flex-start;overflow:visible;line-height:1.8}.article div.btns,.article div.btns a,.article div.btns p,.md div.btns,.md div.btns a,.md div.btns p{font-size:.8125rem;color:var(--color-p)}.article div.btns b,.md div.btns b{font-size:.875rem}.article div.btns.wide>a,.md div.btns.wide>a{padding-left:32px;padding-right:32px}.article div.btns.fill>a,.md div.btns.fill>a{flex-grow:1;width:auto}.article div.btns.around,.md div.btns.around{justify-content:space-around}.article div.btns.center,.md div.btns.center{justify-content:center}.article div.btns.grid2>a,.md div.btns.grid2>a{width:calc(100%/2 - 16px)}@media screen and (max-width:1024px){.article div.btns.grid2>a,.md div.btns.grid2>a{width:calc(100%/2 - 16px)}}@media screen and (max-width:768px){.article div.btns.grid2>a,.md div.btns.grid2>a{width:calc(100%/2 - 16px)}}@media screen and (max-width:500px){.article div.btns.grid2>a,.md div.btns.grid2>a{width:calc(100%/1 - 16px)}}.article div.btns.grid3>a,.md div.btns.grid3>a{width:calc(100%/3 - 16px)}@media screen and (max-width:1024px){.article div.btns.grid3>a,.md div.btns.grid3>a{width:calc(100%/3 - 16px)}}@media screen and (max-width:768px){.article div.btns.grid3>a,.md div.btns.grid3>a{width:calc(100%/3 - 16px)}}@media screen and (max-width:500px){.article div.btns.grid3>a,.md div.btns.grid3>a{width:calc(100%/1 - 16px)}}.article div.btns.grid4>a,.md div.btns.grid4>a{width:calc(100%/4 - 16px)}@media screen and (max-width:1024px){.article div.btns.grid4>a,.md div.btns.grid4>a{width:calc(100%/3 - 16px)}}@media screen and (max-width:768px){.article div.btns.grid4>a,.md div.btns.grid4>a{width:calc(100%/3 - 16px)}}@media screen and (max-width:500px){.article div.btns.grid4>a,.md div.btns.grid4>a{width:calc(100%/2 - 16px)}}.article div.btns.grid5>a,.md div.btns.grid5>a{width:calc(100%/5 - 16px)}@media screen and (max-width:1024px){.article div.btns.grid5>a,.md div.btns.grid5>a{width:calc(100%/4 - 16px)}}@media screen and (max-width:768px){.article div.btns.grid5>a,.md div.btns.grid5>a{width:calc(100%/3 - 16px)}}@media screen and (max-width:500px){.article div.btns.grid5>a,.md div.btns.grid5>a{width:calc(100%/2 - 16px)}}.article div.btns a,.md div.btns a{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;text-decoration:none;border-bottom:none;margin:8px;margin-top:calc(1.25 * 16px + 32px);min-width:120px;font-weight:700;display:flex;justify-content:flex-start;align-content:center;align-items:center;flex-direction:column;padding:8px;text-align:center;background:var(--color-block);border-radius:4px}.article div.btns a>i:first-child,.article div.btns a>img:first-child,.md div.btns a>i:first-child,.md div.btns a>img:first-child{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;height:64px;width:64px;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);margin:16px 8px 4px;margin-top:calc(-1.25 * 16px - 32px);border:2px solid var(--color-card);background:#fff;line-height:60px;font-size:28px}.article div.btns a>i:first-child.auto,.article div.btns a>img:first-child.auto,.md div.btns a>i:first-child.auto,.md div.btns a>img:first-child.auto{width:auto}.article div.btns a>i:first-child,.md div.btns a>i:first-child{color:#fff;background:#44d7b6}.article div.btns a b,.article div.btns a p,.md div.btns a b,.md div.btns a p{margin:.25em;font-weight:400;line-height:1.25;word-wrap:break-word}.article div.btns a b,.md div.btns a b{font-weight:700;line-height:1.3}.article div.btns a img,.md div.btns a img{margin:.4em auto}.article div.btns a:not([href]),.md div.btns a:not([href]){cursor:default;color:inherit}.article div.btns a[href]:hover,.md div.btns a[href]:hover{background:rgba(255,87,34,.15)}.article div.btns a[href]:hover,.article div.btns a[href]:hover b,.md div.btns a[href]:hover,.md div.btns a[href]:hover b{color:#ff5722}.article div.btns a[href]:hover>i:first-child,.article div.btns a[href]:hover>img:first-child,.md div.btns a[href]:hover>i:first-child,.md div.btns a[href]:hover>img:first-child{transform:scale(1.1) translateY(-8px);box-shadow:0 4px 8px 0 rgba(0,0,0,.1)}.article div.btns a[href]:hover>i:first-child,.md div.btns a[href]:hover>i:first-child{background:#ff5722}.article div.btns.circle a>i:first-child,.article div.btns.circle a>img:first-child,.md div.btns.circle a>i:first-child,.md div.btns.circle a>img:first-child{border-radius:32px}.article div.btns.rounded a>i:first-child,.article div.btns.rounded a>img:first-child,.md div.btns.rounded a>i:first-child,.md div.btns.rounded a>img:first-child{border-radius:16px}.md .checkbox{display:flex;align-items:center;margin-top:1em;margin-bottom:1em}.md .checkbox+.checkbox{margin-top:-1em}.md .checkbox input{transform:translate(0,-1px);-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;position:relative;height:16px;width:16px;transition:all .15s ease-out 0s;-moz-transition:all .15s ease-out 0s;-webkit-transition:all .15s ease-out 0s;-o-transition:all .15s ease-out 0s;cursor:pointer;display:inline-block;outline:0;border-radius:2px;flex-shrink:0;margin-right:8px;pointer-events:none}.md .checkbox input[type=checkbox]:after,.md .checkbox input[type=checkbox]:before{position:absolute;content:"";background:#fff}.md .checkbox input[type=checkbox]:before{left:1px;top:5px;width:0;height:2px;transition:all .2s ease-in;-moz-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-o-transition:all .2s ease-in;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg)}.md .checkbox input[type=checkbox]:after{right:7px;bottom:3px;width:2px;height:0;transition:all .2s ease-out;-moz-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-o-transition:all .2s ease-out;transform:rotate(40deg);-webkit-transform:rotate(40deg);-moz-transform:rotate(40deg);-ms-transform:rotate(40deg);-o-transform:rotate(40deg);transition-delay:.25s}.md .checkbox input[type=checkbox]:checked:before{left:0;top:7px;width:6px;height:2px}.md .checkbox input[type=checkbox]:checked:after{right:3px;bottom:1px;width:2px;height:10px}.md .checkbox.minus input[type=checkbox]:after,.md .checkbox.minus input[type=checkbox]:before{transform:rotate(0);left:1px;top:5px;width:0;height:2px}.md .checkbox.minus input[type=checkbox]:checked:after,.md .checkbox.minus input[type=checkbox]:checked:before{left:1px;top:5px;width:10px;height:2px}.md .checkbox.plus input[type=checkbox]:before{transform:rotate(0);left:1px;top:5px;width:0;height:2px}.md .checkbox.plus input[type=checkbox]:after{transform:rotate(0);left:5px;top:1px;width:2px;height:0}.md .checkbox.plus input[type=checkbox]:checked:before{left:1px;top:5px;width:10px;height:2px}.md .checkbox.plus input[type=checkbox]:checked:after{left:5px;top:1px;width:2px;height:10px}.md .checkbox.times input[type=checkbox]:before{transform:rotate(45deg);left:3px;top:1px;width:0;height:2px}.md .checkbox.times input[type=checkbox]:after{transform:rotate(135deg);right:3px;top:1px;width:0;height:2px}.md .checkbox.times input[type=checkbox]:checked:before{left:1px;top:5px;width:10px;height:2px}.md .checkbox.times input[type=checkbox]:checked:after{right:1px;top:5px;width:10px;height:2px}.md .checkbox input[type=radio]{border-radius:50%}.md .checkbox input[type=radio]:before{content:"";display:block;width:8px;height:8px;border-radius:50%;margin:2px;transform:scale(0);transition:all .25s ease-out;-moz-transition:all .25s ease-out;-webkit-transition:all .25s ease-out;-o-transition:all .25s ease-out}article .checkbox p,div.dropmenu,div.dropmenu-wrapper{display:inline-block}.md .checkbox input[type=radio]:checked:before{transform:scale(1)}.md .checkbox input{border:2px solid #44d7b6}.md .checkbox input[type=checkbox]:checked,.md .checkbox input[type=radio]:checked:before{background:#44d7b6}.md .checkbox.red input{border-color:#fe5f58}.md .checkbox.red input[type=checkbox]:checked,.md .checkbox.red input[type=radio]:checked:before{background:#fe5f58}.md .checkbox.green input{border-color:#3dc550}.md .checkbox.green input[type=checkbox]:checked,.md .checkbox.green input[type=radio]:checked:before{background:#3dc550}.md .checkbox.yellow input{border-color:#ffbd2b}.md .checkbox.yellow input[type=checkbox]:checked,.md .checkbox.yellow input[type=radio]:checked:before{background:#ffbd2b}.md .checkbox.cyan input{border-color:#1bcdfc}.md .checkbox.cyan input[type=checkbox]:checked,.md .checkbox.cyan input[type=radio]:checked:before{background:#1bcdfc}.md .checkbox.blue input{border-color:#2196f3}.md .checkbox.blue input[type=checkbox]:checked,.md .checkbox.blue input[type=radio]:checked:before{background:#2196f3}article .checkbox p{margin-top:0!important;margin-bottom:0!important}div.dropmenu{position:relative;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;color:#2196f3}div.dropmenu:hover{color:inherit}div.dropmenu:hover>ul{display:block;left:0;margin-left:0;margin-top:0}div.dropmenu ul>li{list-style:none}div.dropmenu ul>li>a:hover{text-decoration:none!important}div.dropmenu .list-v .list-v{left:calc(100% - .5 * 16px)}details{display:block;padding:16px;margin:1em 0;border-radius:4px;background:var(--color-card);font-size:.9375rem;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;border:1px solid var(--color-block)}details summary{cursor:pointer;padding:16px;margin:-16px;border-radius:4px;color:rgba(68,68,68,.7);font-size:.875rem;font-weight:700;position:relative;line-height:normal}details summary>h1,details summary>h2,details summary>h3,details summary>h4,details summary>h5,details summary>h6,details summary>p{display:inline;border-bottom:none!important}details summary:hover{color:var(--color-p)}details summary:hover:after{position:absolute;content:'+';text-align:center;top:50%;transform:translateY(-50%);right:16px}details>summary{background:var(--color-block)}details[blue]{border-color:#e8f4fd}details[blue]>summary{background:#e8f4fd}details[cyan]{border-color:#e8fafe}details[cyan]>summary{background:#e8fafe}details[green]{border-color:#ebf9ed}details[green]>summary{background:#ebf9ed}details[yellow]{border-color:#fff8e9}details[yellow]>summary{background:#fff8e9}details[red]{border-color:#feefee}details[red]>summary{background:#feefee}details[open]{border-color:rgba(68,68,68,.2)}details[open]>summary{border-bottom:1px solid rgba(68,68,68,.2);border-bottom-left-radius:0;border-bottom-right-radius:0;color:#444;margin-bottom:0}details[open][blue]{border-color:rgba(33,150,243,.3)}details[open][blue]>summary{border-bottom-color:rgba(33,150,243,.3)}details[open][cyan]{border-color:rgba(27,205,252,.3)}details[open][cyan]>summary{border-bottom-color:rgba(27,205,252,.3)}details[open][green]{border-color:rgba(61,197,80,.3)}details[open][green]>summary{border-bottom-color:rgba(61,197,80,.3)}details[open][yellow]{border-color:rgba(255,189,43,.3)}details[open][yellow]>summary{border-bottom-color:rgba(255,189,43,.3)}details[open][red]{border-color:rgba(254,95,88,.3)}details[open][red]>summary{border-bottom-color:rgba(254,95,88,.3)}details[open]>summary:hover:after{content:'-'}details[open]>div.content{padding:16px;margin:0 -16px -16px}details[open]>div.content p>a:hover{text-decoration:underline}details[open]>div.content>.highlight:first-child,details[open]>div.content>.note:first-child,details[open]>div.content>.tabs:first-child,details[open]>div.content>details:first-child,details[open]>div.content>ol:first-child,details[open]>div.content>p:first-child,details[open]>div.content>ul:first-child{margin-top:0}details[open]>div.content>.highlight:last-child,details[open]>div.content>.note:last-child,details[open]>div.content>.tabs:last-child,details[open]>div.content>details:last-child,details[open]>div.content>ol:last-child,details[open]>div.content>p:last-child,details[open]>div.content>ul:last-child{margin-bottom:0}.md .frame-wrap{position:relative;overflow:hidden;margin:0 auto;max-width:100%;display:flex;flex-direction:column;align-items:center}.md .frame-wrap img,.md .frame-wrap video{border-radius:0}.md .frame-wrap .frame{z-index:1;display:block;position:absolute;background-size:100%;background-repeat:no-repeat;overflow:hidden}.md .img-wrap .frame-wrap[part]{height:auto}.md .frame-wrap#iphone11 img,.md .frame-wrap#iphone11 video{width:287px;margin-top:19px;margin-bottom:20px}.md .frame-wrap#iphone11 .frame{background-image:url(https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@3/img/frame/iphone11.svg);width:329px;height:658px}.md .frame-wrap[part=top] img,.md .frame-wrap[part=top] video{margin-bottom:0!important}.md .frame-wrap:not([part=bottom]) .frame{top:0}.md .frame-wrap[part=bottom] img,.md .frame-wrap[part=bottom] video{bottom:0;margin-top:0!important}.md .frame-wrap[part=bottom] .frame{bottom:0}@media screen and (max-width:500px){.md .frame-wrap#iphone11 img,.md .frame-wrap#iphone11 video{width:208px;margin-top:13px;margin-bottom:14px}.md .frame-wrap#iphone11 .frame{width:238px;height:476px}}.users-wrap{overflow:hidden}.users-wrap .group-header{margin:0 0 1rem}.users-wrap .group-header p{margin:0;font-size:.875rem}.users-wrap .group-header p:first-child{font-size:1.25rem;font-weight:500}.users-wrap .group-body{width:100%;display:flex;flex-wrap:wrap;align-items:stretch;margin-bottom:2rem}.users-wrap .friendsjs-wrap{display:block}.users-wrap .friendsjs-wrap .loading-wrap{min-height:50px;margin:2rem 0;text-align:center}.users-wrap .user-card{flex-shrink:1;display:flex;align-items:stretch;width:12.5%}@media screen and (max-width:980px){.users-wrap .user-card{width:14.28%}}@media screen and (max-width:900px){.users-wrap .user-card{width:16.66%}}@media screen and (max-width:820px){.users-wrap .user-card{width:20%}}@media screen and (max-width:768px){.users-wrap .user-card{width:16.66%}}@media screen and (max-width:500px){.users-wrap .user-card{width:25%}}.users-wrap .user-card .card-link{margin:0;width:100%;color:var(--text-p1);font-size:10px;font-weight:500;display:flex;justify-content:flex-start;flex-direction:column;align-items:center;text-align:center;line-height:1.2;border-radius:4px;overflow:hidden;position:relative;padding:1rem .5rem}.users-wrap .user-card .card-link img{-o-object-fit:cover;object-fit:cover;display:block;width:48px;height:48px;background:var(--card);border-radius:64px;margin:0 0 .5rem}.users-wrap .user-card .card-link>img{transition:transform .2s ease-out,box-shadow .2s ease-out;-moz-transition:transform .2s ease-out,box-shadow .2s ease-out;-webkit-transition:transform .2s ease-out,box-shadow .2s ease-out;-o-transition:transform .2s ease-out,box-shadow .2s ease-out}.users-wrap .user-card .card-link:hover{background:var(--block-hover)}.md .link-card,div.note{background:var(--color-block)}.users-wrap .user-card .card-link:hover img{transform:scale(1.2) rotate(8deg);box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}a.ghcard{display:inline-block;line-height:0}.md .ghcard-group{-moz-column-count:2;column-count:2;-moz-column-gap:0;column-gap:0;margin:0 -8px}.md .ghcard-group .ghcard{margin:8px}.md .img{-o-object-fit:contain;object-fit:contain}img.inline{display:inline!important;vertical-align:middle;transform:translateY(-4px)}.md .tag.link{margin-top:1em;margin-bottom:1em}.md .link-card{margin-right:1em;display:inline-flex;align-items:center;cursor:pointer;text-align:center;width:361px;max-width:100%;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);color:var(--color-p);border-radius:8px}@media screen and (max-width:425px){.md .link-card{max-width:100%;width:100%}}.md .link-card:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,.1),0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}.md .link-card div.left,.md .link-card div.right{pointer-events:none}.md .link-card div.left{width:54px;height:54px;margin:12px;overflow:hidden;flex-shrink:0;position:relative}.md .link-group .link-card,div.videos iframe,div.videos[col='1'] .video,div.videos[col='1'] iframe{width:100%}.md .link-card div.left i{font-size:32px;line-height:48px;margin-left:4px}.md .link-card div.left img{display:block;position:absolute;border-radius:8px/4;top:50%;left:50%;transform:translate(-50%,-50%)}.md .link-card div.right{overflow:hidden;margin-right:16px}.md .link-card p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md .link-card p.text{font-weight:700}.md .link-card p.url{flex-shrink:0;color:var(--color-meta);font-size:.8125rem}.md .link-group{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px}@media screen and (max-width:850px){.md .link-group{grid-template-columns:1fr}}.md .link-group .tag.link{margin:0}audio,video{border-radius:4px;max-width:100%}video{z-index:1;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}video:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,.24),0 8px 16px 0 rgba(0,0,0,.24)}div.video{line-height:0;text-align:center}div.videos{max-width:calc(100% + 2 * 4px);display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;margin:1em -4px}div.videos .video,div.videos iframe{width:100%;margin:4px}div.videos iframe{border-radius:4px;min-height:300px}div.videos.left{justify-content:flex-start}div.videos.center{justify-content:center}div.videos.right{justify-content:flex-end}div.videos.stretch{align-items:stretch}div.videos[col='2'] .video,div.videos[col='2'] iframe{width:calc(50% - 2 * 4px)}div.videos[col='3'] .video,div.videos[col='3'] iframe{width:calc(33.33% - 2 * 4px)}div.videos[col='4'] .video,div.videos[col='4'] iframe{width:calc(25% - 2 * 4px)}div.note{position:relative;margin-top:1em;margin-bottom:1em;padding:16px;padding-left:calc(16px + 16px);border-radius:4px;font-size:.9375rem;border-left:4px solid #44d7b6}div.note h2,div.note h3,div.note h4,div.note h5,div.note h6{margin-top:3px;margin-bottom:0;padding-top:0!important;border-bottom:initial}div.note blockquote,div.note img,div.note ol,div.note p,div.note ul{margin-top:.5em;margin-bottom:.5em}div.note .link-card{background:var(--color-card)}div.note::before{position:absolute;top:calc(50% - 24px * .5);left:4px;width:24px;height:24px;text-align:center;font-weight:600;line-height:24px;vertical-align:middle;font-family:'Font Awesome 5 Pro';color:#44d7b6;content:'\f054'}div.tabs,div.timenode{position:relative}div.note.quote{background:#e8f4fd;border-color:#2196f3}div.note.quote::before{color:#2196f3;content:'\f10d'}div.note.info{background:#ecfbf7;border-color:#44d7b6}div.note.info::before{color:#44d7b6;content:'\f129'}div.note.done,div.note.success{background:#ebf9ed;border-color:#3dc550}div.note.done::before,div.note.success::before{color:#3dc550;content:'\f00c'}div.note.warning{background:#fff8e9;border-color:#ffbd2b}div.note.warning::before{color:#ffbd2b;content:'\f12a'}div.note.danger,div.note.error{background:#feefee;border-color:#fe5f58}div.note.danger::before,div.note.error::before{color:#fe5f58;content:'\f00d'}div.note.radiation::before{content:'\f7b9'}div.note.bug::before{content:'\f188'}div.note.idea::before{content:'\f0eb'}div.note.link::before{content:'\f0c1'}div.note.paperclip::before{content:'\f0c6'}div.note.todo::before{content:'\f0ae'}div.note.message::before{content:'\f4ad'}div.note.guide::before{content:'\f277'}div.note.download::before{content:'\f019'}div.note.up::before{content:'\f102'}div.note.undo::before{content:'\f2ea'}div.note.play::before{content:'\f144'}div.note.clear{background:0 0;border-color:none}div.note.light{background:#f5f5f5;border-color:#a1a1a1}div.note.light::before{color:#a1a1a1}div.note.gray{background:#f5f5f5;border-color:#696969}div.note.gray::before{color:#696969}div.note.theme{background:#ecfbf7;border-color:#44d7b6}div.note.theme::before{color:#44d7b6}div.note.red{background:#feefee;border-color:#fe5f58}div.note.red::before{color:#fe5f58}div.note.yellow{background:#fff8e9;border-color:#ffbd2b}div.note.yellow::before{color:#ffbd2b}div.note.green{background:#ebf9ed;border-color:#3dc550}div.note.green::before{color:#3dc550}div.note.cyan{background:#e8fafe;border-color:#1bcdfc}div.note.cyan::before{color:#1bcdfc}div.note.blue{background:#e8f4fd;border-color:#2196f3}div.note.blue::before{color:#2196f3}.md .simpleuser-group{margin:0;display:grid;grid-template-columns:repeat(auto-fill,112px)}.md .simpleuser{text-align:center;padding:1em .5em;border-radius:4px}.md .simpleuser img{display:block;width:50px;height:50px;border-radius:50px;-o-object-fit:cover;object-fit:cover}.md .simpleuser img+span{display:block;font-size:.875rem;line-height:1.2;color:var(--color-text)}.md .simpleuser:hover{background:var(--color-site-bg)}.sites-wrap .group-header{margin:0 0 1rem}.sites-wrap .group-header p{margin:0;font-size:.875rem}.sites-wrap .group-header p:first-child{font-size:1.25rem;font-weight:500}.sites-wrap .sitesjs-wrap{display:block}.sites-wrap .sitesjs-wrap .loading-wrap{min-height:50px;margin:2rem 0;text-align:center}.sites-wrap .group-body{width:100%;display:grid;grid-gap:1rem 1rem;grid-template-columns:repeat(auto-fill,calc((100% - 3 * 1rem)/ 4));margin-bottom:2rem}@media screen and (max-width:1024px){.sites-wrap .group-body{grid-template-columns:repeat(auto-fill,calc((100% - 2 * 1rem)/ 3))}}@media screen and (max-width:900px){.sites-wrap .group-body{grid-template-columns:repeat(auto-fill,calc((100% - 1 * 1rem)/ 2))}}@media screen and (max-width:768px){.sites-wrap .group-body{grid-template-columns:repeat(auto-fill,calc((100% - 2 * 1rem)/ 3))}}.sites-wrap .group-body .site-card .card-link{width:100%;display:flex;flex-direction:column}.sites-wrap .group-body .site-card .card-link>img{width:100%;height:120px;border-radius:4px;-o-object-fit:cover;object-fit:cover;box-shadow:0 1px 2px 0 rgba(0,0,0,.2)}@media screen and (max-width:1024px){.sites-wrap .group-body .site-card .card-link>img{height:150px}}@media screen and (max-width:900px){.sites-wrap .group-body .site-card .card-link>img{height:180px}}@media screen and (max-width:768px){.sites-wrap .group-body .site-card .card-link>img{height:150px}}.sites-wrap .group-body .site-card .card-link .info{margin-top:.5rem;line-height:1.2}.sites-wrap .group-body .site-card .card-link .info>img{width:28px;height:28px;border-radius:28px;float:left;margin-right:8px;margin-top:2px}.sites-wrap .group-body .site-card .card-link .info span{display:block}.sites-wrap .group-body .site-card .card-link .info .title{font-weight:500;color:var(--text-p1);font-size:.875rem;margin-top:1px;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:1}p.p.bold,p.p.subtitle,span.p.bold{font-weight:700}.sites-wrap .group-body .site-card .card-link .info .desc{font-size:10px;margin-top:2px;word-wrap:break-word;color:var(--text-p3);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}.sites-wrap .site-card .card-link>img{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.sites-wrap .site-card .card-link:hover>img{box-shadow:0 4px 8px 0 rgba(0,0,0,.1),0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}p.p.subtitle{color:#44b299;font-size:1.25rem!important;padding-top:1.5rem}p.p.subtitle:first-child{padding-top:1rem}p.p.logo,span.p.logo{font-family:Dosis,"PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace}.article mjx-container,.highlight,p.p.code,span.p.code{font-family:Menlo,UbuntuMono,Monaco,monospace,courier,sans-serif}p.p.left,span.p.left{display:block;text-align:left}p.p.center,span.p.center{display:block;text-align:center}p.p.right,span.p.right{display:block;text-align:right}p.p.small,span.p.small{font-size:.875rem}p.p.large,span.p.large{font-size:2.5rem;line-height:1.4}p.p.huge,span.p.huge{font-size:4rem;line-height:1.4}p.p.ultra,span.p.ultra{font-size:6rem;line-height:1.4}p.p.huge,p.p.large,p.p.small,p.p.ultra,span.p.huge,span.p.large,span.p.small,span.p.ultra{margin:0;padding:0}.md .table,div.tabs,div.tabs .highlight,div.tabs details,div.tabs div.note,div.tabs ol,div.tabs p,div.tabs ul{margin-top:1em;margin-bottom:1em}p.p.h1,p.p.h2,span.p.h1,span.p.h2{padding-bottom:.2rem;font-weight:500}p.p.h1,span.p.h1{font-size:1.5rem;color:var(--color-h1);padding-top:2em}p.p.h2,span.p.h2{font-size:1.5rem;color:var(--color-h2);padding-top:2em;border-bottom:1px solid rgba(68,68,68,.1)}p.p.h3,span.p.h3{font-size:1.25rem;color:var(--color-h3);padding-top:2em}p.p.h4,span.p.h4{font-size:1.125rem;color:var(--color-h4);padding-top:2em}p.p.h5,span.p.h5{font-size:1rem;color:var(--color-h5);padding-top:1.5em}p.p.red,span.p.red{color:#fe5f58}p.p.yellow,span.p.yellow{color:#ffbd2b}p.p.green,span.p.green{color:#3dc550}p.p.cyan,span.p.cyan{color:#1bcdfc}p.p.blue,span.p.blue{color:#2196f3}p.p.purple,span.p.purple{color:#9c27b0}p.p.gray,span.p.gray{color:#999}.md .table{overflow:auto}.md .table table{display:table;width:100%}div.tabs{display:block;border-radius:4px;background:var(--color-card);border:1px solid rgba(68,68,68,.2);font-size:.9375rem}div.tabs ul.nav-tabs{display:flex;overflow-x:auto;white-space:nowrap;justify-content:flex-start;margin:0!important;padding:8px 8px 0;background:var(--color-block);border-radius:4px 4px 0 0;line-height:1.5}div.tabs ul.nav-tabs li.tab{list-style-type:none;margin-top:0;margin-bottom:0}div.tabs ul.nav-tabs li.tab:last-child{padding-right:16px}div.tabs ul.nav-tabs li.tab a{display:block;cursor:pointer;border-radius:4px 4px 0 0;padding:8px;text-align:center;font-size:.875rem;line-height:inherit;font-weight:700;color:var(--color-meta);border:1px solid transparent}div.tabs ul.nav-tabs li.tab a:hover{color:var(--color-p)}div.tabs ul.nav-tabs li.tab a i{pointer-events:none}div.tabs ul.nav-tabs li.tab.active a{cursor:default;color:var(--color-p);background:#fff;border:1px solid rgba(68,68,68,.2);border-bottom:1px solid var(--color-card)}div.tabs .tab-content{border-top:1px solid rgba(68,68,68,.2);margin-top:-1px}div.tabs .tab-content .tab-pane{padding:16px}div.tabs .tab-content .tab-pane:not(.active){display:none}.highlight,div.tabs .tab-content .tab-pane.active{display:block}div.tabs .tab-content .tab-pane>.highlight:first-child,div.tabs .tab-content .tab-pane>.note:first-child,div.tabs .tab-content .tab-pane>.tabs:first-child,div.tabs .tab-content .tab-pane>ol:first-child,div.tabs .tab-content .tab-pane>p:first-child,div.tabs .tab-content .tab-pane>ul:first-child{margin-top:0}div.tabs .tab-content .tab-pane>.highlight:last-child,div.tabs .tab-content .tab-pane>.note:last-child,div.tabs .tab-content .tab-pane>.tabs:last-child,div.tabs .tab-content .tab-pane>ol:last-child,div.tabs .tab-content .tab-pane>p:last-child,div.tabs .tab-content .tab-pane>ul:last-child{margin-bottom:0}div.timenode:after,div.timenode:before{content:'';z-index:1;position:absolute;background:rgba(68,215,182,.5);width:2px;left:7px}div.timenode:before{top:0;height:6px}div.timenode:after{top:26px;height:calc(100% - 26px)}div.timenode:last-child:after{height:calc(100% - 26px - 16px);border-bottom-left-radius:2px;border-bottom-right-radius:2px}div.timenode .body,div.timenode .meta{max-width:calc(100% - 24px)}div.timenode .meta{position:relative;color:var(--color-meta);font-size:.875rem;line-height:32px;height:32px}div.timenode .meta:after,div.timenode .meta:before{content:'';position:absolute;top:8px;z-index:2}div.timenode .meta:before{background:rgba(68,215,182,.5);width:16px;height:16px;border-radius:8px}div.timenode .meta:after{background:#44d7b6;margin-left:2px;margin-top:2px;width:12px;height:12px;border-radius:6px;transform:scale(.5);transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}div.timenode .meta p{font-weight:700;margin:0 0 0 24px}div.timenode .body{margin:4px 0 16px 24px;padding:16px;border-radius:8px;background:var(--color-block);display:inline-block}div.timenode .body:empty{display:none}div.timenode .body>:first-child{margin-top:.25em}div.timenode .body>:last-child{margin-bottom:.25em}div.timenode .body .highlight{border:1px solid #e4e4e4}div.timenode:hover .meta{color:var(--color-text)}.highlight>table .gutter pre,.hljs:before{color:var(--color-meta)}div.timenode:hover .meta:before{background:rgba(255,87,34,.5)}div.timenode:hover .meta:after{background:#ff5722;transform:scale(1)}pre{position:relative}.hljs{margin:-16px!important;padding:16px!important}.hljs::-webkit-scrollbar{height:4px;width:4px}.hljs::-webkit-scrollbar-track-piece{background:0 0}.hljs::-webkit-scrollbar-thumb{background:#44d7b6;cursor:pointer;border-radius:2px}.hljs::-webkit-scrollbar-thumb:hover{background:#ff5722}.hljs:before{position:absolute;top:0;right:0;font-size:13px;padding:4px 8px}.hljs.markdown:before,.hljs.md:before{content:"md"}.hljs.yaml:before{content:"YAML"}.hljs.json:before{content:"JSON"}.hljs.html:before{content:"HTML"}.hljs.javascript:before,.hljs.js:before{content:"JS"}.hljs.css:before{content:"CSS"}.hljs.less:before{content:"Less"}.hljs.stylus:before{content:"Stylus"}.hljs.bash:before{content:"bash"}.hljs.shell:before{content:"shell"}.hljs.sh:before{content:"sh"}.hljs.ini:before{content:"ini"}.hljs.c:before{content:"C"}.hljs.cpp:before{content:"C++"}.hljs.objc:before,.hljs.objectivec:before{content:"Objective-C"}.hljs.swift:before{content:"Swift"}.hljs.java:before{content:"Java"}.hljs.python:before{content:"Python"}.hljs.php:before{content:"PHP"}.hljs.rust:before{content:"Rust"}.hljs.sql:before{content:"SQL"}.hljs.ruby:before{content:"Ruby"}.hljs.makefile:before{content:"Makefile"}.hljs.go:before{content:"Go"}.hljs.typescript:before{content:"TypeScript"}.highlight{width:100%;margin:1em 0;background:var(--color-block);font-size:.8125rem;border-radius:4px;line-height:1.5;overflow:hidden;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.highlight:hover{background:var(--color-codeblock)}.highlight:hover figcaption{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;background:#ffeed2}.highlight:hover .gutter{background:#ffedd0}.highlight figcaption{font-size:13px;position:sticky;left:0;padding:4px 8px;background:#eaeaea;border-top-left-radius:calc(4px - 1px);border-top-right-radius:calc(4px - 1px)}.highlight>table{overflow:auto;display:block;margin:0;background-color:transparent;border:none}.article mjx-container+br,.highlight>table pre .code:before,div.gallery>.fancybox .image-caption:empty,div.gallery>p>.fancybox .image-caption:empty{display:none}.highlight>table::-webkit-scrollbar{height:4px;width:4px}.highlight>table::-webkit-scrollbar-track-piece{background:0 0}.highlight>table::-webkit-scrollbar-thumb{background:0 0;cursor:pointer;border-radius:4px}.highlight>table:hover::-webkit-scrollbar-thumb{background:rgba(68,68,68,.5)}.highlight>table:hover::-webkit-scrollbar-thumb:hover{background:#ff5722}.highlight>table td,.highlight>table th{padding:0;border:none;line-height:1.5}.highlight>table tr,.highlight>table tr:hover{background-color:transparent}.highlight>table .gutter{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;padding:0 12px;text-align:right;border-width:0;margin-left:0;position:sticky;left:0;z-index:1;background:#e9e9e9}.btn-copy,div#rightmenu-wrapper{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none}.highlight>table pre{background:0 0;margin:0;padding:0;border:none}.highlight>table .code{padding:20px 16px;vertical-align:top;background-color:transparent}.highlight>table .code:before{content:"";position:absolute;top:0;right:0;color:var(--color-meta);font-size:13px;padding:4px 8px}.highlight.markdown .code:before,.highlight.md .code:before{content:"md"}.highlight.yaml .code:before{content:"YAML"}.highlight.json .code:before{content:"JSON"}.highlight.diff .code:before{content:"diff"}.highlight.html .code:before{content:"HTML"}.highlight.javascript .code:before,.highlight.js .code:before{content:"JS"}.highlight.css .code:before{content:"CSS"}.highlight.less .code:before{content:"Less"}.highlight.stylus .code:before{content:"Stylus"}.highlight.bash .code:before{content:"bash"}.highlight.shell .code:before{content:"shell"}.highlight.sh .code:before{content:"sh"}.highlight.ini .code:before{content:"ini"}.highlight.c .code:before{content:"C"}.highlight.cpp .code:before{content:"C++"}.highlight.objc .code:before,.highlight.objectivec .code:before{content:"Objective-C"}.highlight.swift .code:before{content:"Swift"}.highlight.java .code:before{content:"Java"}.highlight.python .code:before{content:"Python"}.highlight.php .code:before{content:"PHP"}.highlight.rust .code:before{content:"Rust"}.highlight.sql .code:before{content:"SQL"}.highlight.ruby .code:before{content:"Ruby"}.highlight.makefile .code:before{content:"Makefile"}.highlight.go .code:before{content:"Go"}.highlight.typescript .code:before{content:"TypeScript"}.highlight pre .line,.highlight pre .params{color:rgba(68,68,68,.9)}.highlight pre .line .addition{color:#3fa33f}.highlight pre .line .deletion{color:#ee2b29}.highlight pre .marked{background-color:rgba(254,213,66,.4);padding:2px 8px 2px 0;border-radius:2px;width:100%}.highlight pre .attr,.highlight pre .attribute,.highlight pre .title{color:#3f51b5}.highlight pre .comment{color:rgba(68,68,68,.5)}.highlight pre .javascript .function,.highlight pre .keyword,.highlight pre .meta-keyword{color:#9c27b0}.highlight pre .built_in,.highlight pre .tag .name,.highlight pre .type{color:#4ba7ee}.highlight pre .constant,.highlight pre .css .class,.highlight pre .css .id,.highlight pre .css .pseudo,.highlight pre .html .doctype,.highlight pre .literal,.highlight pre .number,.highlight pre .preprocessor,.highlight pre .regexp,.highlight pre .ruby .constant,.highlight pre .variable,.highlight pre .xml .doctype,.highlight pre .xml .pi,.highlight pre .xml .tag .title{color:#fd8607}.highlight pre .class,.highlight pre .css .rules .attribute,.highlight pre .ruby .class .title{color:#ff9800}.highlight pre .meta-string,.highlight pre .string{color:#449e48}.highlight pre .header,.highlight pre .inheritance,.highlight pre .ruby .symbol,.highlight pre .value,.highlight pre .xml .cdata{color:#4caf50}.highlight pre .css .hexcolor{color:#6cc}.highlight pre .coffeescript .title,.highlight pre .function,.highlight pre .javascript .title,.highlight pre .perl .sub,.highlight pre .python .decorator,.highlight pre .python .title,.highlight pre .ruby .function .title,.highlight pre .ruby .title .keyword{color:#69c}.highlight.css .line .selector-tag,.highlight.css .line .tag .name,.highlight.html .line .selector-tag,.highlight.html .line .tag .name,.highlight.less .line .selector-tag,.highlight.less .line .tag .name,.highlight.stylus .line .selector-tag,.highlight.stylus .line .tag .name{color:#ee2b29}.highlight.css .line .selector-attr,.highlight.css .line .selector-class,.highlight.html .line .selector-attr,.highlight.html .line .selector-class,.highlight.less .line .selector-attr,.highlight.less .line .selector-class,.highlight.stylus .line .selector-attr,.highlight.stylus .line .selector-class{color:#fd8607}.highlight.css .line .attribute,.highlight.html .line .attribute,.highlight.less .line .attribute,.highlight.stylus .line .attribute{color:#3f51b5}.highlight.css .line .number,.highlight.html .line .number,.highlight.less .line .number,.highlight.stylus .line .number{color:#17afca}.highlight.c .line .meta,.highlight.objc .line .meta,.highlight.objectivec .line .meta,.highlight.swift .line .meta{color:#9c27b0}.highlight.c .line .meta-string,.highlight.c .line .string,.highlight.objc .line .meta-string,.highlight.objc .line .string,.highlight.objectivec .line .meta-string,.highlight.objectivec .line .string,.highlight.swift .line .meta-string,.highlight.swift .line .string{color:#fb3f1b}.highlight.c .line .class,.highlight.objc .line .class,.highlight.objectivec .line .class,.highlight.swift .line .class{color:rgba(68,68,68,.9)}.highlight.c .line .class .title,.highlight.objc .line .class .title,.highlight.objectivec .line .class .title,.highlight.swift .line .class .title{color:#1e80f0}.highlight.c .line .comment,.highlight.objc .line .comment,.highlight.objectivec .line .comment,.highlight.swift .line .comment{color:#3fa33f}.highlight.json .line .attr{color:#e24f5a}.highlight.json .line .literal{color:#3f51b5}.highlight.yaml .line .attr{color:#e24f5a}.article mjx-container{padding:16px 8px;border-radius:4px;min-width:0!important}.article .has-jax,.article mjx-container[jax=CHTML][display=true]{overflow:auto hidden}div.gallery{margin:1em 0;overflow:hidden}div.gallery+.gallery{margin-top:-1em}div.gallery>.fancybox,div.gallery>p>.fancybox{margin:1px;padding:0;position:relative}div.gallery>.fancybox a,div.gallery>p>.fancybox a{height:100%;width:100%}div.gallery>.fancybox img,div.gallery>p>.fancybox img{-o-object-fit:cover;object-fit:cover;height:100%;width:100%}div.gallery>.fancybox .image-caption,div.gallery>p>.fancybox .image-caption{opacity:0;transform:translateY(100%);transition:all .3s ease;-moz-transition:all .3s ease;-webkit-transition:all .3s ease;-o-transition:all .3s ease;pointer-events:none;position:absolute;width:100%;bottom:0;text-align:center;background:rgba(0,0,0,.3);color:#fff}div.gallery>.fancybox:hover .image-caption,div.gallery>p>.fancybox:hover .image-caption{opacity:1;transform:translateY(0)}div.gallery,div.gallery>p{display:flex;justify-content:center;flex-wrap:nowrap;padding:0!important;align-items:stretch}div.gallery[col]{flex-wrap:wrap;justify-content:flex-start}div.gallery[col='2']>.fancybox{width:calc(50% - 2 * 1px)}div.gallery[col='3']>.fancybox{width:calc(33.33% - 2 * 1px)}div.gallery[col='4']>.fancybox{width:calc(25% - 2 * 1px)}div.gallery[col='5']>.fancybox{width:calc(20% - 2 * 1px)}div.gallery[col='6']>.fancybox{width:calc(16.66% - 2 * 1px)}div.gallery[col='7']>.fancybox{width:calc(14.2857% - 2 * 1px)}div.gallery[col='8']>.fancybox{width:calc(12.5% - 2 * 1px)}div.gallery>p{margin:0}div.gallery.left,div.gallery.left>p{justify-content:flex-start}div.gallery.center,div.gallery.center>p{justify-content:center}div.gallery.right,div.gallery.right>p{justify-content:flex-end}div.gallery.stretch,div.gallery.stretch>p{align-items:stretch}.fancybox-container .fancybox-stage{cursor:zoom-out}div.fancybox{margin-top:1em;margin-bottom:1em;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:nowrap;padding:0!important;overflow:hidden;border-radius:2px}div.fancybox a{line-height:0;margin:0 auto;align-items:stretch;cursor:zoom-in}div.fancybox .gallery{overflow:hidden}div.fancybox .image-caption{font-size:.8125rem;padding-top:.5em;padding-bottom:1em;color:var(--color-meta)}div.fancybox .image-caption:empty{display:none}@media screen and (max-width:500px){.sites-wrap .group-body{grid-template-columns:repeat(auto-fill,calc((100% - 1 * 1rem)/ 2))}div.fancybox{border-radius:1px}.l_header .list-v .aplayer,.l_header .list-v .aplayer-pic{border-radius:4px;width:64px;height:64px}}.aplayer-container{display:flex;justify-content:center;min-height:100px}.aplayer-container meting-js{max-width:100%}.aplayer{max-width:500px;border-radius:4px;color:var(--color-text);font-family:Dosis,"PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif}.aplayer .aplayer-list{text-align:left}@media screen and (max-width:500px){.aplayer{border-radius:8px}}.l_header .aplayer-volume-wrap{display:none!important}.highlight{position:relative}.btn-copy{z-index:1;display:inline-block;cursor:pointer;border:none;user-select:none;-webkit-appearance:none;font-family:Menlo,Menlo,UbuntuMono,Monaco,monospace,courier,sans-serif;font-size:11px;font-weight:700;padding:4px 8px;color:var(--color-meta);background:var(--color-card);border-radius:3px;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);position:absolute;top:1px;right:1px;opacity:0;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}ul.list-v.rightmenu li.music a.nav.volume .aplayer-volume-bar i.right,ul.list-v.rightmenu.left{right:0}.btn-copy>i{margin-right:4px}.btn-copy:hover{color:#ff5722;background:#ffeee8}.article pre:hover .btn-copy,.highlight:hover .btn-copy{opacity:1}div#rightmenu-wrapper{display:none;position:fixed;z-index:9000;user-select:none}ul.list-v.rightmenu{display:block;max-width:240px;overflow:hidden}ul.list-v.rightmenu.top{bottom:0}ul.list-v.rightmenu a{cursor:default}ul.list-v.rightmenu a.vlts-menu{text-overflow:ellipsis;overflow:hidden;line-height:32px}ul.list-v.rightmenu>li>span{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;display:block;color:var(--color-list);font-size:.875rem;line-height:36px;padding:0 20px 0 16px;text-overflow:ellipsis;margin:0 4px;border-radius:4px}@media screen and (max-width:1024px){ul.list-v.rightmenu>li>span{line-height:40px}}ul.list-v.rightmenu>li>span>i{margin-right:8px}ul.list-v.rightmenu>li>span.active,ul.list-v.rightmenu>li>span:active{color:var(--color-list-hl)}ul.list-v.rightmenu>li>span:hover{color:var(--color-list-hl);background:var(--color-site-bg)}ul.list-v.rightmenu li.music a.nav.volume:hover,ul.list-v.rightmenu li.music.name p.nav.music-title:hover{background:0 0}ul.list-v.rightmenu li.music,ul.list-v.rightmenu li.navigation{display:flex;justify-content:space-between}ul.list-v.rightmenu li.music a.icon-only,ul.list-v.rightmenu li.navigation a.icon-only{line-height:0;margin:0;padding:0;border-radius:32px;overflow:hidden;width:32px;height:32px}ul.list-v.rightmenu li.music a.nav i,ul.list-v.rightmenu li.navigation a.nav i{margin:0;width:32px;line-height:32px}ul.list-v.rightmenu li.music a.nav:first-child,ul.list-v.rightmenu li.navigation a.nav:first-child{margin-left:10px}ul.list-v.rightmenu li.music a.nav:last-child,ul.list-v.rightmenu li.navigation a.nav:last-child{margin-right:10px}ul.list-v.rightmenu li.music.name{display:flex;flex-direction:column;align-items:center}ul.list-v.rightmenu li.music.name p.nav.music-title{color:#696969;font-size:.875rem;max-width:128px;margin:0 20px;overflow:hidden}ul.list-v.rightmenu li.music a.nav.volume{width:100%;padding:0 8px}ul.list-v.rightmenu li.music a.nav.volume .aplayer-volume-bar{margin:4px 0 8px;position:relative;height:8px;width:100%;background:#ededed;border-radius:32px;overflow:hidden;cursor:pointer;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}ul.list-v.rightmenu li.music a.nav.volume .aplayer-volume-bar i.left,ul.list-v.rightmenu li.music a.nav.volume .aplayer-volume-bar i.right{color:#696969;position:absolute;top:0;width:28px;line-height:28px;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;opacity:0;transform:scale(.5) translateY(-18px)}ul.list-v.rightmenu li.music a.nav.volume .aplayer-volume-bar i.left{left:0}ul.list-v.rightmenu li.music a.nav.volume .aplayer-volume-bar:hover{height:28px}ul.list-v.rightmenu li.music a.nav.volume .aplayer-volume-bar:hover i{opacity:1;transform:scale(1) translateY(0)}ul.list-v.rightmenu li.music a.nav.volume .aplayer-volume-bar .aplayer-volume{background:#44d7b6;height:100%;width:100%}article#arc,article#cat,article#tag{padding-top:48px;padding-bottom:48px}article#arc h2,article#cat h2,article#tag h2{font-weight:600}article#arc h2:first-child,article#cat h2:first-child,article#tag h2:first-child{margin-top:0}article#arc{margin-bottom:32px;padding-bottom:64px}article#arc .timenode:after,article#arc .timenode:before{margin-left:12px}article#arc .timenode .meta{padding:6px 0;line-height:1.5;height:auto;max-width:100%;display:flex;font-size:.9375rem;font-weight:500;border-radius:2px;color:var(--color-list)}article#arc .timenode .meta:before{display:none}article#arc .timenode .meta:after{margin-left:14px}article#arc .timenode .meta:hover{color:var(--color-p);background:var(--color-site-bg)}article#arc .timenode .meta time{color:var(--color-meta);margin-left:34px;margin-right:4px;flex-shrink:0;width:60px}article#arc .timenode .meta i{line-height:1.5;color:#ff5722}article#arc .timenode .meta i.red{color:#fe5f58}article#arc .timenode .meta i.green{color:#3dc550}article#arc .timenode .meta i.yellow{color:#ffbd2b}article#arc .timenode .meta i.blue{color:#1bcdfc}article#arc .timenode .meta i.theme{color:#44d7b6}article#arc .timenode .meta i.accent,article#arc .timenode .meta i.orange{color:#ff5722}article#cat .all-cats a{display:block;padding:8px 16px;border-radius:4px;color:var(--color-list);font-size:.9375rem;font-weight:500}article#cat .all-cats a:hover{color:var(--color-list-hl);background:var(--color-site-bg)}article#cat .all-cats a.child{padding-left:48px}article#tag .all-tags{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;text-align:center}article#tag .all-tags ul{margin:0 -8px;padding:0;display:flex;flex-wrap:wrap}article#tag .all-tags ul li{list-style:none;margin:8px;border-radius:4px;overflow:hidden;display:flex;position:relative;font-size:.9375rem}.article h1,.article h2{margin-top:48px;text-align:left}article#tag .all-tags ul li a{display:inline-block;color:var(--color-list);padding:4px 52px 4px 16px;background:var(--color-block);font-weight:500}article#tag .all-tags ul li a:hover{background:#ff5722;color:#fff}article#tag .all-tags ul li span{color:var(--color-meta);background:var(--color-card);padding:2px 8px;border-radius:2px;pointer-events:none;position:absolute;right:2px;top:2px;height:calc(100% - 4px)}article#tag .all-tags ul li span:before{content:'x'}.article{color:var(--color-p);word-wrap:break-word}.article a{word-break:break-word}.article h1.title,.article h2.title{left:0}.article h1.title:before,.article h2.title:before{content:none}.article h1,.article h2{padding-bottom:.2rem;margin-bottom:1rem;border-bottom:1px solid rgba(68,68,68,.1)}.article h1{color:var(--color-h1)}.article h2{color:var(--color-h2)}.article h3{text-align:left;color:var(--color-h3);margin-top:24px}.article h4{text-align:left;color:var(--color-h4);margin-top:16px}.article h5{font-weight:700;color:var(--color-h5);margin-top:1em}.article h6{color:var(--color-h6);margin-top:1em}.article center,.article center p{text-align:center}.article .aplayer{margin:1em 0;display:inline-block;width:400px;max-width:100%;border-radius:4px;color:#666}.article div.small-img img,.article p.small-img img{width:auto;max-width:100%;margin:0;box-shadow:none}.article del,.article s{color:#8e8e8e;-webkit-text-decoration-color:#8e8e8e;text-decoration-color:#8e8e8e}.article emp,.article u,.article wavy{color:var(--color-text)}.article u{text-decoration:none;border-bottom:1px solid #fe5f58}.article emp{border-bottom:4px dotted #fe5f58}.article wavy{-webkit-text-decoration-style:wavy;text-decoration-style:wavy;-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-color:#fe5f58;text-decoration-color:#fe5f58}.article psw{color:transparent;background:#a1a1a1;border-radius:2px;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.article psw:hover{color:var(--color-p);background:0 0}.article kbd{border-radius:4px;border:1px solid #d2d2d2;border-bottom-width:2px;background:#fafafa;padding-left:4px;padding-right:4px}.article p{margin-top:1em;margin-bottom:1em;text-align:justify;max-width:100%;line-height:inherit}.article .subtitle h6{color:rgba(68,68,68,.9)}.article figure figcaption span{display:inline-block;margin-right:5px}.article blockquote{background:var(--color-block);border-left:4px solid #44d7b6;border-radius:4px;position:relative;width:100%;padding:16px;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.article blockquote,.article blockquote ol,.article blockquote p,.article blockquote ul{text-align:left;word-wrap:normal;font-size:.9375rem;margin-top:.5em;margin-bottom:.5em}.article blockquote footer{padding:0;text-align:justify;color:inherit;font-style:italic;margin:1em 0}.article blockquote footer cite{color:var(--color-meta);margin-left:1em}.article blockquote footer cite::before{content:'----';padding:0 .3em}.article blockquote.pullquote.right{border-left:none;border-right:4px solid #44d7b6}.article blockquote.pullquote.right p{text-align:right}.article pre{display:block;box-sizing:border-box;margin-top:1em;margin-bottom:1em;overflow:auto;background:var(--color-codeblock);font-size:.8125rem;font-family:Menlo,UbuntuMono,Monaco,monospace,courier,sans-serif;border:1px solid #ffebcb;padding:16px;border-radius:4px}.article pre>code:not([class]){background:0 0}.article div>pre{border-radius:4px}.article div>pre>code:not([class]){padding:0;margin:0;background:0 0;color:rgba(68,68,68,.9)}.article code{font-family:Dosis,"PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif}.article code:not([class]){word-break:break-all;color:var(--color-inlinecode);border-radius:2px}@media screen and (max-width:500px){.article ol,.article ul{font-size:.875rem}.article figure{font-size:13px;line-height:1.5}}.article .widget{margin:1em 0;box-shadow:none;border-radius:4px;cursor:auto;background:var(--color-block);padding:8px 0;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;width:100%}.article .widget:active,.article .widget:hover{box-shadow:none}.article .widget header{padding:4px .6em 0}.article .widget header,.article .widget header a{color:rgba(68,68,68,.85)}.article .widget.copyright,.article .widget.qrcode{background:0 0;padding:0}.article .widget.copyright header,.article .widget.qrcode header{display:none}.article .widget.copyright .content,.article .widget.qrcode .content{padding:0}.article .widget.list .content,.article .widget.related_posts .content{padding:0 .6em!important}.article .widget.list .content a,.article .widget.related_posts .content a{color:#2196f3}.article .widget.list .content a:hover,.article .widget.related_posts .content a:hover{color:#ff5722}.article .widget .content{padding:0 .6em;margin:0}.article .widget .content ul{padding-left:4px;margin-left:16px}.article .widget .content ul a{transition:all .1s ease;-moz-transition:all .1s ease;-webkit-transition:all .1s ease;-o-transition:all .1s ease;display:inline;border-left:none;padding:0 0 0 4px;color:#2196f3;font-weight:400;text-decoration:none}.article .widget .content ul a.active,.article .widget .content ul a:active,.article .widget .content ul a:hover{border-left:none!important;background:0 0!important}.article .widget .content ul a:hover{color:#ff5722}.article .widget .content .list a .name{display:inline;color:#2196f3}.article .widget .content .list a:hover .name{color:#ff5722}.article .widget.qrcode>.content{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding-left:16px;padding-right:16px;margin-bottom:4px}.article .widget.qrcode>.content>.fancybox,.article .widget.qrcode>.content>img{margin:0 8px}.article .article_footer,.md .footer{margin-top:64px}.article .widget.qrcode>.content img{margin-bottom:4px}.article .widget-blur{-webkit-backdrop-filter:none;backdrop-filter:none}.md .footer>div{margin-top:1em;margin-bottom:1em}.md .footer .header{line-height:1.75;padding-bottom:8px;font-weight:500;font-size:.875rem;color:var(--color-list)}.md .footer .header i{margin-right:2px}.md .footer .body ol,.md .footer .body ul{margin-top:0;margin-bottom:0}.md .footer .references,.md .footer .related_posts{background:var(--color-block);border-radius:4px;padding:16px}.md .footer .references .body a{font-size:.9375rem;font-weight:500}.md .footer .related_posts .body{margin:4px;overflow:hidden;border-radius:2px}.md .footer .related_posts .body .vlts-rps{display:flex;overflow:scroll}#l_side .widget,.headimg-div .headimg-a,.md .img-wrap,.post-v3,footer.footer{overflow:hidden}.md .footer .related_posts .body .vlts-rps .item{flex-shrink:0;width:240px}.md .footer .related_posts .body .vlts-rps .item+.item{margin-left:16px}.md .footer .related_posts .body .vlts-rps .item:hover img{filter:opacity(1)}.md .footer .related_posts .body .vlts-rps img{border-radius:2px;width:100%;height:120px;-o-object-fit:cover;object-fit:cover;filter:opacity(.75)}.md .footer .related_posts .body .vlts-rps span{text-align:justify;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.md .footer .related_posts .body .vlts-rps .title{font-weight:600;-webkit-line-clamp:1}.md .footer .related_posts .body .vlts-rps .excerpt{font-size:.875rem;color:var(--color-meta);-webkit-line-clamp:3}.md .footer .copyright blockquote p{font-size:.875rem;margin:.25em 0}.md .footer .copyright blockquote p a{font-weight:500}.md .footer .donate{display:flex;margin:0 auto}.md .footer .donate .imgs{display:inline-flex;margin:0 auto}.md .footer .donate .imgs .fancybox{margin:8px}.md .footer .donate .imgs img{width:80px}article .readmore{display:block;margin-top:24px;font-size:.875rem}footer.footer{position:relative;padding:40px 10px 120px;width:100%;color:var(--color-site-footer);margin:0 auto;text-align:center}footer.footer,footer.footer p{font-size:.8125rem}footer.footer .licenses{color:fade(,50%)}footer.footer .social-wrapper{display:flex;justify-content:center;flex-wrap:wrap;margin:4px 8px}footer.footer a{color:var(--color-site-footer);padding:0;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}footer.footer a:hover{color:#ff5722}footer.footer a:not(.social):hover{text-decoration:underline}footer.footer a.social{position:relative;text-align:center;display:flex;justify-content:center;align-items:center;min-width:36px;min-height:36px;margin:4px;opacity:.75;border-radius:4px;font-size:1rem}footer.footer a.social img{margin:8px;height:24px}footer.footer a.social:hover{color:#ff5722;background:rgba(255,87,34,.1)}footer.footer .copyright{margin-top:16px}footer.footer .copyright p{font-size:.78125rem}@media screen and (max-width:768px){footer.footer{justify-content:center}}.article.l_friends .friends-group .friend-content{display:flex;flex-wrap:wrap;margin:-8px;border-radius:8px;align-items:flex-start;line-height:1.3}.article.l_friends .friends-group .friend-content .friend-card{display:flex;border-radius:4px;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);padding:8px 0;margin:8px;margin-top:calc(2.25 * 16px + 32px);color:var(--color-meta);background:var(--color-block);justify-content:flex-start;align-content:flex-start;flex-direction:column;width:calc(100%/4 - 16px)}@media screen and (max-width:1024px){.article.l_friends .friends-group .friend-content .friend-card{width:calc(100%/4 - 16px)}}@media screen and (max-width:768px){.article.l_friends .friends-group .friend-content .friend-card{width:calc(100%/3 - 16px)}}@media screen and (max-width:500px){.article.l_friends .friends-group .friend-content .friend-card{width:calc(100%/2 - 16px)}}.article.l_friends .friends-group .friend-content .friend-card:hover .friend-left .avatar{transform:scale(1.2) rotate(12deg);box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}.article.l_friends .friends-group .friend-content .friend-card .friend-left{display:flex;align-self:center}.article.l_friends .friends-group .friend-content .friend-card .friend-left .avatar{width:64px;height:64px;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);margin:16px 8px 4px;margin-top:calc(-1.25 * 16px - 32px);border-radius:100%;border:2px solid #fff;background:#fff}.article.l_friends .friends-group .friend-content .friend-card .friend-right{margin:4px 8px;display:flex;flex-direction:column;text-align:center}.article.l_friends .friends-group .friend-content .friend-card .friend-right .friend-tags-wrapper{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;margin-left:-2px;word-break:break-all}.article.l_friends .friends-group .friend-content .friend-card .friend-right p{text-align:center;margin:0}.article.l_friends .friends-group .friend-content .friend-card .friend-right p.friend-name{font-size:.8125rem;padding-top:4px;font-weight:700}.article.l_friends .friends-group .friend-content .friend-card .friend-right p.tags{font-size:.78125rem;display:inline;background:0 0;word-wrap:break-word;padding-right:4px}.md img{position:relative;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.md div>img,.md p>img{display:block;margin:auto;border-radius:4px}@media screen and (max-width:500px){.md img{box-shadow:none}.md div>img,.md p>img{border-radius:2px}}.md span img{display:inline;margin:auto}.md .img-wrap{margin:1.5rem auto;text-align:center;border-radius:2px}.md .img-wrap .img-bg{width:100%}.md .img-wrap .image-caption{display:block;margin:.75rem auto;font-size:.8125rem;color:var(--color-meta)}.md .img-wrap .image-caption:empty{display:none}svg.loading{display:block;position:absolute;color:var(--text-p3);width:100%;height:2rem;margin:auto;-webkit-animation:spin infinite 2s;animation:spin infinite 2s;-webkit-animation-timing-function:linear;animation-timing-function:linear}@-webkit-keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}#safearea{margin:16px 16px 0}#l_body{position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#l_body div.loading{margin:16px 0;width:100%;display:block}#l_body div.loading,#l_body div.loading p{text-align:center}#l_body #s-top{transition:all .6s ease;-moz-transition:all .6s ease;-webkit-transition:all .6s ease;-o-transition:all .6s ease;z-index:9;position:fixed;width:48px;height:48px;line-height:48px;border-radius:100%;bottom:32px;right:32px;transform:translateY(100px) scale(0);transform-origin:bottom;color:var(--color-text)}#l_body #s-top.show{transform:translateY(0) scale(1)}#l_body #s-top.show.hl{background:#44d7b6;color:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}@media screen and (min-width:768px){#l_body #s-top:hover,#l_body #s-top:hover.hl{box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}#l_body #s-top:hover{transform:scale(1.2);border-radius:25%;background:#44d7b6;color:#fff}}#l_main{width:calc(100% - 1 * 240px);padding-right:16px;float:left}@media screen and (max-width:768px){#l_body #s-top{right:16px}#l_main{width:100%}}#l_main.no_sidebar{width:100%;padding-right:0;max-width:840px;margin:auto}@media screen and (min-width:2048px){#l_main.no_sidebar{max-width:calc(55vw - 240px)}}#l_main.no_sidebar~#l_side{display:none}#l_main .post-list{position:relative;margin-bottom:16px;-moz-column-gap:16px;column-gap:16px}#l_main .widget .content .post,#l_main .widget .content .tabs,#l_main .widget .content details,#l_main .widget .content ol,#l_main .widget .content p,#l_main .widget .content table,#l_main .widget .content ul{margin-top:1em;margin-bottom:1em}#l_main .post-list.multiple-columns{-moz-columns:320px;columns:320px}#l_main .post-wrapper{column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid-column}#l_main .widget .content .post{padding-top:0;padding-bottom:0}#l_main .widget.grid .content .grid.fixed a{width:calc(100%/8 - 0 * 16px)}@media screen and (max-width:1024px){#l_main .widget.grid .content .grid.fixed a{width:calc(100%/7 - 0 * 16px)}}@media screen and (max-width:768px){#l_main .widget.grid .content .grid.fixed a{width:calc(100%/6 - 0 * 16px)}}@media screen and (max-width:500px){#l_main .widget.grid .content .grid.fixed a{width:calc(100%/5 - 0 * 16px)}}@media screen and (max-width:425px){#l_main .widget.grid .content .grid.fixed a{width:calc(100%/4 - 0 * 16px)}}@media screen and (max-width:375px){#l_main .widget.grid .content .grid.fixed a{width:calc(100%/3 - 0 * 16px)}}#l_main .post{position:relative;margin-bottom:16px;padding:24px;border-radius:8px}#l_main .post h1.title{font-size:1.5rem;margin:0;padding-bottom:4px;border-bottom:none}#l_main .post .article-meta{color:var(--color-meta);margin-bottom:16px;line-height:normal}#l_main .post .article-meta#top{margin-top:16px;margin-bottom:32px}#l_main .post .article-meta#bottom{margin-top:32px;margin-bottom:8px}#l_main .post .article-meta .aplayer,#l_main .post .article-meta .aplayer-pic,#l_main .post .article-meta .thumbnail{width:48px;height:48px}#l_main .post .article-meta .aplayer,#l_main .post .article-meta .thumbnail{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;border-radius:100%;float:right;margin:2px;box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}#l_main .post .article-meta .aplayer:hover,#l_main .post .article-meta .thumbnail:hover{border-radius:25%;transform:scale(1.1);box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}@media screen and (max-width:500px){#l_main .post .article-meta .aplayer:hover,#l_main .post .article-meta .thumbnail:hover{border-radius:100%;transform:scale(1);box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}}#l_main .post .article-meta .thumbnail{width:auto;border-radius:4px;box-shadow:none;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}#l_main .post .article-meta .thumbnail:hover{border-radius:4px;transform:scale(1.1) rotate(4deg);box-shadow:none}#l_main .post .article-meta .new-meta-box{transition:all .1s ease;-moz-transition:all .1s ease;-webkit-transition:all .1s ease;-o-transition:all .1s ease;display:flex;align-items:center;flex-wrap:wrap;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}#l_main .post .article-meta .new-meta-box,#l_main .post .article-meta .new-meta-box i,#l_main .post .article-meta .new-meta-box p{font-size:.8125rem}#l_main .post .article-meta .new-meta-box .new-meta-item{color:var(--color-meta);display:flex;align-items:baseline;justify-content:center;margin:0 16px 0 0}#l_main .post .article-meta .new-meta-box .new-meta-item .notlink{cursor:default}#l_main .post .article-meta .new-meta-box .new-meta-item .notlink:hover,#l_main .post .article-meta .new-meta-box .new-meta-item .notlink:hover p{color:var(--color-meta)}#l_main .post .article-meta .new-meta-box .new-meta-item:last-child{margin-right:0}#l_main .post .article-meta .new-meta-box .new-meta-item i,#l_main .post .article-meta .new-meta-box .new-meta-item img{display:inline}#l_main .post .article-meta .new-meta-box .new-meta-item i{margin-right:4px;border-radius:0}#l_main .post .article-meta .new-meta-box .new-meta-item i.fa-hashtag{margin-right:2px}#l_main .post .article-meta .new-meta-box .new-meta-item a,#l_main .post .article-meta .new-meta-box .new-meta-item p{color:var(--color-meta);padding:3px 0}#l_main .post .article-meta .new-meta-box .new-meta-item a{display:flex;justify-content:center;align-items:center}#l_main .post .article-meta .new-meta-box .new-meta-item a img{height:16px;width:16px;margin-right:5px}#l_main .post .article-meta .new-meta-box .new-meta-item a p{margin:0;font-weight:400;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}#l_main .post .article-meta .new-meta-box .new-meta-item a:hover,#l_main .post .article-meta .new-meta-box .new-meta-item a:hover p{color:#ff5722}#l_main .post .article-meta .new-meta-box .author i,#l_main .post .article-meta .new-meta-box .author img{border-radius:100%}#l_main .post .article-meta .new-meta-box .author img{transform:translateY(-.5px)}@media screen and (max-width:500px){#l_main .post .article-meta .new-meta-box .share{width:100%;margin-top:16px;background:var(--color-block);border-radius:4px}}#l_main .post .article-meta .new-meta-box .share-body{position:relative;display:flex;justify-content:center;margin:0;padding:0 2px}#l_main .post .article-meta .new-meta-box .share-body a{padding:0;margin:0 1px}#l_main .post .article-meta .new-meta-box .share-body a img{margin:2px;height:24px;width:auto;background:0 0}@media screen and (max-width:500px){#l_main .post .article-meta .new-meta-box .share-body a img{height:32px;margin:8px}#l_main .post .article-meta .new-meta-box .share-body div.hoverbox div.target{position:absolute}}#l_main .post .article-meta .new-meta-box .share-body div.hoverbox div.target{display:none;position:absolute;background:var(--color-card);border-radius:8px;box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);padding:8px;left:50%;top:-20px;transform:translate(-50%,-100%)}#l_main .post .article-meta .new-meta-box .share-body div.hoverbox div.target img{display:block;margin:0;padding:0;height:128px;width:128px;min-width:128px}#l_main .post .article-meta .new-meta-box .share-body div.hoverbox:hover div.target{display:flex}#l_main .post span>img{display:inline-block}#l_main .post a img{display:inline}@media screen and (max-width:768px){#l_main{padding-right:0}}@media screen and (max-width:768px) and (max-width:500px){#l_main{width:100%}}.body-wrapper{position:relative;display:flex;width:100%;max-width:1080px;margin:0 auto;flex-wrap:wrap;justify-content:space-between;align-items:stretch}@media screen and (min-width:2048px){.body-wrapper{max-width:55vw}}article#comments p[ct]{margin-top:0;margin-bottom:1em;font-size:1.125rem;color:var(--color-text);font-weight:600}article#comments p[cst]{margin-top:1em;margin-bottom:1em;font-size:.875rem}article#comments #load-btns,article#comments #loading-comments{text-align:center;margin:16px 0}.md h3,.md h4,.md h5,.md h6,.md ol,.md ul{margin-bottom:1em}article#comments #load-btns,article#comments #load-btns a,article#comments #load-btns i,article#comments #loading-comments,article#comments #loading-comments a,article#comments #loading-comments i{line-height:3em}article#comments #load-btns a.load-comments,article#comments #loading-comments a.load-comments{display:inline-block;border-radius:2px;cursor:pointer;background:#44d7b6;color:#fff;padding-left:48px;padding-right:48px}article#comments #load-btns a.load-comments:hover,article#comments #loading-comments a.load-comments:hover{background:#ff5722}.white-box{background:var(--color-card)}img{max-width:100%}img.lazyload:not(.placeholder){transition:opacity .5s ease-out 0s;transition:filter .25s ease-out 0s;-moz-transition:filter .25s ease-out 0s;-webkit-transition:filter .25s ease-out 0s;-o-transition:filter .25s ease-out 0s}img.lazyload:not(.placeholder):not(.loaded){opacity:0;filter:blur(8px)}img.lazyload:not(.placeholder).loaded{opacity:1;filter:none}.md>p{padding-top:4px}.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{position:relative;pointer-events:none;margin-top:0;font-weight:500}.md h1>a,.md h2>a,.md h3>a,.md h4>a,.md h5>a,.md h6>a{color:inherit;pointer-events:auto}.md h1>a:hover,.md h2>a:hover,.md h3>a:hover,.md h4>a:hover,.md h5>a:hover,.md h6>a:hover{color:#ff5722}.md h1:before,.md h2:before,.md h3:before,.md h4:before,.md h5:before,.md h6:before{content:'';display:block;margin-top:-48px;height:96px;visibility:hidden;pointer-events:none}.md h1:before,.md h2:before{margin-top:-32px}.md .article-meta+h1,.md .article-meta+h2{margin-top:-80px}.md h3:before{margin-top:-56px}.md h4:before{margin-top:-64px}.md h5{font-weight:700}.md h2+h3:before{margin-top:-80px}.md ol,.md ul{font-size:.9375rem;list-style:outside;padding-left:8px;margin-left:16px;margin-top:1em}.md ol li,.md ol li li,.md ol ol,.md ol ul,.md ul li,.md ul li li,.md ul ol,.md ul ul{margin-top:0;margin-bottom:0}.md ol li p,.md ul li p{margin-top:4px;margin-bottom:0}.md ol.task-list,.md ul.task-list{padding-left:0;margin-left:4px}.md ol.task-list li,.md ul.task-list li{list-style:none}.md ol.task-list li input,.md ul.task-list li input{margin-right:4px}.md ul>li{list-style:outside}.md ol>li{list-style:decimal}.md .div-ori-link{display:block;text-align:center;margin:4rem 0}.md .ori-link{margin:auto;padding:1em 3em;border:1px solid #44d7b6;border-radius:4px;color:#44d7b6;font-weight:500}.md .ori-link:hover{color:#ff5722;border-color:#ff5722}#l_main .prev-next{width:100%;display:flex;justify-content:space-between;align-items:baseline;color:var(--color-meta);margin:0;font-weight:600}#l_main .prev-next .prev{text-align:left;border-top-right-radius:32px;border-bottom-right-radius:32px}#l_main .prev-next .next{text-align:right;border-top-left-radius:32px;border-bottom-left-radius:32px}#l_main .prev-next p{margin:16px}#l_main .prev-next section{color:var(--color-meta);padding:16px;border-radius:8px}#l_main .prev-next section:hover{color:#ff5722}#l_main .article .prev-next{width:100%;display:flex;justify-content:space-between;align-content:flex-start;margin-top:8px}#l_main .article .prev-next>a{width:100%;padding:8px;color:var(--color-meta);background:var(--color-block);border-radius:4px}#l_main .article .prev-next>a:hover{background:#ffeee8}#l_main .article .prev-next>a:hover p.title{color:#ff5722}#l_main .article .prev-next>a p{margin:8px .5rem}#l_main .article .prev-next>a p.title{font-weight:600;font-size:1rem}#l_main .article .prev-next>a p.title>i{width:1rem}#l_main .article .prev-next>a p.content{font-size:.875rem;font-weight:400;text-align:justify;word-break:break-all}#l_main .article .prev-next>a:only-child{margin-left:0;margin-right:0}#l_main .article .prev-next .prev{margin-left:0;margin-right:8px}#l_main .article .prev-next .prev p.title{text-align:left}#l_main .article .prev-next .next{margin-left:8px;margin-right:0}#l_main .article .prev-next .next p.title{text-align:right}.article-title{font-weight:500;margin-bottom:12px;line-height:1.4}.meta-v3 .readmore,.widget header{font-weight:700}.article-title a{color:var(--color-h1)}.article-title a:hover{color:#ff5722}.article-title[pin]{margin-right:36px}.post-v3{text-align:justify}.post-v3 .md{color:var(--color-p)}.post-v3 .pin{position:absolute;width:20px;height:20px;border-radius:20px;right:24px;top:24px;z-index:1;pointer-events:none}.meta-v3[line_style=solid]{border-top:1px solid rgba(68,68,68,.1)}.meta-v3[line_style=dashed]{border-top:2px dashed rgba(68,68,68,.1)}.meta-v3[line_style=dotted]{border-top:4px dotted rgba(68,68,68,.1)}.meta-v3{margin-top:16px;padding-top:12px;display:flex;flex-wrap:wrap;justify-content:space-between;color:var(--color-meta)}.meta-v3>div{display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.meta-v3 time{font-size:.875rem}.meta-v3 .category-link{font-size:.875rem;color:var(--color-meta);-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.meta-v3 .category-link:hover{color:#ff5722}.meta-v3 .avatar{line-height:0;margin-right:.75em}.meta-v3 .avatar img{width:24px;height:24px;display:block;border-radius:12px;-o-object-fit:cover;object-fit:cover}.headimg-div{display:block;margin-left:-24px;margin-top:-24px;margin-bottom:20px;width:calc(100% + 3 * 16px)}.headimg-div .headimg-a{display:block;height:280px}@media screen and (max-width:768px){.headimg-div .headimg-a{height:250px}}@media screen and (max-width:500px){.headimg-div .headimg-a{height:220px}}@media screen and (max-width:425px){.headimg-div .headimg-a{height:190px}}.headimg-div .headimg{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;transition:transform 3s ease-out;-moz-transition:transform 3s ease-out;-webkit-transition:transform 3s ease-out;-o-transition:transform 3s ease-out}.headimg-div .headimg:hover{transform:scale(1.1)}.headimg-div .headimg.lazyload:not(.placeholder){transition:transform 3s ease-out,opacity .5s ease-out;-moz-transition:transform 3s ease-out,opacity .5s ease-out;-webkit-transition:transform 3s ease-out,opacity .5s ease-out;-o-transition:transform 3s ease-out,opacity .5s ease-out}.headimg-div .headimg.lazyload:not(.placeholder):not(.loaded){opacity:0}.headimg-div .headimg.lazyload:not(.placeholder).loaded{opacity:1}#l_side{width:240px;float:right;position:relative;display:flex;flex-direction:column}#l_side .widget.sticky{position:sticky;top:80px;z-index:1}#l_side .widget>.content{max-height:200vh;overflow:auto;text-align:justify;font-size:.875rem;max-width:100%}@media screen and (max-width:768px){#l_side{width:100%}#l_side .widget>.content{max-height:none}}#l_side .widget>.content::-webkit-scrollbar{height:4px;width:4px}#l_side .widget>.content::-webkit-scrollbar-track-piece{background:0 0}#l_side .widget>.content::-webkit-scrollbar-thumb{background:#44d7b6;cursor:pointer;border-radius:2px}.widget header,.widget.blogger .content>.avatar{border-top-left-radius:8px;border-top-right-radius:8px}#l_side .widget>.content::-webkit-scrollbar-thumb:hover{background:#ff5722}.widget{z-index:0;background:var(--color-card);margin-bottom:16px;border-radius:8px;width:100%;display:none}.widget ol li,.widget ul li{margin-top:0;margin-bottom:0}.widget.desktop{display:block}@media screen and (max-width:768px){.widget{display:none!important}.widget.mobile{display:block!important}}.widget header{padding:calc(16px - 2px);font-size:.875rem;padding-bottom:0}.widget header,.widget header a{color:var(--color-meta)}.widget header>a:hover{color:#ff5722}.widget header span.name{margin-left:8px}.widget>.content{padding:8px 0}.widget>.content p{margin-top:1em;margin-bottom:1em}.widget>.content p:first-child{margin-top:.5em}.widget>.content ul>li a{color:var(--color-meta);padding:0 16px 0 12px;line-height:2;display:flex;justify-content:space-between;align-content:center;border-left:2px solid transparent;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.widget>.content ul.entry,.widget>.content ul.popular-posts{list-style:none}.widget>.content ul.entry a,.widget>.content ul.popular-posts a{color:var(--color-list)}.widget>.content ul.entry a .name,.widget>.content ul.popular-posts a .name{flex:auto}.widget>.content ul.entry a .badge,.widget>.content ul.popular-posts a .badge{flex:none;font-weight:400;font-size:.875rem;color:rgba(68,68,68,.7)}.widget>.content ul.entry a.active,.widget>.content ul.popular-posts a.active{border-left:2px solid #44d7b6;color:var(--color-list-hl)}.widget>.content ul.entry a.active .badge,.widget>.content ul.popular-posts a.active .badge{color:rgba(68,215,182,.9)}.widget>.content ul.entry a.child,.widget>.content ul.popular-posts a.child{padding-left:32px}.widget>.content ul.entry a:hover,.widget>.content ul.popular-posts a:hover{border-left:2px solid #44d7b6;color:var(--color-list-hl);background:var(--color-site-bg)}.widget.blogger{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.widget.blogger .content{padding:0;text-align:center;display:flex;flex-direction:column;align-items:stretch}.widget.blogger .content>.avatar{align-self:center;overflow:hidden;position:relative;line-height:0}.widget.blogger .content>.avatar.circle{border-radius:100%;width:128px;height:128px;margin-top:32px;margin-bottom:1em}.widget.blogger .content>.avatar.circle img{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.widget.blogger .content .text :first-child{margin-top:16px}.widget.blogger .content h2{font-weight:700;margin:8px}@media screen and (max-width:768px){.widget.blogger .content>.avatar{width:80px;height:80px;border-radius:100%;border:2px solid #fff}.widget.blogger .content>.avatar img{display:block;top:50%;left:50%;transform:translate(-50%,-50%);position:absolute}.widget.blogger .content h2{margin:8px}}.widget.blogger .content p{font-weight:700;margin:8px 8px 0;empty-cells:hide}.widget.blogger .content .social-wrapper{display:flex;justify-content:space-between;flex-wrap:wrap;margin:4px}.widget.blogger .content .social-wrapper a{color:var(--color-meta);padding:0;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.widget.blogger .content .social-wrapper a:hover{color:#ff5722}.widget.blogger .content .social-wrapper a.social{display:flex;justify-content:center;align-items:center;width:32px;height:32px;margin:4px;border-radius:100px}.widget.blogger .content .social-wrapper a.social:hover{background:#ecfbf7;color:#44d7b6}@media screen and (max-width:768px){.widget.blogger .content .social-wrapper{justify-content:center;display:none}.widget.blogger{box-shadow:none;background:0 0!important;margin-top:32px;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--color-site-inner)}}.widget.text .content{padding:4px 16px}.widget.text .content,.widget.text .content p{font-size:.875rem;word-break:break-all}.widget.text .content a{color:#2196f3;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}.widget.text .content a:hover{color:#ff5722}.widget.text .content a:active{color:#d93400}.widget.list .content{padding:8px 0}.widget.list .content a{font-size:.875rem;font-weight:700;line-height:1.5;padding-top:6px;padding-bottom:6px}.widget.list .content a i,.widget.list .content a img{margin-right:4px}.widget.list .content a i{margin-left:1px}.widget.list .content a img{vertical-align:middle;height:20px;width:20px;margin-bottom:4px}.widget.list .content a img#round{border-radius:100%}.widget.grid .content .grid{border:none;display:flex;flex-wrap:wrap;justify-content:space-around;padding:4px 16px}.widget.grid .content .grid a{text-align:center;border-radius:2px;margin:0;padding:4px 8px;display:flex;flex-direction:column;align-items:center;font-size:.78125rem;font-weight:700;color:rgba(68,68,68,.7);line-height:1.5;word-wrap:break-word}.widget.grid .content .grid a.active,.widget.grid .content .grid a:hover{color:var(--color-list-hl);background:var(--color-site-bg)}.widget.grid .content .grid a i{margin-top:.3em;margin-bottom:.3em;font-size:1.8em}.widget.grid .content .grid a img{display:inline;vertical-align:middle;margin-bottom:4px}.widget.grid .content .grid a img#round{border-radius:100%}.widget.grid .content .grid a:hover{border-radius:2px}.widget.grid .content .grid.fixed a{width:calc(100%/3 - 0 * 16px)}@media screen and (max-width:768px){.widget.grid .content .grid.fixed a{width:calc(100%/6 - 0 * 16px)}}@media screen and (max-width:500px){.widget.grid .content .grid.fixed a{width:calc(100%/5 - 0 * 16px)}}@media screen and (max-width:425px){.widget.grid .content .grid.fixed a{width:calc(100%/4 - 0 * 16px)}}@media screen and (max-width:375px){.widget.grid .content .grid.fixed a{width:calc(100%/3 - 0 * 16px)}}.widget.tagcloud .content{text-align:justify;padding:8px 16px}.widget.tagcloud .content a{display:inline-block;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease;line-height:1.2em;margin:4px 0;border-bottom:1px solid transparent}.widget.tagcloud .content a:hover{color:#ff5722!important;border-bottom:1px solid #ff5722}.widget.related_posts .content{font-weight:700}.widget.related_posts .content ul{margin-top:8px;margin-bottom:8px}.widget.related_posts .content h3{font-size:.875rem;font-weight:700;margin:0}.widget.related_posts .content h3 a{line-height:inherit;padding-top:4px;padding-bottom:4px}.widget.qrcode .content{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;padding-left:16px;padding-right:16px}.widget.qrcode .content,.widget.qrcode .content img{margin-bottom:4px}#l_side>.widget.page>.content{padding-top:0;padding-left:12px;padding-right:12px}.webinfo{padding:.2rem 1rem}.webinfo .webinfo-item{display:block;padding:4px 0 0}.webinfo .webinfo-item div:first-child{display:inline-block}.webinfo .webinfo-item div:last-child{display:inline-block;float:right}.snackbar-wrap{position:fixed;width:100%;left:0;bottom:0;background:#44d7b6;padding:16px;z-index:2}.snackbar-content{max-width:1080px;margin:16px auto}@media screen and (max-width:1080px){.snackbar-content{max-width:100%}}.snackbar-content p{margin-top:.5rem;margin-bottom:.5rem;color:#fff}.snackbar-content .title{font-size:1.5rem;font-weight:600}.snackbar-content .action{display:block;margin:1.5rem -4px}.snackbar-content .action a{margin:4px;cursor:pointer;color:#fff;display:inline-block;padding:.4em 2em;font-weight:600;border-radius:2px;border:1px solid #fff}.snackbar-content .action a:hover{color:#44d7b6;background:#fff}.snackbar-wrap[theme=warning]{background:#f7e751}.snackbar-wrap[theme=warning] .snackbar-content p{color:#000}.snackbar-wrap[theme=warning] .snackbar-content a{color:#000;border-color:#000}.snackbar-wrap[theme=warning] .snackbar-content a:hover{color:#f7e751;background:#000}#l_side .toc-wrapper{z-index:1;overflow:hidden;border-radius:8px;position:sticky;top:80px;line-height:1.6;transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}#l_side .toc-wrapper header{position:sticky;width:100%;top:0;padding-bottom:4px}#l_side .toc-wrapper .content{max-height:calc(100vh - 144px)}#l_side .toc-wrapper .content a{border-left:2px solid transparent}#l_side .toc-wrapper .content a.active,#l_side .toc-wrapper .content a:hover{color:var(--color-list-hl);border-left:2px solid #44d7b6}#l_side .toc-wrapper .content a:hover{background:var(--color-site-bg)}@media screen and (max-width:768px){#l_side .toc-wrapper{z-index:1001;position:fixed;max-height:1000px;width:auto;max-width:calc(100% - 2 * 16px);top:48px;right:16px;border-radius:4px;box-shadow:0 4px 8px 0 rgba(0,0,0,.1);border:1px solid #e7e7e7;visibility:hidden;transform:scale(0,0);transform-origin:right top}#l_side .toc-wrapper.active{visibility:visible;transform:scale(1,1)}}@media screen and (max-width:375px){#l_side .toc-wrapper{right:0}}#l_side .toc-wrapper a{padding-left:8px;color:var(--color-meta);font-size:.875rem;display:inline-block}#l_side .toc-wrapper ol .toc-child a,#l_side .toc-wrapper ul .toc-child a{font-weight:400}#l_side .toc-wrapper ol .toc-item.toc-level-1 .toc-child a,#l_side .toc-wrapper ul .toc-item.toc-level-1 .toc-child a{padding-left:12.8px}#l_side .toc-wrapper ol .toc-item.toc-level-2 .toc-child a,#l_side .toc-wrapper ul .toc-item.toc-level-2 .toc-child a{padding-left:25.6px}#l_side .toc-wrapper ol .toc-item.toc-level-3 .toc-child a,#l_side .toc-wrapper ul .toc-item.toc-level-3 .toc-child a{padding-left:38.4px}#l_side .toc-wrapper ol .toc-item.toc-level-4 .toc-child a,#l_side .toc-wrapper ul .toc-item.toc-level-4 .toc-child a{padding-left:51.2px}#l_side .toc-wrapper ol .toc-item.toc-level-5 .toc-child a,#l_side .toc-wrapper ul .toc-item.toc-level-5 .toc-child a{padding-left:64px}#l_side .toc-wrapper ol .toc-item.toc-level-6 .toc-child a,#l_side .toc-wrapper ul .toc-item.toc-level-6 .toc-child a{padding-left:76.8px}#l_side .toc-wrapper ol li,#l_side .toc-wrapper ul li{width:auto;text-align:left}#l_side .toc-wrapper ol li a,#l_side .toc-wrapper ul li a{padding:0 8px 0 11px;font-weight:700;width:100%}#l_side .toc-wrapper:empty{display:none}#l_side .toc-wrapper .toc-child{font-size:1rem;overflow:hidden;transition:max-height .6s ease-in;-moz-transition:max-height .6s ease-in;-webkit-transition:max-height .6s ease-in;-o-transition:max-height .6s ease-in;max-height:0}#l_side .toc-wrapper .toc-item.active>.toc-link{color:var(--color-list-hl);border-left:2px solid #44d7b6}#l_side .toc-wrapper .toc-item.active>.toc-child{max-height:1000px}.md .video-wrap{margin:1.5rem auto}#safearea{display:block} \ No newline at end of file +#safearea{display:block}:root{--block-hover:#ededed;--text-p1:#222;--text-p3:#777;--card:#fff}::-moz-selection{background:rgba(33,150,243,.2)}::selection{background:rgba(33,150,243,.2)}h1{font-size:1.5rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:1rem}h1,h2,h3,h4,h6{font-weight:400}a:not([href]){cursor:default}pre{tab-size:4;-moz-tab-size:4;-o-tab-size:4;-webkit-tab-size:4}.clearfix{zoom:1}.clearfix:after,.clearfix:before{content:" ";display:-webkit-box;display:-moz-box;display:table}.clearfix:after{clear:both}.hidden{text-indent:-9999px;visibility:hidden;display:-webkit-box;display:-moz-box;display:none}.inner{position:relative;width:80%;max-width:710px;margin:0 auto}.vertical{display:-webkit-box;display:-moz-box;display:table-cell;vertical-align:middle}article,aside,details,figcaption,figure,footer,hgroup,main,menu,nav,section,summary{display:-webkit-box;display:-moz-box;display:block}article{overflow:hidden}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:50%;line-height:1em}sup{vertical-align:text-top}sub{vertical-align:text-bottom}figure{margin:1em 40px}pre{overflow:auto}span.dot,span.sep{font-size:.9em;margin:0 .2rem}span.dot:before{content:'·'}span.sep:before{content:'/'}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}optgroup,select,textarea{color:inherit;font:inherit;margin:0}select{text-transform:none}html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table:not([class]){border-collapse:collapse;overflow:auto;display:-webkit-box;display:-moz-box;display:inline-block;max-width:100%;vertical-align:text-top}table:not([class]) th{background-color:#f1f1f1}table:not([class]) td,table:not([class]) th{padding:8px 16px;border:2px solid #f1f1f1;line-height:1.5;font-size:90%}table:not([class]) tr{word-break:keep-all;background-color:#fefefe;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}table:not([class]) tr:hover{background-color:#f1f1f1}td,th{padding:0}article#arc,article#cat,article#tag{padding-top:48px;padding-bottom:48px}article#arc h2,article#cat h2,article#tag h2{font-weight:600}article#arc h2:first-child,article#cat h2:first-child,article#tag h2:first-child{margin-top:0}article#arc{margin-bottom:32px;padding-bottom:64px}article#arc .timenode:after,article#arc .timenode:before{margin-left:12px}article#arc .timenode .meta{padding:6px 0;line-height:1.5;height:auto;max-width:100%;display:flex;display:flex;font-size:.9375rem;font-weight:500;border-radius:2px;-webkit-border-radius:2px;color:var(--color-list)}article#arc .timenode .meta:before{display:-webkit-box;display:-moz-box;display:none}article#arc .timenode .meta:after{margin-left:14px}article#arc .timenode .meta:hover{color:var(--color-p);background:var(--color-site-bg)}article#arc .timenode .meta time{color:var(--color-meta);margin-left:34px;margin-right:4px;flex-shrink:0;width:60px}article#arc .timenode .meta i{line-height:1.5;color:#ff5722}article#arc .timenode .meta i.red{color:#fe5f58}article#arc .timenode .meta i.green{color:#3dc550}article#arc .timenode .meta i.yellow{color:#ffbd2b}article#arc .timenode .meta i.blue{color:#1bcdfc}article#arc .timenode .meta i.theme{color:#3dd9b6}article#arc .timenode .meta i.accent{color:#ff5722}article#arc .timenode .meta i.orange{color:#ff5722}article#cat .all-cats a{display:-webkit-box;display:-moz-box;display:block;padding:8px 16px;border-radius:4px;-webkit-border-radius:4px;color:var(--color-list);font-size:.9375rem;font-weight:500}article#cat .all-cats a:hover{color:var(--color-list-hl);background:var(--color-site-bg)}article#cat .all-cats a.child{padding-left:48px}article#tag .all-tags{display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;-webkit-justify-content:flex-start;-khtml-justify-content:flex-start;-moz-justify-content:flex-start;-o-justify-content:flex-start;-ms-justify-content:flex-start;align-items:baseline;text-align:center}article#tag .all-tags ul{margin:0 -8px;padding:0;display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap}article#tag .all-tags ul li{list-style:none;margin:8px;border-radius:4px;-webkit-border-radius:4px;overflow:hidden;display:flex;display:flex;position:relative;font-size:.9375rem}article#tag .all-tags ul li a{display:-webkit-box;display:-moz-box;display:inline-block;color:var(--color-list);padding:4px 52px 4px 16px;background:var(--color-block);font-weight:500}article#tag .all-tags ul li a:hover{background:#ff5722;color:#fff}article#tag .all-tags ul li span{color:var(--color-meta);background:var(--color-card);padding:2px 8px;border-radius:2px;-webkit-border-radius:2px;pointer-events:none;position:absolute;right:2px;top:2px;height:calc(100% - 4px)}article#tag .all-tags ul li span:before{content:'x'}.article{color:var(--color-p);word-wrap:break-word}.article a{word-break:break-word}.article h1.title,.article h2.title{left:0}.article h1.title:before,.article h2.title:before{content:none}.article h1,.article h2{padding-bottom:.2rem;margin-bottom:1rem;border-bottom:1px solid rgba(68,68,68,.1)}.article h1{text-align:left;color:var(--color-h1);margin-top:48px}.article h2{text-align:left;color:var(--color-h2);margin-top:48px}.article h3{text-align:left;color:var(--color-h3);margin-top:24px}.article h4{text-align:left;color:var(--color-h4);margin-top:16px}.article h5{font-weight:700;color:var(--color-h5);margin-top:1em}.article h6{color:var(--color-h6);margin-top:1em}.article center,.article center p{text-align:center}.article .aplayer{margin:1em 0;display:-webkit-box;display:-moz-box;display:inline-block;width:400px;max-width:100%;border-radius:4px;-webkit-border-radius:4px;color:#666}.article div.small-img img,.article p.small-img img{width:auto;max-width:100%;margin:0;box-shadow:none;-webkit-box-shadow:none}.article s{color:#8e8e8e;-webkit-text-decoration-color:#8e8e8e;text-decoration-color:#8e8e8e}.article p{margin-top:1em;margin-bottom:1em;text-align:justify;max-width:100%;line-height:inherit}.article .subtitle h6{color:rgba(68,68,68,.9)}.article figure figcaption span{display:-webkit-box;display:-moz-box;display:inline-block;margin-right:5px}.article blockquote{background:var(--color-block);border-left:4px solid #3dd9b6;border-radius:4px;-webkit-border-radius:4px}.article blockquote{position:relative;width:100%;padding:16px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.article blockquote,.article blockquote ol,.article blockquote p,.article blockquote ul{text-align:left;word-wrap:normal;font-size:.9375rem;margin-top:.5em;margin-bottom:.5em}.article blockquote footer{padding:0;text-align:justify;color:inherit;font-style:italic;margin:1em 0}.article blockquote footer cite{color:var(--color-meta);margin-left:1em}.article blockquote footer cite::before{content:'----';padding:0 .3em}.article blockquote.pullquote.right{border-left:none;border-right:4px solid #3dd9b6}.article blockquote.pullquote.right p{text-align:right}.article pre{display:-webkit-box;display:-moz-box;display:block;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin-top:1em;margin-bottom:1em;overflow:auto;background:var(--color-codeblock);font-size:.8125rem;font-family:Menlo,UbuntuMono,Monaco,monospace,courier,sans-serif;border:1px solid #ffebcb;padding:16px;border-radius:4px;-webkit-border-radius:4px}.article pre>code:not([class]){background:0 0}.article div>pre{border-radius:4px;-webkit-border-radius:4px}.article div>pre>code:not([class]){padding:0;margin:0;background:0 0;color:rgba(68,68,68,.9)}.article code{font-family:Menlo,UbuntuMono,Monaco,monospace,courier,sans-serif}.article code:not([class]){word-break:break-all;color:var(--color-inlinecode);border-radius:2px;-webkit-border-radius:2px}@media screen and (max-width:500px){.article ol,.article ul{font-size:.875rem}.article figure{font-size:13px;line-height:1.5}}.article .widget{background:0 0;margin:1em 0;box-shadow:none;-webkit-box-shadow:none;border-radius:4px;-webkit-border-radius:4px;cursor:auto;background:var(--color-block);padding:8px 0;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;width:100%}.article .widget:hover{box-shadow:none;-webkit-box-shadow:none}.article .widget:active{box-shadow:none;-webkit-box-shadow:none}.article .widget header{padding:4px .6em;padding-bottom:0}.article .widget header,.article .widget header a{color:rgba(68,68,68,.85)}.article .widget.copyright,.article .widget.qrcode{background:0 0;padding:0}.article .widget.copyright header,.article .widget.qrcode header{display:-webkit-box;display:-moz-box;display:none}.article .widget.copyright .content,.article .widget.qrcode .content{padding:0}.article .widget.list .content,.article .widget.related_posts .content{padding:0 .6em!important}.article .widget.list .content a,.article .widget.related_posts .content a{color:#2092ec}.article .widget.list .content a:hover,.article .widget.related_posts .content a:hover{color:#ff5722}.article .widget .content{padding:0 .6em;margin:0}.article .widget .content ul{padding-left:4px;margin-left:16px}.article .widget .content ul a{transition:all .1s ease;-webkit-transition:all .1s ease;-khtml-transition:all .1s ease;-moz-transition:all .1s ease;-o-transition:all .1s ease;-ms-transition:all .1s ease;display:-webkit-box;display:-moz-box;display:inline;border-left:none;padding:0;padding-left:4px;color:#2092ec;font-weight:400;text-decoration:none}.article .widget .content ul a.active,.article .widget .content ul a:active,.article .widget .content ul a:hover{border-left:none!important;background:0 0!important}.article .widget .content ul a:hover{color:#ff5722}.article .widget .content .list a .name{display:-webkit-box;display:-moz-box;display:inline;color:#2092ec}.article .widget .content .list a:hover .name{color:#ff5722}.article .widget.qrcode>.content{display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;align-items:center;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;padding-left:16px;padding-right:16px;margin-bottom:4px}.article .widget.qrcode>.content>.fancybox,.article .widget.qrcode>.content>img{margin:0 8px}.article .widget.qrcode>.content img{margin-bottom:4px}.article .article_footer{margin-top:64px}.article .widget-blur{-webkit-backdrop-filter:none;backdrop-filter:none}.md .footer{margin-top:64px}.md .footer>div{margin-top:1em;margin-bottom:1em}.md .footer .header{line-height:1.75;padding-bottom:8px;font-weight:500;font-size:.875rem;color:var(--color-list)}.md .footer .header i{margin-right:2px}.md .footer .body ol,.md .footer .body ul{margin-top:0;margin-bottom:0}.md .footer .references,.md .footer .related_posts{background:var(--color-block);border-radius:4px;-webkit-border-radius:4px;padding:16px}.md .footer .references .body a{font-size:.9375rem;font-weight:500}.md .footer .related_posts .body{margin:4px;overflow:hidden;border-radius:2px;-webkit-border-radius:2px}.md .footer .related_posts .body .vlts-rps{display:flex;display:flex}.md .footer .related_posts .body .vlts-rps .item{flex-shrink:0;width:240px}.md .footer .related_posts .body .vlts-rps .item+.item{margin-left:16px}.md .footer .related_posts .body .vlts-rps img{border-radius:2px;-webkit-border-radius:2px;width:100%;height:120px;-o-object-fit:cover;object-fit:cover}.md .footer .related_posts .body .vlts-rps span{display:-webkit-box;display:-moz-box;display:block;text-align:justify;display:-webkit-box;display:-moz-box;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.md .footer .related_posts .body .vlts-rps .title{font-weight:600;-webkit-line-clamp:1}.md .footer .related_posts .body .vlts-rps .excerpt{font-size:.875rem;color:var(--color-meta);-webkit-line-clamp:3}.md .footer .copyright blockquote p{font-size:.875rem;margin:.25em 0}.md .footer .copyright blockquote p a{font-weight:500}.md .footer .donate{display:flex;display:flex;margin:0 auto}.md .footer .donate .imgs{display:inline-flex;display:inline-flex;margin:0 auto}.md .footer .donate .imgs .fancybox{margin:8px}.md .footer .donate .imgs img{width:80px}article .readmore{display:-webkit-box;display:-moz-box;display:block;margin-top:24px;font-size:.875rem}.copyright.license{background:var(--color-copyright-bkg);color:var(--color-meta);display:-webkit-box;display:-moz-box;display:block;font-size:.95rem;line-height:1.2;margin:15px -40px;overflow:hidden;padding:1.25em 40px;position:relative;border-radius:4px;-webkit-border-radius:4px}.copyright.license:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 367.467 367.467' style='enable-background:new 0 0 367.467 367.467;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M183.73,0.018C82.427,0.018,0,82.404,0,183.733c0,101.289,82.427,183.716,183.73,183.716 c101.315,0,183.737-82.427,183.737-183.716C367.467,82.404,285.045,0.018,183.73,0.018z M183.73,326.518 c-78.743,0-142.798-64.052-142.798-142.784c0-78.766,64.055-142.817,142.798-142.817c78.752,0,142.807,64.052,142.807,142.817 C326.536,262.466,262.481,326.518,183.73,326.518z'/%3E%3Cpath d='M244.036,217.014c-11.737,20.141-33.562,32.635-56.956,32.635c-36.329,0-65.921-29.585-65.921-65.915 c0-36.36,29.592-65.955,65.921-65.955c23.395,0,45.219,12.54,56.956,32.641l1.517,2.627h44.28l-2.658-7.129 c-7.705-20.413-21.225-37.769-39.122-50.157c-17.942-12.42-39.017-19.009-60.973-19.009c-58.981,0-106.946,48.006-106.946,106.982 c0,58.98,47.965,106.941,106.946,106.941c21.956,0,43.03-6.567,60.973-19.006c17.897-12.391,31.417-29.741,39.122-50.154 l2.658-7.133h-44.28L244.036,217.014z'/%3E%3C/g%3E%3C/svg%3E");content:" ";opacity:.1;-webkit-opacity:.1;-moz-opacity:.1;height:180px;right:-10px;top:-35px;width:180px;position:absolute}.copyright.license a{color:var(--color-meta)}.copyright.license a:hover{color:#ff5722}.copyright.license .license-meta-title,.copyright.license .license-title{margin:0 0 .25rem}.copyright.license .license-link,.copyright.license .license-meta-title{font-size:.8rem}.copyright.license .license-title{font-weight:700}.copyright.license .license-link{margin-bottom:1rem}.copyright.license .license-meta{align-items:center;display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:flex-start;-webkit-justify-content:flex-start;-khtml-justify-content:flex-start;-moz-justify-content:flex-start;-o-justify-content:flex-start;-ms-justify-content:flex-start}.copyright.license .license-meta-item{margin:0 2rem 1em 0}.copyright.license .license-meta-text{margin:0}.copyright.license .license-meta-text a{border-bottom:1px solid var(--color-meta)}.copyright.license .license-meta-text a:hover{border-bottom-color:#ff5722}.recommended-article{overflow:hidden}.recommended-article .recommended-article-header{margin-top:8px;margin-left:8px;margin-right:0}.recommended-article .recommended-article-group{display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;overflow:hidden}@media screen and (max-width:768px){.recommended-article .recommended-article-group{height:190px;overflow:scroll;-ms-overflow-style:none}.recommended-article .recommended-article-group::-webkit-scrollbar{width:0!important}}.recommended-article .recommended-article-group .recommended-article-item{display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;align-content:center;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;align-items:center;overflow:hidden;width:calc(100%/3 - 16px);max-height:200px;margin-top:8px;margin-left:8px;margin-right:0}@media screen and (max-width:768px){.recommended-article .recommended-article-group .recommended-article-item{width:calc(100%/2 - 16px)}}@media screen and (max-width:500px){.recommended-article .recommended-article-group .recommended-article-item{width:calc(100% - 16px)}}.recommended-article .recommended-article-group .recommended-article-item img{display:flex;display:flex;width:100%;height:150px}.recommended-article .recommended-article-group .recommended-article-item span{display:-webkit-box;display:-moz-box;display:block;text-align:justify;display:-webkit-box;display:-moz-box;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}footer.footer{position:relative;padding:40px 10px 120px 10px;width:100%;color:var(--color-site-footer);margin:0 auto;overflow:hidden;text-align:center}footer.footer,footer.footer p{font-size:.8125rem}footer.footer .licenses{color:fade(,50%)}footer.footer .social-wrapper{display:flex;display:flex;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;margin:4px 8px}footer.footer a{color:var(--color-site-footer);padding:0;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}footer.footer a:hover{color:#ff5722}footer.footer a:not(.social):hover{text-decoration:underline}footer.footer a.social{position:relative;display:-webkit-box;display:-moz-box;display:inline-block;text-align:center;display:flex;display:flex;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;align-items:center;min-width:36px;min-height:36px;margin:4px;opacity:.75;-webkit-opacity:.75;-moz-opacity:.75;border-radius:4px;-webkit-border-radius:4px;font-size:1rem}footer.footer a.social img{margin:8px;height:24px}footer.footer a.social:hover{color:#ff5722;background:rgba(255,87,34,.1)}footer.footer .copyright{margin-top:16px}footer.footer .copyright p{font-size:.78125rem}@media screen and (max-width:768px){footer.footer{justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center}}.article.l_friends .friends-group .friend-content{display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;margin:-8px;border-radius:8px;-webkit-border-radius:8px;align-items:flex-start;line-height:1.3}.article.l_friends .friends-group .friend-content .friend-card{display:flex;display:flex;border-radius:4px;-webkit-border-radius:4px;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1);padding:8px 0;margin:8px;margin-top:calc(2.25 * 16px + 32px);color:var(--color-meta);background:var(--color-block);justify-content:flex-start;-webkit-justify-content:flex-start;-khtml-justify-content:flex-start;-moz-justify-content:flex-start;-o-justify-content:flex-start;-ms-justify-content:flex-start;align-content:flex-start;flex-direction:column;width:calc(100%/4 - 16px)}@media screen and (max-width:1024px){.article.l_friends .friends-group .friend-content .friend-card{width:calc(100%/4 - 16px)}}@media screen and (max-width:768px){.article.l_friends .friends-group .friend-content .friend-card{width:calc(100%/3 - 16px)}}@media screen and (max-width:500px){.article.l_friends .friends-group .friend-content .friend-card{width:calc(100%/2 - 16px)}}.article.l_friends .friends-group .friend-content .friend-card:hover .friend-left .avatar{transform:scale(1.2) rotate(12deg);-webkit-transform:scale(1.2) rotate(12deg);-khtml-transform:scale(1.2) rotate(12deg);-moz-transform:scale(1.2) rotate(12deg);-o-transform:scale(1.2) rotate(12deg);-ms-transform:scale(1.2) rotate(12deg);box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}.article.l_friends .friends-group .friend-content .friend-card .friend-left{display:flex;display:flex;align-self:center}.article.l_friends .friends-group .friend-content .friend-card .friend-left .avatar{width:64px;height:64px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1);margin:16px 8px 4px 8px;margin-top:calc(-1.25 * 16px - 32px);border-radius:100%;-webkit-border-radius:100%;border:2px solid #fff;background:#fff}.article.l_friends .friends-group .friend-content .friend-card .friend-right{margin:4px 8px;display:flex;display:flex;flex-direction:column;text-align:center}.article.l_friends .friends-group .friend-content .friend-card .friend-right p{text-align:center}.article.l_friends .friends-group .friend-content .friend-card .friend-right .friend-tags-wrapper{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;margin-left:-2px;word-break:break-all}.article.l_friends .friends-group .friend-content .friend-card .friend-right p{margin:0}.article.l_friends .friends-group .friend-content .friend-card .friend-right p.friend-name{font-size:.8125rem;padding-top:4px;font-weight:700}.article.l_friends .friends-group .friend-content .friend-card .friend-right p.tags{font-size:.78125rem;display:-webkit-box;display:-moz-box;display:inline;background:0 0;word-wrap:break-word;padding-right:4px}.md img{position:relative;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}@media screen and (max-width:500px){.md img{box-shadow:none;-webkit-box-shadow:none}}.md div>img,.md p>img{display:-webkit-box;display:-moz-box;display:block;margin:auto;border-radius:4px;-webkit-border-radius:4px}@media screen and (max-width:500px){.md div>img,.md p>img{border-radius:2px;-webkit-border-radius:2px}}.md span img{display:-webkit-box;display:-moz-box;display:inline;margin:auto}.md .img-wrap{margin:1.5rem auto;text-align:center;border-radius:2px;-webkit-border-radius:2px;overflow:hidden}.md .img-wrap .img-bg{width:100%}.md .img-wrap .image-caption{display:-webkit-box;display:-moz-box;display:block;margin:.75rem auto;font-size:.8125rem;color:var(--color-meta)}.md .img-wrap .image-caption:empty{display:-webkit-box;display:-moz-box;display:none}svg.loading{display:-webkit-box;display:-moz-box;display:block;position:absolute;color:var(--text-p3);width:100%;height:2rem;margin:auto;animation:spin infinite 2s;-webkit-animation:spin infinite 2s;-khtml-animation:spin infinite 2s;-moz-animation:spin infinite 2s;-o-animation:spin infinite 2s;-ms-animation:spin infinite 2s;animation-timing-function:linear}@keyframes spin{from{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0)}to{transform:rotate(360deg);-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}}#safearea{margin:16px 16px 0}#l_body{position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#l_body div.loading{margin:16px 0;width:100%;display:-webkit-box;display:-moz-box;display:block}#l_body div.loading,#l_body div.loading p{text-align:center}#l_body #s-top{transition:all .6s ease;-webkit-transition:all .6s ease;-khtml-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;-ms-transition:all .6s ease;z-index:50;position:fixed;width:48px;height:48px;line-height:48px;border-radius:100%;-webkit-border-radius:100%;bottom:32px;right:32px;transform:translateY(100px) scale(0);-webkit-transform:translateY(100px) scale(0);-khtml-transform:translateY(100px) scale(0);-moz-transform:translateY(100px) scale(0);-o-transform:translateY(100px) scale(0);-ms-transform:translateY(100px) scale(0);transform-origin:bottom;-webkit-transform-origin:bottom;-khtml-transform-origin:bottom;-moz-transform-origin:bottom;-o-transform-origin:bottom;-ms-transform-origin:bottom;color:var(--color-text)}@media screen and (max-width:768px){#l_body #s-top{right:16px}}#l_body #s-top.show{transform:translateY(0) scale(1);-webkit-transform:translateY(0) scale(1);-khtml-transform:translateY(0) scale(1);-moz-transform:translateY(0) scale(1);-o-transform:translateY(0) scale(1);-ms-transform:translateY(0) scale(1)}#l_body #s-top.show.hl{background:#3dd9b6;color:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}@media screen and (min-width:768px){#l_body #s-top:hover{transform:scale(1.2);-webkit-transform:scale(1.2);-khtml-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);border-radius:25%;-webkit-border-radius:25%;background:#3dd9b6;color:#fff;box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}#l_body #s-top:hover.hl{box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}}#l_main{width:calc(100% - 1 * 240px);padding-right:16px;float:left}@media screen and (max-width:768px){#l_main{width:100%}}#l_main.no_sidebar{width:100%;padding-right:0;max-width:840px;margin:auto}@media screen and (min-width:2048px){#l_main.no_sidebar{max-width:calc(55vw - 240px)}}#l_main.no_sidebar~#l_side{display:-webkit-box;display:-moz-box;display:none}#l_main .post-list{position:relative;margin-bottom:16px;column-gap:16px;-webkit-column-gap:16px;-moz-column-gap:16px}#l_main .post-list.multiple-columns{-moz-columns:320px;columns:320px}#l_main .post-wrapper{column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid-column}#l_main .widget .content .tabs,#l_main .widget .content details,#l_main .widget .content ol,#l_main .widget .content p,#l_main .widget .content table,#l_main .widget .content ul{margin-top:1em;margin-bottom:1em}#l_main .widget .content .post{padding-top:0;padding-bottom:0;margin-top:1em;margin-bottom:1em}#l_main .widget.grid .content .grid.fixed a{width:calc(100%/8 - 0 * 16px)}@media screen and (max-width:1024px){#l_main .widget.grid .content .grid.fixed a{width:calc(100%/7 - 0 * 16px)}}@media screen and (max-width:768px){#l_main .widget.grid .content .grid.fixed a{width:calc(100%/6 - 0 * 16px)}}@media screen and (max-width:500px){#l_main .widget.grid .content .grid.fixed a{width:calc(100%/5 - 0 * 16px)}}@media screen and (max-width:425px){#l_main .widget.grid .content .grid.fixed a{width:calc(100%/4 - 0 * 16px)}}@media screen and (max-width:375px){#l_main .widget.grid .content .grid.fixed a{width:calc(100%/3 - 0 * 16px)}}#l_main .post{position:relative;margin-bottom:16px;padding:24px;border-radius:8px;-webkit-border-radius:8px}#l_main .post h1.title{font-size:1.5rem;margin:0;border-bottom:none;padding-bottom:4px;border-bottom:none}#l_main .post .article-meta{color:var(--color-meta);margin-bottom:16px;line-height:normal}#l_main .post .article-meta#top{margin-top:16px;margin-bottom:32px}#l_main .post .article-meta#bottom{margin-top:32px;margin-bottom:8px}#l_main .post .article-meta .aplayer,#l_main .post .article-meta .aplayer-pic,#l_main .post .article-meta .thumbnail{width:48px;height:48px}#l_main .post .article-meta .aplayer,#l_main .post .article-meta .thumbnail{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;border-radius:100%;-webkit-border-radius:100%;float:right;margin:2px;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}#l_main .post .article-meta .aplayer:hover,#l_main .post .article-meta .thumbnail:hover{border-radius:25%;-webkit-border-radius:25%;transform:scale(1.1);-webkit-transform:scale(1.1);-khtml-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}@media screen and (max-width:500px){#l_main .post .article-meta .aplayer:hover,#l_main .post .article-meta .thumbnail:hover{border-radius:100%;-webkit-border-radius:100%;transform:scale(1);-webkit-transform:scale(1);-khtml-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}}#l_main .post .article-meta .thumbnail{width:auto;border-radius:4px;-webkit-border-radius:4px;box-shadow:none;-webkit-box-shadow:none;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}#l_main .post .article-meta .thumbnail:hover{border-radius:4px;-webkit-border-radius:4px;transform:scale(1.1) rotate(4deg);-webkit-transform:scale(1.1) rotate(4deg);-khtml-transform:scale(1.1) rotate(4deg);-moz-transform:scale(1.1) rotate(4deg);-o-transform:scale(1.1) rotate(4deg);-ms-transform:scale(1.1) rotate(4deg);box-shadow:none;-webkit-box-shadow:none}#l_main .post .article-meta .new-meta-box{transition:all .1s ease;-webkit-transition:all .1s ease;-khtml-transition:all .1s ease;-moz-transition:all .1s ease;-o-transition:all .1s ease;-ms-transition:all .1s ease;display:flex;display:flex;align-items:center;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}#l_main .post .article-meta .new-meta-box,#l_main .post .article-meta .new-meta-box i,#l_main .post .article-meta .new-meta-box p{font-size:.8125rem}#l_main .post .article-meta .new-meta-box .new-meta-item{color:var(--color-meta);display:flex;display:flex;align-items:baseline;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;margin:0 16px 0 0;padding:8px 0}#l_main .post .article-meta .new-meta-box .new-meta-item .notlink{cursor:default}#l_main .post .article-meta .new-meta-box .new-meta-item .notlink:hover{color:var(--color-meta)}#l_main .post .article-meta .new-meta-box .new-meta-item .notlink:hover p{color:var(--color-meta)}#l_main .post .article-meta .new-meta-box .new-meta-item:last-child{margin-right:0}#l_main .post .article-meta .new-meta-box .new-meta-item i,#l_main .post .article-meta .new-meta-box .new-meta-item img{display:-webkit-box;display:-moz-box;display:inline-block}#l_main .post .article-meta .new-meta-box .new-meta-item i{margin-right:4px;border-radius:0;-webkit-border-radius:0}#l_main .post .article-meta .new-meta-box .new-meta-item i.fa-hashtag{margin-right:2px}#l_main .post .article-meta .new-meta-box .new-meta-item a,#l_main .post .article-meta .new-meta-box .new-meta-item p{color:var(--color-meta);padding:3px 0}#l_main .post .article-meta .new-meta-box .new-meta-item a{display:flex;display:flex;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;align-items:center}#l_main .post .article-meta .new-meta-box .new-meta-item a img{height:16px;width:16px;margin-right:8px}#l_main .post .article-meta .new-meta-box .new-meta-item a p{margin:0;font-weight:400;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}#l_main .post .article-meta .new-meta-box .new-meta-item a:hover{color:#ff5722}#l_main .post .article-meta .new-meta-box .new-meta-item a:hover p{color:#ff5722}#l_main .post .article-meta .new-meta-box .author i,#l_main .post .article-meta .new-meta-box .author img{border-radius:100%;-webkit-border-radius:100%}#l_main .post .article-meta .new-meta-box .author img{transform:translateY(-.5px);-webkit-transform:translateY(-.5px);-khtml-transform:translateY(-.5px);-moz-transform:translateY(-.5px);-o-transform:translateY(-.5px);-ms-transform:translateY(-.5px)}@media screen and (max-width:500px){#l_main .post .article-meta .new-meta-box .share{width:100%;margin-top:16px;background:var(--color-block);border-radius:4px;-webkit-border-radius:4px}}#l_main .post .article-meta .new-meta-box .share-body{position:relative;display:flex;display:flex;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;margin:0;padding:0 2px}#l_main .post .article-meta .new-meta-box .share-body a{padding:0;margin:0 1px}#l_main .post .article-meta .new-meta-box .share-body a img{margin:2px;height:24px;width:auto;background:0 0}@media screen and (max-width:500px){#l_main .post .article-meta .new-meta-box .share-body a img{height:32px;margin:8px}}#l_main .post .article-meta .new-meta-box .share-body div.hoverbox div.target{display:-webkit-box;display:-moz-box;display:none;position:absolute;background:var(--color-card);border-radius:8px;-webkit-border-radius:8px;box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);padding:8px;left:50%;top:-20px;transform:translate(-50%,-100%);-webkit-transform:translate(-50%,-100%);-khtml-transform:translate(-50%,-100%);-moz-transform:translate(-50%,-100%);-o-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%)}#l_main .post .article-meta .new-meta-box .share-body div.hoverbox div.target img{display:-webkit-box;display:-moz-box;display:block;margin:0;padding:0;height:128px;width:128px;min-width:128px}#l_main .post .article-meta .new-meta-box .share-body div.hoverbox:hover div.target{display:flex;display:flex}@media screen and (max-width:500px){#l_main .post .article-meta .new-meta-box .share-body div.hoverbox div.target{position:absolute}}#l_main .post span>img{display:-webkit-box;display:-moz-box;display:inline-block}#l_main .post a img{display:-webkit-box;display:-moz-box;display:inline}@media screen and (max-width:768px){#l_main{padding-right:0}}@media screen and (max-width:768px) and (max-width:500px){#l_main{width:100%}}.body-wrapper{position:relative;display:flex;display:flex;width:100%;max-width:1080px;margin:0 auto;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:space-between;-webkit-justify-content:space-between;-khtml-justify-content:space-between;-moz-justify-content:space-between;-o-justify-content:space-between;-ms-justify-content:space-between;align-items:stretch}@media screen and (min-width:2048px){.body-wrapper{max-width:55vw}}article#comments p[ct]{margin-top:0;margin-bottom:1em;font-size:1.125rem;color:var(--color-text);font-weight:600}article#comments p[cst]{margin-top:1em;margin-bottom:1em;font-size:.875rem}article#comments #load-btns,article#comments #loading-comments{text-align:center;margin:16px 0}article#comments #load-btns,article#comments #load-btns a,article#comments #load-btns i,article#comments #loading-comments,article#comments #loading-comments a,article#comments #loading-comments i{line-height:3em}article#comments #load-btns a.load-comments,article#comments #loading-comments a.load-comments{display:-webkit-box;display:-moz-box;display:inline-block;border-radius:2px;-webkit-border-radius:2px;cursor:pointer;background:#44d7b6;color:#fff;padding-left:48px;padding-right:48px}article#comments #load-btns a.load-comments:hover,article#comments #loading-comments a.load-comments:hover{background:#ff5722}.white-box{background:var(--color-card)}img{max-width:100%}img.lazyload:not(.placeholder){transition:opacity .5s ease-out 0s;transition:filter .25s ease-out 0s;-webkit-transition:filter .25s ease-out 0s;-khtml-transition:filter .25s ease-out 0s;-moz-transition:filter .25s ease-out 0s;-o-transition:filter .25s ease-out 0s;-ms-transition:filter .25s ease-out 0s}img.lazyload:not(.placeholder):not(.loaded){opacity:0;-webkit-opacity:0;-moz-opacity:0}img.lazyload:not(.placeholder).loaded{opacity:1;-webkit-opacity:1;-moz-opacity:1}img.lazyload:not(.placeholder):not(.loaded){filter:blur(8px)}img.lazyload:not(.placeholder).loaded{filter:none}.md>p{padding-top:4px}.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{position:relative;pointer-events:none;margin-top:0;font-weight:500}.md h1>a,.md h2>a,.md h3>a,.md h4>a,.md h5>a,.md h6>a{color:inherit;pointer-events:auto}.md h1>a:hover,.md h2>a:hover,.md h3>a:hover,.md h4>a:hover,.md h5>a:hover,.md h6>a:hover{color:#ff5722}.md h1:before,.md h2:before,.md h3:before,.md h4:before,.md h5:before,.md h6:before{content:'';display:-webkit-box;display:-moz-box;display:block;margin-top:-48px;height:96px;visibility:hidden;pointer-events:none}.md h1:before,.md h2:before{margin-top:-32px}.md .article-meta+h1,.md .article-meta+h2{margin-top:-80px}.md h3,.md h4,.md h5,.md h6{margin-bottom:1em}.md h3:before{margin-top:-56px}.md h4:before{margin-top:-64px}.md h5{font-weight:700}.md h2+h3:before{margin-top:-80px}.md ol,.md ul{font-size:.9375rem;list-style:initial;padding-left:8px;margin-left:16px;margin-top:1em;margin-bottom:1em}.md ol ol,.md ol ul,.md ul ol,.md ul ul{margin-top:0;margin-bottom:0}.md ol li,.md ul li{margin-top:0;margin-bottom:0}.md ol li li,.md ul li li{margin-top:0;margin-bottom:0}.md ol li p,.md ul li p{margin-top:4px;margin-bottom:0}.md ol.task-list,.md ul.task-list{padding-left:0;margin-left:4px}.md ol.task-list li,.md ul.task-list li{list-style:none}.md ol.task-list li input,.md ul.task-list li input{margin-right:4px}.md ul>li{list-style:initial}.md ol>li{list-style:decimal}.md .div-ori-link{display:-webkit-box;display:-moz-box;display:block;text-align:center;margin:4rem 0}.md .ori-link{margin:auto;padding:1em 3em;border:1px solid #3dd9b6;border-radius:4px;-webkit-border-radius:4px;color:#3dd9b6;font-weight:500}.md .ori-link:hover{color:#ff5722;border-color:#ff5722}#l_main .prev-next{width:100%;display:flex;display:flex;justify-content:space-between;-webkit-justify-content:space-between;-khtml-justify-content:space-between;-moz-justify-content:space-between;-o-justify-content:space-between;-ms-justify-content:space-between;align-items:baseline;color:var(--color-meta);margin:0;font-weight:600}#l_main .prev-next .prev{text-align:left;border-top-right-radius:32px;border-bottom-right-radius:32px}#l_main .prev-next .next{text-align:right;border-top-left-radius:32px;border-bottom-left-radius:32px}#l_main .prev-next p{margin:16px}#l_main .prev-next section{color:var(--color-meta);padding:16px;border-radius:8px;-webkit-border-radius:8px}#l_main .prev-next section:hover{color:#ff5722}#l_main .article .prev-next{width:100%;display:flex;display:flex;justify-content:space-between;-webkit-justify-content:space-between;-khtml-justify-content:space-between;-moz-justify-content:space-between;-o-justify-content:space-between;-ms-justify-content:space-between;align-content:flex-start;margin-top:8px}#l_main .article .prev-next>a{width:100%;padding:8px;color:var(--color-meta);background:var(--color-block);border-radius:4px;-webkit-border-radius:4px}#l_main .article .prev-next>a:hover{background:#ffeee8}#l_main .article .prev-next>a:hover p.title{color:#ff5722}#l_main .article .prev-next>a p{margin:8px .5rem}#l_main .article .prev-next>a p.title{font-weight:600;font-size:1rem}#l_main .article .prev-next>a p.title>i{width:1rem}#l_main .article .prev-next>a p.content{font-size:.875rem;font-weight:400;text-align:justify;word-break:break-all}#l_main .article .prev-next>a:only-child{margin-left:0;margin-right:0}#l_main .article .prev-next .prev{margin-left:0;margin-right:8px}#l_main .article .prev-next .prev p.title{text-align:left}#l_main .article .prev-next .next{margin-left:8px;margin-right:0}#l_main .article .prev-next .next p.title{text-align:right}.article-title{font-weight:500;margin-bottom:12px;line-height:1.4}.article-title a{color:var(--color-h1)}.article-title a:hover{color:#ff5722}.article-title[pin]{margin-right:36px}.article-desc{word-break:break-word}.post-v3{overflow:hidden;text-align:justify}.post-v3 .md{color:var(--color-p)}.post-v3 .pin{position:absolute;width:20px;height:20px;border-radius:20px;-webkit-border-radius:20px;right:24px;top:24px;z-index:1;pointer-events:none}.meta-v3[line_style=solid]{border-top:1px solid rgba(68,68,68,.1)}.meta-v3[line_style=dashed]{border-top:2px dashed rgba(68,68,68,.1)}.meta-v3[line_style=dotted]{border-top:4px dotted rgba(68,68,68,.1)}.meta-v3{margin-top:16px;padding-top:12px;display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:space-between;-webkit-justify-content:space-between;-khtml-justify-content:space-between;-moz-justify-content:space-between;-o-justify-content:space-between;-ms-justify-content:space-between;color:var(--color-meta)}.meta-v3>div{display:flex;display:flex;align-items:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.meta-v3 time{font-size:.875rem}.meta-v3 .category-link{font-size:.875rem;color:var(--color-meta);-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.meta-v3 .category-link:hover{color:#ff5722}.meta-v3 .readmore{font-weight:700}.meta-v3 .avatar{line-height:0;margin-right:.75em}.meta-v3 .avatar img{width:24px;height:24px;display:-webkit-box;display:-moz-box;display:block;border-radius:12px;-webkit-border-radius:12px;-o-object-fit:cover;object-fit:cover}.headimg-div{display:-webkit-box;display:-moz-box;display:block;margin-left:-24px;margin-top:-24px;margin-bottom:20px;width:calc(100% + 3 * 16px)}.headimg-div .headimg-a{display:-webkit-box;display:-moz-box;display:block;overflow:hidden;height:280px}@media screen and (max-width:768px){.headimg-div .headimg-a{height:250px}}@media screen and (max-width:500px){.headimg-div .headimg-a{height:220px}}@media screen and (max-width:425px){.headimg-div .headimg-a{height:190px}}.headimg-div .headimg{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;transition:transform 3s ease-out;-webkit-transition:transform 3s ease-out;-khtml-transition:transform 3s ease-out;-moz-transition:transform 3s ease-out;-o-transition:transform 3s ease-out;-ms-transition:transform 3s ease-out}.headimg-div .headimg:hover{transform:scale(1.1);-webkit-transform:scale(1.1);-khtml-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1)}.headimg-div .headimg.lazyload:not(.placeholder){transition:transform 3s ease-out,opacity .5s ease-out;-webkit-transition:transform 3s ease-out,opacity .5s ease-out;-khtml-transition:transform 3s ease-out,opacity .5s ease-out;-moz-transition:transform 3s ease-out,opacity .5s ease-out;-o-transition:transform 3s ease-out,opacity .5s ease-out;-ms-transition:transform 3s ease-out,opacity .5s ease-out}.headimg-div .headimg.lazyload:not(.placeholder):not(.loaded){opacity:0;-webkit-opacity:0;-moz-opacity:0}.headimg-div .headimg.lazyload:not(.placeholder).loaded{opacity:1;-webkit-opacity:1;-moz-opacity:1}#u-search .modal{position:fixed;height:80%;width:100%;max-width:640px;left:50%;top:0;margin:64px 0 0 -320px;background:var(--color-card);z-index:3;border-radius:8px;-webkit-border-radius:8px;overflow:hidden}#u-search .modal #resule-hits-empty,#u-search .modal .search-icon{position:absolute;top:50%;left:50%;width:50%;text-align:center;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-khtml-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}#u-search .modal #resule-hits-empty i,#u-search .modal .search-icon i{font-size:8em;color:#e8e8e8;margin-bottom:10px}@media screen and (max-width:680px){#u-search .modal{box-shadow:none;-webkit-box-shadow:none;max-width:none;top:0;left:0;margin:0;height:100%;border-radius:0;-webkit-border-radius:0}}#u-search .modal .modal-header{position:relative;width:100%;height:64px;z-index:3;border-top-left-radius:8px;border-top-right-radius:8px;font-size:$fontsize;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1);background:#fff;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}@media screen and (max-width:680px){#u-search .modal .modal-header{border-radius:0;-webkit-border-radius:0;padding:0}}#u-search .modal .modal-header .btn-close{display:-webkit-box;display:-moz-box;display:block;position:absolute;width:55px;height:64px;top:0;right:0;color:#3dd9b6;cursor:pointer;text-align:center;line-height:64px;vertical-align:middle;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;z-index:2}#u-search .modal .modal-header .btn-close:hover{transform:rotate(90deg);-webkit-transform:rotate(90deg);-khtml-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg)}#u-search .modal .modal-header #u-search-modal-form{position:relative;width:100%;height:100%;z-index:2}#u-search .modal .modal-header #u-search-modal-form input{color:var(--color-text)}#u-search .modal .modal-header #u-search-modal-form #u-search-modal-input{margin:16px 50px;padding:0 8px;width:calc(100% - 100px - 16px);line-height:2rem;border-radius:8px;-webkit-border-radius:8px;vertical-align:middle;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;-webkit-box-shadow:none;background:0 0;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}@media screen and (max-width:680px){#u-search .modal .modal-header #u-search-modal-form #u-search-modal-input{padding:0}}#u-search .modal .modal-header #u-search-modal-form #u-search-modal-input:focus{border-top-left-radius:8px;border-top-right-radius:8px}#u-search .modal .modal-header #u-search-modal-btn-submit{position:absolute;top:0;left:0;padding-left:5px;padding-top:2px;background:0 0;border:none;width:50px;height:64px;vertical-align:middle;color:#3dd9b6;z-index:2}#u-search .modal .modal-body{position:absolute;padding:16px;width:100%;height:calc(100% - 64px);top:64px;left:0;overflow-y:scroll;-webkit-overflow-scrolling:touch;background:var(--color-card);border-radius:8px;-webkit-border-radius:8px}#u-search .modal .modal-body::-webkit-scrollbar{height:4px;width:4px}#u-search .modal .modal-body::-webkit-scrollbar-track-piece{background:0 0}#u-search .modal .modal-body::-webkit-scrollbar-thumb{background:#3dd9b6;cursor:pointer;border-radius:2px;-webkit-border-radius:2px}#u-search .modal .modal-body::-webkit-scrollbar-thumb:hover{background:#ff5722}#u-search .modal .modal-body .modal-results{list-style:none}#u-search .modal .modal-body .modal-results .result{position:relative;display:-webkit-box;display:-moz-box;display:block;padding:16px;border-radius:8px;-webkit-border-radius:8px}#u-search .modal .modal-body .modal-results .result b[mark]{color:#25be9c;text-decoration:underline;font-size:120%;background-color:#ffe600}#u-search .modal .modal-body .modal-results .result:hover{background:var(--color-site-bg)}#u-search .modal .modal-body .modal-results .result:hover .title{color:var(--color-list-hl)}#u-search .modal .modal-body .modal-results .result .title{display:-webkit-box;display:-moz-box;display:inline-block;max-width:100%;color:var(--color-list);font-weight:700;padding:1px;margin-bottom:2px;white-space:normal;overflow:hidden;text-overflow:ellipsis;font-size:1.125rem}#u-search .modal .modal-body .modal-results .result .digest{display:-webkit-box;display:-moz-box;display:block;white-space:inherit;overflow:hidden;word-break:break-all;text-overflow:ellipsis;font-size:.8125rem;color:var(--color-meta)}#u-search .modal .modal-body .modal-results .result .icon{position:absolute;top:50%;right:0;margin-top:-4px;font-size:11px;color:var(--color-meta)}#u-search .modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:1}#l_side{width:240px;float:right;position:relative;display:flex;display:flex;flex-direction:column}@media screen and (max-width:768px){#l_side{width:100%}}#l_side .widget{overflow:hidden}#l_side .widget.sticky{position:sticky;top:80px;z-index:1}#l_side .widget>.content{max-height:200vh;overflow:auto;text-align:justify;font-size:.875rem;max-width:100%}@media screen and (max-width:768px){#l_side .widget>.content{max-height:none}}#l_side .widget>.content::-webkit-scrollbar{height:4px;width:4px}#l_side .widget>.content::-webkit-scrollbar-track-piece{background:0 0}#l_side .widget>.content::-webkit-scrollbar-thumb{background:#3dd9b6;cursor:pointer;border-radius:2px;-webkit-border-radius:2px}#l_side .widget>.content::-webkit-scrollbar-thumb:hover{background:#ff5722}.widget{z-index:0;background:var(--color-card);margin-bottom:16px;border-radius:8px;-webkit-border-radius:8px;width:100%;display:-webkit-box;display:-moz-box;display:none}.widget ol li,.widget ul li{margin-top:0;margin-bottom:0}.widget.desktop{display:-webkit-box;display:-moz-box;display:block}@media screen and (max-width:768px){.widget{display:-webkit-box;display:-moz-box;display:none!important}.widget.mobile{display:-webkit-box;display:-moz-box;display:block!important}}.widget header{border-top-left-radius:8px;border-top-right-radius:8px;padding:calc(16px - 2px);font-weight:700;font-size:.875rem;padding-bottom:0}.widget header,.widget header a{color:var(--color-meta)}.widget header>a:hover{color:#ff5722}.widget header span.name{margin-left:8px}.widget>.content{padding:8px 0}.widget>.content p{margin-top:1em;margin-bottom:1em}.widget>.content p:first-child{margin-top:.5em}.widget>.content ul>li a{color:var(--color-meta);padding:0 16px;padding-left:12px;line-height:2;display:flex;display:flex;justify-content:space-between;-webkit-justify-content:space-between;-khtml-justify-content:space-between;-moz-justify-content:space-between;-o-justify-content:space-between;-ms-justify-content:space-between;align-content:center;border-left:2px solid transparent;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.widget>.content ul.entry,.widget>.content ul.popular-posts{list-style:none}.widget>.content ul.entry a,.widget>.content ul.popular-posts a{color:var(--color-list)}.widget>.content ul.entry a .name,.widget>.content ul.popular-posts a .name{flex:auto 0}.widget>.content ul.entry a .badge,.widget>.content ul.popular-posts a .badge{flex:none 0;font-weight:400;font-size:.875rem;color:rgba(68,68,68,.7)}.widget>.content ul.entry a.active,.widget>.content ul.popular-posts a.active{border-left:2px solid #3dd9b6;color:var(--color-list-hl)}.widget>.content ul.entry a.active .badge,.widget>.content ul.popular-posts a.active .badge{color:rgba(61,217,182,.9)}.widget>.content ul.entry a.child,.widget>.content ul.popular-posts a.child{padding-left:32px}.widget>.content ul.entry a:hover,.widget>.content ul.popular-posts a:hover{border-left:2px solid #3dd9b6;color:var(--color-list-hl);background:var(--color-site-bg)}.widget.blogger{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.widget.blogger .content{padding:0;display:flex;display:flex;flex-direction:column;align-items:stretch}.widget.blogger .content>.avatar{align-self:center;overflow:hidden;position:relative;border-top-left-radius:8px;border-top-right-radius:8px;line-height:0}.widget.blogger .content>.avatar.circle{border-radius:100%;-webkit-border-radius:100%;width:128px;height:128px;margin-top:32px;margin-bottom:1em}.widget.blogger .content>.avatar.circle img{display:-webkit-box;display:-moz-box;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-khtml-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}@media screen and (max-width:768px){.widget.blogger .content>.avatar{width:80px;height:80px;border-radius:100%;-webkit-border-radius:100%;border:2px solid #fff}.widget.blogger .content>.avatar img{display:-webkit-box;display:-moz-box;display:block;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-khtml-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);position:absolute}}.widget.blogger .content .text :first-child{margin-top:16px}.widget.blogger .content h2{text-align:center;font-weight:700;margin:8px}@media screen and (max-width:768px){.widget.blogger .content h2{margin:8px}}.widget.blogger .content p{text-align:center;font-weight:700;margin:8px 8px 0 8px;empty-cells:hide}.widget.blogger .content .social-wrapper{display:flex;display:flex;justify-content:space-between;-webkit-justify-content:space-between;-khtml-justify-content:space-between;-moz-justify-content:space-between;-o-justify-content:space-between;-ms-justify-content:space-between;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;margin:4px 4px}.widget.blogger .content .social-wrapper a{color:var(--color-meta);padding:0;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.widget.blogger .content .social-wrapper a:hover{color:#ff5722}.widget.blogger .content .social-wrapper a.social{display:flex;display:flex;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;align-items:center;width:32px;height:32px;margin:4px;border-radius:100px;-webkit-border-radius:100px}.widget.blogger .content .social-wrapper a.social:hover{background:#ebfbf7;color:#3dd9b6}@media screen and (max-width:768px){.widget.blogger .content .social-wrapper{justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;display:-webkit-box;display:-moz-box;display:none}}@media screen and (max-width:768px){.widget.blogger{box-shadow:none;-webkit-box-shadow:none;background:0 0!important;margin-top:32px;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--color-site-inner)}}.widget.text .content{padding:4px 16px}.widget.text .content,.widget.text .content p{font-size:.875rem;word-break:break-all}.widget.text .content a{color:#2092ec;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.widget.text .content a:hover{color:#ff5722}.widget.text .content a:active{color:#d93400}.widget.list .content{padding:8px 0}.widget.list .content a{font-size:.875rem;font-weight:700;line-height:1.5;padding-top:6px;padding-bottom:6px}.widget.list .content a i,.widget.list .content a img{margin-right:4px}.widget.list .content a i{margin-left:1px}.widget.list .content a img{vertical-align:middle;height:20px;width:20px;margin-bottom:4px}.widget.list .content a img#round{border-radius:100%;-webkit-border-radius:100%}.widget.grid .content .grid{border:none;display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:space-around;-webkit-justify-content:space-around;-khtml-justify-content:space-around;-moz-justify-content:space-around;-o-justify-content:space-around;-ms-justify-content:space-around;padding:4px 16px}.widget.grid .content .grid a{text-align:center;border-radius:2px;-webkit-border-radius:2px;margin:0;padding:4px 8px;display:flex;display:flex;flex-direction:column;align-items:center;font-size:.78125rem;font-weight:700;color:rgba(68,68,68,.7);line-height:1.5;word-wrap:break-word}.widget.grid .content .grid a i{margin-top:.3em;margin-bottom:.3em;font-size:1.8em}.widget.grid .content .grid a img{display:-webkit-box;display:-moz-box;display:inline;vertical-align:middle;margin-bottom:4px}.widget.grid .content .grid a img#round{border-radius:100%;-webkit-border-radius:100%}.widget.grid .content .grid a.active{color:var(--color-list-hl);background:var(--color-site-bg)}.widget.grid .content .grid a:hover{color:var(--color-list-hl);background:var(--color-site-bg);border-radius:2px;-webkit-border-radius:2px}.widget.grid .content .grid.fixed a{width:calc(100%/3 - 0 * 16px)}@media screen and (max-width:768px){.widget.grid .content .grid.fixed a{width:calc(100%/6 - 0 * 16px)}}@media screen and (max-width:500px){.widget.grid .content .grid.fixed a{width:calc(100%/5 - 0 * 16px)}}@media screen and (max-width:425px){.widget.grid .content .grid.fixed a{width:calc(100%/4 - 0 * 16px)}}@media screen and (max-width:375px){.widget.grid .content .grid.fixed a{width:calc(100%/3 - 0 * 16px)}}.widget.tagcloud .content{text-align:justify;padding:8px 16px}.widget.tagcloud .content a{display:-webkit-box;display:-moz-box;display:inline-block;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;line-height:1.2em;margin:4px 0;border-bottom:1px solid transparent}.widget.tagcloud .content a:hover{color:#ff5722!important;border-bottom:1px solid #ff5722}.widget.related_posts .content{font-weight:700}.widget.related_posts .content ul{margin-top:8px;margin-bottom:8px}.widget.related_posts .content h3{font-size:.875rem;font-weight:700;margin:0}.widget.related_posts .content h3 a{line-height:inherit;padding-top:4px;padding-bottom:4px}.widget.qrcode .content{display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;align-items:center;justify-content:space-around;-webkit-justify-content:space-around;-khtml-justify-content:space-around;-moz-justify-content:space-around;-o-justify-content:space-around;-ms-justify-content:space-around;padding-left:16px;padding-right:16px}.widget.qrcode .content,.widget.qrcode .content img{margin-bottom:4px}#l_side>.widget.page>.content{padding-top:0;padding-left:12px;padding-right:12px}.webinfo{padding:.2rem 1rem}.webinfo .webinfo-item{display:-webkit-box;display:-moz-box;display:block;padding:4px 0 0}.webinfo .webinfo-item div:first-child{display:-webkit-box;display:-moz-box;display:inline-block}.webinfo .webinfo-item div:last-child{display:-webkit-box;display:-moz-box;display:inline-block;float:right}.widget-last{display:-webkit-box;display:-moz-box;display:block!important}.widget-last .item{display:flex;display:flex;justify-content:space-between;-webkit-justify-content:space-between;-khtml-justify-content:space-between;-moz-justify-content:space-between;-o-justify-content:space-between;-ms-justify-content:space-between;font-size:.8rem}.widget-last .item-title{width:100%;display:-webkit-box;display:-moz-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.widget-sticky{position:sticky;top:80px;z-index:10}.snackbar-wrap{position:fixed;width:100%;left:0;bottom:0;background:#3dd9b6;padding:16px;z-index:2}.snackbar-content{max-width:1080px;margin:16px auto}@media screen and (max-width:1080px){.snackbar-content{max-width:100%}}.snackbar-content p{margin-top:.5rem;margin-bottom:.5rem;color:#fff}.snackbar-content .title{font-size:1.5rem;font-weight:600}.snackbar-content .action{display:-webkit-box;display:-moz-box;display:block;margin:1.5rem -4px}.snackbar-content .action a{margin:4px;cursor:pointer;color:#fff;display:-webkit-box;display:-moz-box;display:inline-block;padding:.4em 2em;font-weight:600;border-radius:2px;-webkit-border-radius:2px;border:1px solid #fff}.snackbar-content .action a:hover{color:#3dd9b6;background:#fff}.snackbar-wrap[theme=warning]{background:#f7e751}.snackbar-wrap[theme=warning] .snackbar-content p{color:#000}.snackbar-wrap[theme=warning] .snackbar-content a{color:#000;border-color:#000}.snackbar-wrap[theme=warning] .snackbar-content a:hover{color:#f7e751;background:#000}#l_side .toc-wrapper{z-index:1;overflow:hidden;border-radius:8px;-webkit-border-radius:8px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;line-height:1.6;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}#l_side .toc-wrapper header{position:sticky;width:100%;top:0;padding-bottom:4px}#l_side .toc-wrapper .content{max-height:calc(100vh - 144px)}#l_side .toc-wrapper .content a{border-left:2px solid transparent}#l_side .toc-wrapper .content a.active{color:var(--color-list-hl);border-left:2px solid #3dd9b6}#l_side .toc-wrapper .content a:hover{color:var(--color-list-hl);background:var(--color-site-bg);border-left:2px solid #3dd9b6}@media screen and (max-width:768px){#l_side .toc-wrapper{z-index:1001;position:fixed;max-height:1000px;width:auto;max-width:calc(100% - 2 * 16px);top:48px;right:16px;border-radius:4px;-webkit-border-radius:4px;box-shadow:0 4px 8px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.1);border:1px solid #e7e7e7;visibility:hidden;transform:scale(0,0);-webkit-transform:scale(0,0);-khtml-transform:scale(0,0);-moz-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0);transform-origin:right top;-webkit-transform-origin:right top;-khtml-transform-origin:right top;-moz-transform-origin:right top;-o-transform-origin:right top;-ms-transform-origin:right top}#l_side .toc-wrapper.active{visibility:visible;transform:scale(1,1);-webkit-transform:scale(1,1);-khtml-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1)}}@media screen and (max-width:375px){#l_side .toc-wrapper{right:0}}#l_side .toc-wrapper a{padding-left:8px;color:var(--color-meta);font-size:.875rem;display:-webkit-box;display:-moz-box;display:inline-block}#l_side .toc-wrapper ol .toc-child a,#l_side .toc-wrapper ul .toc-child a{font-weight:400}#l_side .toc-wrapper ol .toc-item.toc-level-1 .toc-child a,#l_side .toc-wrapper ul .toc-item.toc-level-1 .toc-child a{padding-left:12.8px}#l_side .toc-wrapper ol .toc-item.toc-level-2 .toc-child a,#l_side .toc-wrapper ul .toc-item.toc-level-2 .toc-child a{padding-left:25.6px}#l_side .toc-wrapper ol .toc-item.toc-level-3 .toc-child a,#l_side .toc-wrapper ul .toc-item.toc-level-3 .toc-child a{padding-left:38.4px}#l_side .toc-wrapper ol .toc-item.toc-level-4 .toc-child a,#l_side .toc-wrapper ul .toc-item.toc-level-4 .toc-child a{padding-left:51.2px}#l_side .toc-wrapper ol .toc-item.toc-level-5 .toc-child a,#l_side .toc-wrapper ul .toc-item.toc-level-5 .toc-child a{padding-left:64px}#l_side .toc-wrapper ol .toc-item.toc-level-6 .toc-child a,#l_side .toc-wrapper ul .toc-item.toc-level-6 .toc-child a{padding-left:76.8px}#l_side .toc-wrapper ol li,#l_side .toc-wrapper ul li{width:auto;text-align:left}#l_side .toc-wrapper ol li a,#l_side .toc-wrapper ul li a{padding:0 8px 0 11px;font-weight:700;width:100%}#l_side .toc-wrapper:empty{display:-webkit-box;display:-moz-box;display:none}#l_side .toc-wrapper .toc-child{font-size:1rem;overflow:hidden;transition:max-height .6s ease-in;-webkit-transition:max-height .6s ease-in;-khtml-transition:max-height .6s ease-in;-moz-transition:max-height .6s ease-in;-o-transition:max-height .6s ease-in;-ms-transition:max-height .6s ease-in;max-height:0}#l_side .toc-wrapper .toc-item.active>.toc-link{color:var(--color-list-hl);border-left:2px solid #3dd9b6}#l_side .toc-wrapper .toc-item.active>.toc-child{max-height:1000px}.md .video-wrap{margin:1.5rem auto}.article span.btn,.md span.btn{display:-webkit-box;display:-moz-box;display:inline}.article span.btn a,.md span.btn a{text-decoration:none;border-bottom:none;display:-webkit-box;display:-moz-box;display:inline-block;padding:3px 4px 2px 4px;margin:2px;line-height:1.1;border-radius:2px;-webkit-border-radius:2px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.article span.btn a i,.md span.btn a i{margin-right:2px}.article span.btn a:not([href]),.md span.btn a:not([href]){opacity:.5;-webkit-opacity:.5;-moz-opacity:.5}.article span.btn a:not([href]):hover,.md span.btn a:not([href]):hover{cursor:$not-allowed,not-allowed}.article span.btn a,.article span.btn.regular a,.md span.btn a,.md span.btn.regular a{color:#44d7b6;border:1px solid #44d7b6}.article span.btn a:hover,.article span.btn.regular a:hover,.md span.btn a:hover,.md span.btn.regular a:hover{color:#ff5722;border-color:#ff5722}.article span.btn a i,.article span.btn.regular a i,.md span.btn a i,.md span.btn.regular a i{margin-right:4px}.article span.btn.regular a,.article span.btn.solid a,.md span.btn.regular a,.md span.btn.solid a{padding:8px 12px}.article span.btn.solid a,.md span.btn.solid a{border:none;background:#44d7b6;color:#fff}.article span.btn.solid a:hover,.md span.btn.solid a:hover{color:#fff;background:#ff5722}.article span.btn.large a,.md span.btn.large a{font-size:1rem;padding:12px 36px}.article span.btn.large a i,.md span.btn.large a i{margin-right:8px}.article span.btn.center,.md span.btn.center{display:-webkit-box;display:-moz-box;display:block;text-align:center}.article div.btns,.md div.btns{margin:0 -8px;display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;align-items:flex-start;overflow:visible;line-height:1.8}.article div.btns,.article div.btns a,.article div.btns p,.md div.btns,.md div.btns a,.md div.btns p{font-size:.8125rem;color:var(--color-p)}.article div.btns b,.md div.btns b{font-size:.875rem}.article div.btns.wide>a,.md div.btns.wide>a{padding-left:32px;padding-right:32px}.article div.btns.fill>a,.md div.btns.fill>a{flex-grow:1;width:auto}.article div.btns.around,.md div.btns.around{justify-content:space-around;-webkit-justify-content:space-around;-khtml-justify-content:space-around;-moz-justify-content:space-around;-o-justify-content:space-around;-ms-justify-content:space-around}.article div.btns.center,.md div.btns.center{justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center}.article div.btns.grid2>a,.md div.btns.grid2>a{width:calc(100%/2 - 16px)}@media screen and (max-width:1024px){.article div.btns.grid2>a,.md div.btns.grid2>a{width:calc(100%/2 - 16px)}}@media screen and (max-width:768px){.article div.btns.grid2>a,.md div.btns.grid2>a{width:calc(100%/2 - 16px)}}@media screen and (max-width:500px){.article div.btns.grid2>a,.md div.btns.grid2>a{width:calc(100%/1 - 16px)}}.article div.btns.grid3>a,.md div.btns.grid3>a{width:calc(100%/3 - 16px)}@media screen and (max-width:1024px){.article div.btns.grid3>a,.md div.btns.grid3>a{width:calc(100%/3 - 16px)}}@media screen and (max-width:768px){.article div.btns.grid3>a,.md div.btns.grid3>a{width:calc(100%/3 - 16px)}}@media screen and (max-width:500px){.article div.btns.grid3>a,.md div.btns.grid3>a{width:calc(100%/1 - 16px)}}.article div.btns.grid4>a,.md div.btns.grid4>a{width:calc(100%/4 - 16px)}@media screen and (max-width:1024px){.article div.btns.grid4>a,.md div.btns.grid4>a{width:calc(100%/3 - 16px)}}@media screen and (max-width:768px){.article div.btns.grid4>a,.md div.btns.grid4>a{width:calc(100%/3 - 16px)}}@media screen and (max-width:500px){.article div.btns.grid4>a,.md div.btns.grid4>a{width:calc(100%/2 - 16px)}}.article div.btns.grid5>a,.md div.btns.grid5>a{width:calc(100%/5 - 16px)}@media screen and (max-width:1024px){.article div.btns.grid5>a,.md div.btns.grid5>a{width:calc(100%/4 - 16px)}}@media screen and (max-width:768px){.article div.btns.grid5>a,.md div.btns.grid5>a{width:calc(100%/3 - 16px)}}@media screen and (max-width:500px){.article div.btns.grid5>a,.md div.btns.grid5>a{width:calc(100%/2 - 16px)}}.article div.btns a,.md div.btns a{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;text-decoration:none;border-bottom:none;margin:8px;margin-top:calc(1.25 * 16px + 32px);min-width:120px;font-weight:700;display:flex;display:flex;justify-content:flex-start;-webkit-justify-content:flex-start;-khtml-justify-content:flex-start;-moz-justify-content:flex-start;-o-justify-content:flex-start;-ms-justify-content:flex-start;align-content:center;align-items:center;flex-direction:column;padding:8px;text-align:center;background:var(--color-block);border-radius:4px;-webkit-border-radius:4px}.article div.btns a>i:first-child,.article div.btns a>img:first-child,.md div.btns a>i:first-child,.md div.btns a>img:first-child{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;height:64px;width:64px;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1);margin:16px 8px 4px 8px;margin-top:calc(-1.25 * 16px - 32px);border:2px solid var(--color-card);background:#fff;line-height:60px;font-size:28px}.article div.btns a>i:first-child.auto,.article div.btns a>img:first-child.auto,.md div.btns a>i:first-child.auto,.md div.btns a>img:first-child.auto{width:auto}.article div.btns a>i:first-child,.md div.btns a>i:first-child{color:#fff;background:#3dd9b6}.article div.btns a b,.article div.btns a p,.md div.btns a b,.md div.btns a p{margin:.25em;font-weight:400;line-height:1.25;word-wrap:break-word}.article div.btns a b,.md div.btns a b{font-weight:700;line-height:1.3}.article div.btns a img,.md div.btns a img{margin:.4em auto}.article div.btns a:not([href]),.md div.btns a:not([href]){cursor:default;color:inherit}.article div.btns a[href]:hover,.md div.btns a[href]:hover{background:rgba(255,87,34,.15)}.article div.btns a[href]:hover,.article div.btns a[href]:hover b,.md div.btns a[href]:hover,.md div.btns a[href]:hover b{color:#ff5722}.article div.btns a[href]:hover>i:first-child,.article div.btns a[href]:hover>img:first-child,.md div.btns a[href]:hover>i:first-child,.md div.btns a[href]:hover>img:first-child{transform:scale(1.1) translateY(-8px);-webkit-transform:scale(1.1) translateY(-8px);-khtml-transform:scale(1.1) translateY(-8px);-moz-transform:scale(1.1) translateY(-8px);-o-transform:scale(1.1) translateY(-8px);-ms-transform:scale(1.1) translateY(-8px);box-shadow:0 4px 8px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.1)}.article div.btns a[href]:hover>i:first-child,.md div.btns a[href]:hover>i:first-child{background:#ff5722}.article div.btns.circle a>i:first-child,.article div.btns.circle a>img:first-child,.md div.btns.circle a>i:first-child,.md div.btns.circle a>img:first-child{border-radius:32px;-webkit-border-radius:32px}.article div.btns.rounded a>i:first-child,.article div.btns.rounded a>img:first-child,.md div.btns.rounded a>i:first-child,.md div.btns.rounded a>img:first-child{border-radius:16px;-webkit-border-radius:16px}.md .checkbox{display:flex;display:flex;align-items:center;margin-top:1em;margin-bottom:1em}.md .checkbox+.checkbox{margin-top:-1em}.md .checkbox input{transform:translate(0,-1px);-webkit-transform:translate(0,-1px);-khtml-transform:translate(0,-1px);-moz-transform:translate(0,-1px);-o-transform:translate(0,-1px);-ms-transform:translate(0,-1px);-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;position:relative;height:16px;width:16px;transition:all .15s ease-out 0s;-webkit-transition:all .15s ease-out 0s;-khtml-transition:all .15s ease-out 0s;-moz-transition:all .15s ease-out 0s;-o-transition:all .15s ease-out 0s;-ms-transition:all .15s ease-out 0s;cursor:pointer;display:-webkit-box;display:-moz-box;display:inline-block;outline:0;border-radius:2px;-webkit-border-radius:2px;flex-shrink:0;margin-right:8px;pointer-events:none}.md .checkbox input[type=checkbox]:after,.md .checkbox input[type=checkbox]:before{position:absolute;content:"";background:#fff}.md .checkbox input[type=checkbox]:before{left:1px;top:5px;width:0;height:2px;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-khtml-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in;transform:rotate(45deg);-webkit-transform:rotate(45deg);-khtml-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg)}.md .checkbox input[type=checkbox]:after{right:7px;bottom:3px;width:2px;height:0;transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-khtml-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-ms-transition:all .2s ease-out;transform:rotate(40deg);-webkit-transform:rotate(40deg);-khtml-transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);-webkit-transform:rotate(40deg);-moz-transform:rotate(40deg);-ms-transform:rotate(40deg);-o-transform:rotate(40deg);transition-delay:.25s;-webkit-transition-delay:.25s;-khtml-transition-delay:.25s;-moz-transition-delay:.25s;-o-transition-delay:.25s;-ms-transition-delay:.25s}.md .checkbox input[type=checkbox]:checked:before{left:0;top:7px;width:6px;height:2px}.md .checkbox input[type=checkbox]:checked:after{right:3px;bottom:1px;width:2px;height:10px}.md .checkbox.minus input[type=checkbox]:before{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);left:1px;top:5px;width:0;height:2px}.md .checkbox.minus input[type=checkbox]:after{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);left:1px;top:5px;width:0;height:2px}.md .checkbox.minus input[type=checkbox]:checked:before{left:1px;top:5px;width:10px;height:2px}.md .checkbox.minus input[type=checkbox]:checked:after{left:1px;top:5px;width:10px;height:2px}.md .checkbox.plus input[type=checkbox]:before{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);left:1px;top:5px;width:0;height:2px}.md .checkbox.plus input[type=checkbox]:after{transform:rotate(0);-webkit-transform:rotate(0);-khtml-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);left:5px;top:1px;width:2px;height:0}.md .checkbox.plus input[type=checkbox]:checked:before{left:1px;top:5px;width:10px;height:2px}.md .checkbox.plus input[type=checkbox]:checked:after{left:5px;top:1px;width:2px;height:10px}.md .checkbox.times input[type=checkbox]:before{transform:rotate(45deg);-webkit-transform:rotate(45deg);-khtml-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);left:3px;top:1px;width:0;height:2px}.md .checkbox.times input[type=checkbox]:after{transform:rotate(135deg);-webkit-transform:rotate(135deg);-khtml-transform:rotate(135deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg);-ms-transform:rotate(135deg);right:3px;top:1px;width:0;height:2px}.md .checkbox.times input[type=checkbox]:checked:before{left:1px;top:5px;width:10px;height:2px}.md .checkbox.times input[type=checkbox]:checked:after{right:1px;top:5px;width:10px;height:2px}.md .checkbox input[type=radio]{border-radius:50%;-webkit-border-radius:50%}.md .checkbox input[type=radio]:before{content:"";display:-webkit-box;display:-moz-box;display:block;width:8px;height:8px;border-radius:50%;-webkit-border-radius:50%;margin:2px;transform:scale(0);-webkit-transform:scale(0);-khtml-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transition:all .25s ease-out;-webkit-transition:all .25s ease-out;-khtml-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-o-transition:all .25s ease-out;-ms-transition:all .25s ease-out}.md .checkbox input[type=radio]:checked:before{transform:scale(1);-webkit-transform:scale(1);-khtml-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1)}.md .checkbox input{border:2px solid #3dd9b6}.md .checkbox input[type=checkbox]:checked{background:#3dd9b6}.md .checkbox input[type=radio]:checked:before{background:#3dd9b6}.md .checkbox.red input{border-color:#fe5f58}.md .checkbox.red input[type=checkbox]:checked{background:#fe5f58}.md .checkbox.red input[type=radio]:checked:before{background:#fe5f58}.md .checkbox.green input{border-color:#3dc550}.md .checkbox.green input[type=checkbox]:checked{background:#3dc550}.md .checkbox.green input[type=radio]:checked:before{background:#3dc550}.md .checkbox.yellow input{border-color:#ffbd2b}.md .checkbox.yellow input[type=checkbox]:checked{background:#ffbd2b}.md .checkbox.yellow input[type=radio]:checked:before{background:#ffbd2b}.md .checkbox.cyan input{border-color:#1bcdfc}.md .checkbox.cyan input[type=checkbox]:checked{background:#1bcdfc}.md .checkbox.cyan input[type=radio]:checked:before{background:#1bcdfc}.md .checkbox.blue input{border-color:#2196f3}.md .checkbox.blue input[type=checkbox]:checked{background:#2196f3}.md .checkbox.blue input[type=radio]:checked:before{background:#2196f3}article .checkbox p{display:-webkit-box;display:-moz-box;display:inline-block;margin-top:0!important;margin-bottom:0!important}div.dropmenu-wrapper{display:-webkit-box;display:-moz-box;display:inline-block}div.dropmenu{position:relative;display:-webkit-box;display:-moz-box;display:inline-block;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;color:#2092ec}div.dropmenu:hover{color:inherit}div.dropmenu:hover>ul{display:-webkit-box;display:-moz-box;display:block;left:0;margin-left:0;margin-top:0}div.dropmenu ul>li{list-style:none}div.dropmenu ul>li>a:hover{text-decoration:none!important}div.dropmenu .list-v .list-v{left:calc(100% - .5 * 16px)}div.gallery{margin:1em 0;overflow:hidden}div.gallery+.gallery{margin-top:-1em}div.gallery>.fancybox,div.gallery>p>.fancybox{margin:1px;padding:0;position:relative}div.gallery>.fancybox a,div.gallery>p>.fancybox a{height:100%;width:100%}div.gallery>.fancybox img,div.gallery>p>.fancybox img{-o-object-fit:cover;object-fit:cover;height:100%;width:100%}div.gallery>.fancybox .image-caption,div.gallery>p>.fancybox .image-caption{opacity:0;-webkit-opacity:0;-moz-opacity:0;transform:translateY(100%);-webkit-transform:translateY(100%);-khtml-transform:translateY(100%);-moz-transform:translateY(100%);-o-transform:translateY(100%);-ms-transform:translateY(100%);transition:all .3s ease;-webkit-transition:all .3s ease;-khtml-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;pointer-events:none;position:absolute;width:100%;bottom:0;text-align:center;background:rgba(0,0,0,.3);color:#fff}div.gallery>.fancybox .image-caption:empty,div.gallery>p>.fancybox .image-caption:empty{display:-webkit-box;display:-moz-box;display:none}div.gallery>.fancybox:hover .image-caption,div.gallery>p>.fancybox:hover .image-caption{opacity:1;-webkit-opacity:1;-moz-opacity:1;transform:translateY(0);-webkit-transform:translateY(0);-khtml-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0)}div.gallery,div.gallery>p{display:flex;display:flex;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;align-items:center;flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-khtml-flex-wrap:nowrap;-moz-flex-wrap:nowrap;-o-flex-wrap:nowrap;-ms-flex-wrap:nowrap;padding:0!important;align-items:stretch}div.gallery[col]{flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:flex-start;-webkit-justify-content:flex-start;-khtml-justify-content:flex-start;-moz-justify-content:flex-start;-o-justify-content:flex-start;-ms-justify-content:flex-start}div.gallery[col='2']>.fancybox{width:calc(50% - 2 * 1px)}div.gallery[col='3']>.fancybox{width:calc(33.33% - 2 * 1px)}div.gallery[col='4']>.fancybox{width:calc(25% - 2 * 1px)}div.gallery[col='5']>.fancybox{width:calc(20% - 2 * 1px)}div.gallery[col='6']>.fancybox{width:calc(16.66% - 2 * 1px)}div.gallery[col='7']>.fancybox{width:calc(14.2857% - 2 * 1px)}div.gallery[col='8']>.fancybox{width:calc(12.5% - 2 * 1px)}div.gallery>p{margin:0}div.gallery.left,div.gallery.left>p{justify-content:flex-start;-webkit-justify-content:flex-start;-khtml-justify-content:flex-start;-moz-justify-content:flex-start;-o-justify-content:flex-start;-ms-justify-content:flex-start}div.gallery.center,div.gallery.center>p{justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center}div.gallery.right,div.gallery.right>p{justify-content:flex-end;-webkit-justify-content:flex-end;-khtml-justify-content:flex-end;-moz-justify-content:flex-end;-o-justify-content:flex-end;-ms-justify-content:flex-end}div.gallery.stretch,div.gallery.stretch>p{align-items:stretch}.fancybox-container .fancybox-stage{cursor:zoom-out}div.fancybox{margin-top:1em;margin-bottom:1em;display:flex;display:flex;flex-direction:column;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;align-items:center;flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-khtml-flex-wrap:nowrap;-moz-flex-wrap:nowrap;-o-flex-wrap:nowrap;-ms-flex-wrap:nowrap;padding:0!important;overflow:hidden;border-radius:2px;-webkit-border-radius:2px}@media screen and (max-width:500px){div.fancybox{border-radius:1px;-webkit-border-radius:1px}}div.fancybox a{line-height:0;margin:0 auto;align-items:stretch}div.fancybox .gallery{overflow:hidden}div.fancybox .image-caption{font-size:.8125rem;padding-top:.5em;padding-bottom:1em;color:var(--color-meta)}div.fancybox .image-caption:empty{display:-webkit-box;display:-moz-box;display:none}details{display:-webkit-box;display:-moz-box;display:block;padding:16px;margin:1em 0;border-radius:4px;-webkit-border-radius:4px;background:var(--color-card);font-size:.9375rem;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;border:1px solid var(--color-block)}details summary{cursor:pointer;padding:16px;margin:-16px;border-radius:4px;-webkit-border-radius:4px;color:rgba(68,68,68,.7);font-size:.875rem;font-weight:700;position:relative;line-height:normal}details summary>h1,details summary>h2,details summary>h3,details summary>h4,details summary>h5,details summary>h6,details summary>p{display:-webkit-box;display:-moz-box;display:inline;border-bottom:none!important}details summary:hover{color:var(--color-p)}details summary:hover:after{position:absolute;content:'+';text-align:center;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);-khtml-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);right:16px}details>summary{background:var(--color-block)}details[blue]{border-color:#e8f4fd}details[blue]>summary{background:#e8f4fd}details[cyan]{border-color:#e8fafe}details[cyan]>summary{background:#e8fafe}details[green]{border-color:#ebf9ed}details[green]>summary{background:#ebf9ed}details[yellow]{border-color:#fff8e9}details[yellow]>summary{background:#fff8e9}details[red]{border-color:#feefee}details[red]>summary{background:#feefee}details[open]{border-color:rgba(68,68,68,.2)}details[open]>summary{border-bottom:1px solid rgba(68,68,68,.2);border-bottom-left-radius:0;border-bottom-right-radius:0}details[open][blue]{border-color:rgba(33,150,243,.3)}details[open][blue]>summary{border-bottom-color:rgba(33,150,243,.3)}details[open][cyan]{border-color:rgba(27,205,252,.3)}details[open][cyan]>summary{border-bottom-color:rgba(27,205,252,.3)}details[open][green]{border-color:rgba(61,197,80,.3)}details[open][green]>summary{border-bottom-color:rgba(61,197,80,.3)}details[open][yellow]{border-color:rgba(255,189,43,.3)}details[open][yellow]>summary{border-bottom-color:rgba(255,189,43,.3)}details[open][red]{border-color:rgba(254,95,88,.3)}details[open][red]>summary{border-bottom-color:rgba(254,95,88,.3)}details[open]>summary{color:#444;margin-bottom:0}details[open]>summary:hover:after{content:'-'}details[open]>div.content{padding:16px;margin:-16px;margin-top:0}details[open]>div.content p>a:hover{text-decoration:underline}details[open]>div.content>.highlight:first-child,details[open]>div.content>.note:first-child,details[open]>div.content>.tabs:first-child,details[open]>div.content>details:first-child,details[open]>div.content>ol:first-child,details[open]>div.content>p:first-child,details[open]>div.content>ul:first-child{margin-top:0}details[open]>div.content>.highlight:last-child,details[open]>div.content>.note:last-child,details[open]>div.content>.tabs:last-child,details[open]>div.content>details:last-child,details[open]>div.content>ol:last-child,details[open]>div.content>p:last-child,details[open]>div.content>ul:last-child{margin-bottom:0}.md .frame-wrap{position:relative;overflow:hidden;margin:0 auto;max-width:100%;display:flex;display:flex;flex-direction:column;align-items:center}.md .frame-wrap img,.md .frame-wrap video{border-radius:0;-webkit-border-radius:0}.md .frame-wrap .frame{z-index:1;display:-webkit-box;display:-moz-box;display:block;position:absolute;background-size:100%;-webkit-background-size:100%;-moz-background-size:100%;background-repeat:no-repeat;overflow:hidden}.md .img-wrap .frame-wrap[part]{height:auto}.md .frame-wrap#iphone11 img,.md .frame-wrap#iphone11 video{width:287px;margin-top:19px;margin-bottom:20px}.md .frame-wrap#iphone11 .frame{background-image:url(https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@3/img/frame/iphone11.svg);width:329px;height:658px}.md .frame-wrap[part=top] img,.md .frame-wrap[part=top] video{margin-bottom:0!important}.md .frame-wrap:not([part=bottom]) .frame{top:0}.md .frame-wrap[part=bottom] img,.md .frame-wrap[part=bottom] video{bottom:0;margin-top:0!important}.md .frame-wrap[part=bottom] .frame{bottom:0}@media screen and (max-width:500px){.md .frame-wrap#iphone11 img,.md .frame-wrap#iphone11 video{width:208px;margin-top:13px;margin-bottom:14px}.md .frame-wrap#iphone11 .frame{width:238px;height:476px}}.users-wrap{overflow:hidden}.users-wrap .group-header{margin:0 0 1rem}.users-wrap .group-header p{margin:0;font-size:.875rem}.users-wrap .group-header p:first-child{font-size:1.25rem;font-weight:500}.users-wrap .group-body{width:100%;display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;align-items:stretch;margin-bottom:2rem}.users-wrap .friendsjs-wrap{display:-webkit-box;display:-moz-box;display:block}.users-wrap .friendsjs-wrap .loading-wrap{min-height:50px;margin:2rem 0;text-align:center}.users-wrap .user-card{flex-shrink:1;display:flex;display:flex;align-items:stretch;width:12.5%}@media screen and (max-width:980px){.users-wrap .user-card{width:14.28%}}@media screen and (max-width:900px){.users-wrap .user-card{width:16.66%}}@media screen and (max-width:820px){.users-wrap .user-card{width:20%}}@media screen and (max-width:768px){.users-wrap .user-card{width:16.66%}}@media screen and (max-width:500px){.users-wrap .user-card{width:25%}}.users-wrap .user-card .card-link{margin:0;width:100%;color:var(--text-p1);font-size:10px;font-weight:500;display:flex;display:flex;justify-content:flex-start;-webkit-justify-content:flex-start;-khtml-justify-content:flex-start;-moz-justify-content:flex-start;-o-justify-content:flex-start;-ms-justify-content:flex-start;flex-direction:column;align-items:center;text-align:center;line-height:1.2;border-radius:4px;-webkit-border-radius:4px;overflow:hidden;position:relative;padding:1rem .5rem}.users-wrap .user-card .card-link img{-o-object-fit:cover;object-fit:cover;display:-webkit-box;display:-moz-box;display:block;width:48px;height:48px;background:var(--card);border-radius:64px;-webkit-border-radius:64px;margin:0 0 .5rem}.users-wrap .user-card .card-link>img{transition:transform .2s ease-out,box-shadow .2s ease-out;-webkit-transition:transform .2s ease-out,box-shadow .2s ease-out;-khtml-transition:transform .2s ease-out,box-shadow .2s ease-out;-moz-transition:transform .2s ease-out,box-shadow .2s ease-out;-o-transition:transform .2s ease-out,box-shadow .2s ease-out;-ms-transition:transform .2s ease-out,box-shadow .2s ease-out}.users-wrap .user-card .card-link:hover{background:var(--block-hover)}.users-wrap .user-card .card-link:hover img{transform:scale(1.2) rotate(8deg);-webkit-transform:scale(1.2) rotate(8deg);-khtml-transform:scale(1.2) rotate(8deg);-moz-transform:scale(1.2) rotate(8deg);-o-transform:scale(1.2) rotate(8deg);-ms-transform:scale(1.2) rotate(8deg);box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}a.ghcard{display:-webkit-box;display:-moz-box;display:inline-block;line-height:0}.md .ghcard-group{column-count:2;-webkit-column-count:2;-moz-column-count:2;column-gap:0;-webkit-column-gap:0;-moz-column-gap:0;margin:0 -8px}.md .ghcard-group .ghcard{margin:8px}.md .img{-o-object-fit:contain;object-fit:contain}img.inline{display:-webkit-box;display:-moz-box;display:inline!important;vertical-align:middle;transform:translateY(-4px);-webkit-transform:translateY(-4px);-khtml-transform:translateY(-4px);-moz-transform:translateY(-4px);-o-transform:translateY(-4px);-ms-transform:translateY(-4px)}.md .tag.link{margin-top:1em;margin-bottom:1em}.md .link-card{margin-right:1em;background:var(--color-block);display:inline-flex;display:inline-flex;align-items:center;cursor:pointer;text-align:center;width:361px;max-width:100%;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1);color:var(--color-p);border-radius:8px;-webkit-border-radius:8px}@media screen and (max-width:425px){.md .link-card{max-width:100%;width:100%}}.md .link-card:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,.1),0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.1),0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}.md .link-card div.left,.md .link-card div.right{pointer-events:none}.md .link-card div.left{width:54px;height:54px;margin:12px;overflow:hidden;flex-shrink:0;position:relative}.md .link-card div.left i{font-size:32px;line-height:48px;margin-left:4px}.md .link-card div.left img{display:-webkit-box;display:-moz-box;display:block;position:absolute;border-radius:8px/4;-webkit-border-radius:8px/4;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-khtml-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.md .link-card div.right{overflow:hidden;margin-right:16px}.md .link-card p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md .link-card p.text{font-weight:700}.md .link-card p.url{flex-shrink:0;color:var(--color-meta);font-size:.8125rem}.md .link-group{display:-webkit-box;display:-moz-box;display:grid;grid-template-columns:1fr 1fr;grid-gap:16px}@media screen and (max-width:850px){.md .link-group{grid-template-columns:1fr}}.md .link-group .tag.link{margin:0}.md .link-group .link-card{width:100%}audio,video{border-radius:4px;-webkit-border-radius:4px;max-width:100%}video{z-index:1;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}video:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,.24),0 8px 16px 0 rgba(0,0,0,.24);-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.24),0 8px 16px 0 rgba(0,0,0,.24)}div.video{line-height:0;text-align:center}div.videos{max-width:calc(100% + 2 * 4px);display:flex;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-khtml-flex-wrap:wrap;-moz-flex-wrap:wrap;-o-flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:flex-start;-webkit-justify-content:flex-start;-khtml-justify-content:flex-start;-moz-justify-content:flex-start;-o-justify-content:flex-start;-ms-justify-content:flex-start;align-items:flex-end;margin:1em -4px}div.videos .video,div.videos iframe{width:100%;margin:4px}div.videos iframe{border-radius:4px;-webkit-border-radius:4px;width:100%;min-height:300px}div.videos.left{justify-content:flex-start;-webkit-justify-content:flex-start;-khtml-justify-content:flex-start;-moz-justify-content:flex-start;-o-justify-content:flex-start;-ms-justify-content:flex-start}div.videos.center{justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center}div.videos.right{justify-content:flex-end;-webkit-justify-content:flex-end;-khtml-justify-content:flex-end;-moz-justify-content:flex-end;-o-justify-content:flex-end;-ms-justify-content:flex-end}div.videos.stretch{align-items:stretch}div.videos[col='1'] .video,div.videos[col='1'] iframe{width:100%}div.videos[col='2'] .video,div.videos[col='2'] iframe{width:calc(50% - 2 * 4px)}div.videos[col='3'] .video,div.videos[col='3'] iframe{width:calc(33.33% - 2 * 4px)}div.videos[col='4'] .video,div.videos[col='4'] iframe{width:calc(25% - 2 * 4px)}div.note{position:relative;margin-top:1em;margin-bottom:1em;padding:16px;padding-left:calc(16px + 16px);border-radius:4px;-webkit-border-radius:4px;font-size:.9375rem;background:var(--color-block);border-left:4px solid #3dd9b6}div.note h2,div.note h3,div.note h4,div.note h5,div.note h6{margin-top:3px;margin-bottom:0;padding-top:0!important;border-bottom:initial}div.note blockquote,div.note img,div.note ol,div.note p,div.note ul{margin-top:.5em;margin-bottom:.5em}div.note .link-card{background:var(--color-card)}div.note::before{position:absolute;top:calc(50% - 24px * .5);left:4px;width:24px;height:24px;text-align:center;font-weight:600;line-height:24px;vertical-align:middle;font-family:'Font Awesome 6 Pro'}div.note::before{color:#3dd9b6;content:'\f054'}div.note::before{content:'\f054'}div.note.quote{background:#e8f4fd;border-color:#2196f3}div.note.quote::before{color:#2196f3;content:'\f10d'}div.note.info{background:#ebfbf7;border-color:#3dd9b6}div.note.info::before{color:#3dd9b6;content:'\f129'}div.note.done,div.note.success{background:#ebf9ed;border-color:#3dc550}div.note.done::before,div.note.success::before{color:#3dc550;content:'\f00c'}div.note.warning{background:#fff8e9;border-color:#ffbd2b}div.note.warning::before{color:#ffbd2b;content:'\f12a'}div.note.danger,div.note.error{background:#feefee;border-color:#fe5f58}div.note.danger::before,div.note.error::before{color:#fe5f58;content:'\f00d'}div.note.radiation::before{content:'\f7b9'}div.note.bug::before{content:'\f188'}div.note.idea::before{content:'\f0eb'}div.note.link::before{content:'\f0c1'}div.note.paperclip::before{content:'\f0c6'}div.note.todo::before{content:'\f0ae'}div.note.message::before{content:'\f4ad'}div.note.guide::before{content:'\f277'}div.note.download::before{content:'\f019'}div.note.up::before{content:'\f102'}div.note.undo::before{content:'\f2ea'}div.note.play::before{content:'\f144'}div.note.clear{background:0 0;border-color:none}div.note.light{background:#f5f5f5;border-color:#a1a1a1}div.note.light::before{color:#a1a1a1}div.note.gray{background:#f5f5f5;border-color:#696969}div.note.gray::before{color:#696969}div.note.theme{background:#ebfbf7;border-color:#3dd9b6}div.note.theme::before{color:#3dd9b6}div.note.red{background:#feefee;border-color:#fe5f58}div.note.red::before{color:#fe5f58}div.note.yellow{background:#fff8e9;border-color:#ffbd2b}div.note.yellow::before{color:#ffbd2b}div.note.green{background:#ebf9ed;border-color:#3dc550}div.note.green::before{color:#3dc550}div.note.cyan{background:#e8fafe;border-color:#1bcdfc}div.note.cyan::before{color:#1bcdfc}div.note.blue{background:#e8f4fd;border-color:#2196f3}div.note.blue::before{color:#2196f3}.sites-wrap .group-header{margin:0 0 1rem}.sites-wrap .group-header p{margin:0;font-size:.875rem}.sites-wrap .group-header p:first-child{font-size:1.25rem;font-weight:500}.sites-wrap .group-body{width:100%;margin-bottom:2rem}.sites-wrap .sitesjs-wrap{display:-webkit-box;display:-moz-box;display:block}.sites-wrap .sitesjs-wrap .loading-wrap{min-height:50px;margin:2rem 0;text-align:center}.sites-wrap .group-body{display:-webkit-box;display:-moz-box;display:grid;grid-gap:1rem 1rem;grid-template-columns:repeat(auto-fill,calc((100% - 3 * 1rem)/ 4));margin-bottom:2rem}@media screen and (max-width:1024px){.sites-wrap .group-body{grid-template-columns:repeat(auto-fill,calc((100% - 2 * 1rem)/ 3))}}@media screen and (max-width:900px){.sites-wrap .group-body{grid-template-columns:repeat(auto-fill,calc((100% - 1 * 1rem)/ 2))}}@media screen and (max-width:768px){.sites-wrap .group-body{grid-template-columns:repeat(auto-fill,calc((100% - 2 * 1rem)/ 3))}}@media screen and (max-width:500px){.sites-wrap .group-body{grid-template-columns:repeat(auto-fill,calc((100% - 1 * 1rem)/ 2))}}.sites-wrap .group-body .site-card .card-link{width:100%;display:flex;display:flex;flex-direction:column}.sites-wrap .group-body .site-card .card-link>img{width:100%;height:120px;border-radius:4px;-webkit-border-radius:4px;-o-object-fit:cover;object-fit:cover;box-shadow:0 1px 2px 0 rgba(0,0,0,.2);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.2)}@media screen and (max-width:1024px){.sites-wrap .group-body .site-card .card-link>img{height:150px}}@media screen and (max-width:900px){.sites-wrap .group-body .site-card .card-link>img{height:180px}}@media screen and (max-width:768px){.sites-wrap .group-body .site-card .card-link>img{height:150px}}.sites-wrap .group-body .site-card .card-link .info{margin-top:.5rem;line-height:1.2}.sites-wrap .group-body .site-card .card-link .info>img{width:28px;height:28px;border-radius:28px;-webkit-border-radius:28px;float:left;margin-right:8px;margin-top:2px}.sites-wrap .group-body .site-card .card-link .info span{display:-webkit-box;display:-moz-box;display:block}.sites-wrap .group-body .site-card .card-link .info .title{font-weight:500;color:var(--text-p1);font-size:.875rem;margin-top:1px;display:-webkit-box;display:-moz-box;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:1}.sites-wrap .group-body .site-card .card-link .info .desc{font-size:10px;margin-top:2px;word-wrap:break-word;color:var(--text-p3);display:-webkit-box;display:-moz-box;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}.sites-wrap .site-card .card-link>img{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.sites-wrap .site-card .card-link:hover>img{box-shadow:0 4px 8px 0 rgba(0,0,0,.1),0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.1),0 2px 4px 0 rgba(0,0,0,.1),0 4px 8px 0 rgba(0,0,0,.1),0 8px 16px 0 rgba(0,0,0,.1)}p.p.subtitle{font-weight:700;color:#3eb399;font-size:1.25rem!important;padding-top:1.5rem}p.p.subtitle:first-child{padding-top:1rem}p.p.logo,span.p.logo{font-family:Dosis,"PingFang SC","Microsoft YaHei",Helvetica,Arial,Helvetica,monospace}p.p.code,span.p.code{font-family:Menlo,UbuntuMono,Monaco,monospace,courier,sans-serif}p.p.left,span.p.left{display:-webkit-box;display:-moz-box;display:block;text-align:left}p.p.center,span.p.center{display:-webkit-box;display:-moz-box;display:block;text-align:center}p.p.right,span.p.right{display:-webkit-box;display:-moz-box;display:block;text-align:right}p.p.small,span.p.small{font-size:.875rem}p.p.large,span.p.large{font-size:2.5rem;line-height:1.4}p.p.huge,span.p.huge{font-size:4rem;line-height:1.4}p.p.ultra,span.p.ultra{font-size:6rem;line-height:1.4}p.p.huge,p.p.large,p.p.small,p.p.ultra,span.p.huge,span.p.large,span.p.small,span.p.ultra{margin:0;padding:0}p.p.bold,span.p.bold{font-weight:700}p.p.h1,p.p.h2,span.p.h1,span.p.h2{padding-bottom:.2rem;font-weight:500}p.p.h1,span.p.h1{font-size:1.5rem;color:var(--color-h1);padding-top:2em}p.p.h2,span.p.h2{font-size:1.5rem;color:var(--color-h2);padding-top:2em;border-bottom:1px solid rgba(68,68,68,.1)}p.p.h3,span.p.h3{font-size:1.25rem;color:var(--color-h3);padding-top:2em}p.p.h4,span.p.h4{font-size:1.125rem;color:var(--color-h4);padding-top:2em}p.p.h5,span.p.h5{font-size:1rem;color:var(--color-h5);padding-top:1.5em}p.p.red,span.p.red{color:#fe5f58}p.p.yellow,span.p.yellow{color:#ffbd2b}p.p.green,span.p.green{color:#3dc550}p.p.cyan,span.p.cyan{color:#1bcdfc}p.p.blue,span.p.blue{color:#2196f3}p.p.purple,span.p.purple{color:#9c27b0}p.p.gray,span.p.gray{color:#999}.swiper-container{width:100%;border-radius:4px;-webkit-border-radius:4px;--gap-p:2rem}.swiper-container:not(.swiper-container-initialized){display:-webkit-box;display:-moz-box;display:none}div.swiper-slide{text-align:center;display:flex;display:flex;align-self:center;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;align-items:center;width:50%}div.swiper-slide img{border-radius:4px;-webkit-border-radius:4px}.swiper-container[width=max] div.swiper-slide{width:100%}.swiper-container[width=min] div.swiper-slide{width:25%}.swiper-button-next,.swiper-button-prev{padding:1rem .5rem;margin-top:-2rem!important;border-radius:4px;-webkit-border-radius:4px;background:rgba(255,255,255,.25);transition:background .2s ease-out;-webkit-transition:background .2s ease-out;-khtml-transition:background .2s ease-out;-moz-transition:background .2s ease-out;-o-transition:background .2s ease-out;-ms-transition:background .2s ease-out;--swiper-theme-color:#000!important}.swiper-button-next:after,.swiper-button-prev:after{font-size:1.2rem!important;font-weight:700!important}.swiper-button-next:hover,.swiper-button-prev:hover{background:#fff!important;--swiper-theme-color:#ff5722!important}.md .table{overflow:auto;margin-top:1em;margin-bottom:1em}.md .table table{display:-webkit-box;display:-moz-box;display:table;width:100%}div.tabs{display:-webkit-box;display:-moz-box;display:block;position:relative;margin-top:1em;margin-bottom:1em;border-radius:4px;-webkit-border-radius:4px;background:var(--color-card);border:1px solid rgba(68,68,68,.2);font-size:.9375rem}div.tabs .highlight,div.tabs details,div.tabs div.note,div.tabs ol,div.tabs p,div.tabs ul{margin-top:1em;margin-bottom:1em}div.tabs ul.nav-tabs{display:flex;display:flex;overflow-x:auto;white-space:nowrap;justify-content:flex-start;-webkit-justify-content:flex-start;-khtml-justify-content:flex-start;-moz-justify-content:flex-start;-o-justify-content:flex-start;-ms-justify-content:flex-start;margin:0!important;padding:8px 8px 0 8px;background:var(--color-block);border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;line-height:1.5}div.tabs ul.nav-tabs li.tab{list-style-type:none;margin-top:0;margin-bottom:0}div.tabs ul.nav-tabs li.tab:last-child{padding-right:16px}div.tabs ul.nav-tabs li.tab a{display:-webkit-box;display:-moz-box;display:block;cursor:pointer;border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;padding:8px;text-align:center;font-size:.875rem;line-height:inherit;font-weight:700;color:var(--color-meta);border:1px solid transparent}div.tabs ul.nav-tabs li.tab a:hover{color:var(--color-p)}div.tabs ul.nav-tabs li.tab a i{pointer-events:none}div.tabs ul.nav-tabs li.tab.active a{cursor:default;color:var(--color-p);background:#fff;border:1px solid rgba(68,68,68,.2);border-bottom:1px solid var(--color-card)}div.tabs .tab-content{border-top:1px solid rgba(68,68,68,.2);margin-top:-1px}div.tabs .tab-content .tab-pane{padding:16px}div.tabs .tab-content .tab-pane:not(.active){display:-webkit-box;display:-moz-box;display:none}div.tabs .tab-content .tab-pane.active{display:-webkit-box;display:-moz-box;display:block}div.tabs .tab-content .tab-pane>.highlight:first-child,div.tabs .tab-content .tab-pane>.note:first-child,div.tabs .tab-content .tab-pane>.tabs:first-child,div.tabs .tab-content .tab-pane>ol:first-child,div.tabs .tab-content .tab-pane>p:first-child,div.tabs .tab-content .tab-pane>ul:first-child{margin-top:0}div.tabs .tab-content .tab-pane>.highlight:last-child,div.tabs .tab-content .tab-pane>.note:last-child,div.tabs .tab-content .tab-pane>.tabs:last-child,div.tabs .tab-content .tab-pane>ol:last-child,div.tabs .tab-content .tab-pane>p:last-child,div.tabs .tab-content .tab-pane>ul:last-child{margin-bottom:0}.article del{color:#8e8e8e;-webkit-text-decoration-color:#8e8e8e;text-decoration-color:#8e8e8e}.article u{color:var(--color-text);text-decoration:none;border-bottom:1px solid #fe5f58}.article emp{color:var(--color-text);border-bottom:4px dotted #fe5f58}.article wavy{color:var(--color-text);-webkit-text-decoration-style:wavy;text-decoration-style:wavy;-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-color:#fe5f58;text-decoration-color:#fe5f58}.article psw{color:transparent;background:#a1a1a1;border-radius:2px;-webkit-border-radius:2px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.article psw:hover{color:var(--color-p);background:0 0}.article kbd{border-radius:4px;-webkit-border-radius:4px;border:1px solid #d2d2d2;border-bottom-width:2px;background:#fafafa;padding-left:4px;padding-right:4px}div.timenode{position:relative}div.timenode:after,div.timenode:before{content:'';z-index:1;position:absolute;background:rgba(61,217,182,.5);width:2px;left:7px}div.timenode:before{top:0;height:6px}div.timenode:after{top:26px;height:calc(100% - 26px)}div.timenode:last-child:after{height:calc(100% - 26px - 16px);border-bottom-left-radius:2px;border-bottom-right-radius:2px}div.timenode .body,div.timenode .meta{max-width:calc(100% - 24px)}div.timenode .meta{position:relative;color:var(--color-meta);font-size:.875rem;line-height:32px;height:32px}div.timenode .meta:after,div.timenode .meta:before{content:'';position:absolute;top:8px;z-index:2}div.timenode .meta:before{background:rgba(61,217,182,.5);width:16px;height:16px;border-radius:8px;-webkit-border-radius:8px}div.timenode .meta:after{background:#3dd9b6;margin-left:2px;margin-top:2px;width:12px;height:12px;border-radius:6px;-webkit-border-radius:6px;transform:scale(.5);-webkit-transform:scale(.5);-khtml-transform:scale(.5);-moz-transform:scale(.5);-o-transform:scale(.5);-ms-transform:scale(.5);transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}div.timenode .meta p{font-weight:700;margin:0 0 0 24px}div.timenode .body{margin:4px 0 16px 24px;padding:16px;border-radius:8px;-webkit-border-radius:8px;background:var(--color-block);display:-webkit-box;display:-moz-box;display:inline-block}div.timenode .body:empty{display:-webkit-box;display:-moz-box;display:none}div.timenode .body>:first-child{margin-top:.25em}div.timenode .body>:last-child{margin-bottom:.25em}div.timenode .body .highlight{border:1px solid #e4e4e4}div.timenode:hover .meta{color:var(--color-text)}div.timenode:hover .meta:before{background:rgba(255,87,34,.5)}div.timenode:hover .meta:after{background:#ff5722;transform:scale(1);-webkit-transform:scale(1);-khtml-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1)}.article mjx-container{font-family:Menlo,UbuntuMono,Monaco,monospace,courier,sans-serif;padding:16px 8px;border-radius:4px;-webkit-border-radius:4px;min-width:0!important}.article .has-jax,.article mjx-container[jax=CHTML][display=true]{overflow:auto hidden}.article mjx-container+br{display:-webkit-box;display:-moz-box;display:none}.fa-duotone.red,.fa-light.red,.fa-regular.red,.fa-solid.red,.fa-thin.red,.fa.red,.fad.red,.fal.red,.far.red,.fas.red,.iziToast>.iziToast-body .iziToast-icon.red{color:#f44336}.fa-duotone.pink,.fa-light.pink,.fa-regular.pink,.fa-solid.pink,.fa-thin.pink,.fa.pink,.fad.pink,.fal.pink,.far.pink,.fas.pink,.iziToast>.iziToast-body .iziToast-icon.pink{color:#e91e63}.fa-duotone.purple,.fa-light.purple,.fa-regular.purple,.fa-solid.purple,.fa-thin.purple,.fa.purple,.fad.purple,.fal.purple,.far.purple,.fas.purple,.iziToast>.iziToast-body .iziToast-icon.purple{color:#9c27b0}.fa-duotone.indigo,.fa-light.indigo,.fa-regular.indigo,.fa-solid.indigo,.fa-thin.indigo,.fa.indigo,.fad.indigo,.fal.indigo,.far.indigo,.fas.indigo,.iziToast>.iziToast-body .iziToast-icon.indigo{color:#3f51b5}.fa-duotone.light-blue,.fa-light.light-blue,.fa-regular.light-blue,.fa-solid.light-blue,.fa-thin.light-blue,.fa.light-blue,.fad.light-blue,.fal.light-blue,.far.light-blue,.fas.light-blue,.iziToast>.iziToast-body .iziToast-icon.light-blue{color:#4ba7ee}.fa-duotone.deep-blue,.fa-light.deep-blue,.fa-regular.deep-blue,.fa-solid.deep-blue,.fa-thin.deep-blue,.fa.deep-blue,.fad.deep-blue,.fal.deep-blue,.far.deep-blue,.fas.deep-blue,.iziToast>.iziToast-body .iziToast-icon.deep-blue{color:#3367d6}.fa-duotone.teal,.fa-light.teal,.fa-regular.teal,.fa-solid.teal,.fa-thin.teal,.fa.teal,.fad.teal,.fal.teal,.far.teal,.fas.teal,.iziToast>.iziToast-body .iziToast-icon.teal{color:#009688}.fa-duotone.light-green,.fa-light.light-green,.fa-regular.light-green,.fa-solid.light-green,.fa-thin.light-green,.fa.light-green,.fad.light-green,.fal.light-green,.far.light-green,.fas.light-green,.iziToast>.iziToast-body .iziToast-icon.light-green{color:#8bc34a}.fa-duotone.orange,.fa-light.orange,.fa-regular.orange,.fa-solid.orange,.fa-thin.orange,.fa.orange,.fad.orange,.fal.orange,.far.orange,.fas.orange,.iziToast>.iziToast-body .iziToast-icon.orange{color:#ff9800}.fa-duotone.deep-orange,.fa-light.deep-orange,.fa-regular.deep-orange,.fa-solid.deep-orange,.fa-thin.deep-orange,.fa.deep-orange,.fad.deep-orange,.fal.deep-orange,.far.deep-orange,.fas.deep-orange,.iziToast>.iziToast-body .iziToast-icon.deep-orange{color:#ff5722}.fa-duotone.brown,.fa-light.brown,.fa-regular.brown,.fa-solid.brown,.fa-thin.brown,.fa.brown,.fad.brown,.fal.brown,.far.brown,.fas.brown,.iziToast>.iziToast-body .iziToast-icon.brown{color:#795548}.fa-duotone.blue-grey,.fa-light.blue-grey,.fa-regular.blue-grey,.fa-solid.blue-grey,.fa-thin.blue-grey,.fa.blue-grey,.fad.blue-grey,.fal.blue-grey,.far.blue-grey,.fas.blue-grey,.iziToast>.iziToast-body .iziToast-icon.blue-grey{color:#607d8b}.fa-duotone.yellow,.fa-light.yellow,.fa-regular.yellow,.fa-solid.yellow,.fa-thin.yellow,.fa.yellow,.fad.yellow,.fal.yellow,.far.yellow,.fas.yellow,.iziToast>.iziToast-body .iziToast-icon.yellow{color:#fcec60}.fa-duotone.TURQUOISE,.fa-light.TURQUOISE,.fa-regular.TURQUOISE,.fa-solid.TURQUOISE,.fa-thin.TURQUOISE,.fa.TURQUOISE,.fad.TURQUOISE,.fal.TURQUOISE,.far.TURQUOISE,.fas.TURQUOISE,.iziToast>.iziToast-body .iziToast-icon.TURQUOISE{color:#1abc9c}.fa-duotone.EMERALD,.fa-light.EMERALD,.fa-regular.EMERALD,.fa-solid.EMERALD,.fa-thin.EMERALD,.fa.EMERALD,.fad.EMERALD,.fal.EMERALD,.far.EMERALD,.fas.EMERALD,.iziToast>.iziToast-body .iziToast-icon.EMERALD{color:#2ecc71}.fa-duotone.PETERRIVE,.fa-light.PETERRIVE,.fa-regular.PETERRIVE,.fa-solid.PETERRIVE,.fa-thin.PETERRIVE,.fa.PETERRIVE,.fad.PETERRIVE,.fal.PETERRIVE,.far.PETERRIVE,.fas.PETERRIVE,.iziToast>.iziToast-body .iziToast-icon.PETERRIVE{color:#3498db}.fa-duotone.AMETHYST,.fa-light.AMETHYST,.fa-regular.AMETHYST,.fa-solid.AMETHYST,.fa-thin.AMETHYST,.fa.AMETHYST,.fad.AMETHYST,.fal.AMETHYST,.far.AMETHYST,.fas.AMETHYST,.iziToast>.iziToast-body .iziToast-icon.AMETHYST{color:#9b59b6}.fa-duotone.WETASPHALT,.fa-light.WETASPHALT,.fa-regular.WETASPHALT,.fa-solid.WETASPHALT,.fa-thin.WETASPHALT,.fa.WETASPHALT,.fad.WETASPHALT,.fal.WETASPHALT,.far.WETASPHALT,.fas.WETASPHALT,.iziToast>.iziToast-body .iziToast-icon.WETASPHALT{color:#34495e}.fa-duotone.GREENSEA,.fa-light.GREENSEA,.fa-regular.GREENSEA,.fa-solid.GREENSEA,.fa-thin.GREENSEA,.fa.GREENSEA,.fad.GREENSEA,.fal.GREENSEA,.far.GREENSEA,.fas.GREENSEA,.iziToast>.iziToast-body .iziToast-icon.GREENSEA{color:#16a085}.fa-duotone.NEPHRITIS,.fa-light.NEPHRITIS,.fa-regular.NEPHRITIS,.fa-solid.NEPHRITIS,.fa-thin.NEPHRITIS,.fa.NEPHRITIS,.fad.NEPHRITIS,.fal.NEPHRITIS,.far.NEPHRITIS,.fas.NEPHRITIS,.iziToast>.iziToast-body .iziToast-icon.NEPHRITIS{color:#27ae60}.fa-duotone.BELIZEHOLE,.fa-light.BELIZEHOLE,.fa-regular.BELIZEHOLE,.fa-solid.BELIZEHOLE,.fa-thin.BELIZEHOLE,.fa.BELIZEHOLE,.fad.BELIZEHOLE,.fal.BELIZEHOLE,.far.BELIZEHOLE,.fas.BELIZEHOLE,.iziToast>.iziToast-body .iziToast-icon.BELIZEHOLE{color:#2980b9}.fa-duotone.WISTERIA,.fa-light.WISTERIA,.fa-regular.WISTERIA,.fa-solid.WISTERIA,.fa-thin.WISTERIA,.fa.WISTERIA,.fad.WISTERIA,.fal.WISTERIA,.far.WISTERIA,.fas.WISTERIA,.iziToast>.iziToast-body .iziToast-icon.WISTERIA{color:#8e44ad}.fa-duotone.MIDNIGHTBLUE,.fa-light.MIDNIGHTBLUE,.fa-regular.MIDNIGHTBLUE,.fa-solid.MIDNIGHTBLUE,.fa-thin.MIDNIGHTBLUE,.fa.MIDNIGHTBLUE,.fad.MIDNIGHTBLUE,.fal.MIDNIGHTBLUE,.far.MIDNIGHTBLUE,.fas.MIDNIGHTBLUE,.iziToast>.iziToast-body .iziToast-icon.MIDNIGHTBLUE{color:#2c3e50}.fa-duotone.SUNFLOWER,.fa-light.SUNFLOWER,.fa-regular.SUNFLOWER,.fa-solid.SUNFLOWER,.fa-thin.SUNFLOWER,.fa.SUNFLOWER,.fad.SUNFLOWER,.fal.SUNFLOWER,.far.SUNFLOWER,.fas.SUNFLOWER,.iziToast>.iziToast-body .iziToast-icon.SUNFLOWER{color:#f1c40f}.fa-duotone.CARROT,.fa-light.CARROT,.fa-regular.CARROT,.fa-solid.CARROT,.fa-thin.CARROT,.fa.CARROT,.fad.CARROT,.fal.CARROT,.far.CARROT,.fas.CARROT,.iziToast>.iziToast-body .iziToast-icon.CARROT{color:#e67e22}.fa-duotone.ALIZARIN,.fa-light.ALIZARIN,.fa-regular.ALIZARIN,.fa-solid.ALIZARIN,.fa-thin.ALIZARIN,.fa.ALIZARIN,.fad.ALIZARIN,.fal.ALIZARIN,.far.ALIZARIN,.fas.ALIZARIN,.iziToast>.iziToast-body .iziToast-icon.ALIZARIN{color:#e74c3c}.fa-duotone.CLOUDS,.fa-light.CLOUDS,.fa-regular.CLOUDS,.fa-solid.CLOUDS,.fa-thin.CLOUDS,.fa.CLOUDS,.fad.CLOUDS,.fal.CLOUDS,.far.CLOUDS,.fas.CLOUDS,.iziToast>.iziToast-body .iziToast-icon.CLOUDS{color:#ecf0f1}.fa-duotone.CONCRETE,.fa-light.CONCRETE,.fa-regular.CONCRETE,.fa-solid.CONCRETE,.fa-thin.CONCRETE,.fa.CONCRETE,.fad.CONCRETE,.fal.CONCRETE,.far.CONCRETE,.fas.CONCRETE,.iziToast>.iziToast-body .iziToast-icon.CONCRETE{color:#95a5a6}.fa-duotone.ORANGE,.fa-light.ORANGE,.fa-regular.ORANGE,.fa-solid.ORANGE,.fa-thin.ORANGE,.fa.ORANGE,.fad.ORANGE,.fal.ORANGE,.far.ORANGE,.fas.ORANGE,.iziToast>.iziToast-body .iziToast-icon.ORANGE{color:#f39c12}.fa-duotone.PUMPKIN,.fa-light.PUMPKIN,.fa-regular.PUMPKIN,.fa-solid.PUMPKIN,.fa-thin.PUMPKIN,.fa.PUMPKIN,.fad.PUMPKIN,.fal.PUMPKIN,.far.PUMPKIN,.fas.PUMPKIN,.iziToast>.iziToast-body .iziToast-icon.PUMPKIN{color:#d35400}.fa-duotone.POMEGRANATE,.fa-light.POMEGRANATE,.fa-regular.POMEGRANATE,.fa-solid.POMEGRANATE,.fa-thin.POMEGRANATE,.fa.POMEGRANATE,.fad.POMEGRANATE,.fal.POMEGRANATE,.far.POMEGRANATE,.fas.POMEGRANATE,.iziToast>.iziToast-body .iziToast-icon.POMEGRANATE{color:#c0392b}.fa-duotone.SILVER,.fa-light.SILVER,.fa-regular.SILVER,.fa-solid.SILVER,.fa-thin.SILVER,.fa.SILVER,.fad.SILVER,.fal.SILVER,.far.SILVER,.fas.SILVER,.iziToast>.iziToast-body .iziToast-icon.SILVER{color:#bdc3c7}.fa-duotone.ASBESTOS,.fa-light.ASBESTOS,.fa-regular.ASBESTOS,.fa-solid.ASBESTOS,.fa-thin.ASBESTOS,.fa.ASBESTOS,.fad.ASBESTOS,.fal.ASBESTOS,.far.ASBESTOS,.fas.ASBESTOS,.iziToast>.iziToast-body .iziToast-icon.ASBESTOS{color:#7f8c8d}.highlight{position:relative}.btn-copy{z-index:1;display:-webkit-box;display:-moz-box;display:inline-block;cursor:pointer;border:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-appearance:none;font-family:Menlo,Menlo,UbuntuMono,Monaco,monospace,courier,sans-serif;font-size:11px;font-weight:700;padding:4px 8px;color:var(--color-meta);background:var(--color-block);border-radius:3px;-webkit-border-radius:3px;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.1);position:absolute;top:1px;right:1px;opacity:0;-webkit-opacity:0;-moz-opacity:0;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.btn-copy>i{margin-right:4px}.btn-copy:hover{color:#ff5722;background:#ffeee8}.highlight:hover .btn-copy{opacity:1;-webkit-opacity:1;-moz-opacity:1}.article pre:hover .btn-copy{opacity:1;-webkit-opacity:1;-moz-opacity:1}.highlight:before,.hljs:before{position:absolute;top:0;right:0;color:var(--color-meta);font-size:13px;padding:4px 8px}.highlight.markdown:before,.highlight.md:before,.hljs.markdown:before,.hljs.md:before{content:"md"}.highlight.yaml:before,.hljs.yaml:before{content:"YAML"}.highlight.json:before,.hljs.json:before{content:"JSON"}.highlight.html:before,.hljs.html:before{content:"HTML"}.highlight.javascript:before,.highlight.js:before,.hljs.javascript:before,.hljs.js:before{content:"JS"}.highlight.css:before,.hljs.css:before{content:"CSS"}.highlight.less:before,.hljs.less:before{content:"Less"}.highlight.stylus:before,.hljs.stylus:before{content:"Stylus"}.highlight.bash:before,.hljs.bash:before{content:"bash"}.highlight.shell:before,.hljs.shell:before{content:"shell"}.highlight.sh:before,.hljs.sh:before{content:"sh"}.highlight.ini:before,.hljs.ini:before{content:"ini"}.highlight.c:before,.hljs.c:before{content:"C"}.highlight.cpp:before,.hljs.cpp:before{content:"C++"}.highlight.objc:before,.highlight.objectivec:before,.hljs.objc:before,.hljs.objectivec:before{content:"Objective-C"}.highlight.swift:before,.hljs.swift:before{content:"Swift"}.highlight.java:before,.hljs.java:before{content:"Java"}.highlight.python:before,.hljs.python:before{content:"Python"}.highlight.php:before,.hljs.php:before{content:"PHP"}.highlight.rust:before,.hljs.rust:before{content:"Rust"}.highlight.sql:before,.hljs.sql:before{content:"SQL"}.highlight.ruby:before,.hljs.ruby:before{content:"Ruby"}.highlight.makefile:before,.hljs.makefile:before{content:"Makefile"}.highlight.go:before,.hljs.go:before{content:"Go"}.highlight.typescript:before,.hljs.typescript:before{content:"TypeScript"}.highlight pre .line,.highlight pre .params{color:rgba(68,68,68,.9)}.highlight pre .line .addition{color:#3fa33f}.highlight pre .line .deletion{color:#ee2b29}.highlight pre .marked{background-color:rgba(254,213,66,.4);padding:2px 8px 2px 0;border-radius:2px;-webkit-border-radius:2px;width:100%}.highlight pre .attr,.highlight pre .attribute,.highlight pre .title{color:#3f51b5}.highlight pre .comment{color:var(--color-meta)}.highlight pre .javascript .function,.highlight pre .keyword,.highlight pre .meta-keyword{color:#9c27b0}.highlight pre .built_in,.highlight pre .tag .name,.highlight pre .type{color:#4ba7ee}.highlight pre .css .class,.highlight pre .css .id,.highlight pre .css .pseudo,.highlight pre .html .doctype,.highlight pre .regexp,.highlight pre .ruby .constant,.highlight pre .variable,.highlight pre .xml .doctype,.highlight pre .xml .pi,.highlight pre .xml .tag .title{color:#fd8607}.highlight pre .constant,.highlight pre .literal,.highlight pre .number,.highlight pre .preprocessor{color:#fd8607}.highlight pre .class,.highlight pre .css .rules .attribute,.highlight pre .ruby .class .title{color:#ff9800}.highlight pre .meta-string,.highlight pre .string{color:#449e48}.highlight pre .header,.highlight pre .inheritance,.highlight pre .ruby .symbol,.highlight pre .value,.highlight pre .xml .cdata{color:#4caf50}.highlight pre .css .hexcolor{color:#6cc}.highlight pre .coffeescript .title,.highlight pre .function,.highlight pre .javascript .title,.highlight pre .perl .sub,.highlight pre .python .decorator,.highlight pre .python .title,.highlight pre .ruby .function .title,.highlight pre .ruby .title .keyword{color:#69c}.highlight.css .line .selector-tag,.highlight.css .line .tag .name,.highlight.html .line .selector-tag,.highlight.html .line .tag .name,.highlight.less .line .selector-tag,.highlight.less .line .tag .name,.highlight.stylus .line .selector-tag,.highlight.stylus .line .tag .name{color:#ee2b29}.highlight.css .line .selector-attr,.highlight.css .line .selector-class,.highlight.html .line .selector-attr,.highlight.html .line .selector-class,.highlight.less .line .selector-attr,.highlight.less .line .selector-class,.highlight.stylus .line .selector-attr,.highlight.stylus .line .selector-class{color:#fd8607}.highlight.css .line .attribute,.highlight.html .line .attribute,.highlight.less .line .attribute,.highlight.stylus .line .attribute{color:#3f51b5}.highlight.css .line .number,.highlight.html .line .number,.highlight.less .line .number,.highlight.stylus .line .number{color:#17afca}.highlight.c .line .meta,.highlight.objc .line .meta,.highlight.objectivec .line .meta,.highlight.swift .line .meta{color:#9c27b0}.highlight.c .line .meta-string,.highlight.c .line .string,.highlight.objc .line .meta-string,.highlight.objc .line .string,.highlight.objectivec .line .meta-string,.highlight.objectivec .line .string,.highlight.swift .line .meta-string,.highlight.swift .line .string{color:#fb3f1b}.highlight.c .line .class,.highlight.objc .line .class,.highlight.objectivec .line .class,.highlight.swift .line .class{color:rgba(68,68,68,.9)}.highlight.c .line .class .title,.highlight.objc .line .class .title,.highlight.objectivec .line .class .title,.highlight.swift .line .class .title{color:#1e80f0}.highlight.c .line .comment,.highlight.objc .line .comment,.highlight.objectivec .line .comment,.highlight.swift .line .comment{color:#3fa33f}.highlight.json .line .attr{color:#e24f5a}.highlight.json .line .literal{color:#3f51b5}.highlight.yaml .line .attr{color:#e24f5a}pre{position:relative}.hljs{margin:-16px!important;padding:16px!important;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.hljs::-webkit-scrollbar{height:4px;width:4px}.hljs::-webkit-scrollbar-track-piece{background:0 0}.hljs::-webkit-scrollbar-thumb{background:#3dd9b6;cursor:pointer;border-radius:2px;-webkit-border-radius:2px}.hljs::-webkit-scrollbar-thumb:hover{background:#ff5722}.highlight{position:relative;width:100%;margin:1em 0;display:-webkit-box;display:-moz-box;display:block;background:var(--color-block);font-size:.8125rem;font-family:Menlo,UbuntuMono,Monaco,monospace,courier,sans-serif;border-radius:4px;-webkit-border-radius:4px;line-height:1.5;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}.highlight:hover{background:var(--color-codeblock)}.highlight:hover figcaption{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;background:#ffeed2}.highlight:hover .gutter{background:#ffedd0}.highlight figcaption{font-size:13px;position:sticky;left:0;padding:4px 8px 4px 8px;background:#eaeaea;border-top-left-radius:calc(4px - 1px);border-top-right-radius:calc(4px - 1px)}.highlight>table{overflow:auto;display:-webkit-box;display:-moz-box;display:block;margin:0;background-color:transparent;border:none}.highlight>table::-webkit-scrollbar{height:4px;width:4px}.highlight>table::-webkit-scrollbar-track-piece{background:0 0}.highlight>table::-webkit-scrollbar-thumb{background:0 0;cursor:pointer;border-radius:4px;-webkit-border-radius:4px}.highlight>table:hover::-webkit-scrollbar-thumb{background:rgba(68,68,68,.5)}.highlight>table:hover::-webkit-scrollbar-thumb:hover{background:#ff5722}.highlight>table td,.highlight>table th{padding:0;border:none;line-height:1.5}.highlight>table tr{background-color:transparent}.highlight>table tr:hover{background-color:transparent}.highlight>table pre{overflow-y:hidden}.highlight>table .gutter{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0 12px;text-align:right;border-width:0;margin-left:0;position:sticky;left:0;z-index:1;background:#e9e9e9}.highlight>table .gutter pre{color:var(--color-meta)}.highlight>table pre{background:0 0;margin:0;padding:0;border:none}.highlight>table pre .code:before{display:-webkit-box;display:-moz-box;display:none}.highlight>table .code{padding:20px 16px;vertical-align:top;background-color:transparent}.highlight>table .code:before{content:"";position:absolute;top:0;right:0;color:var(--color-meta);font-size:13px;padding:4px 8px}.iziToast-texts{max-width:300px!important;min-width:200px!important}@media screen and (max-width:500px){.iziToast-texts{max-width:unset!important;min-width:unset!important}}.iziToast-title{margin-bottom:6px!important;font-size:1rem!important}.iziToast-message{word-break:break-all!important}@media screen and (max-width:500px){.l_header .list-v .aplayer,.l_header .list-v .aplayer-pic{border-radius:4px;-webkit-border-radius:4px;width:64px;height:64px}}.aplayer-container{display:flex;display:flex;justify-content:center;-webkit-justify-content:center;-khtml-justify-content:center;-moz-justify-content:center;-o-justify-content:center;-ms-justify-content:center;min-height:100px}.aplayer-container meting-js{max-width:100%}.aplayer{max-width:500px;border-radius:4px;-webkit-border-radius:4px;color:var(--color-text);font-family:Dosis,"PingFang SC","Microsoft YaHei",Helvetica,Arial,Menlo,Monaco,monospace,sans-serif}.aplayer .aplayer-list{text-align:left}@media screen and (max-width:500px){.aplayer{border-radius:8px;-webkit-border-radius:8px}}.l_header .aplayer-volume-wrap{display:-webkit-box;display:-moz-box;display:none!important}.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{left:-66px!important}.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover{left:0!important}input,p,pre>span,textarea{cursor:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/cursor/text.png),text}.fancybox-container .fancybox-stage,.fancybox__carousel .is-draggable{cursor:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/cursor/zoom-out.png),zoom-out}.fancybox a,.fancybox-can-zoomIn .fancybox-content,.fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content{cursor:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/cursor/zoom-in.png),zoom-in}.fancybox-button[disabled],.fancybox-button[disabled]:hover,.gt-container .gt-btn.is--disable,span.btn>a:not([href]):hover,span.not-select{cursor:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/cursor/circle.png),not-allowed}#l_body .post section.meta .new-meta-box .new-meta-item .notlink,.a>p,.aplayer .aplayer-info .aplayer-music,.article .widget,.embed-show,.fix-cursor-default,.gt-container a.is--active,.iframe,.iziToast,.iziToast p,.not-select,.not-select p,a:not([href]),a:not([href]) p,button[disabled],div.tabs ul.nav-tabs li.tab.active a,html,html input[disabled],kbd,p>img,p>svg,span.btn a:not([href]),ul.list-v.rightmenu a{cursor:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/cursor/left_ptr.png),default}#scroll-down,#u-search .modal .modal-footer .nav,#u-search .modal .modal-header .btn-close,.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap,.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon,.aplayer .aplayer-list ol li,.aplayer .aplayer-list ol li .aplayer-list-author,.aplayer .aplayer-list ol li .aplayer-list-index,.aplayer .aplayer-pic,.article a.link-card,.author>p,.btn-copy,.category>a>p,.fancybox,.fancybox-button,.fancybox-can-pan .fancybox-content,.fancybox-can-swipe .fancybox-content,.fix-cursor-pointer,.friend-right p,.gt-container .gt-avatar-github,.gt-container .gt-btn,.gt-container .gt-comment-edit:hover,.gt-container .gt-comment-like:hover,.gt-container .gt-comment-reply:hover,.gt-container .gt-popup .gt-action,.gt-container .gt-user-inner,.list-h>a>p,.next>p,.prev>p,.tag>p,.tk-action-icon,.tk-avatar img,.tk-icon,.tk-meta a,.v[data-class=v] .vbtn,.v[data-class=v] .vcards .vcard .vcontent.expand,.v[data-class=v] .vcards .vcard .vh .vmeta .vat,.v[data-class=v] .vcards .vcard .vhead .vnick,.v[data-class=v] .vicon,.v[data-class=v] .vwrap .vemojis i,.v[data-class=v] a,.waves-button,.waves-button-input,.waves-button:hover,.waves-button:visited,.waves-effect,a,a.result.search-result-fix,article .checkbox input,button,details summary,div.tabs ul.nav-tabs li.tab a,html input[type=button],input[type=reset],input[type=submit],psw,scrollbar::-webkit-scrollbar-thumb,table::-webkit-scrollbar-thumb,ul.list-v.rightmenu li.music a.nav.volume .aplayer-volume-bar{cursor:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/cursor/pointer.png),pointer}.cur-default{cursor:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/cursor/left_ptr.png),default!important}.carousel__button,.cur-pointer,.fancybox__slide{cursor:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/cursor/pointer.png),pointer!important}.cur-not-allowed{cursor:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/cursor/circle.png),not-allowed!important}.cur-zoom-in,.fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content,.has-image[data-image-fit=contain].can-zoom_in .fancybox__image{cursor:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/cursor/zoom-in.png),zoom-in!important}.cur-zoom-out,.fancybox__carousel .is-draggable,.has-image[data-image-fit=contain].is-draggable .fancybox__image{cursor:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/cursor/zoom-out.png),zoom-out!important}.cur-text{cursor:url(https://unpkg.com/volantis-static@0.0.1660614606622/media/cursor/text.png),text!important}.common_read{z-index:auto!important;opacity:1!important;-webkit-opacity:1!important;-moz-opacity:1!important;overflow:visible!important;transform:none!important;-webkit-transform:none!important;-khtml-transform:none!important;-moz-transform:none!important;-o-transform:none!important;-ms-transform:none!important;animation:none!important;-webkit-animation:none!important;-khtml-animation:none!important;-moz-animation:none!important;-o-animation:none!important;-ms-animation:none!important;position:relative!important}.body-wrapper.common_read{display:-webkit-box;display:-moz-box;display:block}#safearea.common_read{padding-bottom:16px}@media screen and (max-width:900px){#safearea.common_read{padding:0;margin:0}}#l_body.common_read{z-index:2147483646!important}.read_cover{min-height:10px!important}@media screen and (max-width:900px){.read_cover{min-height:0!important}}.common_read_bkg{background-color:var(--color-read-bkg)!important;opacity:1!important;-webkit-opacity:1!important;-moz-opacity:1!important;display:-webkit-box;display:-moz-box;display:block!important;position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:2147483645!important;transition:opacity 1s cubic-bezier(.23,1,.32,1) 0s!important;-webkit-transition:opacity 1s cubic-bezier(.23,1,.32,1) 0s!important;-khtml-transition:opacity 1s cubic-bezier(.23,1,.32,1) 0s!important;-moz-transition:opacity 1s cubic-bezier(.23,1,.32,1) 0s!important;-o-transition:opacity 1s cubic-bezier(.23,1,.32,1) 0s!important;-ms-transition:opacity 1s cubic-bezier(.23,1,.32,1) 0s!important}.common_read_hide{opacity:0!important;-webkit-opacity:0!important;-moz-opacity:0!important;z-index:-2147483645!important}.common_read_main{width:840px!important;padding:0!important;margin:0 auto;float:initial!important}@media screen and (max-width:900px){.common_read_main{width:auto!important}}.post_read{background-color:var(--color-read-post)!important;z-index:2147483646!important;overflow:visible!important;font-size:1.15rem!important;border-radius:0!important;-webkit-border-radius:0!important;box-shadow:0 6px 12px 3px rgba(0,0,0,.2);-webkit-box-shadow:0 6px 12px 3px rgba(0,0,0,.2)}div#rightmenu-wrapper{display:-webkit-box;display:-moz-box;display:none;position:fixed;z-index:2147483648;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}ul.list-v.rightmenu{display:-webkit-box;display:-moz-box;display:block;max-width:240px;overflow:hidden}ul.list-v.rightmenu.left{right:0}ul.list-v.rightmenu.top{bottom:0}ul.list-v.rightmenu a{cursor:default}ul.list-v.rightmenu a.vlts-menu{text-overflow:ellipsis;overflow:hidden;line-height:32px;font-weight:400}ul.list-v.rightmenu>li>span{transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;display:-webkit-box;display:-moz-box;display:block;color:var(--color-list);font-size:.875rem;line-height:36px;padding:0 20px 0 16px;text-overflow:ellipsis;margin:0 4px;border-radius:4px;-webkit-border-radius:4px}@media screen and (max-width:1024px){ul.list-v.rightmenu>li>span{line-height:40px}}ul.list-v.rightmenu>li>span>i{margin-right:8px}ul.list-v.rightmenu>li>span.active,ul.list-v.rightmenu>li>span:active{color:var(--color-list-hl)}ul.list-v.rightmenu>li>span:hover{color:var(--color-list-hl);background:var(--color-site-bg)}ul.list-v.rightmenu li.music,ul.list-v.rightmenu li.navigation{display:flex;display:flex;justify-content:space-between;-webkit-justify-content:space-between;-khtml-justify-content:space-between;-moz-justify-content:space-between;-o-justify-content:space-between;-ms-justify-content:space-between}ul.list-v.rightmenu li.music a.icon-only,ul.list-v.rightmenu li.navigation a.icon-only{line-height:0;margin:0;padding:0;border-radius:32px;-webkit-border-radius:32px;overflow:hidden;width:32px;height:32px}ul.list-v.rightmenu li.music a.nav i,ul.list-v.rightmenu li.navigation a.nav i{margin:0;width:32px;line-height:32px}ul.list-v.rightmenu li.music a.nav:first-child,ul.list-v.rightmenu li.navigation a.nav:first-child{margin-left:10px}ul.list-v.rightmenu li.music a.nav:last-child,ul.list-v.rightmenu li.navigation a.nav:last-child{margin-right:10px}ul.list-v.rightmenu li.music.name{display:flex;display:flex;flex-direction:column;align-items:center}ul.list-v.rightmenu li.music.name p.nav.music-title{color:#696969;font-size:.875rem;max-width:128px;margin:0 20px;overflow:hidden}ul.list-v.rightmenu li.music.name p.nav.music-title:hover{background:0 0}ul.list-v.rightmenu li.music .nav.volume{width:100%;padding:0 8px}ul.list-v.rightmenu li.music .nav.volume:hover{background:0 0}ul.list-v.rightmenu li.music .nav.volume .aplayer-volume-bar{margin:4px 0 8px;position:relative;height:8px;width:100%;background:#ededed;border-radius:32px;-webkit-border-radius:32px;overflow:hidden;cursor:pointer;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease}ul.list-v.rightmenu li.music .nav.volume .aplayer-volume-bar i.left,ul.list-v.rightmenu li.music .nav.volume .aplayer-volume-bar i.right{color:#696969;position:absolute;top:0;width:28px;line-height:28px;transition:all .28s ease;-webkit-transition:all .28s ease;-khtml-transition:all .28s ease;-moz-transition:all .28s ease;-o-transition:all .28s ease;-ms-transition:all .28s ease;opacity:0;-webkit-opacity:0;-moz-opacity:0;transform:scale(.5) translateY(-18px);-webkit-transform:scale(.5) translateY(-18px);-khtml-transform:scale(.5) translateY(-18px);-moz-transform:scale(.5) translateY(-18px);-o-transform:scale(.5) translateY(-18px);-ms-transform:scale(.5) translateY(-18px)}ul.list-v.rightmenu li.music .nav.volume .aplayer-volume-bar i.left{left:0}ul.list-v.rightmenu li.music .nav.volume .aplayer-volume-bar i.right{right:0}ul.list-v.rightmenu li.music .nav.volume .aplayer-volume-bar:hover{height:28px}ul.list-v.rightmenu li.music .nav.volume .aplayer-volume-bar:hover i{opacity:1;-webkit-opacity:1;-moz-opacity:1;transform:scale(1) translateY(0);-webkit-transform:scale(1) translateY(0);-khtml-transform:scale(1) translateY(0);-moz-transform:scale(1) translateY(0);-o-transform:scale(1) translateY(0);-ms-transform:scale(1) translateY(0)}ul.list-v.rightmenu li.music .nav.volume .aplayer-volume-bar .aplayer-volume{background:#3dd9b6;height:100%;width:100%}@media (prefers-color-scheme:dark){:root{--color-mode:'dark'}:root:not([color-scheme]){--block-hover:#1c1c1c;--text-p1:#fff;--text-p3:#777;--card:#fff}:root:not([color-scheme]) .lazyload,:root:not([color-scheme]) fa,:root:not([color-scheme]) fa-duotone,:root:not([color-scheme]) fa-light,:root:not([color-scheme]) fa-regular,:root:not([color-scheme]) fa-solid,:root:not([color-scheme]) fa-thin,:root:not([color-scheme]) fad,:root:not([color-scheme]) fal,:root:not([color-scheme]) img,:root:not([color-scheme]) svg.iconfont{filter:brightness(70%)!important}:root:not([color-scheme]) .widget.blogger .content .social-wrapper a.social:hover{background:var(--color-card)}:root:not([color-scheme]) .widget>.content ul.entry a .badge,:root:not([color-scheme]) .widget>.content ul.popular-posts a .badge{color:unset!important}:root:not([color-scheme]) .content{color:var(--color-p)}:root:not([color-scheme]) .widget>.content a{color:var(--color-p)!important}:root:not([color-scheme]) .widget>.content a:hover{color:var(--color-list-hl)!important}:root:not([color-scheme]) .note{background:var(--color-block)!important}:root:not([color-scheme]) div.tabs ul.nav-tabs li.tab.active a{color:var(--color-p);background:var(--color-card)}:root:not([color-scheme]) kbd{background:var(--color-block)!important}:root:not([color-scheme]) .cover-wrapper.dock .menu .list-h a:hover,:root:not([color-scheme]) .cover-wrapper.featured .menu .list-h a:hover,:root:not([color-scheme]) .cover-wrapper.focus .menu .list-h a:hover{color:var(--color-text)!important}:root:not([color-scheme]) .gutter{background:var(--color-card)!important;background-color:var(--color-card)!important}:root:not([color-scheme]) .highlight figcaption{background-color:#14161a}:root:not([color-scheme]) .highlight pre .line,:root:not([color-scheme]) .highlight pre .params{color:rgba(158,142,142,.9)}:root:not([color-scheme]) :not(.highlight)>table tr{background-color:var(--color-card)}:root:not([color-scheme]) :not(.highlight)>table th{background:var(--color-site-bg)}:root:not([color-scheme]) :not(.highlight) table td,:root:not([color-scheme]) :not(.highlight) table th{border-color:var(--color-site-bg)}:root:not([color-scheme]) :not(.highlight)>table tr:hover{background:var(--color-codeblock)}:root:not([color-scheme]) .timenode .highlight{border-color:var(--color-site-bg)!important}:root:not([color-scheme]) blockquote p{color:var(--color-p)}:root:not([color-scheme]) #archive-page .archive .all-tags ul li span{color:var(--color-text);background:#6f6f72}:root:not([color-scheme]) .btn-copy:hover{background:var(--color-site-body)}:root:not([color-scheme]) .aplayer{background:var(--color-site-bg)}:root:not([color-scheme]) .aplayer .aplayer-list ol li:hover{background:rgba(61,217,182,.2)}:root:not([color-scheme]) .aplayer .aplayer-list ol li.aplayer-list-light{background:var(--color-block)}:root:not([color-scheme]) .aplayer-info{background:var(--color-site-bg)!important}:root:not([color-scheme]) .aplayer .aplayer-lrc:before{background:linear-gradient(180deg,#282c34 0,rgba(255,255,255,0))}:root:not([color-scheme]) .aplayer .aplayer-lrc:after{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(33,33,33,.8))}:root:not([color-scheme]) .aplayer-pic{filter:brightness(70%)}:root:not([color-scheme]) .aplayer .aplayer-list ol li{border-top:1px solid var(--color-card)}:root:not([color-scheme]) .aplayer.aplayer-withlist .aplayer-info{border-bottom:1px solid var(--color-block)}:root:not([color-scheme]) .aplayer .aplayer-notice{background-color:var(--color-site-bg)!important}}[color-scheme=dark]{--block-hover:#1c1c1c;--text-p1:#fff;--text-p3:#777;--card:#fff}[color-scheme=dark] .lazyload,[color-scheme=dark] fa,[color-scheme=dark] fa-duotone,[color-scheme=dark] fa-light,[color-scheme=dark] fa-regular,[color-scheme=dark] fa-solid,[color-scheme=dark] fa-thin,[color-scheme=dark] fad,[color-scheme=dark] fal,[color-scheme=dark] img,[color-scheme=dark] svg.iconfont{filter:brightness(70%)!important}[color-scheme=dark] .widget.blogger .content .social-wrapper a.social:hover{background:var(--color-card)}[color-scheme=dark] .widget>.content ul.entry a .badge,[color-scheme=dark] .widget>.content ul.popular-posts a .badge{color:unset!important}[color-scheme=dark] .content{color:var(--color-p)}[color-scheme=dark] .widget>.content a{color:var(--color-p)!important}[color-scheme=dark] .widget>.content a:hover{color:var(--color-list-hl)!important}[color-scheme=dark] .note{background:var(--color-block)!important}[color-scheme=dark] div.tabs ul.nav-tabs li.tab.active a{color:var(--color-p);background:var(--color-card)}[color-scheme=dark] kbd{background:var(--color-block)!important}[color-scheme=dark] .cover-wrapper.dock .menu .list-h a:hover,[color-scheme=dark] .cover-wrapper.featured .menu .list-h a:hover,[color-scheme=dark] .cover-wrapper.focus .menu .list-h a:hover{color:var(--color-text)!important}[color-scheme=dark] .gutter{background:var(--color-card)!important;background-color:var(--color-card)!important}[color-scheme=dark] .highlight figcaption{background-color:#14161a}[color-scheme=dark] .highlight pre .line,[color-scheme=dark] .highlight pre .params{color:rgba(158,142,142,.9)}[color-scheme=dark] :not(.highlight)>table tr{background-color:var(--color-card)}[color-scheme=dark] :not(.highlight)>table th{background:var(--color-site-bg)}[color-scheme=dark] :not(.highlight) table td,[color-scheme=dark] :not(.highlight) table th{border-color:var(--color-site-bg)}[color-scheme=dark] :not(.highlight)>table tr:hover{background:var(--color-codeblock)}[color-scheme=dark] .timenode .highlight{border-color:var(--color-site-bg)!important}[color-scheme=dark] blockquote p{color:var(--color-p)}[color-scheme=dark] #archive-page .archive .all-tags ul li span{color:var(--color-text);background:#6f6f72}[color-scheme=dark] .btn-copy:hover{background:var(--color-site-body)}[color-scheme=dark] .aplayer{background:var(--color-site-bg)}[color-scheme=dark] .aplayer .aplayer-list ol li:hover{background:rgba(61,217,182,.2)}[color-scheme=dark] .aplayer .aplayer-list ol li.aplayer-list-light{background:var(--color-block)}[color-scheme=dark] .aplayer-info{background:var(--color-site-bg)!important}[color-scheme=dark] .aplayer .aplayer-lrc:before{background:linear-gradient(180deg,#282c34 0,rgba(255,255,255,0))}[color-scheme=dark] .aplayer .aplayer-lrc:after{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(33,33,33,.8))}[color-scheme=dark] .aplayer-pic{filter:brightness(70%)}[color-scheme=dark] .aplayer .aplayer-list ol li{border-top:1px solid var(--color-card)}[color-scheme=dark] .aplayer.aplayer-withlist .aplayer-info{border-bottom:1px solid var(--color-block)}[color-scheme=dark] .aplayer .aplayer-notice{background-color:var(--color-site-bg)!important} +/*# sourceMappingURL=../maps/css/style.css.map */ diff --git a/examples/index.html b/examples/index.html index 1499df0ff4..5eb995a670 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,4 +1,4 @@ -示例博客 - Volantis示例博客 - Volantis

Volantis

中文创作者社区


社区维护团队的博客

使用 Volantis 的博客示例




如何添加自己的博客链接

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

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

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

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

第二步:刷新

回来刷新即可生效。

如何更新自己的博客链接

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

评论

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

Volantis

中文创作者社区

通常来说,一个全新的工程全部使用默认配置是正常没有故障的。如果无法使用或者效果与示例有较大区别,可以使用 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 官方文档:

也可以直接查看本站源码中站点配置文件的写法:_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 官方文档 | Valine 官方文档

请一定要阅读官方文档!

image

可供交流的渠道

解决问题

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

请不要发送邮件

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

交流

渠道方式用途
论坛@volantis-x/discussions慢,相对正式,方便检索,可以给其他用户参考
QQ群1146399464 (验证码:vlts-2021)非正式,即时通讯,易于斗图;不利于给其他用户参考

佛系互动

渠道方式用途
评论区留言可以测试、灌水、推广自己的博客。

评论

\ No newline at end of file diff --git a/how-to-update/images/91114771-45a5fb80-e6bb-11ea-8a0f-f1bc6c3b6817.png b/how-to-update/images/91114771-45a5fb80-e6bb-11ea-8a0f-f1bc6c3b6817.png new file mode 100644 index 0000000000..c1c6b14987 Binary files /dev/null and b/how-to-update/images/91114771-45a5fb80-e6bb-11ea-8a0f-f1bc6c3b6817.png differ diff --git a/how-to-update/images/91115836-ad5d4600-e6bd-11ea-9084-40fe01dafed1.png b/how-to-update/images/91115836-ad5d4600-e6bd-11ea-9084-40fe01dafed1.png new file mode 100644 index 0000000000..6103394701 Binary files /dev/null and b/how-to-update/images/91115836-ad5d4600-e6bd-11ea-9084-40fe01dafed1.png differ diff --git a/how-to-update/images/91116761-b0f1cc80-e6bf-11ea-9eb7-89de7dbedb79.png b/how-to-update/images/91116761-b0f1cc80-e6bf-11ea-9eb7-89de7dbedb79.png new file mode 100644 index 0000000000..dcdc74893c Binary files /dev/null and b/how-to-update/images/91116761-b0f1cc80-e6bf-11ea-9eb7-89de7dbedb79.png differ diff --git a/how-to-update/images/91117158-83595300-e6c0-11ea-85b0-3ac12afcf57b.png b/how-to-update/images/91117158-83595300-e6c0-11ea-85b0-3ac12afcf57b.png new file mode 100644 index 0000000000..ba2774130b Binary files /dev/null and b/how-to-update/images/91117158-83595300-e6c0-11ea-85b0-3ac12afcf57b.png differ diff --git a/how-to-update/images/91128121-2bc7e100-e6da-11ea-99c9-16f8521b7d4c.png b/how-to-update/images/91128121-2bc7e100-e6da-11ea-99c9-16f8521b7d4c.png new file mode 100644 index 0000000000..30e102393d Binary files /dev/null and b/how-to-update/images/91128121-2bc7e100-e6da-11ea-99c9-16f8521b7d4c.png differ diff --git a/how-to-update/images/91128803-68e0a300-e6db-11ea-9fdb-4ea91a6c6a3c.png b/how-to-update/images/91128803-68e0a300-e6db-11ea-9fdb-4ea91a6c6a3c.png new file mode 100644 index 0000000000..f42133da20 Binary files /dev/null and b/how-to-update/images/91128803-68e0a300-e6db-11ea-9fdb-4ea91a6c6a3c.png differ diff --git a/how-to-update/images/91129077-f4f2ca80-e6db-11ea-9ea8-47b09d4be32c.png b/how-to-update/images/91129077-f4f2ca80-e6db-11ea-9ea8-47b09d4be32c.png new file mode 100644 index 0000000000..6153a70081 Binary files /dev/null and b/how-to-update/images/91129077-f4f2ca80-e6db-11ea-9ea8-47b09d4be32c.png differ diff --git a/how-to-update/images/91132519-caa30c00-e6df-11ea-94fa-f31d8279f5a6.png b/how-to-update/images/91132519-caa30c00-e6df-11ea-94fa-f31d8279f5a6.png new file mode 100644 index 0000000000..3f625f0a25 Binary files /dev/null and b/how-to-update/images/91132519-caa30c00-e6df-11ea-94fa-f31d8279f5a6.png differ diff --git a/how-to-update/images/91163040-8293e180-e6ff-11ea-971f-27b1959d436d.png b/how-to-update/images/91163040-8293e180-e6ff-11ea-971f-27b1959d436d.png new file mode 100644 index 0000000000..eae37e70b5 Binary files /dev/null and b/how-to-update/images/91163040-8293e180-e6ff-11ea-971f-27b1959d436d.png differ diff --git a/how-to-update/index.html b/how-to-update/index.html new file mode 100644 index 0000000000..168f510e56 --- /dev/null +++ b/how-to-update/index.html @@ -0,0 +1 @@ +如何正确地更新主题 - Volantis

Volantis

中文创作者社区

稳定版本

如果您以内容创作为主,推荐使用稳定版本:

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

评论

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

Volantis

中文创作者社区


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


开始使用
官方资讯

使用 pandoc 正确渲染多行 MathJax 公式

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

为volantis添加瀑布流相册

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

为volantis添加hls.js以在Chrome上播放m3u8视频

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

volantis主题修改代码高亮样式

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

为volantis主题添加图片轮播和热门文章

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

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

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

为 hexo 博客支持 sweetalert 弹窗 || 'image'

为 hexo 博客支持 sweetalert 弹窗

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

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

哔哔!换个姿势在静态博客上发短博文(volantis适配版) || 'image'

哔哔!换个姿势在静态博客上发短博文(volantis适配版)

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

Hexo 标签函数 list_tags 用法详解 || 'image'

Hexo 标签函数 list_tags 用法详解

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


\ No newline at end of file +Volantis

Volantis

中文创作者社区


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


开始使用

  • 如果你的网站部署在vercel,则把cname记录改为:
    • vercel-cname.xingpingcn.top
  • 如果你的网站部署在netlify,则把cname记录改为:
    • netlify-cname.xingpingcn.top
  • 如果你的网站部署在netlifyvercel上,则把cname记录改为:
    • verlify-cname.xingpingcn.top
      • 使用此dns解析建议:先把cname记录改为官方提供的url,等ssl/tls证书生成之后再把cname记录改为verlify-cname.xingpingcn.top
免费通过NS1利用监控宝平台实现实时基于不同运营商的故障转移

本教程用到的资源全部都是免费且可持续使用的。NS1.com这个权威DNS服务器能根据ASN、国家或省份、DNS轮询(可加权)等方式解析域名,并且提供了API去控制某个解析(answer)是否响应。监控宝能实时监控网站(通过HTTP、PING、DNS方式等)并输出警告(webhook、Email、短信等),最高监控频率为2分钟。亚马逊的AWS Lambda是一个FaaS平台(serverless),可以作为连接NS1.com和监控宝之间的桥梁,当监控宝检测到网站速度变慢的时候发送信息到AWS Lambda,AWS Lambda得到信息后再传递给NS1.com,速度恢复的时候也是同样的操作。为什么要夹在一个AWS Lambda呢?这是因为监控宝发送的格式是固定的,并不能直接接入到NS1.com。

由于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主题)。

Hexo Volantis Snippets的vscode扩展

本篇文章适用于vscode+hexo+volantis的博客,快速向文章内插入标签,提升写文章的速度

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

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

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

部分内容非Volantis主题也适用

添加Gitee动态友链

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

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


\ No newline at end of file diff --git a/js/aplayer.js b/js/aplayer.js deleted file mode 100644 index f355fa96c3..0000000000 --- a/js/aplayer.js +++ /dev/null @@ -1 +0,0 @@ -$((function(){MainAPlayer.init(),MainAPlayer.checkAPlayer()}));const MainAPlayer=(()=>{const e={},a={init:()=>{e.id=volantis.APlayerController.id,e.volume=volantis.APlayerController.volume},checkAPlayer:()=>{void 0===e.player?a.setAPlayerObject():void 0===e.observer&&a.setAPlayerObserver()},setAPlayerObject:()=>{let l=document.querySelectorAll(".footer meting-js")||[];0==l.length&&(l=document.querySelectorAll("meting-js")||[]),l.forEach(((r,t)=>{r.meta.id==e.id&&null!=l[t].aplayer&&(e.player=l[t].aplayer,a.setAPlayerObserver(),a.updateTitle())}))},setAPlayerObserver:()=>{try{e.player.on("play",(function(e){a.updateAPlayerControllerStatus(e)})),e.player.on("pause",(function(e){a.updateAPlayerControllerStatus(e)})),e.player.on("volumechange",(function(e){a.onUpdateAPlayerVolume(e)})),e.player.on("loadstart",(function(e){a.updateTitle(e)})),e.volumeBarWrap=document.getElementsByClassName("nav volume")[0].children[0],e.volumeBar=e.volumeBarWrap.children[0];const l=e=>{a.updateAPlayerVolume(e)},r=t=>{e.volumeBarWrap.classList.remove("aplayer-volume-bar-wrap-active"),document.removeEventListener("mouseup",r),document.removeEventListener("mousemove",l),a.updateAPlayerVolume(t)};e.volumeBarWrap.addEventListener("mousedown",(a=>{a.stopPropagation(),e.volumeBarWrap.classList.add("aplayer-volume-bar-wrap-active"),document.addEventListener("mousemove",l),document.addEventListener("mouseup",r)})),e.volumeBarWrap.addEventListener("click",(e=>{e.stopPropagation()})),a.updateAPlayerControllerStatus(),a.onUpdateAPlayerVolume(),e.observer=!0}catch(a){console.log(a),e.observer=void 0}},updateAPlayerVolume:a=>{let l=((a.clientX||a.changedTouches[0].clientX)-e.volumeBar.getBoundingClientRect().left)/e.volumeBar.clientWidth;l=Math.max(l,0),l=Math.min(l,1),e.player.volume(l)},onUpdateAPlayerVolume:()=>{try{e.volumeBar.children[0].style.width=100*e.player.audio.volume+"%"}catch(e){console.log(e)}},updateAPlayerControllerStatus:()=>{try{e.player.audio.paused?(document.getElementsByClassName("nav toggle")[0].children[0].classList.add("fa-play"),document.getElementsByClassName("nav toggle")[0].children[0].classList.remove("fa-pause")):(document.getElementsByClassName("nav toggle")[0].children[0].classList.remove("fa-play"),document.getElementsByClassName("nav toggle")[0].children[0].classList.add("fa-pause"))}catch(e){console.log(e)}},aplayerToggle:()=>{a.checkAPlayer();try{e.player.toggle()}catch(e){console.log(e)}},aplayerBackward:()=>{a.checkAPlayer();try{e.player.skipBack(),e.player.play()}catch(e){console.log(e)}},aplayerForward:()=>{a.checkAPlayer();try{e.player.skipForward(),e.player.play()}catch(e){console.log(e)}},aplayerVolume:l=>{a.checkAPlayer();try{e.player.volume(l)}catch(e){console.log(e)}},updateTitle:()=>{a.checkAPlayer();try{const a=e.player.list.index,l=e.player.list.audios[a];document.getElementsByClassName("nav music-title")[0].innerHTML=l.title}catch(e){console.log(e)}}};return{init:()=>{a.init()},checkAPlayer:()=>{a.checkAPlayer()},aplayerBackward:()=>{a.aplayerBackward()},aplayerToggle:()=>{a.aplayerToggle()},aplayerForward:()=>{a.aplayerForward()}}})();Object.freeze(MainAPlayer); \ No newline at end of file diff --git a/js/app.js b/js/app.js index a822d72d7e..9927c8fbfd 100644 --- a/js/app.js +++ b/js/app.js @@ -1 +1,2 @@ -if(document.addEventListener("DOMContentLoaded",(function(){VolantisApp.init(),VolantisApp.subscribe(),volantisFancyBox.loadFancyBox(),volantis.pjax.push((()=>{VolantisApp.pjaxReload(),sessionStorage.setItem("domTitle",document.title)}),"app.js"),volantis.pjax.send((()=>{volantis.dom.switcher.removeClass("active"),volantis.dom.header.removeClass("z_search-open"),volantis.dom.wrapper.removeClass("sub"),volantis.EventListener.remove()}),"app.js"),volantis.pjax.push(volantisFancyBox.pjaxReload),volantis.pjax.send((()=>{void 0!==$.fancybox&&$.fancybox.close()}),"fancybox")})),window.location.hash){let o=decodeURI(window.location.hash.split("#")[1]).replace(/\ /g,"-"),e=document.getElementById(o);e&&window.scrollTo({top:e.offsetTop+volantis.dom.bodyAnchor.offsetTop+5,behavior:"smooth"})}const Debounce=(o,e)=>{const t=e||50;let a;return function(){const e=arguments;a&&clearTimeout(a),a=setTimeout((()=>{a=null,o.apply(this,e)}),t)}},VolantisApp=(()=>{const o={};let e=80;function t(){var o;return window.pageYOffset?o=window.pageYOffset:document.compatMode&&"BackCompat"!=document.compatMode?o=document.documentElement.scrollTop:document.body&&(o=document.body.scrollTop),o}return o.init=()=>{volantis.dom.header&&(e=volantis.dom.header.clientHeight+16),window.onresize=()=>{document.documentElement.clientWidth<500?volantis.isMobile=1:volantis.isMobile=0,volantis.isMobile!=volantis.isMobileOld&&(o.setGlobalHeaderMenuEvent(),o.setHeader(),o.setHeaderSearch())}},o.event=()=>{volantis.dom.$(document.getElementById("scroll-down")).on("click",(function(){o.scrolltoElement(volantis.dom.bodyAnchor)}))},o.restData=()=>{e=volantis.dom.header?volantis.dom.header.clientHeight+16:80},o.setIsMobile=()=>{document.documentElement.clientWidth<500?(volantis.isMobile=1,volantis.isMobileOld=1):(volantis.isMobile=0,volantis.isMobileOld=0)},o.scrolltoElement=(o,t=e)=>{window.scrollTo({top:o.offsetTop-t,behavior:"smooth"})},o.setScrollAnchor=()=>{volantis.dom.topBtn&&volantis.dom.bodyAnchor&&volantis.dom.topBtn.click((e=>{e.preventDefault(),e.stopPropagation(),o.scrolltoElement(volantis.dom.bodyAnchor),e.stopImmediatePropagation()}));let a=document.body.scrollTop;volantis.dom.$(document).scroll(Debounce((()=>{const o=volantis.dom.bodyAnchor.offsetTop-e,n=t(),l=n-a;a=n,n>volantis.dom.bodyAnchor.offsetTop?(volantis.dom.topBtn.addClass("show"),l>0?volantis.dom.topBtn.removeClass("hl"):volantis.dom.topBtn.addClass("hl")):volantis.dom.topBtn.removeClass("show").removeClass("hl"),n-o>-1?volantis.dom.header.addClass("show"):volantis.dom.header.removeClass("show")})))},o.setHeader=()=>{if(!pdata.ispage)return;volantis.dom.wrapper.find(".nav-sub .title").html(pdata.postTitle);let e=document.body.scrollTop;volantis.dom.$(document).scroll(Debounce((()=>{const o=t(),a=o-e;a>=50&&o>100?(e=o,volantis.dom.wrapper.addClass("sub")):a<=-50&&(e=o,volantis.dom.wrapper.removeClass("sub"))}))),volantis.dom.comment=volantis.dom.$(document.getElementById("s-comment")),volantis.dom.commentTarget=volantis.dom.$(document.querySelector("#l_main article#comments")),volantis.dom.commentTarget?volantis.dom.comment.click((e=>{e.preventDefault(),e.stopPropagation(),o.scrolltoElement(volantis.dom.commentTarget),e.stopImmediatePropagation()})):volantis.dom.comment.remove(),volantis.isMobile&&(volantis.dom.toc=volantis.dom.$(document.getElementById("s-toc")),volantis.dom.tocTarget=volantis.dom.$(document.querySelector("#l_side .toc-wrapper")),volantis.dom.tocTarget?(volantis.dom.toc.click((o=>{o.stopPropagation(),volantis.dom.tocTarget.toggleClass("active"),volantis.dom.toc.toggleClass("active")})),volantis.dom.$(document).click((function(o){o.stopPropagation(),volantis.dom.tocTarget.removeClass("active"),volantis.dom.toc.removeClass("active")})),volantis.dom.$(document).scroll(Debounce((()=>{volantis.dom.tocTarget.removeClass("active"),volantis.dom.toc.removeClass("active")}),100))):volantis.dom.toc.remove())},o.setHeaderMenuSelection=()=>{volantis.dom.headerMenu=volantis.dom.$(document.querySelectorAll("#l_header .navigation,#l_cover .navigation,#l_side .navigation")),volantis.dom.headerMenu.forEach((o=>{let e=volantis.dom.$(o).find("li a.active");e&&e.removeClass("active");let t=volantis.dom.$(o).find("div a.active");t&&t.removeClass("active")}));var o=location.pathname.replace(/\/|%|\./g,"");0==o.length&&(o="home");var e=o.match(/page\d{0,}$/g);e&&(e=e[0],o=o.split(e)[0]);var t=o.match(/index.html/);t&&(t=t[0],o=o.split(t)[0]),(o=o.replace(/(\[|\]|~|#|@)/g,"\\$1"))&&volantis.dom.headerMenu&&volantis.dom.headerMenu.forEach((e=>{let t=e.querySelector("#"+o);t&&volantis.dom.$(t).addClass("active")}))},o.setGlobalHeaderMenuEvent=()=>{volantis.isMobile?document.querySelectorAll("#l_header .m-phone li").forEach((function(o){o.querySelector(".list-v")&&volantis.dom.$(o).click((function(o){o.stopPropagation();let e=o.currentTarget.children;for(let o=0;o a[href]").forEach((function(o){volantis.dom.$(o.parentElement).click((function(o){o.stopPropagation(),o.target.origin==o.target.baseURI&&volantis.dom.$("#wrapper .m-pc .list-v").hide()}),0)})),o.setPageHeaderMenuEvent()},o.setPageHeaderMenuEvent=()=>{volantis.isMobile&&(volantis.dom.$(document).click((function(o){volantis.dom.mPhoneList.forEach((function(o){volantis.dom.$(o).hide()}))})),volantis.dom.$(document).scroll(Debounce((()=>{volantis.dom.mPhoneList.forEach((function(o){volantis.dom.$(o).hide()}))}))))},o.setHeaderSearch=()=>{volantis.isMobile&&volantis.dom.switcher&&(volantis.dom.switcher.click((function(o){o.stopPropagation(),volantis.dom.header.toggleClass("z_search-open"),volantis.dom.switcher.toggleClass("active")})),volantis.dom.$(document).click((function(o){volantis.dom.header.removeClass("z_search-open"),volantis.dom.switcher.removeClass("active")})),volantis.dom.search.click((function(o){o.stopPropagation()})))},o.setTabs=()=>{let o=document.querySelectorAll("#l_main .tabs .nav-tabs");o&&o.forEach((function(o){o.querySelectorAll("a").forEach((function(o){volantis.dom.$(o).on("click",(o=>{o.preventDefault(),o.stopPropagation();const e=volantis.dom.$(o.target.parentElement.parentElement.parentElement);return e.find(".nav-tabs .active").removeClass("active"),volantis.dom.$(o.target.parentElement).addClass("active"),e.find(".tab-content .active").removeClass("active"),e.find($(o.target).attr("class")).addClass("active"),!1}))}))}))},{init:()=>{o.init(),o.event()},subscribe:()=>{o.setIsMobile(),o.setHeader(),o.setHeaderMenuSelection(),o.setGlobalHeaderMenuEvent(),o.setHeaderSearch(),o.setScrollAnchor(),o.setTabs()},pjaxReload:()=>{o.event(),o.restData(),o.setHeader(),o.setHeaderMenuSelection(),o.setPageHeaderMenuEvent(),o.setScrollAnchor(),o.setTabs(),document.querySelector("#l_header .nav-main").querySelectorAll(".list-v:not(.menu-phone)").forEach((function(o){o.removeAttribute("style")})),document.querySelector("#l_header .menu-phone.list-v").removeAttribute("style"),volantis.dom.switcher&&volantis.dom.$(document).click((function(o){volantis.dom.header.removeClass("z_search-open"),volantis.dom.switcher.removeClass("active")}))}}})();Object.freeze(VolantisApp);const volantisFancyBox=(()=>{const o={initFB:()=>{const o=new Set;o.add("default"),document.querySelectorAll(".md .gallery").forEach((function(e){e.querySelector("img")&&o.add($(e).attr("data-group")||"default")}));for(const e of o)e&&$('[data-fancybox="'+e+'"]').fancybox({hash:!1,loop:!0,closeClick:!0,helpers:{overlay:{closeClick:!0}},buttons:["zoom","slideShow","fullScreen","download","thumbs","close"]})},loadFancyBox:()=>{document.querySelector(".md .gallery img")&&volantis.import.jQuery().then((()=>{volantis.css("https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"),volantis.js("https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js").then(o.initFB)}))}};return{loadFancyBox:o.loadFancyBox,pjaxReload:()=>{void 0===$.fancybox?o.loadFancyBox():o.initFB()}}})();Object.freeze(volantisFancyBox); \ No newline at end of file +"use strict";function _typeof(t){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},_typeof(t)}function _regeneratorRuntime(){_regeneratorRuntime=function(){return e};var t,e={},n=Object.prototype,o=n.hasOwnProperty,r=Object.defineProperty||function(t,e,n){t[e]=n.value},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",l=i.asyncIterator||"@@asyncIterator",s=i.toStringTag||"@@toStringTag";function c(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(t){c=function(t,e,n){return t[e]=n}}function u(t,e,n,o){var i=e&&e.prototype instanceof g?e:g,a=Object.create(i.prototype),l=new k(o||[]);return r(a,"_invoke",{value:T(t,n,l)}),a}function d(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}e.wrap=u;var f="suspendedStart",m="suspendedYield",h="executing",v="completed",p={};function g(){}function y(){}function b(){}var w={};c(w,a,(function(){return this}));var O=Object.getPrototypeOf,L=O&&O(O(S([])));L&&L!==n&&o.call(L,a)&&(w=L);var C=b.prototype=g.prototype=Object.create(w);function _(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function E(t,e){function n(r,i,a,l){var s=d(t[r],t,i);if("throw"!==s.type){var c=s.arg,u=c.value;return u&&"object"==_typeof(u)&&o.call(u,"__await")?e.resolve(u.__await).then((function(t){n("next",t,a,l)}),(function(t){n("throw",t,a,l)})):e.resolve(u).then((function(t){c.value=t,a(c)}),(function(t){return n("throw",t,a,l)}))}l(s.arg)}var i;r(this,"_invoke",{value:function(t,o){function r(){return new e((function(e,r){n(t,o,e,r)}))}return i=i?i.then(r,r):r()}})}function T(e,n,o){var r=f;return function(i,a){if(r===h)throw Error("Generator is already running");if(r===v){if("throw"===i)throw a;return{value:t,done:!0}}for(o.method=i,o.arg=a;;){var l=o.delegate;if(l){var s=I(l,o);if(s){if(s===p)continue;return s}}if("next"===o.method)o.sent=o._sent=o.arg;else if("throw"===o.method){if(r===f)throw r=v,o.arg;o.dispatchException(o.arg)}else"return"===o.method&&o.abrupt("return",o.arg);r=h;var c=d(e,n,o);if("normal"===c.type){if(r=o.done?v:m,c.arg===p)continue;return{value:c.arg,done:o.done}}"throw"===c.type&&(r=v,o.method="throw",o.arg=c.arg)}}}function I(e,n){var o=n.method,r=e.iterator[o];if(r===t)return n.delegate=null,"throw"===o&&e.iterator["return"]&&(n.method="return",n.arg=t,I(e,n),"throw"===n.method)||"return"!==o&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+o+"' method")),p;var i=d(r,e.iterator,n.arg);if("throw"===i.type)return n.method="throw",n.arg=i.arg,n.delegate=null,p;var a=i.arg;return a?a.done?(n[e.resultName]=a.value,n.next=e.nextLoc,"return"!==n.method&&(n.method="next",n.arg=t),n.delegate=null,p):a:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,p)}function x(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function A(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function k(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(x,this),this.reset(!0)}function S(e){if(e||""===e){var n=e[a];if(n)return n.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var r=-1,i=function n(){for(;++r=0;--i){var a=this.tryEntries[i],l=a.completion;if("root"===a.tryLoc)return r("end");if(a.tryLoc<=this.prev){var s=o.call(a,"catchLoc"),c=o.call(a,"finallyLoc");if(s&&c){if(this.prev=0;--n){var r=this.tryEntries[n];if(r.tryLoc<=this.prev&&o.call(r,"finallyLoc")&&this.prev=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),A(n),p}},"catch":function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var o=n.completion;if("throw"===o.type){var r=o.arg;A(n)}return r}}throw Error("illegal catch attempt")},delegateYield:function(e,n,o){return this.delegate={iterator:S(e),resultName:n,nextLoc:o},"next"===this.method&&(this.arg=t),p}},e}function asyncGeneratorStep(t,e,n,o,r,i,a){try{var l=t[i](a),s=l.value}catch(c){return void n(c)}l.done?e(s):Promise.resolve(s).then(o,r)}function _asyncToGenerator(t){return function(){var e=this,n=arguments;return new Promise((function(o,r){var i=t.apply(e,n);function a(t){asyncGeneratorStep(i,o,r,a,l,"next",t)}function l(t){asyncGeneratorStep(i,o,r,a,l,"throw",t)}a(undefined)}))}}function ownKeys(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread(t){for(var e=1;e=t.length?{done:!0}:{done:!1,value:t[o++]}},e:function(t){throw t},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,l=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return a=t.done,t},e:function(t){l=!0,i=t},f:function(){try{a||null==n["return"]||n["return"]()}finally{if(l)throw i}}}}function _unsupportedIterableToArray(t,e){if(t){if("string"==typeof t)return _arrayLikeToArray(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(t,e):void 0}}function _arrayLikeToArray(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n1&&arguments[1]!==undefined?arguments[1]:e;volantis.scroll.to(t,{top:t.getBoundingClientRect().top+document.documentElement.scrollTop-n})},t.scrollEventCallBack=function(){var t=volantis.dom.bodyAnchor.offsetTop-e,n=volantis.scroll.getScrollTop();volantis.dom.topBtn&&(n>volantis.dom.bodyAnchor.offsetTop?(volantis.dom.topBtn.addClass("show"),volantis.scroll.del>0?volantis.dom.topBtn.removeClass("hl"):volantis.dom.topBtn.addClass("hl")):volantis.dom.topBtn.removeClass("show").removeClass("hl")),volantis.dom.header&&(n-t>-1?volantis.dom.header.addClass("show"):volantis.dom.header.removeClass("show")),pdata.ispage&&volantis.dom.wrapper&&(volantis.scroll.del>0&&n>100?volantis.dom.wrapper.addClass("sub"):volantis.scroll.del<0&&volantis.dom.wrapper.removeClass("sub")),volantis.isMobile&&(pdata.ispage&&volantis.dom.tocTarget&&volantis.dom.toc&&(volantis.dom.tocTarget.removeClass("active"),volantis.dom.toc.removeClass("active")),volantis.dom.mPhoneList&&volantis.dom.mPhoneList.forEach((function(t){volantis.dom.$(t).hide()})))},t.setScrollAnchor=function(){volantis.dom.topBtn&&volantis.dom.bodyAnchor&&volantis.dom.topBtn.click((function(e){e.preventDefault(),e.stopPropagation(),t.scrolltoElement(volantis.dom.bodyAnchor),e.stopImmediatePropagation()}))},t.setHeader=function(){pdata.ispage&&(volantis.dom.wrapper.find(".nav-sub .title").html(document.title.split(" - ")[0]),volantis.dom.comment=volantis.dom.$(document.getElementById("s-comment")),volantis.dom.commentTarget=volantis.dom.$(document.querySelector("#l_main article#comments")),volantis.dom.commentTarget?volantis.dom.comment.click((function(e){e.preventDefault(),e.stopPropagation(),volantis.cleanContentVisibility(),t.scrolltoElement(volantis.dom.commentTarget),e.stopImmediatePropagation()})):volantis.dom.comment.style.display="none",volantis.isMobile&&(volantis.dom.toc=volantis.dom.$(document.getElementById("s-toc")),volantis.dom.tocTarget=volantis.dom.$(document.querySelector("#l_side .toc-wrapper")),volantis.dom.tocTarget?(volantis.dom.toc.click((function(t){t.stopPropagation(),volantis.dom.tocTarget.toggleClass("active"),volantis.dom.toc.toggleClass("active")})),volantis.dom.$(document).click((function(t){t.stopPropagation(),volantis.dom.tocTarget&&volantis.dom.tocTarget.removeClass("active"),volantis.dom.toc.removeClass("active")}))):volantis.dom.toc&&(volantis.dom.toc.style.display="none")))},t.setHeaderMenuSelection=function(){volantis.dom.headerMenu=volantis.dom.$(document.querySelectorAll("#l_header .navigation,#l_cover .navigation,#l_side .navigation")),volantis.dom.headerMenu.forEach((function(t){var e=volantis.dom.$(t).find("li a.active");e&&e.removeClass("active");var n=volantis.dom.$(t).find("div a.active");n&&n.removeClass("active")}));var t=location.pathname.replace(/\/|%|\./g,"");0==t.length&&(t="home");var e=t.match(/page\d{0,}$/g);e&&(e=e[0],t=t.split(e)[0]);var n=t.match(/index.html/);n&&(n=n[0],t=t.split(n)[0]),(t=t.replace(/(\[|\]|~|#|@)/g,"\\$1"))&&volantis.dom.headerMenu&&volantis.dom.headerMenu.forEach((function(e){var n=e.querySelector("[active-action=action-"+t+"]");n&&volantis.dom.$(n).addClass("active")}))},t.setGlobalHeaderMenuEvent=function(){volantis.isMobile?document.querySelectorAll("#l_header .m-phone li").forEach((function(t){t.querySelector(".list-v")&&volantis.dom.$(t).click((function(t){t.stopPropagation(),t.currentTarget.parentElement.childNodes.forEach((function(t){"[object HTMLLIElement]"==Object.prototype.toString.call(t)&&t.childNodes.forEach((function(t){"[object HTMLUListElement]"==Object.prototype.toString.call(t)&&volantis.dom.$(t).hide()}))}));for(var e=t.currentTarget.children,n=0;n a[href]").forEach((function(t){volantis.dom.$(t.parentElement).click((function(t){t.stopPropagation(),t.target.origin==t.target.baseURI&&document.querySelectorAll("#wrapper .m-pc .list-v").forEach((function(t){volantis.dom.$(t).hide()}))}),0)})),t.setPageHeaderMenuEvent()},t.setPageHeaderMenuEvent=function(){volantis.isMobile&&volantis.dom.$(document).click((function(t){volantis.dom.mPhoneList.forEach((function(t){volantis.dom.$(t).hide()}))}))},t.setHeaderSearch=function(){volantis.isMobile&&volantis.dom.switcher&&(volantis.dom.switcher.click((function(t){t.stopPropagation(),volantis.dom.header.toggleClass("z_search-open"),volantis.dom.switcher.toggleClass("active")})),volantis.dom.$(document).click((function(t){volantis.dom.header.removeClass("z_search-open"),volantis.dom.switcher.removeClass("active")})),volantis.dom.search.click((function(t){t.stopPropagation()})))},t.setTabs=function(){var t=document.querySelectorAll("#l_main .tabs .nav-tabs");t&&t.forEach((function(t){t.querySelectorAll("a").forEach((function(t){volantis.dom.$(t).on("click",(function(t){t.preventDefault(),t.stopPropagation();var e=volantis.dom.$(t.target.parentElement.parentElement.parentElement);return e.find(".nav-tabs .active").removeClass("active"),volantis.dom.$(t.target.parentElement).addClass("active"),e.find(".tab-content .active").removeClass("active"),e.find(t.target.className).addClass("active"),!1}))}))}))},t.footnotes=function(){var t=document.querySelectorAll("#l_main .footnote-backref, #l_main .footnote-ref > a");t.forEach((function(e,n){t[n].click=function(){},volantis.dom.$(e).on("click",(function(t){t.stopPropagation(),t.preventDefault();var e=decodeURI(t.target.hash.split("#")[1]).replace(/\ /g,"-"),n=document.getElementById(e);n&&volantis.scroll.to(n,{addTop:-volantis.dom.header.offsetHeight-5,behavior:"instant"})}))}))},t.utilCopyCode=function(e){document.querySelectorAll(e).forEach((function(e){e.insertAdjacentHTML("beforebegin",'');var n=e.previousSibling;n.onclick=function(o){o.stopPropagation();var r=n.querySelector("i"),i=n.querySelector("span");e.focus();var a=new Range;a.selectNodeContents(e),document.getSelection().removeAllRanges(),document.getSelection().addRange(a);var l=document.getSelection().toString();t.utilWriteClipText(l).then((function(){t.messageCopyright(),n.classList.add("copied"),r.classList.remove("fa-copy"),r.classList.add("fa-check-circle"),i.innerText="COPIED",setTimeout((function(){r.classList.remove("fa-check-circle"),r.classList.add("fa-copy"),i.innerText="COPY"}),2e3)}))["catch"]((function(t){VolantisApp.message("系统提示",t,{icon:"fa fa-exclamation-circle red"}),n.classList.add("copied-failed"),r.classList.remove("fa-copy"),r.classList.add("fa-exclamation-circle"),i.innerText="COPY FAILED",setTimeout((function(){r.classList.remove("fa-exclamation-circle"),r.classList.add("fa-copy"),i.innerText="COPY"}))}))}}))},t.utilWriteClipText=function(t){return navigator.clipboard.writeText(t).then((function(){return Promise.resolve()}))["catch"]((function(e){var n=document.createElement("textarea");n.setAttribute("readonly","readonly"),document.body.appendChild(n),n.innerHTML=t,n.select();try{var o=document.execCommand("copy");return document.body.removeChild(n),o&&"unsuccessful"!==o?Promise.resolve():Promise.reject("复制文本失败!")}catch(e){return document.body.removeChild(n),Promise.reject("当前浏览器不支持复制功能,请检查更新或更换其他浏览器操作!")}}))},t.utilTimeAgo=function(t){var e=6e4,n=36e5,o=24*n,r=7*o,i=30*o,a=(new Date).getTime()-t,l=a/e,s=a/n,c=a/o,u=a/r,d=a/i;if(a<0)result="";else if(d>=1&&d<7)result=" "+parseInt(d)+" 月前";else if(u>=1&&u<4)result=" "+parseInt(u)+" 周前";else if(c>=1&&c<7)result=" "+parseInt(c)+" 天前";else if(s>=1&&s<24)result=" "+parseInt(s)+" 小时前";else if(l>=1&&l<60)result=" "+parseInt(l)+" 分钟前";else if(a>=0&&a<=e)result="刚刚";else{var f=new Date;f.setTime(t);var m=f.getFullYear(),h=f.getMonth()+1<10?"0"+(f.getMonth()+1):f.getMonth()+1,v=f.getDate()<10?"0"+f.getDate():f.getDate();f.getHours()<10?f.getHours():f.getHours(),f.getMinutes()<10?f.getMinutes():f.getMinutes(),f.getSeconds()<10?f.getSeconds():f.getSeconds();result=m+"-"+h+"-"+v}return result},t.message=function(t,e){var n=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{},o=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;function r(t,e,n,o){var r=n.icon,i=n.time,a=n.position,l=n.transitionIn,s=n.transitionOut,c=n.messageColor,u=n.titleColor,d=n.backgroundColor,f=n.zindex,m=n.displayMode;iziToast.show(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({layout:"2",icon:"Fontawesome",closeOnEscape:"true",displayMode:m||"replace",transitionIn:l||volantis.GLOBAL_CONFIG.plugins.message.transitionIn,transitionOut:s||volantis.GLOBAL_CONFIG.plugins.message.transitionOut,messageColor:c||volantis.GLOBAL_CONFIG.plugins.message.messageColor,titleColor:u||volantis.GLOBAL_CONFIG.plugins.message.titleColor,backgroundColor:d||volantis.GLOBAL_CONFIG.plugins.message.backgroundColor,zindex:f||volantis.GLOBAL_CONFIG.plugins.message.zindex},"icon",r||volantis.GLOBAL_CONFIG.plugins.message.icon["default"]),"timeout",i||volantis.GLOBAL_CONFIG.plugins.message.time["default"]),"position",a||volantis.GLOBAL_CONFIG.plugins.message.position),"title",t),"message",e),"onClosed",(function(){o&&o()})))}"undefined"==typeof iziToast?(volantis.css(volantis.GLOBAL_CONFIG.cdn.izitoast_css),volantis.js(volantis.GLOBAL_CONFIG.cdn.izitoast_js,(function(){r(t,e,n,o)}))):r(t,e,n,o)},t.question=function(t,e){var n=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{},o=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null,r=arguments.length>4&&arguments[4]!==undefined?arguments[4]:null,i=arguments.length>5&&arguments[5]!==undefined?arguments[5]:null;function a(t,e,n,o,r,i){var a=n.icon,l=n.time,s=(n.position,n.transitionIn,n.transitionOut),c=n.messageColor,u=n.titleColor,d=n.backgroundColor,f=n.zindex;iziToast.question(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({id:"question",icon:"Fontawesome",close:!1,overlay:!0,displayMode:"once",position:"center",messageColor:c||volantis.GLOBAL_CONFIG.plugins.message.messageColor,titleColor:u||volantis.GLOBAL_CONFIG.plugins.message.titleColor,backgroundColor:d||volantis.GLOBAL_CONFIG.plugins.message.backgroundColor,zindex:f||volantis.GLOBAL_CONFIG.plugins.message.zindex},"icon",a||volantis.GLOBAL_CONFIG.plugins.message.icon.quection),"timeout",l||volantis.GLOBAL_CONFIG.plugins.message.time.quection),"title",t),"message",e),"buttons",[["",function(t,e){t.hide({transitionOut:s||"fadeOut"},e,"button"),o&&o(t,e)}],["",function(t,e){t.hide({transitionOut:s||"fadeOut"},e,"button"),r&&r(t,e)}]]),"onClosed",(function(t,e,n){i&&i(t,e,n)})))}"undefined"==typeof iziToast?(volantis.css(volantis.GLOBAL_CONFIG.cdn.izitoast_css),volantis.js(volantis.GLOBAL_CONFIG.cdn.izitoast_js,(function(){a(t,e,n,o,r,i)}))):a(t,e,n,o,r,i)},t.hideMessage=function(){var t=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null,e=document.querySelector(".iziToast");function n(t){iziToast.hide({},e),t&&t()}e?"undefined"==typeof iziToast?(volantis.css(volantis.GLOBAL_CONFIG.cdn.izitoast_css),volantis.js(volantis.GLOBAL_CONFIG.cdn.izitoast_js,(function(){n(t)}))):n(t):t&&t()};var n=0;return t.messageCopyright=function(){volantis.GLOBAL_CONFIG.plugins.message.enable&&volantis.GLOBAL_CONFIG.plugins.message.copyright.enable&&n<1&&(n++,VolantisApp.message(volantis.GLOBAL_CONFIG.plugins.message.copyright.title,volantis.GLOBAL_CONFIG.plugins.message.copyright.message,{icon:volantis.GLOBAL_CONFIG.plugins.message.copyright.icon,transitionIn:"flipInX",transitionOut:"flipOutX",displayMode:1}))},{init:function(){t.init(),t.event()},subscribe:function(){t.setIsMobile(),t.setHeader(),t.setHeaderMenuSelection(),t.setGlobalHeaderMenuEvent(),t.setHeaderSearch(),t.setScrollAnchor(),t.setTabs(),t.footnotes()},utilCopyCode:t.utilCopyCode,utilWriteClipText:t.utilWriteClipText,utilTimeAgo:t.utilTimeAgo,message:t.message,question:t.question,hideMessage:t.hideMessage,messageCopyright:t.messageCopyright,scrolltoElement:t.scrolltoElement}}();Object.freeze(VolantisApp);var VolantisFancyBox=function(){var t={loadFancyBox:function(t){volantis.css(volantis.GLOBAL_CONFIG.cdn.fancybox_css),volantis.js(volantis.GLOBAL_CONFIG.cdn.fancybox_js).then((function(){t&&t()}))},init:function(){var e=!(arguments.length>0&&arguments[0]!==undefined)||arguments[0],n=arguments.length>1&&arguments[1]!==undefined?arguments[1]:t.groupBind;!document.querySelector(".md .gallery img, .fancybox")&&e||("undefined"==typeof Fancybox?t.loadFancyBox(n):n())},elementHandling:function(t,e){document.querySelectorAll(t).forEach((function(t){if(!t.hasAttribute("fancybox")){t.setAttribute("fancybox","");var n=document.createElement("a");n.setAttribute("href",t.src),n.setAttribute("data-caption",t.alt),n.setAttribute("data-fancybox",e),n.classList.add("fancybox"),n.append(t.cloneNode()),t.replaceWith(n)}}))},bind:function(e){t.init(!1,(function(){Fancybox.bind(e,{groupAll:!0,Hash:!1,hideScrollbar:!1,Thumbs:{autoStart:!1},caption:function(t,e,n){return n.$trigger.alt||null}})}))},groupBind:function(){var t=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null,e=new Set;document.querySelectorAll(".gallery").forEach((function(t){t.querySelector("img")&&e.add(t.getAttribute("data-group")||"default")})),t&&e.add(t);var n,o=_createForOfIteratorHelper(e);try{for(o.s();!(n=o.n()).done;){var r=n.value;Fancybox.unbind('[data-fancybox="'+r+'"]'),Fancybox.bind('[data-fancybox="'+r+'"]',{Hash:!1,hideScrollbar:!1,Thumbs:{autoStart:!1}})}}catch(i){o.e(i)}finally{o.f()}}};return{init:t.init,bind:t.bind,groupBind:function(e){var n=arguments.length>1&&arguments[1]!==undefined?arguments[1]:"default";try{t.elementHandling(e,n),t.init(!1,(function(){t.groupBind(n)}))}catch(o){console.error(o)}}}}();Object.freeze(VolantisFancyBox);var highlightKeyWords=function(){var t={markNum:0,markNextId:-1,startFromURL:function(){var e=decodeURI(new URL(location.href).searchParams.get("keyword")),n=e?e.split(" "):[],o=document.querySelector("#l_main");1==n.length&&"null"==n[0]||(t.start(n,o),t.scrollToFirstHighlightKeywordMark())},scrollToFirstHighlightKeywordMark:function(){volantis.cleanContentVisibility(),t.scrollToNextHighlightKeywordMark("0")||volantis.requestAnimationFrame(t.scrollToFirstHighlightKeywordMark)},scrollToNextHighlightKeywordMark:function(e){var n=e||(t.markNextId+1)%t.markNum;t.markNextId=parseInt(n);var o=document.getElementById("keyword-mark-"+t.markNextId);return o||(t.markNextId=(t.markNextId+1)%t.markNum,o=document.getElementById("keyword-mark-"+t.markNextId)),o&&volantis.scroll.to(o,{addTop:-volantis.dom.header.offsetHeight-5,behavior:"instant"}),o},scrollToPrevHighlightKeywordMark:function(e){var n=e||(t.markNextId-1+t.markNum)%t.markNum;t.markNextId=parseInt(n);var o=document.getElementById("keyword-mark-"+t.markNextId);return o||(t.markNextId=(t.markNextId-1+t.markNum)%t.markNum,o=document.getElementById("keyword-mark-"+t.markNextId)),o&&volantis.scroll.to(o,{addTop:-volantis.dom.header.offsetHeight-5,behavior:"instant"}),o},start:function(e,n){if(t.markNum=0,e.length&&n&&(1!=e.length||"null"!=e[0])){console.log(e);for(var o=document.createTreeWalker(n,NodeFilter.SHOW_TEXT,null),r=[];o.nextNode();)o.currentNode.parentNode.matches("button, select, textarea")||r.push(o.currentNode);r.forEach((function(n){var o=_slicedToArray(t.getIndexByWord(e,n.nodeValue),1)[0];if(o.length){var r=t.mergeIntoSlice(0,n.nodeValue.length,o);t.highlightText(n,r,"keyword"),t.highlightStyle()}}))}},getIndexByWord:function(t,e){var n=arguments.length>2&&arguments[2]!==undefined&&arguments[2],o=[],r=new Set;return t.forEach((function(t){var i=document.createElement("div");i.innerText=t;var a=(t=i.innerHTML).length;if(0!==a){var l=0,s=-1;for(n||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,l))>-1;)o.push({position:s,word:t}),r.add(t),l=s+a}})),o.sort((function(t,e){return t.position!==e.position?t.position-e.position:e.word.length-t.word.length})),[o,r]},mergeIntoSlice:function(t,e,n){for(var o=n[0],r=o,i=r.position,a=r.word,l=[],s=new Set;i+a.length<=e&&0!==n.length;){s.add(a),l.push({position:i,length:a.length});var c=i+a.length;for(n.shift();0!==n.length&&(i=(o=n[0]).position,a=o.word,c>i);)n.shift()}return{hits:l,start:t,end:e,count:s.size}},highlightText:function(e,n,o){var r,i=e.nodeValue,a=n.start,l=[],s=_createForOfIteratorHelper(n.hits);try{for(s.s();!(r=s.n()).done;){var c=r.value,u=c.position,d=c.length,f=document.createTextNode(i.substring(a,u));a=u+d;var m=document.createElement("mark");m.className=o,(m=t.highlightStyle(m)).appendChild(document.createTextNode(i.substr(u,d))),l.push(f,m)}}catch(h){s.e(h)}finally{s.f()}e.nodeValue=i.substring(a,n.end),l.forEach((function(t){e.parentNode.insertBefore(t,e)}))},highlightStyle:function(e){if(e)return e.id="keyword-mark-"+t.markNum,t.markNum++,e.style.background="transparent",e.style["border-bottom"]="1px dashed #ff2a2a",e.style.color="#ff2a2a",e.style["font-weight"]="bold",e},cleanHighlightStyle:function(){document.querySelectorAll(".keyword").forEach((function(t){t.style.background="transparent",t.style["border-bottom"]=null,t.style.color=null,t.style["font-weight"]=null}))}};return{start:function(e,n){t.start(e,n)},startFromURL:function(){t.startFromURL()},scrollToNextHighlightKeywordMark:function(e){t.scrollToNextHighlightKeywordMark(e)},scrollToPrevHighlightKeywordMark:function(e){t.scrollToPrevHighlightKeywordMark(e)},cleanHighlightStyle:function(){t.cleanHighlightStyle()}}}();Object.freeze(highlightKeyWords);var DOMController={visible:function(t){var e=!(arguments.length>1&&arguments[1]!==undefined)||arguments[1];t&&(t.style.display=!0===e?"block":"none")},remove:function(t){document.querySelectorAll(t).forEach((function(t){t.remove()}))},removeList:function(t){t.forEach((function(t){DOMController.remove(t)}))},setAttribute:function(t,e,n){document.querySelectorAll(t).forEach((function(t){t.setAttribute(e,n)}))},setAttributeList:function(t){t.forEach((function(t){DOMController.setAttribute(t[0],t[1],t[2])}))},setStyle:function(t,e,n){document.querySelectorAll(t).forEach((function(t){t.style[e]=n}))},setStyleList:function(t){t.forEach((function(t){DOMController.setStyle(t[0],t[1],t[2])}))},fadeIn:function(t){if(t)return t.style.visibility="visible",t.style.opacity=1,t.style.display="block",t.style.transition="all 0.5s linear",t},fadeOut:function(t){if(t)return t.style.visibility="hidden",t.style.opacity=0,t.style.display="none",t.style.transition="all 0.5s linear",t},fadeToggle:function(t){if(t)return t="hidden"==t.style.visibility?DOMController.fadeIn(t):DOMController.fadeOut(t)},fadeToggleList:function(t){t.forEach((function(t){DOMController.fadeToggle(t)}))},hasClass:function(t,e){if(t)return t.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)"))},addClass:function(t,e){if(t)return t.classList.add(e),t},removeClass:function(t,e){if(t)return t.classList.remove(e),t},toggleClass:function(t,e){if(t)return DOMController.hasClass(t,e)?DOMController.removeClass(t,e):DOMController.addClass(t,e),t},toggleClassList:function(t){t.forEach((function(t){DOMController.toggleClass(t[0],t[1])}))}};Object.freeze(DOMController);var VolantisRequest={timeoutFetch:function(t,e,n){var o,r=new AbortController;null===(o=n.signal)||void 0===o||o.addEventListener("abort",(function(){return r.abort()}));var i=fetch(t,_objectSpread(_objectSpread({},n),{},{signal:r.signal}));if(e>0){var a=setTimeout((function(){return r.abort()}),e);i["finally"]((function(){clearTimeout(a)}))}return i=i["catch"]((function(e){throw"AbortError"===(e||{}).name?new Error("Fetch timeout: ".concat(t)):e}))},Fetch:function(){var t=_asyncToGenerator(_regeneratorRuntime().mark((function e(t,n){var o,r,i,a=arguments;return _regeneratorRuntime().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return o=a.length>2&&a[2]!==undefined?a[2]:15e3,e.next=3,VolantisRequest.timeoutFetch(t,o,n);case 3:if((r=e.sent).ok){e.next=6;break}throw new Error("Fetch error: ".concat(t," | ").concat(r.status));case 6:return e.next=8,r.json();case 8:if((i=e.sent).success){e.next=11;break}throw i;case 11:return e.abrupt("return",i);case 12:case"end":return e.stop()}}),e)})));return function(e,n){return t.apply(this,arguments)}}(),POST:function(){var t=_asyncToGenerator(_regeneratorRuntime().mark((function e(t,n){var o,r,i;return _regeneratorRuntime().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return o={method:"POST"},n&&(r=new FormData,Object.keys(n).forEach((function(t){return r.append(t,String(n[t]))})),o.body=r),e.next=4,VolantisRequest.Fetch(t,o);case 4:return i=e.sent,e.abrupt("return",i.data);case 6:case"end":return e.stop()}}),e)})));return function(e,n){return t.apply(this,arguments)}}(),Get:function(){var t=_asyncToGenerator(_regeneratorRuntime().mark((function e(t,n){return _regeneratorRuntime().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,VolantisRequest.Fetch(t+(n?"?".concat(new URLSearchParams(n)):""),{method:"GET"});case 2:e.sent;case 3:case"end":return e.stop()}}),e)})));return function(e,n){return t.apply(this,arguments)}}()};Object.freeze(VolantisRequest); +//# sourceMappingURL=../maps/js/app.js.map diff --git a/js/jquery.parallax.min.js b/js/jquery.parallax.min.js deleted file mode 100644 index a01025575a..0000000000 --- a/js/jquery.parallax.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(t){function e(i){if(o[i])return o[i].exports;var r=o[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var o={};e.m=t,e.c=o,e.d=function(t,o,i){e.o(t,o)||Object.defineProperty(t,o,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var o=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(o,"a",o),o},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e){t.exports=jQuery},function(t,e,o){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var n=function(){function t(t,e){for(var o=0;o").addClass("parallax-mirror").css({visibility:"hidden",zIndex:o.zIndex,position:"fixed",top:0,left:0,overflow:"hidden"}).prependTo((0,a.default)(o.mirrorSelector)),f=n.find(o.sliderSelector);0===f.length?f=(0,a.default)("").attr("src",o.src):(o.formerParent=f.parent(),o.formerStyles=f.prop("style")),f.addClass("parallax-slider").prependTo(s),f.children("img").add(f).on("load",function(){t.update(!0)}),this.$s=f,this.$m=s}this.$w=n,this.o=o,"function"==typeof o.afterSetup&&o.afterSetup(this)}return n(t,[{key:"refresh",value:function(){var e=this.$w,o=this.o;o.dH=t.dH,o.dW=t.dW;var i=o.scrollingElement;if(i&&i!==document&&(o.dH=i.scrollHeight,o.dW=i.scrollWidth),o){o.aspectRatio||function(t,e){var o=0,i=0,r=0,n=0;if(0===t.children().each(function(){var t=(0,a.default)(this),e=t.offset(),s=e.top+t.outerHeight(),f=e.left+t.outerWidth();o=e.topi?s:i,n=f>n?f:n}).length)e.aspectRatio=t[0].naturalWidth/(t[0].naturalHeight||1);else{var s=t.offset(),f=i-Math.max(o,s.top),l=n-Math.max(r,s.left);e.aspectRatio=l/(f||1)}}(this.$s,o);var r=o.aspectRatio||1;o.boxWidth=e.outerWidth(),o.boxHeight=e.outerHeight()+2*o.bleed,o.boxOffsetTop=e.offset().top-o.bleed,o.boxOffsetLeft=e.offset().left,o.boxOffsetBottom=o.boxOffsetTop+o.boxHeight;var n=t.wH,s=t.dH,f=Math.min(o.boxOffsetTop,s-n),l=Math.max(o.boxOffsetTop+o.boxHeight-n,0),d=o.boxHeight+(f-l)*(1-o.speed)|0,u=(o.boxOffsetTop-f)*(1-o.speed)|0,p=void 0;o.boxWidtho&&e.boxOffsetTop<=n?(e.visibility="visible",e.mirrorTop=e.boxOffsetTop-o,e.mirrorLeft=e.boxOffsetLeft-i,e.offsetTop=e.offsetBaseTop-e.mirrorTop*(1-e.speed)):e.visibility="hidden",this.$m.css({transform:"translate3d("+e.mirrorLeft+"px, "+(e.mirrorTop-r)+"px, 0px)",visibility:e.visibility,height:e.boxHeight,width:e.boxWidth}),this.$s.css({transform:"translate3d("+e.offsetLeft+"px, "+e.offsetTop+"px, 0px)",position:"absolute",height:e.imageHeight,width:e.imageWidth,maxWidth:"none"}),"function"==typeof e.afterRender&&e.afterRender(this)}},{key:"destroy",value:function(){if(this.$m&&this.$m.remove(),this.$s){for(var e=0;e0&&void 0!==arguments[0]&&arguments[0]&&a.default.each(t.iList,function(){this.refresh()}),a.default.each(t.iList,function(){this.render()})}}]),t}();d.DEFAULTS={src:null,speed:.2,bleed:0,zIndex:-100,posX:"center",posY:"center",overScrollFix:!1,excludeAgents:/(iPod|iPhone|iPad|Android)/,aspectRatio:null,sliderSelector:">.parallax-slider",mirrorSelector:"body",scrollingSelector:null,afterRefresh:null,afterRender:null,afterSetup:null,afterDestroy:null},d.AUTOINIT=!0,d.sT=0,d.sL=0,d.wH=0,d.wW=0,d.dH=1<<30,d.dW=1<<30,d.iList=[],d.isSet=!1,(0,a.default)(function(){d.AUTOINIT&&(0,a.default)("[data-parallax]").parallax()}),(0,l.default)("parallax",d)},function(t,e,o){"use strict";function i(t,e){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i="__"+t,n=s.default.fn[t];s.default.fn[t]=function(t){return this.each(function(){var o=(0,s.default)(this),n=o.data(i);if(n||"destroy"===t)"function"==typeof n.configure&&n.configure(options);else{var a=s.default.extend({},e.DEFAULTS,o.data(),"object"===(void 0===t?"undefined":r(t))&&t);o.data(i,n=new e(this,a))}"string"==typeof t&&("destroy"===t?(n.destroy(),o.data(i,!1)):n[t]())})},o&&(s.default[t]=function(e){return(0,s.default)({})[t](e)}),s.default.fn[t].noConflict=function(){return s.default.fn[t]=n}}Object.defineProperty(e,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};e.default=i;var n=o(0),s=function(t){return t&&t.__esModule?t:{default:t}}(n)}]); \ No newline at end of file diff --git a/js/message.js b/js/message.js deleted file mode 100644 index 398bd7024b..0000000000 --- a/js/message.js +++ /dev/null @@ -1 +0,0 @@ -$.extend({message:function(e){var n={title:"",message:" 操作成功",time:"3000",type:"success",showClose:!0,autoClose:!0,onClose:function(){}};"string"==typeof e&&(n.message=e),"object"==typeof e&&(n=$.extend({},n,e));var i,o,s,t=n.showClose?'
×
':"",a=""!==n.title?'

'+n.title+"

":"",c='
'+a+'
'+n.message+"
"+t+"
",m=$("body"),d=$(c);o=function(){d.addClass("slideOutRight"),d.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",(function(){s()}))},s=function(){d.remove(),n.onClose(n),clearTimeout(i)},$(".c-message").remove(),m.append(d),d.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",(function(){d.removeClass("messageFadeInDown")})),m.one("click",".c-message--close",(function(e){o()})),n.autoClose&&(i=setTimeout((function(){o()}),n.time))}}); \ No newline at end of file diff --git a/js/plugins/aplayer.js b/js/plugins/aplayer.js new file mode 100644 index 0000000000..b1b3d4cf26 --- /dev/null +++ b/js/plugins/aplayer.js @@ -0,0 +1,2 @@ +"use strict";var RightMenuAplayer=function(){var e,a={},l={checkAPlayer:function(){e===undefined||a.player===undefined?l.setAPlayerObject():a.observer===undefined&&l.setAPlayerObserver()},setAPlayerObject:function(){var e=document.querySelectorAll(".footer meting-js");0==e.length&&(e=document.querySelectorAll("meting-js")),a.player=undefined,e.forEach((function(e,t){e.meta.id==volantis.GLOBAL_CONFIG.plugins.aplayer.id&&e.aplayer&&a.player===undefined&&(a.player=e.aplayer,l.setAPlayerObserver(),l.updateTitle())}))},setAPlayerObserver:function(){try{a.player.on("play",(function(e){l.updateAPlayerControllerStatus(e),a.status="play"})),a.player.on("pause",(function(e){l.updateAPlayerControllerStatus(e),a.status="pause"})),a.player.on("volumechange",(function(e){l.onUpdateAPlayerVolume(e)})),a.player.on("loadstart",(function(e){l.updateTitle(e)})),a.volumeBarWrap=document.getElementsByClassName("nav volume")[0].children[0],a.volumeBar=a.volumeBarWrap.children[0];var e=function(e){l.updateAPlayerVolume(e)},t=function r(t){a.volumeBarWrap.classList.remove("aplayer-volume-bar-wrap-active"),document.removeEventListener("mouseup",r),document.removeEventListener("mousemove",e),l.updateAPlayerVolume(t)};a.volumeBarWrap.addEventListener("mousedown",(function(l){l.stopPropagation(),a.volumeBarWrap.classList.add("aplayer-volume-bar-wrap-active"),document.addEventListener("mousemove",e),document.addEventListener("mouseup",t)})),a.volumeBarWrap.addEventListener("click",(function(e){e.stopPropagation()})),l.updateAPlayerControllerStatus(),l.onUpdateAPlayerVolume(),a.observer=!0}catch(r){console.log(r),a.observer=undefined}},updateAPlayerVolume:function(e){var l=((e.clientX||e.changedTouches[0].clientX)-a.volumeBar.getBoundingClientRect().left)/a.volumeBar.clientWidth;l=Math.max(l,0),l=Math.min(l,1),a.player.volume(l)},onUpdateAPlayerVolume:function(){try{a.volumeBar.children[0].style.width=100*a.player.audio.volume+"%"}catch(e){console.log(e)}},updateAPlayerControllerStatus:function(){try{a.player.audio.paused?(e="pause",document.getElementsByClassName("nav toggle")[0].children[0].classList.add("fa-play"),document.getElementsByClassName("nav toggle")[0].children[0].classList.remove("fa-pause")):(e="play",document.getElementsByClassName("nav toggle")[0].children[0].classList.remove("fa-play"),document.getElementsByClassName("nav toggle")[0].children[0].classList.add("fa-pause"))}catch(l){console.log(l)}},aplayerToggle:function(){l.checkAPlayer();try{a.player.toggle()}catch(e){console.log(e)}},aplayerBackward:function(){l.checkAPlayer();try{a.player.skipBack(),a.player.play()}catch(e){console.log(e)}},aplayerForward:function(){l.checkAPlayer();try{a.player.skipForward(),a.player.play()}catch(e){console.log(e)}},aplayerVolume:function(e){l.checkAPlayer();try{a.player.volume(e)}catch(t){console.log(t)}},updateTitle:function(){l.checkAPlayer();try{var e=a.player.list.index,t=a.player.list.audios[e];document.getElementsByClassName("nav music-title")[0].innerHTML=t.title}catch(r){}}};return{checkAPlayer:l.checkAPlayer,aplayerBackward:l.aplayerBackward,aplayerToggle:l.aplayerToggle,aplayerForward:l.aplayerForward,APlayer:a}}();Object.freeze(RightMenuAplayer),volantis.requestAnimationFrame((function(){RightMenuAplayer.checkAPlayer()})); +//# sourceMappingURL=../../maps/js/plugins/aplayer.js.map diff --git a/js/plugins/contributors.js b/js/plugins/contributors.js deleted file mode 100644 index c635e8564a..0000000000 --- a/js/plugins/contributors.js +++ /dev/null @@ -1 +0,0 @@ -const ContributorsJS={requestAPI:(t,r,e)=>{let n=5;!function o(){return new Promise(((a,s)=>{let l=0,c=setTimeout((()=>{0===l&&(l=2,c=null,s("请求超时"),0==n&&e())}),5e3);fetch(t).then((function(t){if(2!==l&&(clearTimeout(c),a(t),c=null,l=1),t.ok)return t.json();throw new Error("Network response was not ok.")})).then((function(t){n=0,r(t)})).catch((function(t){n>0?(n-=1,setTimeout((()=>{o()}),5e3)):e()}))}))}()},layout:t=>{const r=t.el;ContributorsJS.requestAPI(t.api,(function(e){r.querySelector(".loading-wrap").remove();var n="";(e||[]).forEach(((r,e)=>{var o='"})),r.querySelector(".group-body").innerHTML=n}),(function(){try{r.querySelector(".loading-wrap svg").remove(),r.querySelector(".loading-wrap p").innerText("加载失败,请稍后重试。")}catch(t){}}))},start:()=>{const t=document.getElementsByClassName("contributorsjs-wrap");for(var r=0;r{let n=5;!function a(){return new Promise(((o,s)=>{let c=0,i=setTimeout((()=>{0===c&&(c=2,i=null,s("请求超时"),0==n&&r())}),5e3);fetch(e).then((function(e){if(2!==c&&(clearTimeout(i),o(e),i=null,c=1),e.ok)return e.json();throw new Error("Network response was not ok.")})).then((function(e){n=0,t(e)})).catch((function(e){n>0?(n-=1,setTimeout((()=>{a()}),5e3)):r()}))}))}()},layout:e=>{const t=e.el;FriendsJS.requestAPI(e.api,(function(r){t.querySelector(".loading-wrap").remove();const n=r.content;var a="";n.forEach(((t,r)=>{var n='"})),t.querySelector(".group-body").innerHTML=a}),(function(){try{t.querySelector(".loading-wrap svg").remove(),t.querySelector(".loading-wrap p").innerText("加载失败,请稍后重试。")}catch(e){}}))},start:()=>{const e=document.getElementsByClassName("friendsjs-wrap");for(var t=0;t=2&&(a=Parallax.mirrors[1].slider);var l=parseFloat(a.style.opacity);1!==l?Parallax.mirrors.length>=2?(l+=.1,a.style.opacity=l,setTimeout(Parallax.slidein,Parallax.options.fade/10)):a.style.opacity=1:Parallax.mirrors.length>=2&&(Parallax.mirrors[0].mirror.remove(),Parallax.mirrors.shift())},Parallax.start=function(){var a=document.createElement("div");a.classList.add("parallax-mirror"),a.style.visibility="hidden",a.style.zIndex=Parallax.options.zIndex,a.style.position="fixed",a.style.top=0,a.style.left=0,a.style.overflow="hidden",Parallax.window.appendChild(a);var l=document.createElement("img");l.src=Parallax.options.src,l.alt="parallax",l.classList.add("parallax-slider"),l.style.opacity=0,a.appendChild(l),Parallax.mirrors||(Parallax.mirrors=[]);var o={};o.mirror=a,o.slider=l,Parallax.mirrors.push(o),Parallax.slidein(),l.addEventListener("load",(function(){Parallax.update()}),!1)},Parallax.init=function(){function a(){Parallax.wH=document.documentElement.clientHeight,Parallax.wW=document.documentElement.clientWidth}function l(){var a;return window.pageYOffset?a=window.pageYOffset:document.compatMode&&"BackCompat"!=document.compatMode?a=document.documentElement.scrollTop:document.body&&(a=document.body.scrollTop),a}window.addEventListener("resize",(function(){a(),Parallax.update()}),!1),a();var o=-1;!function t(){var a,r=l();o!==r&&(o=r,a=l(),Parallax.sT=Math.max(0,a),Parallax.sL=Math.max(0,document.body.scrollLeft),Parallax.overScroll=Math.min(a,0),Parallax.update()),window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame,window.requestAnimationFrame(t)}()},Parallax.refreshItem=function(a){Parallax.options.aspectRatio=a.naturalWidth/(a.naturalHeight||1);var l=Parallax.options.aspectRatio||1;Parallax.options.boxWidth=Parallax.window.clientWidth,Parallax.options.boxHeight=Parallax.window.clientHeight,Parallax.options.boxOffsetTop=Parallax.window.scrollTop,Parallax.options.boxOffsetLeft=Parallax.window.scrollLeft,Parallax.options.boxOffsetBottom=Parallax.options.boxOffsetTop+Parallax.options.boxHeight;var o,t=Parallax.wH,r=Parallax.options.boxOffsetTop,i=Math.max(Parallax.options.boxOffsetTop+Parallax.options.boxHeight-t,0),e=Parallax.options.boxHeight+(r-i)*(1-Parallax.options.speed)|0,s=(Parallax.options.boxOffsetTop-r)*(1-Parallax.options.speed)|0;Parallax.options.boxWidtho&&Parallax.options.boxOffsetTop<=r?(Parallax.options.visibility="visible",Parallax.options.mirrorTop=Parallax.options.boxOffsetTop-o,Parallax.options.mirrorLeft=Parallax.options.boxOffsetLeft-t,Parallax.options.offsetTop=Parallax.options.offsetBaseTop-Parallax.options.mirrorTop*(1-Parallax.options.speed)):Parallax.options.visibility="hidden",a.style.transform="translate3d("+Parallax.options.mirrorLeft+"px, "+Parallax.options.mirrorTop+"px, 0px)",a.style.visibility=Parallax.options.visibility,a.style.height=Parallax.options.boxHeight+"px",a.style.width=Parallax.options.boxWidth+"px",l.style.transform="translate3d("+Parallax.options.offsetLeft+"px, "+Parallax.options.offsetTop+"px, 0px)",l.style.position="absolute",l.style.height=Parallax.options.imageHeight+"px",l.style.width=Parallax.options.imageWidth+"px",l.style.maxWidth="none"},Parallax.update=function(){Parallax.mirrors&&Parallax.mirrors.forEach((function(a){Parallax.refreshItem(a.slider),Parallax.renderItem(a.mirror,a.slider)}))}; +//# sourceMappingURL=../../maps/js/plugins/parallax.js.map diff --git a/js/plugins/rightMenus.js b/js/plugins/rightMenus.js new file mode 100644 index 0000000000..0c472d2e42 --- /dev/null +++ b/js/plugins/rightMenus.js @@ -0,0 +1,2 @@ +"use strict";function _typeof(e){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_typeof(e)}function _regeneratorRuntime(){_regeneratorRuntime=function(){return t};var e,t={},n=Object.prototype,r=n.hasOwnProperty,o=Object.defineProperty||function(e,t,n){e[t]=n.value},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",l=i.toStringTag||"@@toStringTag";function s(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{s({},"")}catch(e){s=function(e,t,n){return e[t]=n}}function u(e,t,n,r){var i=t&&t.prototype instanceof y?t:y,a=Object.create(i.prototype),c=new C(r||[]);return o(a,"_invoke",{value:E(e,n,c)}),a}function d(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}t.wrap=u;var p="suspendedStart",m="suspendedYield",h="executing",g="completed",f={};function y(){}function v(){}function b(){}var w={};s(w,a,(function(){return this}));var M=Object.getPrototypeOf,x=M&&M(M(O([])));x&&x!==n&&r.call(x,a)&&(w=x);var k=b.prototype=y.prototype=Object.create(w);function L(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function R(e,t){function n(o,i,a,c){var l=d(e[o],e,i);if("throw"!==l.type){var s=l.arg,u=s.value;return u&&"object"==_typeof(u)&&r.call(u,"__await")?t.resolve(u.__await).then((function(e){n("next",e,a,c)}),(function(e){n("throw",e,a,c)})):t.resolve(u).then((function(e){s.value=e,a(s)}),(function(e){return n("throw",e,a,c)}))}c(l.arg)}var i;o(this,"_invoke",{value:function(e,r){function o(){return new t((function(t,o){n(e,r,t,o)}))}return i=i?i.then(o,o):o()}})}function E(t,n,r){var o=p;return function(i,a){if(o===h)throw Error("Generator is already running");if(o===g){if("throw"===i)throw a;return{value:e,done:!0}}for(r.method=i,r.arg=a;;){var c=r.delegate;if(c){var l=_(c,r);if(l){if(l===f)continue;return l}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(o===p)throw o=g,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);o=h;var s=d(t,n,r);if("normal"===s.type){if(o=r.done?g:m,s.arg===f)continue;return{value:s.arg,done:r.done}}"throw"===s.type&&(o=g,r.method="throw",r.arg=s.arg)}}}function _(t,n){var r=n.method,o=t.iterator[r];if(o===e)return n.delegate=null,"throw"===r&&t.iterator["return"]&&(n.method="return",n.arg=e,_(t,n),"throw"===n.method)||"return"!==r&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+r+"' method")),f;var i=d(o,t.iterator,n.arg);if("throw"===i.type)return n.method="throw",n.arg=i.arg,n.delegate=null,f;var a=i.arg;return a?a.done?(n[t.resultName]=a.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,f):a:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,f)}function S(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function A(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function C(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(S,this),this.reset(!0)}function O(t){if(t||""===t){var n=t[a];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var o=-1,i=function n(){for(;++o=0;--i){var a=this.tryEntries[i],c=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var l=r.call(a,"catchLoc"),s=r.call(a,"finallyLoc");if(l&&s){if(this.prev=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),A(n),f}},"catch":function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var o=r.arg;A(n)}return o}}throw Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:O(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),f}},t}function asyncGeneratorStep(e,t,n,r,o,i,a){try{var c=e[i](a),l=c.value}catch(s){return void n(s)}c.done?t(l):Promise.resolve(l).then(r,o)}function _asyncToGenerator(e){return function(){var t=this,n=arguments;return new Promise((function(r,o){var i=e.apply(t,n);function a(e){asyncGeneratorStep(i,r,o,a,c,"next",e)}function c(e){asyncGeneratorStep(i,r,o,a,c,"throw",e)}a(undefined)}))}}var RightMenus={defaultEvent:["copyText","copyLink","copyPaste","copyAll","copyCut","copyImg","printMode","readMode"],defaultGroup:["navigation","inputBox","seletctText","elementCheck","elementImage","articlePage"],messageRightMenu:volantis.GLOBAL_CONFIG.plugins.message.enable&&volantis.GLOBAL_CONFIG.plugins.message.rightmenu.enable,corsAnywhere:volantis.GLOBAL_CONFIG.plugins.rightmenus.options.corsAnywhere,urlRegx:/^((https|http)?:\/\/)+[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,imgRegx:/\.(jpe?g|png|webp|svg|gif|jifi)(-|_|!|\?|\/)?.*$/,initialMenu:function(){RightMenus.fun.init()},readClipboard:function(){var e=_asyncToGenerator(_regeneratorRuntime().mark((function t(){var e,n;return _regeneratorRuntime().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,navigator.permissions.query({name:"clipboard-read"});case 2:n=t.sent,t.t0=n.state,t.next="granted"===t.t0||"prompt"===t.t0?6:10;break;case 6:return t.next=8,navigator.clipboard.readText();case 8:return e=t.sent,t.abrupt("break",12);case 10:return window.clipboardRead=!1,t.abrupt("break",12);case 12:return t.abrupt("return",e);case 13:case"end":return t.stop()}}),t)})));return function(){return e.apply(this,arguments)}}(),writeClipText:function(e){return navigator.clipboard.writeText(e).then((function(){return Promise.resolve()}))["catch"]((function(e){return Promise.reject(e)}))},writeClipImg:function(){var e=_asyncToGenerator(_regeneratorRuntime().mark((function t(e,n,r){var o;return _regeneratorRuntime().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:(o=new Image).crossOrigin="Anonymous",o.addEventListener("load",(function(){var e=document.createElement("canvas"),t=e.getContext("2d");e.width=o.width,e.height=o.height,t.drawImage(o,0,0),e.toBlob((function(e){navigator.clipboard.write([new ClipboardItem({"image/png":e})]).then((function(e){n(e)}))["catch"]((function(e){r(e)}))}),"image/png")}),!1),o.src="".concat(e,"?(lll¬ω¬)");case 4:case"end":return t.stop()}}),t)})));return function(t,n,r){return e.apply(this,arguments)}}(),insertAtCaret:function(e,t){var n=e.selectionStart,r=e.selectionEnd;if(document.selection)e.focus(),document.selection.createRange().text=t,e.focus();else if(n||"0"==n){var o=e.scrollTop;e.value=e.value.substring(0,n)+t+e.value.substring(r,e.value.length),e.focus(),e.selectionStart=n+t.length,e.selectionEnd=n+t.length,e.scrollTop=o}else e.value+=t,e.focus()}};RightMenus.fun=function(){var e=volantis.GLOBAL_CONFIG.plugins.rightmenus,t={},n=document.getElementById("rightmenu-wrapper"),r=document.getElementById("rightmenu-content"),o=document.querySelectorAll("#rightmenu-content li.menuLoad-Content"),i=document.querySelectorAll("#rightmenu-content li, #rightmenu-content hr, #menuMusic"),a=document.getElementById("read_bkg"),c=document.getElementById("menuMusic"),l=document.querySelector("#menuMusic .backward"),s=document.querySelector("#menuMusic .toggle"),u=document.querySelector("#menuMusic .forward"),d={mouseEvent:null,isInputBox:!1,selectText:"",inputValue:"",isLink:!1,linkUrl:"",isMediaLink:!1,mediaLinkUrl:"",isImage:!1,isArticle:!1,pathName:"",isReadClipboard:!0,isShowMusic:!1,statusCheck:!1},p=Object.assign({},d);return t.initEvent=function(){t.elementAppend(),t.contextmenu(),t.menuEvent()},t.elementAppend=function(){a&&a.parentNode.removeChild(a);var e=document.createElement("div");e.className="common_read_bkg common_read_hide",e.id="read_bkg",window.document.body.appendChild(e)},t.menuPosition=function(e){try{var o=e.clientX,i=e.clientY,a=document.documentElement.clientWidth||document.body.clientWidth,c=document.documentElement.clientHeight||document.body.clientHeight;n.style.display="block",t.menuControl(e);var l=r.offsetWidth,s=r.offsetHeight,u=o+l>a?o-l+10:o,d=i+s>c?i-s+10:i;d=i+s>c&&dCtrl + 右键",{icon:e.options.iconPrefix+" fa-exclamation-square red",displayMode:1,time:9e3},(function(){localStorage.setItem("NoticeRightMenu","true")}))},t.copyText=function(){VolantisApp.utilWriteClipText(d.selectText).then((function(){RightMenus.messageRightMenu&&VolantisApp.messageCopyright()}))["catch"]((function(t){RightMenus.messageRightMenu&&VolantisApp.message("系统提示",t,{icon:e.options.iconPrefix+" fa-exclamation-square red",displayMode:1,time:9e3})}))},t.copyLink=function(){VolantisApp.utilWriteClipText(d.linkUrl||d.mediaLinkUrl).then((function(){RightMenus.messageRightMenu&&VolantisApp.messageCopyright()}))["catch"]((function(t){RightMenus.messageRightMenu&&VolantisApp.message("系统提示",t,{icon:e.options.iconPrefix+" fa-exclamation-square red",displayMode:1,time:9e3})}))},t.copyAll=function(){d.mouseEvent.target.select()},t.copyPaste=_asyncToGenerator(_regeneratorRuntime().mark((function m(){var e;return _regeneratorRuntime().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,RightMenus.readClipboard();case 2:if(t.t0=t.sent,t.t0){t.next=5;break}t.t0="";case 5:e=t.t0,RightMenus.messageRightMenu&&!1===window.clipboardRead?VolantisApp.message("系统提示","未授予剪切板读取权限!"):RightMenus.messageRightMenu&&""===e?VolantisApp.message("系统提示","仅支持复制文本内容!"):RightMenus.insertAtCaret(d.mouseEvent.target,e);case 7:case"end":return t.stop()}}),m)}))),t.copyCut=function(){var e=d.mouseEvent.target.selectionStart,n=d.mouseEvent.target.selectionEnd,r=d.inputValue;t.copyText(d.selectText),d.mouseEvent.target.value=r.substring(0,e)+r.substring(n,r.length),d.mouseEvent.target.selectionStart=e,d.mouseEvent.target.selectionEnd=e,d.mouseEvent.target.focus()},t.copyImg=function(){volantis.GLOBAL_CONFIG.plugins.message.rightmenu.notice&&VolantisApp.message("系统提示","复制中,请等待。",{icon:e.options.iconPrefix+" fa-images"}),RightMenus.writeClipImg(d.mediaLinkUrl,(function(t){RightMenus.messageRightMenu&&(VolantisApp.hideMessage(),VolantisApp.message("系统提示","图片复制成功!",{icon:e.options.iconPrefix+" fa-images"}))}),(function(t){console.error(t),RightMenus.messageRightMenu&&(VolantisApp.hideMessage(),VolantisApp.message("系统提示","复制失败:"+t,{icon:e.options.iconPrefix+" fa-exclamation-square red",time:9e3}))}))},t.printMode=function(){if(window.location.pathname===d.pathName)if(RightMenus.messageRightMenu){VolantisApp.question("",'是否打印当前页面?
建议打印时勾选背景图形
',{time:9e3},(function(){t.printHtml()}))}else t.printHtml()},t.printHtml=function(){volantis.isReadModel&&t.readMode(),DOMController.setAttribute("details","open","true"),DOMController.removeList([".cus-article-bkg",".iziToast-overlay",".iziToast-wrapper",".prev-next","footer","#l_header","#l_cover","#l_side","#comments","#s-top","#BKG","#rightmenu-wrapper",".nav-tabs",".parallax-mirror",".new-meta-item.share",".new-meta-box","button.btn-copy","iframe"]),DOMController.setStyleList([["body","backgroundColor","unset"],["#l_main, .copyright.license","width","100%"],["#post","boxShadow","none"],["#post","background","none"],["#post","padding","0"],["h1","textAlign","center"],["h1","fontWeight","600"],["h1","fontSize","2rem"],["h1","marginBottom","20px"],[".tab-pane","display","block"],[".tab-content","borderTop","none"],[".highlight>table pre","whiteSpace","pre-wrap"],[".highlight>table pre","wordBreak","break-all"],[".fancybox img","height","auto"],[".fancybox img","weight","auto"],[".copyright.license","margin","0"],[".copyright.license","padding","1.25em 20px"],["figure.highlight, .copyright.license","display","inline-block"]]),setTimeout((function(){window.print(),document.body.innerHTML="",window.location.reload()}),50)},t.readMode=function(){"function"==typeof ScrollReveal&&ScrollReveal().clean("#comments"),DOMController.setStyle("#l_header","opacity",0),DOMController.fadeToggleList([document.querySelector("#l_cover"),document.querySelector("footer"),document.querySelector("#s-top"),document.querySelector(".article-meta#bottom"),document.querySelector(".prev-next"),document.querySelector("#l_side"),document.querySelector("#comments")]),DOMController.toggleClassList([[document.querySelector("#l_main"),"common_read"],[document.querySelector("#l_main"),"common_read_main"],[document.querySelector("#l_body"),"common_read"],[document.querySelector("#safearea"),"common_read"],[document.querySelector("h1"),"common_read_h1"],[document.querySelector("#post"),"post_read"],[document.querySelector("#l_cover"),"read_cover"],[document.querySelector(".widget.toc-wrapper"),"post_read"]]),DOMController.setStyle(".copyright.license","margin","15px 0"),volantis.isReadModel=volantis.isReadModel===undefined||!volantis.isReadModel,volantis.isReadModel?(RightMenus.messageRightMenu&&VolantisApp.message("系统提示","阅读模式已开启,您可以点击屏幕空白处退出。",{backgroundColor:"var(--color-read-post)",icon:e.options.iconPrefix+" fa-book-reader",displayMode:1,time:5e3}),document.querySelector("#l_body").removeEventListener("click",t.readMode),document.querySelector("#l_body").addEventListener("click",(function(e){DOMController.hasClass(e.target,"common_read")&&t.readMode()}))):(document.querySelector("#l_body").removeEventListener("click",t.readMode),document.querySelector("#post").removeEventListener("click",t.readMode),DOMController.setStyle(".prev-next","display","flex"),DOMController.setStyle(".copyright.license","margin","15px -40px"))},{init:t.initEvent,hideMenu:t.hideMenu,readMode:t.readMode}}(),Object.freeze(RightMenus),volantis.requestAnimationFrame((function(){"loading"!==document.readyState?RightMenus.initialMenu():document.addEventListener("DOMContentLoaded",(function(){RightMenus.initialMenu()}))})); +//# sourceMappingURL=../../maps/js/plugins/rightMenus.js.map diff --git a/js/plugins/sites.js b/js/plugins/sites.js deleted file mode 100644 index 75baa3a710..0000000000 --- a/js/plugins/sites.js +++ /dev/null @@ -1 +0,0 @@ -const SitesJS={requestAPI:(e,t,r)=>{let n=5;!function s(){return new Promise(((a,o)=>{let c=0,i=setTimeout((()=>{0===c&&(c=2,i=null,o("请求超时"),0==n&&r())}),5e3);fetch(e).then((function(e){if(2!==c&&(clearTimeout(i),a(e),i=null,c=1),e.ok)return e.json();throw new Error("Network response was not ok.")})).then((function(e){n=0,t(e)})).catch((function(e){n>0?(n-=1,setTimeout((()=>{s()}),5e3)):r()}))}))}()},layout:e=>{const t=e.el;SitesJS.requestAPI(e.api,(function(r){t.querySelector(".loading-wrap").remove();const n=r.content;var s="";n.forEach(((t,r)=>{var n='"})),t.querySelector(".group-body").innerHTML=s}),(function(){try{t.querySelector(".loading-wrap svg").remove(),t.querySelector(".loading-wrap p").innerText("加载失败,请稍后重试。")}catch(e){}}))},start:e=>{const t=document.getElementsByClassName("sitesjs-wrap");for(var r=0;r0?(n-=1,setTimeout((function(){a()}),5e3)):e()}))}))}()},layout:function(r){var t=r.el;ContributorsJS.requestAPI(r.api,(function(e){t.querySelector(".loading-wrap").remove();var n="";(e||[]).forEach((function(t,e){var a='"})),t.querySelector(".group-body").innerHTML=n}),(function(){try{t.querySelector(".loading-wrap svg").remove(),t.querySelector(".loading-wrap p").innerText("加载失败,请稍后重试。")}catch(r){}}))},start:function(){for(var r=document.getElementsByClassName("contributorsjs-wrap"),t=0;t0?(n-=1,setTimeout((function(){a()}),5e3)):t()}))}))}()},layout:function(e){var r=e.el;FriendsJS.requestAPI(e.api,(function(t){r.querySelector(".loading-wrap").remove();var n=t.content,a="";n.forEach((function(r,t){var n='"})),r.querySelector(".group-body").innerHTML=a}),(function(){try{r.querySelector(".loading-wrap svg").remove(),r.querySelector(".loading-wrap p").innerText("加载失败,请稍后重试。")}catch(e){}}))},start:function(){for(var e=document.getElementsByClassName("friendsjs-wrap"),r=0;r0?(n-=1,setTimeout((function(){a()}),5e3)):r()}))}))}()},layout:function(t){var e=t.el;SitesJS.requestAPI(t.api,(function(r){e.querySelector(".loading-wrap").remove();var n=r.content,a="";n.forEach((function(e,r){var n='"})),e.querySelector(".group-body").innerHTML=a}),(function(){try{e.querySelector(".loading-wrap svg").remove(),e.querySelector(".loading-wrap p").innerText("加载失败,请稍后重试。")}catch(t){}}))},start:function(t){for(var e=document.getElementsByClassName("sitesjs-wrap"),r=0;r{RightMenu.hideMenu()}))}));const RightMenu=(()=>{const e={},t=$("#printHtml"),n=$("#menuDarkBtn"),o=$(".menuLoad-Content"),i=$("#rightmenu-wrapper")[0],r=$("#rightmenu-content")[0],c=$('.menu-Option[data-fn-type="copyText"]'),a=$('.menu-Option[data-fn-type="copyPaste"]'),s=$('.menu-Option[data-fn-type="copySelect"]'),l=$('.menu-Option[data-fn-type="copyCut"]'),d=$('.menu-Option[data-fn-type="copyHref"]'),h=$('.menu-Option[data-fn-type="copySrc"]'),u=$('.menu-Option[data-fn-type="copyImg"]'),g=$('.menu-Option[data-fn-type="openTab"]'),m=/^((https|http)?:\/\/)+[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;return e.init=()=>{$(".menu-Option").hide()},e.initEvent=()=>{window.document.oncontextmenu=t=>t.ctrlKey||$(window).width()<=500?(e.hideMenu(),!0):e.popMenu(t),i.oncontextmenu=e=>(e.stopPropagation(),e.preventDefault(),!1),$(window).off("click.rightMenu").on("click.rightMenu",(()=>{e.hideMenu()})),$(window).off("blur.rightMenu").on("blur.rightMenu",(()=>{e.hideMenu()})),$(i).off("blur.rightMenu").on("blur.rightMenu",(()=>{e.hideMenu()}))},e.popMenu=t=>{let n=t.clientX,o=t.clientY,c=document.documentElement.clientWidth||document.body.clientWidth,a=document.documentElement.clientHeight||document.body.clientHeight;try{e.setMenuItem(t),$(i).focus(),i.style.display="block",i.style.zIndex="-2147483648";let s=r.offsetWidth,l=r.offsetHeight,d=n+s>c?n-s+10:n,h=o+l>a?o-l+10:o;h=o+l>a&&h{let r=!1;const p=i.target,f=window.getSelection().toString();if(g.hide(),n&&n.off("click.rightMenu").one("click.rightMenu",(e=>{n.children().toggleClass("<%= theme.rightmenu.darkmode.dark %>"),n.children().toggleClass("<%= theme.rightmenu.darkmode.white %>")})),$(p).is("input")||$(p).is("textarea")){const t=$(p).val();t.length>0?(s.show(),s.off("click.rightMenu").one("click.rightMenu",(()=>{$(p).select()}))):s.hide(),f?(l.show(),l.off("click.rightMenu").one("click.rightMenu",(()=>{const n=p.selectionStart,o=p.selectionEnd;e.copyString(f),$(p).val(t.substring(0,n)+t.substring(o,t.length)),p.selectionStart=n,p.selectionEnd=n,$(p).focus()}))):l.hide(),e.readClipboard().then((t=>{t?(a.show(),a.off("click.rightMenu").one("click.rightMenu",(()=>{e.insertAtCaret($(p),t)}))):a.hide()})).catch((e=>{console.error(e),a.hide()}))}else s.hide(),a.hide(),l.hide();const w=p.href;w&&m.test(w)?(r=!0,d.show(),g.show(),d.off("click.rightMenu").one("click.rightMenu",(()=>{e.copyString(w)})),g.off("click.rightMenu").one("click.rightMenu",(()=>{window.open(w)}))):d.hide();const y=p.currentSrc;y&&m.test(y)?(r=!0,h.show(),g.show(),h.off("click.rightMenu").one("click.rightMenu",(()=>{e.copyString(y)})),g.off("click.rightMenu").one("click.rightMenu",(()=>{window.open(y)}))):h.hide(),y&&m.test(y)&&y.trimEnd().endsWith(".png")?(r=!0,u.show(),u.off("click.rightMenu").one("click.rightMenu",(()=>{e.writeClipImg(i,(()=>{volantis.message("操作提示","复制成功!","success")}),(e=>{volantis.message("操作提示","复制失败:"+e,"error")}))}))):u.hide(),f?(r=!0,c.show(),c.off("click.rightMenu").one("click.rightMenu",(()=>{e.copyString(f)}))):c.hide();const M=$("#post.article").html()||null,b=window.location.pathname;M?(t.show(),t.off("click.rightMenu").one("click.rightMenu",(t=>{window.location.pathname===b?e.printHtml():e.hideMenu()}))):t.hide(),r?o.hide():o.show(),1==volantis.rightMenu.music&&volantis.APlayerController.APlayerLoaded&&MainAPlayer.checkAPlayer()},e.hideMenu=()=>{i.style.display="none"},e.copyString=t=>{e.writeClipText(t).then((()=>{volantis.message("操作提示",t.length>120?t.substring(0,120)+"...":t,"info")})).catch((e=>{volantis.message("操作提示",e,"error")}))},e.writeClipText=e=>{try{return navigator.clipboard.writeText(e).then((()=>Promise.resolve())).catch((e=>Promise.reject(e)))}catch(t){const n=document.createElement("input");n.setAttribute("readonly","readonly"),document.body.appendChild(n),n.setAttribute("value",e),n.select();try{let e=document.execCommand("copy");return document.body.removeChild(n),e&&"unsuccessful"!==e?Promise.resolve():Promise.reject("复制文本失败!")}catch(e){return document.body.removeChild(n),Promise.reject("当前浏览器不支持复制功能,请检查更新或更换其他浏览器操作!")}}},e.writeClipImg=async function(e,t,n){const o=e.target.currentSrc,i=e.target.parentElement;try{const e=await fetch(o),i=await e.blob();await navigator.clipboard.write([new ClipboardItem({[i.type]:i})]).then((()=>{t()}),(e=>{console.error("图片复制失败:",e),n(e)}))}catch(e){const o=document;try{if(o.body.createTextRange){const e=document.body.createTextRange();e.moveToElementText(i),e.select()}else if(window.getSelection){const e=window.getSelection(),t=document.createRange();t.selectNodeContents(i),e.removeAllRanges(),e.addRange(t)}document.execCommand("copy"),window.getSelection().removeAllRanges(),t()}catch(e){console.error(e),n("不支持复制当前图片!")}}},e.readClipboard=async()=>{const e=await navigator.permissions.query({name:"clipboard-read"});return"granted"===e.state||"prompt"===e.state?navigator.clipboard.readText().then((e=>e)).catch((e=>Promise.reject(e))):Promise.reject(e)},e.insertAtCaret=(e,t)=>{const n=e[0],o=n.selectionStart,i=n.selectionEnd;if(document.selection)e.focus(),document.selection.createRange().text=t,e.focus();else if(o||"0"==o){var r=n.scrollTop;n.value=n.value.substring(0,o)+t+n.value.substring(i,n.value.length),e.focus(),n.selectionStart=o+t.length,n.selectionEnd=o+t.length,n.scrollTop=r}else e.value+=t,e.focus()},e.printHtml=()=>{volantis.isReadModel&&e.readingModel(),!0===volantis.rightMenu.defaultStyles&&($("body").css({backgroundColor:"unset"}),$("#l_header").hide(),$("#l_cover").hide(),$("#l_side").hide(),$("#l_main").css({width:"100%"}),$("#post").css({"box-shadow":"none",background:"none",padding:"0"}),$("h1").css({"text-align":"center","font-weight":"600","font-size":"2rem","margin-bottom":"20px"}),$(".prev-next").hide(),$("#bottom").children().append('"),$("#comments").hide(),$("#s-top").hide(),$("footer").hide(),$("#rightmenu-wrapper").hide(),$("details").attr("open","true"),$(".tab-pane").css({display:"block"}),$(".tab-content").css({"border-top":"none"}),$(".highlight>table pre").css({"white-space":"pre-wrap","word-break":"break-all"}),$(".nav-tabs").hide(),$(".backstretch").hide(),$(".fancybox img").css({height:"auto",weight:"auto"}),$("#common_bkg").hide(),$("img").removeAttr("srcset data-srcset").removeClass("img lazyload loaded")),!0===volantis.rightMenu.printJs&&volantis.rightMenu.printJsFun(),$(document).click(),setTimeout((()=>{window.print(),document.body.innerHTML="",window.location.reload()}),50)},{init:(t=!1)=>{e.init(),e.initEvent(),t&&volantis.message("操作提示","自定义右键注册成功。","success")},destroy:(t=!1)=>{e.hideMenu(),$(window).off("click.rightMenu"),$(window).off("blur.rightMenu"),$(i).off("blur.rightMenu"),window.document.oncontextmenu=()=>!0,t&&volantis.message("操作提示","自定义右键注销成功。","success")},hideMenu:()=>{e.hideMenu()}}})();Object.freeze(RightMenu); \ No newline at end of file diff --git a/js/search/algolia.js b/js/search/algolia.js index 4f7ba2ef07..f165ceee89 100644 --- a/js/search/algolia.js +++ b/js/search/algolia.js @@ -1 +1,2 @@ -var AlgoliaSearch,SearchService="";!function(a){SearchService=function(e){var t=this;t.config=a.extend({per_page:10,selectors:{body:"body",form:".u-search-form",input:".u-search-input",container:"#u-search",modal:"#u-search .modal",modal_body:"#u-search .modal-body",modal_footer:"#u-search .modal-footer",modal_overlay:"#u-search .modal-overlay",modal_results:"#u-search .modal-results",modal_metadata:"#u-search .modal-metadata",modal_error:"#u-search .modal-error",modal_loading_bar:"#u-search .modal-loading-bar",modal_ajax_content:"#u-search .modal-ajax-content",modal_logo:"#u-search .modal-footer .logo",btn_close:"#u-search .btn-close",btn_next:"#u-search .btn-next",btn_prev:"#u-search .btn-prev"},brands:{hexo:{logo:"",url:""},google:{logo:"google.svg",url:"https://cse.google.com"},algolia:{logo:"algolia.svg",url:"https://www.algolia.com"},baidu:{logo:"baidu.svg",url:"http://zn.baidu.com/cse/home/index"},azure:{logo:"azure.svg",url:"https://azure.microsoft.com/en-us/services/search/"}},imagePath:"https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@master/img/logo/"},e),t.dom={},t.percentLoaded=0,t.open=!1,t.queryText="",t.nav={next:-1,prev:-1,total:0,current:1},t.parseSelectors=function(){for(var o in t.config.selectors)t.dom[o]=a(t.config.selectors[o])},t.beforeQuery=function(){t.open||t.dom.container.fadeIn(),t.dom.input.each((function(o,e){a(e).val(t.queryText)})),document.activeElement.blur(),t.dom.modal_error.hide(),t.dom.modal_ajax_content.removeClass("loaded"),t.startLoading()},t.afterQuery=function(){t.dom.modal_body.scrollTop(0),t.dom.modal_ajax_content.addClass("loaded"),t.stopLoading()},t.search=function(a,o){t.beforeQuery(),t.search instanceof Function?t.query(t.queryText,a,(function(){t.afterQuery()})):(console.log("query() does not exist."),t.onQueryError(t.queryText,""),t.afterQuery())},t.onQueryError=function(a,o){var e="";e="success"===o?'No result found for "'+a+'".':"timeout"===o?"Unfortunate timeout.":"Mysterious failure.",t.dom.modal_results.html(""),t.dom.modal_error.html(e),t.dom.modal_error.show()},t.nextPage=function(){-1!==t.nav.next&&t.search(t.nav.next)},t.prevPage=function(){-1!==t.nav.prev&&t.search(t.nav.prev)},t.getUrlRelativePath=function(a){var o=a.split("//"),e=o[1].indexOf("/"),t=o[1].substring(e);return-1!=t.indexOf("?")&&(t=t.split("?")[0]),t},t.buildResult=function(a,o,e){var n="";return n="
  • ",n+="",n+=""+o+"",""!==e&&(n+=""+e+""),n+="",n+="
  • "},t.close=function(){t.open=!1,t.dom.container.fadeOut(),t.dom.body.removeClass("modal-active")},t.onSubmit=function(o){o.preventDefault(),t.queryText=a(this).find(".u-search-input").val(),t.queryText&&t.search(1)},t.startLoading=function(){t.dom.modal_loading_bar.show(),t.loadingTimer=setInterval((function(){t.percentLoaded=Math.min(t.percentLoaded+5,95),t.dom.modal_loading_bar.css("width",t.percentLoaded+"%")}),100)},t.stopLoading=function(){clearInterval(t.loadingTimer),t.dom.modal_loading_bar.css("width","100%"),t.dom.modal_loading_bar.fadeOut(),setTimeout((function(){t.percentLoaded=0,t.dom.modal_loading_bar.css("width","0%")}),300)},t.addLogo=function(a){var o="";t.config.brands[a]&&t.config.brands[a].logo&&(o+="",o+='',o+="",t.dom.modal_logo.html(o))},t.destroy=function(){t.dom.form.each((function(o,e){a(e).off("submit")})),t.dom.modal_overlay.off("click"),t.dom.btn_close.off("click"),t.dom.btn_next.off("click"),t.dom.btn_prev.off("click"),t.dom.container.remove()},t.init=function(){a("body").append(o),t.parseSelectors(),t.dom.modal_footer.show(),t.dom.form.each((function(o,e){a(e).on("submit",t.onSubmit)})),t.dom.modal_overlay.on("click",t.close),t.dom.btn_close.on("click",t.close),t.dom.btn_next.on("click",t.nextPage),t.dom.btn_prev.on("click",t.prevPage)},t.init()};var o=''}(jQuery),function(a){"use strict";AlgoliaSearch=function(o){SearchService.apply(this,arguments);var e=this,t="https://"+e.config.appId+"-dsn.algolia.net/1/indexes/"+e.config.indexName;return e.addLogo("algolia"),e.buildResultList=function(o){var t="";return a.each(o,(function(a,o){var n=o.permalink||o.path||"";!o.permalink&&o.path&&(n=ROOT+n);var r=o.title;t+=e.buildResult(n,r,"",a+1)})),t+="


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


    开始使用

    评论

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


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


    开始使用

    评论

    \ No newline at end of file diff --git a/news/2020-02-18/index.html b/news/2020-02-18/index.html index f82607087f..3381379269 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 ac9e5891ce..e1de188f84 100644 --- a/news/2020-02-19/index.html +++ b/news/2020-02-19/index.html @@ -1 +1 @@ -版本命名规范化 - Volantis

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

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

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

    评论

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

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

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

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

    评论

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

    使用 GitHub Issue

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

    遇到问题怎么办

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

    评论

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

    使用 GitHub Issue

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

    遇到问题怎么办

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

    评论

    \ No newline at end of file diff --git a/news/2020-02-21/index.html b/news/2020-02-21/index.html index 1875ebe5c5..4b4eed5174 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 414d251260..1f2c4ce33d 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 48c630cb4c..824719022f 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 2c5fbde4bf..ef35f446c9 100644 --- a/news/2020-03-06-2.0-beta/index.html +++ b/news/2020-03-06-2.0-beta/index.html @@ -1,11 +1,11 @@ -新版本「2.0」测试版发布 - Volantis新版本「2.0」测试版发布 - Volantis
    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

    评论

    \ 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 a6c18d5882..8eb24d6388 100644 --- a/news/2020-03-10-2.0/index.html +++ b/news/2020-03-10-2.0/index.html @@ -1,21 +1,25 @@ -新版本「2.0」正式版发布 - Volantis新版本「2.0」正式版发布 - Volantis

    本次更新内容非常多,主要升级了导航栏、使用新的语言重写了全部样式。旧版本 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.4css文件体积缩小了19.75%

    主题配置文件

    • 主题配置文件经过了较大改动,使得层级结构更加清晰。
    • 优化了二维码(微信)分享的使用体验

    评论

    \ No newline at end of file diff --git a/news/2020-04-04/index.html b/news/2020-04-04/index.html index 180a2385bd..142b7bf35f 100644 --- a/news/2020-04-04/index.html +++ b/news/2020-04-04/index.html @@ -1,14 +1,14 @@ -关于主题与文档的更新 - Volantis关于主题与文档的更新 - Volantis

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

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

    评论

    \ No newline at end of file diff --git a/page-sitemap.xml b/page-sitemap.xml index a52847bf25..9c84ae0e77 100644 --- a/page-sitemap.xml +++ b/page-sitemap.xml @@ -10,8 +10,8 @@ - https://volantis.js.org/v5/advanced-settings/ - 2021-05-17T08:08:37.083Z + https://volantis.js.org/contributors/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -19,8 +19,8 @@ - https://volantis.js.org/v5/development-api/ - 2021-05-17T08:08:37.083Z + https://volantis.js.org/examples/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -28,8 +28,8 @@ - https://volantis.js.org/v5/getting-started/ - 2021-05-17T08:08:37.083Z + https://volantis.js.org/faqs/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -37,8 +37,8 @@ - https://volantis.js.org/v5/page-settings/ - 2021-05-17T08:08:37.083Z + https://volantis.js.org/how-to-update/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -46,8 +46,8 @@ - https://volantis.js.org/v5/site-settings/ - 2021-05-17T08:08:37.083Z + https://volantis.js.org/blog/categories/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -55,8 +55,8 @@ - https://volantis.js.org/v4/tag-plugins/ - 2021-05-17T08:08:37.083Z + https://volantis.js.org/blog/tags/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -64,8 +64,44 @@ - https://volantis.js.org/v5/tag-plugins/ - 2021-05-17T08:08:37.083Z + https://volantis.js.org/v4/advanced-settings/ + 2024-03-28T06:49:35.000Z + weekly + 0.8 + + + + + + https://volantis.js.org/v4/getting-started/ + 2024-03-28T06:49:35.000Z + weekly + 0.8 + + + + + + https://volantis.js.org/v4/page-settings/ + 2024-03-28T06:49:35.000Z + weekly + 0.8 + + + + + + https://volantis.js.org/v4/site-settings/ + 2024-03-28T06:49:35.000Z + weekly + 0.8 + + + + + + https://volantis.js.org/v4/tag-plugins/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -74,7 +110,70 @@ https://volantis.js.org/v4/theme-settings/ - 2021-05-17T08:08:37.083Z + 2024-03-28T06:49:35.000Z + weekly + 0.8 + + + + + + https://volantis.js.org/v5/advanced-settings/ + 2024-03-28T06:49:35.000Z + weekly + 0.8 + + + + + + https://volantis.js.org/v5/development-api/ + 2024-03-28T06:49:35.000Z + weekly + 0.8 + + + + + + https://volantis.js.org/v5/faq/ + 2024-03-28T06:49:35.000Z + weekly + 0.8 + + + + + + https://volantis.js.org/v5/getting-started/ + 2024-03-28T06:49:35.000Z + weekly + 0.8 + + + + + + https://volantis.js.org/v5/page-settings/ + 2024-03-28T06:49:35.000Z + weekly + 0.8 + + + + + + https://volantis.js.org/v5/site-settings/ + 2024-03-28T06:49:35.000Z + weekly + 0.8 + + + + + + https://volantis.js.org/v5/tag-plugins/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -83,7 +182,7 @@ https://volantis.js.org/v5/theme-settings/ - 2021-05-17T08:08:37.083Z + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -91,8 +190,8 @@ - https://volantis.js.org/v4/advanced-settings/ - 2021-05-17T08:08:37.079Z + https://volantis.js.org/v6/advanced-settings/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -100,8 +199,8 @@ - https://volantis.js.org/v4/getting-started/ - 2021-05-17T08:08:37.079Z + https://volantis.js.org/v6/development-api/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -109,8 +208,8 @@ - https://volantis.js.org/v4/page-settings/ - 2021-05-17T08:08:37.079Z + https://volantis.js.org/v6/faq/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -118,8 +217,8 @@ - https://volantis.js.org/v4/site-settings/ - 2021-05-17T08:08:37.079Z + https://volantis.js.org/v6/getting-started/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -127,8 +226,8 @@ - https://volantis.js.org/contributors/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/v6/page-settings/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -136,8 +235,8 @@ - https://volantis.js.org/examples/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/v6/site-settings/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -145,8 +244,8 @@ - https://volantis.js.org/faqs/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/v6/tag-plugins/ + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -154,8 +253,8 @@ - https://volantis.js.org/blog/categories/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/v6/tag-plugins/no-pjax + 2024-03-28T06:49:35.000Z weekly 0.8 @@ -163,8 +262,8 @@ - https://volantis.js.org/blog/tags/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/v6/theme-settings/ + 2024-03-28T06:49:35.000Z weekly 0.8 diff --git a/page/2/index.html b/page/2/index.html index 0f3680e040..809149dd9e 100644 --- a/page/2/index.html +++ b/page/2/index.html @@ -1 +1 @@ -Volantis
    如何给博客添加弹窗通知 || 'image'

    如何给博客添加弹窗通知

    博客访问速度提升:最佳线路分流 || 'image'

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

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

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

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

    给 Volantis 主题调用 Valine 最新评论 || 'image'

    给 Volantis 主题调用 Valine 最新评论

    给博客加上最新评论栏目。以 Volantis 主题为例,给侧边栏加上最新评论功能,实现整站调用。

    给 Hexo Volantis 主题添加图片轮播功能

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

    如何快速优雅地删除 Valine 的垃圾评论

    Valine 评论由于可以匿名,发言成本低、质量低,使用 app 可以方便的删除垃圾评论。

    Volantis 主题部署 Pjax

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

    关于主题与文档的更新

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

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

    新版本「2.0」正式版发布

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

    1. 卸载 less

      npm uninstall hexo-renderer-less --save
    2. 安装 stylus

      npm install hexo-renderer-stylus --save

    新版本「2.0」测试版发布

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

    \ No newline at end of file +Volantis

    这不是Node.js包!

    这是个javascript的小工具?

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

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

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

    Volantis 主题可直接参考使用。

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

    Volantis 主题个性化修改合集

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

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

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

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

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

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

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


    \ No newline at end of file diff --git a/page/3/index.html b/page/3/index.html index 40ae43b7da..bc16203662 100644 --- a/page/3/index.html +++ b/page/3/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

    新增 pjax 开发分支

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

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

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

    官方资讯

    主题更名为「Volantis」

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

    官方资讯

    主题文档网页更新并开源

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

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

    官方资讯

    已关闭评论区

    使用 GitHub Issue

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

    遇到问题怎么办

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

    版本命名规范化

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

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

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

    心率测量工具限免活动

    心率管家 App(仅iOS端),专业版不定期限免,欢迎下载体验。

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

    官方资讯

    Code Highlight Style test

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

    Markdown Style test || 'image'

    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 +Volantis

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

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

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

    哔哔!换个姿势在静态博客上发短博文(volantis适配版)

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

    Hexo 标签函数 list_tags 用法详解

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

    如何给博客添加弹窗通知

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

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

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

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

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


    \ No newline at end of file diff --git a/page/4/index.html b/page/4/index.html index 0892ca8237..7bd6411240 100644 --- a/page/4/index.html +++ b/page/4/index.html @@ -1 +1 @@ -Volantis

    Images

    This is a image test post.

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

    Excerpts

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

    Videos

    This is a video test post.

    Youtube

    Vimeo

    Gallery Post

    This post contains 4 photos:

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

    All photos should be displayed properly.

    Tag Plugins

    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.

    www.google.com

    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

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.

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


    \ No newline at end of file +Volantis

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

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

    本次更新内容非常多,主要升级了导航栏、使用新的语言重写了全部样式。旧版本 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

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

    • 不能使用封面
    • 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/page/5/index.html b/page/5/index.html index 2f726f7613..aec17b363b 100644 --- a/page/5/index.html +++ b/page/5/index.html @@ -1 +1 @@ -Volantis

    Link Post

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

    Elements

    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.

    Hello World

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


    \ No newline at end of file +Volantis

    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.

    This is a image test post.

    测试 设定列数

    This is a image test post.

    测试 没有设定列数

    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


    \ No newline at end of file diff --git a/page/6/index.html b/page/6/index.html new file mode 100644 index 0000000000..de2a5b7a2d --- /dev/null +++ b/page/6/index.html @@ -0,0 +1 @@ +Volantis

    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.

    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.


    \ No newline at end of file diff --git a/post-sitemap.xml b/post-sitemap.xml index d88eaa45ad..352db82b6f 100644 --- a/post-sitemap.xml +++ b/post-sitemap.xml @@ -9,128 +9,168 @@ - https://volantis.js.org/blogs/2020-07-03-valine/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/news/2017-10-24/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/blogs/2021-2-30-slider/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/news/2020-02-18/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/blogs/2021-3-31-highlightjs/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/news/2020-02-19/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/blogs/2021-3-7-framei8/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/news/2020-02-20/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/blogs/2021-4-1-hls/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/news/2020-02-21/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/blogs/2021-4-14-photos/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/news/2020-02-22/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/news/2017-10-24/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/news/2020-02-25/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/news/2020-02-18/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/news/2020-03-06-2.0-beta/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/news/2020-02-19/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/news/2020-03-10-2.0/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/news/2020-02-20/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/news/2020-04-04/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/news/2020-02-21/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/blogs/2021-09-02-inkss-font/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/news/2020-02-22/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/blogs/2021-2-30-slider/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/news/2020-02-25/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/blogs/2021-3-31-highlightjs/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/news/2020-03-06-2.0-beta/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/blogs/2021-3-7-framei8/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/news/2020-03-10-2.0/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/blogs/2021-4-1-hls/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/news/2020-04-04/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/blogs/2021-4-14-photos/ + 2024-03-28T06:49:35.000Z + weekly + 0.6 + + + + + https://volantis.js.org/blogs/2022-07-09-pandownjs/ + 2024-03-28T06:49:35.000Z + weekly + 0.6 + + + + + https://volantis.js.org/blogs/2023-09-03-lazyload/ + 2024-03-28T06:49:35.000Z + weekly + 0.6 + + + + + https://volantis.js.org/blogs/2023-10-01-enhanced-cdn/ + 2024-03-28T06:49:35.000Z + weekly + 0.6 + + + + + https://volantis.js.org/blogs/2023-11-08-NS1-failover/ + 2024-03-28T06:49:35.000Z + weekly + 0.6 + + + + + https://volantis.js.org/blogs/2024-03-15-enhanced-FaaS-in-cn/ + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -138,7 +178,7 @@ https://volantis.js.org/test/2020-03-06-test-url/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -146,7 +186,7 @@ https://volantis.js.org/test/code-highlight/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -154,7 +194,7 @@ https://volantis.js.org/test/elements/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -162,7 +202,7 @@ https://volantis.js.org/test/excerpts/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -170,7 +210,7 @@ https://volantis.js.org/test/gallery-post/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -202,7 +242,7 @@ https://volantis.js.org/test/hello-world/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -210,7 +250,7 @@ https://volantis.js.org/test/images/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -218,7 +258,7 @@ https://volantis.js.org/test/link-post-without-title/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -226,7 +266,7 @@ https://volantis.js.org/test/link-post/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -234,7 +274,7 @@ https://volantis.js.org/test/long-title/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -242,7 +282,7 @@ https://volantis.js.org/test/markdown/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -250,7 +290,7 @@ https://volantis.js.org/test/no-title/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z weekly 0.6 @@ -258,47 +298,111 @@ https://volantis.js.org/test/tag-plugins/ - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z + weekly + 0.6 + + + + + https://volantis.js.org/test/%E4%B8%AD%E6%96%87%E6%B8%AC%E8%A9%A6/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/test/videos/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/test/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%86%E3%82%B9%E3%83%88/ + 2024-03-28T06:49:35.000Z weekly 0.6 - https://volantis.js.org/test/%E4%B8%AD%E6%96%87%E6%B8%AC%E8%A9%A6/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/blogs/2023-05-10-hexo-volantis-snippets/ + 2023-05-10T00:00:00.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/ - 2021-05-17T08:08:37.075Z + https://volantis.js.org/blogs/2023-1-18-LocalMusic/ + 2023-01-18T00:00:00.000Z weekly 0.6 - https://volantis.js.org/blogs/2021-4-18-pandoc-renderer/ - 2021-04-18T00:00:00.000Z + https://volantis.js.org/blogs/2023-01-07-VolantisModify/ + 2023-01-17T00:00:00.000Z weekly 0.6 - https://volantis.js.org/blogs/2021-2-19-hexo-supports-sweetalert/ - 2021-02-19T00:00:00.000Z + https://volantis.js.org/blogs/2022-12-26-GiteeFriendsLink/ + 2022-12-26T00:00:00.000Z + weekly + 0.6 + + + + + https://volantis.js.org/blogs/2022-12-06-experience/ + 2022-12-06T00:00:00.000Z + weekly + 0.6 + + + + + https://volantis.js.org/blogs/2022-08-18-darkmode-new/ + 2022-08-18T00:00:00.000Z + weekly + 0.6 + + + + + https://volantis.js.org/blogs/2021-11-29-parallax/ + 2022-04-20T00:00:00.000Z + weekly + 0.6 + + + + + https://volantis.js.org/blogs/2021-8-29-darkmode/ + 2021-08-25T00:00:00.000Z + weekly + 0.6 + + + + + https://volantis.js.org/blogs/2021-08-15-inkss-theme/ + 2021-08-15T00:00:00.000Z + weekly + 0.6 + + + + + https://volantis.js.org/blogs/2021-08-13-sponsor-page/ + 2021-08-13T00:00:00.000Z + weekly + 0.6 + + + + + https://volantis.js.org/blogs/2021-4-18-pandoc-renderer/ + 2021-04-18T00:00:00.000Z weekly 0.6 @@ -336,14 +440,6 @@ - - https://volantis.js.org/blogs/2020-09-03-latest-comments/ - 2020-09-03T00:00:00.000Z - weekly - 0.6 - - - https://volantis.js.org/blogs/2020-08-31-hexospeed/ 2020-08-31T00:00:00.000Z @@ -369,7 +465,7 @@ - https://volantis.js.org/blogs/2020-05-17-pjax/ + https://volantis.js.org/blogs/2020-05-17-inkss-pjax/ 2020-08-07T00:00:00.000Z weekly 0.6 diff --git a/search.xml b/search.xml deleted file mode 100644 index 87e41761fe..0000000000 --- a/search.xml +++ /dev/null @@ -1,736 +0,0 @@ - - - - - - - 使用 pandoc 正确渲染多行 MathJax 公式 - - blogs/2021-4-18-pandoc-renderer/ - - - - - - - 开发心得 - - - - - - - - - - 为volantis添加瀑布流相册 - - blogs/2021-4-14-photos/ - - 经过折腾,目前相册功能可用了,就是还不支持分类和懒加载,等后续完善吧。

    ]]>
    - - - - - 进阶玩法 - - - - -
    - - - - - 为volantis添加hls.js以在Chrome上播放m3u8视频 - - blogs/2021-4-1-hls/ - - 在文章中插入m3u8视频的时候,由于Chrome等浏览器原生播放不了这种格式,所以需要添加hls.js等让其支持播放,如果你也遇到了这样的问题就来看看吧。

    ]]>
    - - - - - 进阶玩法 - - - - -
    - - - - - volantis主题修改代码高亮样式 - - blogs/2021-3-31-highlightjs/ - - 在使用主题内的highlightjs的时候,你是否也遇到了它不换行、没有行号等问题?点进来看看吧。

    ]]>
    - - - - - 进阶玩法 - - - - -
    - - - - - 为volantis主题添加图片轮播和热门文章 - - blogs/2021-2-30-slider/ - - 这篇教程是基于heson大佬的这篇 给Hexo Volantis主题添加图片轮播功能 创作的,由我将新的轮播模板迁移至主题内,由inkss大佬完善。在这感谢两位大佬,如果你也需要轮播插件,就进来看看吧。

    ]]>
    - - - - - 进阶玩法 - - - - -
    - - - - - 使用volantis更优雅地展示截图/录屏 - - blogs/2021-3-7-framei8/ - - 我在主题文档中看到了frame标签,可以更高大上得展示我们的截图/录屏等。可是目前主题内仅内置了一个iPhone11的框架,想要使用其他的框架就得对齐修改,我经过折腾基本实现了,写下了这篇文章。

    ]]>
    - - - - - 进阶玩法 - - - - -
    - - - - - 为 hexo 博客支持 sweetalert 弹窗 - - blogs/2021-2-19-hexo-supports-sweetalert/ - - - - - - - 进阶玩法 - - - - - - - - - - 通过CoolPush实时推送hexo评论到QQ - - blogs/2020-12-17-comments-push/ - - - - - - - 进阶玩法 - - - - - - - - - - 哔哔!换个姿势在静态博客上发短博文(volantis适配版) - - blogs/2020-10-09-bb-on-volantis/ - - 要在静态博客上发送短博文,不像 wordpress 和 typecho 新建个栏目那么简单。之前博客整的是 artitalk,已经有短博文的那种体验了,而且还能支持发送 markdown、图片、音乐等等功能。感觉唯一的缺点就是:发文不是很方便,需要在博客上登陆。(至少我觉得很麻烦)。后来看到 @熊野 的那篇《哔哔点啥,换个舒服的姿势》,顿时感觉爱了,这就是我梦寐以求发送短博文的姿势。

    ]]>
    - - - - - 进阶玩法 - - - - -
    - - - - - Hexo 标签函数 list_tags 用法详解 - - blogs/2020-09-24-list-tags/ - - - - - - - 开发心得 - - - - - - - - - - 如何给博客添加弹窗通知 - - blogs/2020-09-03-message-prompt/ - - - - - - - 进阶玩法 - - - - - - - - - - 博客访问速度提升:最佳线路分流 - - blogs/2020-08-31-hexospeed/ - - - - - - - 进阶玩法 - - - - - - - - - - 静态博客使用 Issues API 发布动态、友链、书签 - - blogs/2020-08-28-issue-api/ - - - - - - - 进阶玩法 - - - - - - - - - - 给 Volantis 主题调用 Valine 最新评论 - - blogs/2020-09-03-latest-comments/ - - - - - - - 进阶玩法 - - - - - - - - - - 给 Hexo Volantis 主题添加图片轮播功能 - - blogs/2020-08-21-main-banner/ - - - - - - - 进阶玩法 - - - - - - - - - - 如何快速优雅地删除 Valine 的垃圾评论 - - blogs/2020-07-03-valine/ - - Valine 评论由于可以匿名,发言成本低、质量低,使用 app 可以方便的删除垃圾评论。

    操作演示

    App 只支持数据存储于 LeanCloud 的评论系统。

    App 登录前需要配置 AppID 和 AppKey,由于字符比较长,输入不方便,所以支持 URL Scheme 配置。将 URL 生成一个二维码,然后用手机扫码就可以打开 App 并自动配置好。

    格式为:

    valine://cfg/id=7yIoRlSmfX09vQCERsuWzFnx-MdYXbMMI&key=3zCL5GFePTUjwbqLop44QFbr&alias=测试项目

    也可以把管理员用户的账号和密码配置上,扫码直接登录,但是注意不要泄露出去:

    valine://cfg/id=7yIoRlSmfX09vQCERsuWzFnx-MdYXbMMI&key=3zCL5GFePTUjwbqLop44QFbr&alias=测试项目&user=me@xaoxuu.com&psw=q

    注意:这个管理员用户并不是 LeanCloud 的账号,而是当前 Valine 数据库中的 _User 表中的一个用户,可以在 App 中注册,然后在 LeanCloud 上把注册的用户设置为管理员。

    设置管理员的方法:在 _Role 表中新建一个 admin 角色,然后在 admin 角色的 users 列中点击 Relations 把自己刚注册的用户添加进去,这个用户就有了修改和删除评论数据的权限。

    App 测试版地址

    ]]>
    - - - - - 进阶玩法 - - - - -
    - - - - - Volantis 主题部署 Pjax - - blogs/2020-05-17-pjax/ - - - - - - - 开发心得 - - - - - - - - - - 关于主题与文档的更新 - - news/2020-04-04/ - - 由于主题目前仍处于青少年阶段,更新迭代速度比较快,所以不会保留旧版本的文档,如果需要查看旧版本的文档,请下载主题文档的源码,回退到旧版本,本地运行查看。

    • 计划 2.x 的最后一个版本的文档会保留至 5.0 发布时,即最终会同时维护3个大版本的文档。
    • 当主题稳定后会提供英文文档。
    ]]>
    - - - - - 官方资讯 - - - - -
    - - - - - 新版本「2.0」正式版发布 - - news/2020-03-10-2.0/ - - 本次更新内容非常多,主要升级了导航栏、使用新的语言重写了全部样式。旧版本 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.4css文件体积缩小了19.75%

    主题配置文件

    • 主题配置文件经过了较大改动,使得层级结构更加清晰。
    • 优化了二维码(微信)分享的使用体验
    ]]>
    - - - - - 官方资讯 - - - - -
    - - - - - 新版本「2.0」测试版发布 - - news/2020-03-06-2.0-beta/ - - 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

    ]]>
    - - - - - 官方资讯 - - - - -
    - - - - - 测试「文章内链接作文本的话无法生成静态文件」 - - test/2020-03-06-test-url/ - - 5、测试Tomcat是否配置成功:打开浏览器,输入在地址栏中输入: http://localhost:8080 的运行结果如下图即为即为配置成功!(因为Tomcat已经在运行再次打开会报错)

    相关 Issue: #164

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

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

    ]]>
    - - - -
    - - - - - 新增 pjax 开发分支 - - news/2020-02-25/ - - 由于功能未完全兼容,如果想率先使用,尽量不要改主题配置文件。

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

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

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

    ]]>
    - - - - - 官方资讯 - - - - -
    - - - - - 主题文档网页更新并开源 - - news/2020-02-21/ - - 主题经过几年迭代,现已高度模块化和可定制化,功能相对完善,适合用作文档。原来的 文档主题 将不再维护和更新。

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

    ]]>
    - - - - - 官方资讯 - - - - -
    - - - - - 已关闭评论区 - - news/2020-02-20/ - - 使用 GitHub Issue

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

    遇到问题怎么办

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

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

    • 主版本号: 较大改动、框架调整或重构
    • 子版本号: 较小或局部的功能性更新
    • 修订版本号: 修复BUG或无关紧要的细节调整
    ]]>
    - - - - - 官方资讯 - - - - -
    - - - - - 心率测量工具限免活动 - - news/2020-02-18/ - -

    心率管家 App(仅iOS端),专业版不定期限免,欢迎下载体验。

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

    ]]>
    - - - - - 官方资讯 - - - - -
    - - - - - Code Highlight Style test - - test/code-highlight/ - - 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
    ]]>
    - - - -
    - - - - - Markdown Style test - - test/markdown/ - - 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://cdn.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

    ]]>
    - - - - - - Foo - - Bar - - - -
    - - - - - - - news/2017-10-24/ - -


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


    开始使用
    ]]>
    - - - - - 官方资讯 - - - - -
    - - - - - Images - - test/images/ - -

    This is a image test post.

    ]]>
    - - - -
    - - - - - - - test/no-title/ - - This post doesn't have a title. Make sure it's accessible.

    ]]>
    - - - -
    - - - - - Excerpts - - test/excerpts/ - - 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.

    ]]>
    - - - -
    - - - - - Videos - - test/videos/ - - This is a video test post.

    Youtube

    Vimeo

    ]]>
    - - - -
    - - - - - Gallery Post - - test/gallery-post/ - - This post contains 4 photos:

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

    All photos should be displayed properly.

    ]]>
    - - - -
    - - - - - Tag Plugins - - test/tag-plugins/ - - 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.

    ]]>
    - - - -
    - - - - - www.google.com - - test/link-post-without-title/ - - 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.

    ]]>
    - - - -
    - - - - - 日本語テスト - - test/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%86%E3%82%B9%E3%83%88/ - - This is a Japanese test post.

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

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

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

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

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

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

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

    ]]>
    - - - -
    - - - - - 中文測試 - - test/%E4%B8%AD%E6%96%87%E6%B8%AC%E8%A9%A6/ - - This is a Chinese test post.

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

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

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

    國新故。

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

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

    ]]>
    - - - -
    - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id. - - test/long-title/ - - This post has a long title. Make sure the title displayed right.

    ]]>
    - - - -
    - - - - - Link Post - - test/link-post/ - - This is a link post. Clicking on the link should open Google in a new tab or window.

    ]]>
    - - - -
    - - - - - Elements - - test/elements/ - - 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.

    ]]>
    - - - -
    - - - - - Hello World - - test/hello-world/ - - Welcome to Hexo! This is your very first post. Check documentation to learn how to use.

    ]]>
    - - - -
    - - - - -
    diff --git a/site.webmanifest b/site.webmanifest new file mode 100644 index 0000000000..afeb998480 --- /dev/null +++ b/site.webmanifest @@ -0,0 +1,20 @@ +{ + "name": "Volantis", + "short_name": "Volantis", + "icons": [ + { + "src": "https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "https://unpkg.com/volantis-static@0.0.1649552113628/media/org.volantis/blog/favicon/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone", + "start_url": "/index.html" +} \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 3e68ef1f07..e4c40a17c0 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -4,12 +4,12 @@ https://volantis.js.org/post-sitemap.xml - 2021-05-17T08:08:37.075Z + 2024-03-28T06:49:35.000Z https://volantis.js.org/page-sitemap.xml - 2021-05-17T08:08:37.083Z + 2024-03-28T06:49:35.000Z diff --git a/start b/start index cd31cfb118..51be79d310 100644 --- a/start +++ b/start @@ -1,3 +1,3 @@ #!/bin/bash -curl -s https://xaoxuu.com/install | bash -s hexo.sh && hexo.sh init && return +curl -s https://sh.xaox.cc/install | bash -s blog && blog init && return diff --git a/tags/bar/index.html b/tags/bar/index.html index 8a9b0d08ba..c8b60ad3d9 100644 --- a/tags/bar/index.html +++ b/tags/bar/index.html @@ -1 +1 @@ -标签:Bar - Volantis
    Markdown Style test || 'image'

    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 e93f514dd0..56824968c3 100644 --- a/tags/foo/index.html +++ b/tags/foo/index.html @@ -1 +1 @@ -标签:Foo - Volantis
    Markdown Style test || 'image'

    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 new file mode 100644 index 0000000000..30794b9399 --- /dev/null +++ b/tags/volantis/index.html @@ -0,0 +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 diff --git a/test/2020-03-06-test-url/index.html b/test/2020-03-06-test-url/index.html index 11d6051219..2ba3e2d09b 100644 --- a/test/2020-03-06-test-url/index.html +++ b/test/2020-03-06-test-url/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

    评论

    \ 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

    评论

    \ No newline at end of file diff --git a/test/code-highlight/index.html b/test/code-highlight/index.html index 58bb44525a..a4445b6123 100644 --- a/test/code-highlight/index.html +++ b/test/code-highlight/index.html @@ -1 +1 @@ -Code Highlight Style test - Volantis

    Volantis

    中文创作者社区

    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

    评论

    \ No newline at end of file +Code Highlight Style test - Volantis

    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;
    }

    评论

    \ No newline at end of file diff --git a/test/elements/index.html b/test/elements/index.html index 7832c8301e..19c39459e2 100644 --- a/test/elements/index.html +++ b/test/elements/index.html @@ -1 +1 @@ -Elements - 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.

    评论

    \ No newline at end of file +Elements - 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.

    评论

    \ No newline at end of file diff --git a/test/excerpts/index.html b/test/excerpts/index.html index 5f80d33174..48892e9d11 100644 --- a/test/excerpts/index.html +++ b/test/excerpts/index.html @@ -1 +1 @@ -Excerpts - Volantis

    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.

    评论

    \ No newline at end of file +Excerpts - Volantis

    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.

    评论

    \ No newline at end of file diff --git a/test/gallery-post/index.html b/test/gallery-post/index.html index da8c7060b7..d26a7ae020 100644 --- a/test/gallery-post/index.html +++ b/test/gallery-post/index.html @@ -1 +1 @@ -Gallery Post - Volantis

    This post contains 4 photos:

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

    All photos should be displayed properly.

    评论

    \ 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 4f4b81cf71..90c2177f01 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 4328f3209c..8589af799f 100644 --- a/test/images/index.html +++ b/test/images/index.html @@ -1 +1 @@ -Images - Volantis

    This is a image test post.

    评论

    \ 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 825ea06188..bbb5bdab02 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 +Volantis
    \ No newline at end of file diff --git a/test/link-post/index.html b/test/link-post/index.html index 71c81b7a9f..821c6809a5 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 4352636cbf..8441074feb 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 f97a1da946..9a87a83fee 100644 --- a/test/markdown/index.html +++ b/test/markdown/index.html @@ -1,3 +1,3 @@ -Markdown Style test - Volantis

    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

    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://cdn.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

    评论

    \ 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

    评论

    \ No newline at end of file diff --git a/test/no-title/index.html b/test/no-title/index.html index 559967fa53..f5b290cd86 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 a13f340c7c..cccebefccb 100644 --- a/test/tag-plugins/index.html +++ b/test/tag-plugins/index.html @@ -1 +1 @@ -Tag Plugins - Volantis

    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.

    评论

    \ No newline at end of file +Tag Plugins - Volantis

    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.

    评论

    \ No newline at end of file diff --git a/test/videos/index.html b/test/videos/index.html deleted file mode 100644 index f331f3cc58..0000000000 --- a/test/videos/index.html +++ /dev/null @@ -1 +0,0 @@ -Videos - Volantis
    \ 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 1172e65e0f..da6ac3cc1f 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

    This is a Chinese test post.

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

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

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

    國新故。

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

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

    评论

    \ No newline at end of file +中文測試 - Volantis

    This is a Chinese test post.

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

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

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

    國新故。

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

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

    评论

    \ 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 e905e27762..282d8089f5 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

    This is a Japanese test post.

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

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

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

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

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

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

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

    评论

    \ No newline at end of file +日本語テスト - Volantis

    This is a Japanese test post.

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

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

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

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

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

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

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

    评论

    \ No newline at end of file diff --git a/v2/advanced-settings/index.html b/v2/advanced-settings/index.html index b12bcb3f8d..0d4acb00f1 100644 --- a/v2/advanced-settings/index.html +++ b/v2/advanced-settings/index.html @@ -1 +1 @@ -进阶设定 - Volantis

    建议有一定基础知识的朋友进行尝试。

    将主题添加为子模块
    git submodule add https://github.com/volantis-x/hexo-theme-volantis themes/volantis

    为网站提速

    加载速度

    • 尝试安装 hexo-all-minifier 插件来压缩文件。

    • 减少不必要的 js 插件,例如字数统计、动态背景。

    • 查找并解决拖慢速度的资源,以 Chrome 浏览器为例:

      1. 页面中点击右键,选择「检查」。
      2. 在右边的窗口中「Network」选项卡,并勾选「Disable cache」。
      3. 刷新网页,查看加载速度慢的资源。
        1. 加载缓慢的图片,建议使用 CDN。
        1. 加载缓慢的可以不用的 js 插件,建议舍弃。
        1. 加载缓慢却必须使用的 js 插件,建议下载并自己上传至 jsdelivr。

    运行速度

    • 访问具有动态特效背景(如雪花、粒子等)的网站时,手机很快会发烫变卡,笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。

    • 强烈推荐安装 hexo-offline 插件,初次加载速度不变,后期切换页面和刷新网页速度越来越快。

    • 推荐安装图片懒加载插件 hexo-lazyload-image(需同时安装 hexo-fs 依赖库)。

    优化 SEO

    在 front-matter 中,可以设置 keywordsdescriptionrobotsseo_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]

    分析与统计

    默认支持 不蒜子 的访问统计,可以自行添加百度统计和 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 博客主题个性化》

    内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

    评论

    \ No newline at end of file +进阶设定 - Volantis

    建议有一定基础知识的朋友进行尝试。

    将主题添加为子模块
    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 中,可以设置 keywordsdescriptionrobotsseo_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]

    分析与统计

    默认支持 不蒜子 的访问统计,可以自行添加百度统计和 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 博客主题个性化》

    内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

    评论

    \ No newline at end of file diff --git a/v2/getting-started/index.html b/v2/getting-started/index.html index a431831a63..9336997ce1 100644 --- a/v2/getting-started/index.html +++ b/v2/getting-started/index.html @@ -1 +1 @@ -开始使用 - Volantis

    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

    如果您还没有博客,执行这行命令将会自动检测并安装所需环境,初始化博客,然后下载安装并应用主题。

    第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开源许可协议

    被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
    被授权人可根据程式的需要修改授权条款为适当的内容。
    在软件和软件的所有副本中都必须包含版权声明和许可声明。

    评论

    \ No newline at end of file +开始使用 - Volantis

    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

    如果您还没有博客,执行这行命令将会自动检测并安装所需环境,初始化博客,然后下载安装并应用主题。

    第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开源许可协议

    被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
    被授权人可根据程式的需要修改授权条款为适当的内容。
    在软件和软件的所有副本中都必须包含版权声明和许可声明。

    评论

    \ No newline at end of file diff --git a/v2/page-settings/index.html b/v2/page-settings/index.html index cbb4b5f047..ecfdc5be0e 100644 --- a/v2/page-settings/index.html +++ b/v2/page-settings/index.html @@ -1 +1 @@ -页面配置 - Volantis

    如无特殊说明,本页面的配置信息写在 页面 文件的 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

    字段是否必须值类型
    servernetease, tencent, kugou, xiami, baidu
    typesong, playlist, album, search, artist
    idsong 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
    ---

    显示迷你音乐播放器

    标题右边显示迷你音乐播放器,支持的字段有:servertypeid

    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://cdn.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]
    ---

    评论

    \ No newline at end of file +页面配置 - Volantis

    如无特殊说明,本页面的配置信息写在 页面 文件的 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

    字段是否必须值类型
    servernetease, tencent, kugou, xiami, baidu
    typesong, playlist, album, search, artist
    idsong 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
    ---

    显示迷你音乐播放器

    标题右边显示迷你音乐播放器,支持的字段有:servertypeid

    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]
    ---

    评论

    \ No newline at end of file diff --git a/v2/site-settings/index.html b/v2/site-settings/index.html index 0fe0c124b4..39f11840e2 100644 --- a/v2/site-settings/index.html +++ b/v2/site-settings/index.html @@ -1 +1 @@ -站点配置 - Volantis

    如无特殊说明,本页面的配置信息写在 博客根目录_config.yml 文件中。

    网站标题

    blog/_config.yml
    # 网站标题
    title: my blog

    网站图标

    blog/_config.yml
    # 网站图标,更多尺寸等图标请使用import方式批量导入
    favicon: https://cdn.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://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">

    Import

    可以在无需修改主题文件的情况下在 head 和 body 中添加各种标签。metalink 对应 head 中的 <meta><link> 标签。script 可以在 body 末尾导入 js 文件。

    blog/_config.yml
    import:
    meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">
    script:

    更多配置

    更多请见 Hexo 官方文档:#Hexo配置

    评论

    \ No newline at end of file +站点配置 - Volantis

    如无特殊说明,本页面的配置信息写在 博客根目录_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 中添加各种标签。metalink 对应 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配置

    评论

    \ No newline at end of file diff --git a/v2/tag-plugins/index.html b/v2/tag-plugins/index.html index f4b905e41b..8313d8a497 100644 --- a/v2/tag-plugins/index.html +++ b/v2/tag-plugins/index.html @@ -1 +1 @@ -标签插件 - Volantis

    主题原生支持的标签。

    文本和段落

    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://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 %}

    如果需要显示类似「团队成员」之类的一组含有头像的链接:

    或者含有图标的按钮:

    圆形图标 + 标题 + 描述 + 图片 + 网格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://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

    {% endfolding %}

    参数位置可以填写颜色和状态,多个参数用空格隔开。

    颜色

    blue, cyan, green, yellow, red

    状态

    状态填写 open 代表默认打开。

    {% 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 %}
    查看图片测试

    查看默认打开的折叠框

    这是一个默认打开的折叠框。

    查看代码测试
    {% 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://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)
    {% endfancybox %}

    对齐方向

    left, center, right

    缩放

    stretch

    列数

    逗号后面直接写列数,支持 2 ~ 8 列。设定列列数之后就是「多行多图」布局,此时图片默认左对齐。为了避免图片大小不一,建议搭配 stretch 来时图片放大填充。

    一行一个图片

    example.md:
    {% fancybox %}
    ![图片描述](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
    {% endfancybox %}

    一行多个图片(不换行)

    example.md:
    {% fancybox %}
    ![图片描述](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)
    {% endfancybox %}

    多行多个图片(每行2~8个图片)

    example.md:
    {% fancybox stretch, 4 %}
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
    ![](https://cdn.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

    公式

    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}
    $$

    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 --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。

    评论

    \ No newline at end of file +标签插件 - Volantis

    主题原生支持的标签。

    文本和段落

    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 %}

    如果需要显示类似「团队成员」之类的一组含有头像的链接:

    或者含有图标的按钮:

    圆形图标 + 标题 + 描述 + 图片 + 网格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

    公式

    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}
    $$

    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 --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。

    评论

    \ No newline at end of file diff --git a/v2/theme-settings/index.html b/v2/theme-settings/index.html index 833e2800a9..865286b5a4 100644 --- a/v2/theme-settings/index.html +++ b/v2/theme-settings/index.html @@ -1 +1 @@ -主题配置 - Volantis

    如无特殊说明,本页面的配置信息写在 主题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://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf
    weight: normal
    style: normal
    codefont:
    fontfamily: 'Menlo, Monaco'
    name: 'Monaco'
    url: https://cdn.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 库中取值外,还可以选择 articlecomments )。

    请别着急,具体的库配置将在下文详细讲解。

    meta 库

    meta 即文章的元数据,描述文章的作者、发布时间、更新时间等等信息,Volantis 不替您决定,显示什么图标、如何描述都可以自定义。

    查看所有相关配置
    blog/themes/volantis/_config.yml
    meta:
    # 文章标题
    title: # 暂无配置
    # 默认文章作者(可在front-matter中覆盖)
    author:
    avatar: https://cdn.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://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 -S hexo-helper-qrcode
    # img: https://cdn.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://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
    # ---------------------------------------
    # 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://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
    # 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/

    每一个小部件都有 classdisplay,前者代表这个小部件是什么,后者代表这个小部件在什么桌面和移动平台中是否显示,如果在移动平台显示,由于屏幕宽度有限,侧边栏的小部件则会被移动到正文区域下方,因此部分侧边栏小部件便失去意义,建议设置为仅桌面端显示。

    小部件名:
    class: 小部件类别
    display: [小部件在桌面端显示, 小部件在移动设备显示]

    博主信息部件

    blog/themes/volantis/_config.yml
    blogger:
    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: falsesocial 的具体内容请在网站页脚部分设置。

    文章目录部件

    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_numbermin_depthmax_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://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/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://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/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 中的每一项支持的属性有: nameurliconimgavatar,其中 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 从小到大排列。

    通用网格部件

    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 代表这个部件显示的内容,可选 excerptmorecontent 分别对应文章的摘要、摘要后面的内容、全文。

    部件库文件

    部件库中的所有部件都可以写在部件库文件中,您需要创建一个文件在以下路径:

    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://cdn.jsdelivr.net/npm/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://cdn.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://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js
    css: https://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js
    - 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: 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://cdn.jsdelivr.net/npm/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 URLAuthorization 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://cdn.jsdelivr.net/npm/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://cdn.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

    评论

    \ No newline at end of file +主题配置 - Volantis

    如无特殊说明,本页面的配置信息写在 主题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 库中取值外,还可以选择 articlecomments )。

    请别着急,具体的库配置将在下文详细讲解。

    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/

    每一个小部件都有 classdisplay,前者代表这个小部件是什么,后者代表这个小部件在什么桌面和移动平台中是否显示,如果在移动平台显示,由于屏幕宽度有限,侧边栏的小部件则会被移动到正文区域下方,因此部分侧边栏小部件便失去意义,建议设置为仅桌面端显示。

    小部件名:
    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: falsesocial 的具体内容请在网站页脚部分设置。

    文章目录部件

    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_numbermin_depthmax_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 中的每一项支持的属性有: nameurliconimgavatar,其中 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 从小到大排列。

    通用网格部件

    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 代表这个部件显示的内容,可选 excerptmorecontent 分别对应文章的摘要、摘要后面的内容、全文。

    部件库文件

    部件库中的所有部件都可以写在部件库文件中,您需要创建一个文件在以下路径:

    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 URLAuthorization 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

    评论

    \ No newline at end of file diff --git a/v3/advanced-settings/index.html b/v3/advanced-settings/index.html index 1fb2a9c62c..39a81cc40e 100644 --- a/v3/advanced-settings/index.html +++ b/v3/advanced-settings/index.html @@ -1 +1 @@ -进阶设定 - Volantis

    使用数据文件

    有时您可能需要在主题中使用某些资料,而这些资料并不在文章内,并且是需要重复使用的,那么您可以考虑使用 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. 刷新网页,查看加载速度慢的资源。
        1. 加载缓慢的图片,建议使用 CDN。
        1. 加载缓慢的可以不用的 js 插件,建议舍弃。
        1. 加载缓慢却必须使用的 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 中,可以设置 keywordsdescriptionrobotsseo_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. 插件的自定义配置方法:

    分析与统计

    默认支持 不蒜子 的访问统计,可以自行添加百度统计和 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 的这篇教程:

    更多 DIY 玩法

    详见 @TRHX 的这篇博客:

    内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

    评论

    \ No newline at end of file +进阶设定 - Volantis

    使用数据文件

    有时您可能需要在主题中使用某些资料,而这些资料并不在文章内,并且是需要重复使用的,那么您可以考虑使用 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 中,可以设置 keywordsdescriptionrobotsseo_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. 插件的自定义配置方法:

    分析与统计

    默认支持 不蒜子 的访问统计,可以自行添加百度统计和 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 的这篇教程:

    更多 DIY 玩法

    详见 @TRHX 的这篇博客:

    内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

    评论

    \ No newline at end of file diff --git a/v3/getting-started/index.html b/v3/getting-started/index.html index aa31643113..fadf1162d1 100644 --- a/v3/getting-started/index.html +++ b/v3/getting-started/index.html @@ -1 +1 @@ -安装与版本更新 - Volantis

    Volantis

    中文创作者社区

    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开源许可协议

    被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
    被授权人可根据程式的需要修改授权条款为适当的内容。
    在软件和软件的所有副本中都必须包含版权声明和许可声明。

    评论

    \ No newline at end of file +安装与版本更新 - Volantis

    Volantis

    中文创作者社区

    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开源许可协议

    被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
    被授权人可根据程式的需要修改授权条款为适当的内容。
    在软件和软件的所有副本中都必须包含版权声明和许可声明。

    评论

    \ No newline at end of file diff --git a/v3/page-settings/body/index.html b/v3/page-settings/body/index.html index cf495198f8..15438f3f14 100644 --- a/v3/page-settings/body/index.html +++ b/v3/page-settings/body/index.html @@ -1 +1 @@ -页面自定义布局 - Volantis

    正文布局

    默认是文章+评论:

    front-matter
    ---
    body: [article, comments]
    ---

    如果你想把相关文章卡片显示在评论前,可以这样写:

    front-matter
    ---
    body: [article, related_posts, comments]
    ---

    如果想全局修改,在主题配置文件中的 layout.on_page.body 中设置。

    显示迷你音乐播放器

    标题右边显示迷你音乐播放器,支持的字段有:servertypeid

    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]
    ---

    评论

    \ No newline at end of file +页面自定义布局 - Volantis

    正文布局

    默认是文章+评论:

    front-matter
    ---
    body: [article, comments]
    ---

    如果你想把相关文章卡片显示在评论前,可以这样写:

    front-matter
    ---
    body: [article, related_posts, comments]
    ---

    如果想全局修改,在主题配置文件中的 layout.on_page.body 中设置。

    显示迷你音乐播放器

    标题右边显示迷你音乐播放器,支持的字段有:servertypeid

    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]
    ---

    评论

    \ 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 45364574d2..29bbdd63b0 100644 --- a/v3/page-settings/front-matter/index.html +++ b/v3/page-settings/front-matter/index.html @@ -1 +1 @@ -front-matter - Volantis

    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

    字段是否必须值类型
    servernetease, tencent, kugou, xiami, baidu
    typesong, playlist, album, search, artist
    idsong 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://cdn.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
    ---

    评论

    \ No newline at end of file +front-matter - Volantis

    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

    字段是否必须值类型
    servernetease, tencent, kugou, xiami, baidu
    typesong, playlist, album, search, artist
    idsong 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
    ---

    评论

    \ No newline at end of file diff --git a/v3/page-settings/layout/index.html b/v3/page-settings/layout/index.html index 08580c1cab..62e130e197 100644 --- a/v3/page-settings/layout/index.html +++ b/v3/page-settings/layout/index.html @@ -1 +1 @@ -页面布局模板 - Volantis

    布局模板

    取值含义
    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, 可能是输入地址有误或该地址已被删除 %}

    评论

    \ No newline at end of file +页面布局模板 - Volantis

    布局模板

    取值含义
    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, 可能是输入地址有误或该地址已被删除 %}

    评论

    \ No newline at end of file diff --git a/v3/page-settings/math/index.html b/v3/page-settings/math/index.html index 5d5111b58f..5f3837eec2 100644 --- a/v3/page-settings/math/index.html +++ b/v3/page-settings/math/index.html @@ -1 +1 @@ -渲染公式 - Volantis

    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}
    $$

    评论

    \ No newline at end of file +渲染公式 - Volantis

    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}
    $$

    评论

    \ No newline at end of file diff --git a/v3/site-settings/configuration/index.html b/v3/site-settings/configuration/index.html index 521130fccf..e6fe99e564 100644 --- a/v3/site-settings/configuration/index.html +++ b/v3/site-settings/configuration/index.html @@ -1 +1 @@ -站点配置文件 - Volantis

    网站标题

    blog/_config.yml
    # 网站标题
    title: my blog

    网站图标

    blog/_config.yml
    # 网站图标,更多尺寸等图标请使用import方式批量导入
    favicon: https://cdn.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://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://cdn.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 中添加各种标签。metalink 对应 head 中的 <meta><link> 标签。script 可以在 body 末尾导入 js 文件。

    blog/_config.yml
    import:
    meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">
    script:

    网站

    参数描述
    title网站标题
    subtitle网站副标题
    description网站描述
    keywords网站的关键词。支援多个关键词。
    author您的名字
    language网站使用的语言。对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有 zh-Hanszh-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 中没有指定 updatedupdated 的取值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 中没有指定 updatedpost.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"

    列表中的每一项都必须用单引号或双引号包裹起来。

    includeexclude 并不适用于 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 起提供

    独立的主题配置文件应放置于站点根目录下,支持 ymljson 格式。需要配置站点 _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 文件。

    评论

    \ No newline at end of file +站点配置文件 - Volantis

    网站标题

    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 中添加各种标签。metalink 对应 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-Hanszh-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 中没有指定 updatedupdated 的取值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 中没有指定 updatedpost.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"

    列表中的每一项都必须用单引号或双引号包裹起来。

    includeexclude 并不适用于 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 起提供

    独立的主题配置文件应放置于站点根目录下,支持 ymljson 格式。需要配置站点 _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 文件。

    评论

    \ No newline at end of file diff --git a/v3/tag-plugins/container/index.html b/v3/tag-plugins/container/index.html index ce1ad483c2..ab9310229f 100644 --- a/v3/tag-plugins/container/index.html +++ b/v3/tag-plugins/container/index.html @@ -1 +1 @@ -容器类标签 - Volantis

    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://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

    {% endfolding %}

    参数位置可以填写颜色和状态,多个参数用空格隔开。

    颜色

    blue, cyan, green, yellow, red

    状态

    状态填写 open 代表默认打开。

    {% 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 %}
    查看图片测试

    查看默认打开的折叠框

    这是一个默认打开的折叠框。

    查看代码测试
    {% folding green, 查看代码测试 %}

    查看代码测试

    {% endfolding %}
    查看列表测试
    • haha
    • hehe
    查看嵌套测试
    查看嵌套测试2
    查看嵌套测试3

    hahaha

    评论

    \ No newline at end of file +容器类标签 - Volantis

    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

    评论

    \ No newline at end of file diff --git a/v3/tag-plugins/hexo/index.html b/v3/tag-plugins/hexo/index.html index a7fb5efc5b..03b5eabd5f 100644 --- a/v3/tag-plugins/hexo/index.html +++ b/v3/tag-plugins/hexo/index.html @@ -1 +1 @@ -Hexo 内置标签 - Volantis

    文章摘要和截断

    在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。详见 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 %}

    评论

    \ No newline at end of file +Hexo 内置标签 - Volantis

    文章摘要和截断

    在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。详见 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 %}

    评论

    \ No newline at end of file diff --git a/v3/tag-plugins/link/index.html b/v3/tag-plugins/link/index.html index e2cb095a80..8c18ab2323 100644 --- a/v3/tag-plugins/link/index.html +++ b/v3/tag-plugins/link/index.html @@ -1 +1 @@ -链接、按钮和菜单标签 - Volantis

    外链卡片

    请将您的 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://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 %}

    如果需要显示类似「团队成员」之类的一组含有头像的链接:

    或者含有图标的按钮:

    圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

    下拉菜单

    请将您的 Volantis 升级至 3.0 版本以上使用。

    评论

    \ No newline at end of file +链接、按钮和菜单标签 - Volantis

    外链卡片

    请将您的 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 %}

    如果需要显示类似「团队成员」之类的一组含有头像的链接:

    或者含有图标的按钮:

    圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

    下拉菜单

    请将您的 Volantis 升级至 3.0 版本以上使用。

    评论

    \ No newline at end of file diff --git a/v3/tag-plugins/media/index.html b/v3/tag-plugins/media/index.html index ec893f8955..16422aae8f 100644 --- a/v3/tag-plugins/media/index.html +++ b/v3/tag-plugins/media/index.html @@ -1 +1 @@ -多媒体标签 - Volantis

    Inlineimage

    Inlineimage 标签是一种行内图片标签,可以用来在一段话中间插入表情。请将您的 Volantis 升级至 3.0.0 版本以上使用。

    这是一段话 {% inlineimage 链接, height=高度(可选) %} 这是一段话。

    图片高度

    阿拉伯数字 + px

    example:
    height=20px
    example.md:
    这是 {% 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 %} 一段话。

    这是 一段话。

    这又是 一段话。

    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

    评论

    \ No newline at end of file +多媒体标签 - Volantis

    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

    评论

    \ No newline at end of file diff --git a/v3/tag-plugins/text/index.html b/v3/tag-plugins/text/index.html index 3bd0091ea7..6e570569a7 100644 --- a/v3/tag-plugins/text/index.html +++ b/v3/tag-plugins/text/index.html @@ -1 +1 @@ -文本和段落标签 - Volantis

    行内小标签

    请将您的 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

    评论

    \ No newline at end of file +文本和段落标签 - Volantis

    行内小标签

    请将您的 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

    评论

    \ No newline at end of file diff --git a/v3/theme-settings/comments/index.html b/v3/theme-settings/comments/index.html index 74a8ac18ca..a55e409bc7 100644 --- a/v3/theme-settings/comments/index.html +++ b/v3/theme-settings/comments/index.html @@ -1 +1 @@ -选择评论系统 - Volantis

    目前支持的评论系统有: 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://cdn.jsdelivr.net/npm/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 URLAuthorization 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 的代码

    收录更多评论系统

    评论

    \ No newline at end of file +选择评论系统 - Volantis

    目前支持的评论系统有: 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 URLAuthorization 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 的代码

    收录更多评论系统

    评论

    \ No newline at end of file diff --git a/v3/theme-settings/configuration/index.html b/v3/theme-settings/configuration/index.html index 51f5b8f5a2..bfa3e9d8d8 100644 --- a/v3/theme-settings/configuration/index.html +++ b/v3/theme-settings/configuration/index.html @@ -1 +1 @@ -主题配置文件 - Volantis

    使用代替主题配置文件

    第 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

    评论

    \ No newline at end of file +主题配置文件 - Volantis

    使用代替主题配置文件

    第 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

    评论

    \ No newline at end of file diff --git a/v3/theme-settings/cover/index.html b/v3/theme-settings/cover/index.html index f23488ca8c..b5c9c7fc58 100644 --- a/v3/theme-settings/cover/index.html +++ b/v3/theme-settings/cover/index.html @@ -1 +1 @@ -网站与文章封面 - Volantis

    封面方案

    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 来决定显示封面或者不显示封面。

    评论

    \ No newline at end of file +网站与文章封面 - Volantis

    封面方案

    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 来决定显示封面或者不显示封面。

    评论

    \ No newline at end of file diff --git a/v3/theme-settings/footer/index.html b/v3/theme-settings/footer/index.html index 1a2a005a08..02ed4f71c3 100644 --- a/v3/theme-settings/footer/index.html +++ b/v3/theme-settings/footer/index.html @@ -1 +1 @@ -设置网站页脚 - Volantis

    您通过 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](/)'

    评论

    \ No newline at end of file +设置网站页脚 - Volantis

    您通过 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](/)'

    评论

    \ No newline at end of file diff --git a/v3/theme-settings/layout/index.html b/v3/theme-settings/layout/index.html index a6350aa1be..31be6cc0e3 100644 --- a/v3/theme-settings/layout/index.html +++ b/v3/theme-settings/layout/index.html @@ -1 +1 @@ -设置默认布局 - Volantis

    您可以自由决定每个页面是否显示侧边栏,侧边栏显示什么小部件,正文区域显示什么卡片,文章卡片显示什么 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 库中取值外,还可以选择 articlecomments )。

    请别着急,具体的库配置将在下文详细讲解。

    评论

    \ No newline at end of file +设置默认布局 - Volantis

    您可以自由决定每个页面是否显示侧边栏,侧边栏显示什么小部件,正文区域显示什么卡片,文章卡片显示什么 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 库中取值外,还可以选择 articlecomments )。

    请别着急,具体的库配置将在下文详细讲解。

    评论

    \ No newline at end of file diff --git a/v3/theme-settings/meta/index.html b/v3/theme-settings/meta/index.html index 63c2142fae..0095081280 100644 --- a/v3/theme-settings/meta/index.html +++ b/v3/theme-settings/meta/index.html @@ -1 +1 @@ -元数据组件 - Volantis

    meta 即文章的元数据,描述文章的作者、发布时间、更新时间等等信息,Volantis 不替您决定,显示什么图标、如何描述都可以自定义。

    blog/_config.volantis.yml
    meta:
    # 文章标题
    title: # 暂无配置
    # 默认文章作者(可在front-matter中覆盖)
    author:
    avatar: https://cdn.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://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 -S hexo-helper-qrcode
    # img: https://cdn.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'

    评论

    \ No newline at end of file +元数据组件 - Volantis

    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'

    评论

    \ No newline at end of file diff --git a/v3/theme-settings/navbar/index.html b/v3/theme-settings/navbar/index.html index 8488f91923..b25b20c270 100644 --- a/v3/theme-settings/navbar/index.html +++ b/v3/theme-settings/navbar/index.html @@ -1 +1 @@ -设置网站导航栏 - Volantis

    导航栏配置

    导航栏分为 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/

    评论

    \ No newline at end of file +设置网站导航栏 - Volantis

    导航栏配置

    导航栏分为 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/

    评论

    \ No newline at end of file diff --git a/v3/theme-settings/plugins/index.html b/v3/theme-settings/plugins/index.html index 91ba72c18a..8a214161ff 100644 --- a/v3/theme-settings/plugins/index.html +++ b/v3/theme-settings/plugins/index.html @@ -1 +1 @@ -第三方插件 - Volantis

    插件库

    Volantis 为丰富的插件提供了兼容性优化。大部分插件您只需开启和关闭,无需进行设置。

    blog/_config.volantis.yml
    plugins:
    ################ required plugins ################

    # jquery
    jquery: https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js

    ################ optional plugins ################

    # fontawesome
    fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13/css/all.min.css
    # fontawesome animation
    fontawesome_animation: https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css
    # fancybox
    fancybox: https://cdn.jsdelivr.net/npm/@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://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js

    ######## Plugins to optimize the experience:
    # highlight.js
    highlightjs:
    js: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js
    css: https://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js

    ######## Plugins for SEO:
    # Traffic statistics (very slow loading)
    busuanzi: https://cdn.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://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css
    js: https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js

    # Typing Effects
    comment_typing: #https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js

    # Slide Background
    backstretch:
    enable: true
    js: https://cdn.jsdelivr.net/npm/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://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/012.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/019.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/033.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/035.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/038.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/039.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/042.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/052.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/054.jpg
    - https://cdn.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://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js
    - https://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg
    ...

    幻灯片背景图片显示的位置可以选择粘贴在封面上,跟随封面一起滑动,也可以选择固定作为网页背景图片。

    highlight.js

    blog/_config.volantis.yml
    plugins:
    ...
    highlightjs:
    js: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js
    css: https://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js
    - 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: 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: #说说字体颜色

    评论

    \ No newline at end of file +第三方插件 - Volantis

    插件库

    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: #说说字体颜色

    评论

    \ No newline at end of file diff --git a/v3/theme-settings/search/index.html b/v3/theme-settings/search/index.html index a1cc052cee..f6f385066c 100644 --- a/v3/theme-settings/search/index.html +++ b/v3/theme-settings/search/index.html @@ -1 +1 @@ -站内搜索 - Volantis
    blog/_config.volantis.yml
    search:
    enable: true
    service: hexo # hexo, google, algolia, azure, baidu
    js: https://cdn.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

    评论

    \ No newline at end of file +站内搜索 - Volantis
    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

    评论

    \ No newline at end of file diff --git a/v3/theme-settings/style/index.html b/v3/theme-settings/style/index.html index 3bdd18135f..bc2912d614 100644 --- a/v3/theme-settings/style/index.html +++ b/v3/theme-settings/style/index.html @@ -1 +1 @@ -自定义主题外观 - Volantis

    最大布局宽度

    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://cdn.jsdelivr.net/gh/inkss/common@master/cursor/text.png
    pointer: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/pointer.png
    default: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/left_ptr.png
    not-allowed: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/circle.png
    zoom-out: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/zoom-out.png
    zoom-in: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/zoom-in.png
    grab: https://cdn.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://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf
    weight: normal
    style: normal
    codefont:
    fontfamily: 'Menlo, Monaco'
    name: 'Monaco'
    url: https://cdn.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/

    评论

    \ No newline at end of file +自定义主题外观 - Volantis

    最大布局宽度

    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/

    评论

    \ No newline at end of file diff --git a/v3/theme-settings/widget/index.html b/v3/theme-settings/widget/index.html index 9ef00809aa..5e3ee5895d 100644 --- a/v3/theme-settings/widget/index.html +++ b/v3/theme-settings/widget/index.html @@ -1 +1 @@ -卡片式组件 - Volantis

    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://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
    # ---------------------------------------
    # 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://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
    # 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/

    每一个小部件都有 classdisplay,前者代表这个小部件是什么,后者代表这个小部件在什么桌面和移动平台中是否显示,如果在移动平台显示,由于屏幕宽度有限,侧边栏的小部件则会被移动到正文区域下方,因此部分侧边栏小部件便失去意义,建议设置为仅桌面端显示。

    小部件名:
    class: 小部件类别
    display: [小部件在桌面端显示, 小部件在移动设备显示]

    博主信息部件

    blog/_config.volantis.yml
    blogger:
    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: falsesocial 的具体内容请在网站页脚部分设置。

    文章目录部件

    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_numbermin_depthmax_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://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.yml
    repos:
    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.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 中的每一项支持的属性有: nameurliconimgavatar,其中 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 代表这个部件显示的内容,可选 excerptmorecontent 分别对应文章的摘要、摘要后面的内容、全文。

    部件库文件

    部件库中的所有部件都可以写在部件库文件中,您需要创建一个文件在以下路径:

    blog/source/_data/widget.yml

    文件内容示例:widget.yml

    评论

    \ No newline at end of file +卡片式组件 - Volantis

    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/

    每一个小部件都有 classdisplay,前者代表这个小部件是什么,后者代表这个小部件在什么桌面和移动平台中是否显示,如果在移动平台显示,由于屏幕宽度有限,侧边栏的小部件则会被移动到正文区域下方,因此部分侧边栏小部件便失去意义,建议设置为仅桌面端显示。

    小部件名:
    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: falsesocial 的具体内容请在网站页脚部分设置。

    文章目录部件

    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_numbermin_depthmax_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 中的每一项支持的属性有: nameurliconimgavatar,其中 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 代表这个部件显示的内容,可选 excerptmorecontent 分别对应文章的摘要、摘要后面的内容、全文。

    部件库文件

    部件库中的所有部件都可以写在部件库文件中,您需要创建一个文件在以下路径:

    blog/source/_data/widget.yml

    文件内容示例:widget.yml

    评论

    \ No newline at end of file diff --git a/v4/advanced-settings/index.html b/v4/advanced-settings/index.html index fa058f8140..92e5e323c8 100644 --- a/v4/advanced-settings/index.html +++ b/v4/advanced-settings/index.html @@ -1 +1 @@ -进阶设定 - 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
    ---

    为网站提速

    加载速度

    • 减少不必要的 js 插件,例如字数统计、动态背景。

    • 查找并解决拖慢速度的资源,以 Chrome 浏览器为例:

      1. 页面中点击右键,选择「检查」。
      2. 在右边的窗口中「Network」选项卡,并勾选「Disable cache」。
      3. 刷新网页,查看加载速度慢的资源。
        1. 加载缓慢的图片,建议使用 CDN。
        1. 加载缓慢的可以不用的 js 插件,建议舍弃。
        1. 加载缓慢却必须使用的 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 中,可以设置 keywordsdescriptionrobotsseo_title。其中 seo_title 仅仅用作网页标题,优先级高于 title

    使用 CDN

    对于大部分将博客 deploy 到 GitHub 的用户来说,直接加载本地资源速度比较慢,可以使用 jsdelivr 为开源项目提供的 CDN 服务。

    开启方法

    blog/_config.volantis.yml
    # use_cdn: /source/js/* 中的JS文件(JS Only)使用jsdelivr的min版本加速
    # 默认使用 https://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/workbox-cdn@5.1.3/workbox/workbox-sw.js');

    workbox.setConfig({
    modulePathPrefix: 'https://cdn.jsdelivr.net/npm/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. 插件的自定义配置方法:

    如果您使用了头图,可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图:

    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 的这篇教程:

    更多进阶玩法

    详见 @TRHX 的这篇博客:

    内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

    评论

    \ No newline at end of file +进阶设定 - 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
    ---

    为网站提速

    加载速度

    • 减少不必要的 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 中,可以设置 keywordsdescriptionrobotsseo_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. 插件的自定义配置方法:

    如果您使用了头图,可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图:

    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 的这篇教程:

    更多进阶玩法

    详见 @TRHX 的这篇博客:

    内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

    评论

    \ No newline at end of file diff --git a/v4/getting-started/index.html b/v4/getting-started/index.html index afc92e2f63..71eace9c32 100644 --- a/v4/getting-started/index.html +++ b/v4/getting-started/index.html @@ -1 +1 @@ -开始使用 - Volantis


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

    所有的 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 官方文档:

    也可以直接查看本站源码中站点配置文件的写法:_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开源许可协议

    被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
    被授权人可根据程式的需要修改授权条款为适当的内容。
    在软件和软件的所有副本中都必须包含版权声明和许可声明。

    配置与使用

    评论

    \ No newline at end of file +开始使用 - Volantis


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

    所有的 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 官方文档:

    也可以直接查看本站源码中站点配置文件的写法:_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开源许可协议

    被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
    被授权人可根据程式的需要修改授权条款为适当的内容。
    在软件和软件的所有副本中都必须包含版权声明和许可声明。

    配置与使用

    评论

    \ No newline at end of file diff --git a/v4/page-settings/index.html b/v4/page-settings/index.html index 03e199a990..bff27c6bdf 100644 --- a/v4/page-settings/index.html +++ b/v4/page-settings/index.html @@ -1 +1 @@ -页面配置 - Volantis

    页面布局模板

    布局模板

    取值含义
    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: # 描述

    不同的布局方式,会用到一部分的字段,一般来说,titleavatarurl 都是必须的。这些数据被转成 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 友链给大家,常联系的自己再保存到静态友链。
    • 实测 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

    字段是否必须值类型
    servernetease, tencent, kugou, xiami, baidu
    typesong, playlist, album, search, artist
    idsong 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://cdn.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
    ---

    页面自定义布局

    显示迷你音乐播放器

    标题右边显示迷你音乐播放器,支持的字段有:servertypeid

    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 的这篇文章:

    评论

    \ No newline at end of file +页面配置 - Volantis

    页面布局模板

    布局模板

    取值含义
    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: # 描述

    不同的布局方式,会用到一部分的字段,一般来说,titleavatarurl 都是必须的。这些数据被转成 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 友链给大家,常联系的自己再保存到静态友链。
    • 实测 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

    字段是否必须值类型
    servernetease, tencent, kugou, xiami, baidu
    typesong, playlist, album, search, artist
    idsong 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
    ---

    页面自定义布局

    显示迷你音乐播放器

    标题右边显示迷你音乐播放器,支持的字段有:servertypeid

    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 的这篇文章:

    评论

    \ No newline at end of file diff --git a/v4/site-settings/index.html b/v4/site-settings/index.html index 4da5fe0e98..3843b5ef9b 100644 --- a/v4/site-settings/index.html +++ b/v4/site-settings/index.html @@ -1 +1 @@ -站点配置 - Volantis

    博客根目录下的 _config.yml 文件通常负责站点相关配置、第三方 npm 插件相关的配置。

    网站标题

    blog/_config.yml
    # 网站标题
    title: my blog

    网站图标

    blog/_config.yml
    # 网站图标,更多尺寸等图标请使用import方式批量导入
    favicon: https://cdn.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://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://cdn.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 中添加各种标签。metalink 对应 head 中的 <meta><link> 标签。script 可以在 body 末尾导入 js 代码。

    blog/_config.yml
    import:
    meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">
    script:
    - <script></script>

    更多

    评论

    \ No newline at end of file +站点配置 - Volantis

    博客根目录下的 _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 中添加各种标签。metalink 对应 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>

    更多

    评论

    \ No newline at end of file diff --git a/v4/tag-plugins/index.html b/v4/tag-plugins/index.html index 1fd2aa5b07..64229d8862 100644 --- a/v4/tag-plugins/index.html +++ b/v4/tag-plugins/index.html @@ -1 +1 @@ -标签插件 - Volantis

    为了兼容老用户,旧的标签插件在重构之前依然沿用旧的格式,即「英文逗号+空格」作为参数分隔符,而部分新增标签插件是「空格+英文竖线+空格」,请注意区分。

    我们也在探索哪种分隔符既简单又不容易引起冲突,所以可能存在多种格式,具体以对应文档描述为准。

    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 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 标题, 链接, 图片链接(可选) %}

    演示效果

    上述示例的源码

    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 %}

    如果需要显示类似「团队成员」之类的一组含有头像的链接:

    或者含有图标的按钮:

    圆形图标 + 标题 + 描述 + 图片 + 网格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 %} |

    更多参数选择


    site

    网站卡片可以显示网站截图、logo、标题、描述,使用方法和友链标签一模一样,唯一的区别是数据文件名称为 sites.yml,可以和友链数据混用,通过分组过滤实现不一样的效果。

    示例写法
    {% sites only:community_team %}
    sites only:community_team

    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://cdn.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://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 代表默认打开。


    inlineimage

    Inlineimage 标签是一种行内图片标签,可以用来在一段话中间插入表情。

    本插件最后更新于 4.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

    image

    Image 标签是一种针对单个图片应用场景的标签,支持图片描述文字和指定宽度。

    本插件最后更新于 4.0 版本
    {% image 链接, width=宽度(可选), height=高度(可选), alt=描述(可选), bg=占位颜色(可选) %}

    演示效果

    添加描述:

    每天下课回宿舍的路,没有什么故事。
    每天下课回宿舍的路,没有什么故事。

    指定宽度:

    image

    指定宽度并添加描述:

    每天下课回宿舍的路,没有什么故事。
    每天下课回宿舍的路,没有什么故事。

    设置占位背景色:

    优化不同宽度浏览的观感
    优化不同宽度浏览的观感

    上述示例的源码

    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

    Gallery 标签是一种针对一组图片应用场景的标签。

    本插件最后更新于 3.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 %}
    ![图片描述](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, 4 %}
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/10A0FCE5-36A1-4AD0-8CF0-019259A89E03.jpeg)
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg)
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg)
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg)
    ![](https://cdn.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 %}

    在这个示例中同时出现了 imgvideo 那么它就是一个带有封面的视频,在视频加载完成之前会先显示视频封面。

    设备框架

    目前支持的有:

    iphone11

    如果您有以下其它设备框架图(svg),欢迎 PR 兼容。

    android, ipad, macbook, watch

    剪裁

    通过设置 part=top 或者 part=bottom 来显示上半部分或者下半部分,否则将显示完整的框架及其中的图片/视频。


    aplayer

    主题对 APlayer 插件的样式进行了兼容。安装插件:

    npm i -S 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 %}

    显示效果:

    对应的仓库链接:

    友链

    {% 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 标签之后才会显示。上述示例对应的仓库链接:

    分组

    这是主题官网的「示例博客」页面的数据:

    {% 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 %}

    上述示例对应的仓库链接:

    Hexo 通用标签

    在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。详见 Hexo 官方文档:

    评论

    \ No newline at end of file +标签插件 - Volantis

    为了兼容老用户,旧的标签插件在重构之前依然沿用旧的格式,即「英文逗号+空格」作为参数分隔符,而部分新增标签插件是「空格+英文竖线+空格」,请注意区分。

    我们也在探索哪种分隔符既简单又不容易引起冲突,所以可能存在多种格式,具体以对应文档描述为准。

    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 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 标题, 链接, 图片链接(可选) %}

    演示效果

    上述示例的源码

    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 %}

    如果需要显示类似「团队成员」之类的一组含有头像的链接:

    或者含有图标的按钮:

    圆形图标 + 标题 + 描述 + 图片 + 网格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 %} |

    更多参数选择


    site

    网站卡片可以显示网站截图、logo、标题、描述,使用方法和友链标签一模一样,唯一的区别是数据文件名称为 sites.yml,可以和友链数据混用,通过分组过滤实现不一样的效果。

    示例写法
    {% sites only:community_team %}
    sites only:community_team

    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 %}

    在这个示例中同时出现了 imgvideo 那么它就是一个带有封面的视频,在视频加载完成之前会先显示视频封面。

    设备框架

    目前支持的有:

    iphone11

    如果您有以下其它设备框架图(svg),欢迎 PR 兼容。

    android, ipad, macbook, watch

    剪裁

    通过设置 part=top 或者 part=bottom 来显示上半部分或者下半部分,否则将显示完整的框架及其中的图片/视频。


    aplayer

    主题对 APlayer 插件的样式进行了兼容。安装插件:

    npm i -S 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 %}

    对应的仓库链接:

    友链

    {% 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 标签之后才会显示。上述示例对应的仓库链接:

    分组

    这是主题官网的「示例博客」页面的数据:

    {% 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 %}

    上述示例对应的仓库链接:

    Hexo 通用标签

    在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。详见 Hexo 官方文档:

    评论

    \ No newline at end of file diff --git a/v4/theme-settings/index.html b/v4/theme-settings/index.html index 4ffb012fba..1481c6aa61 100644 --- a/v4/theme-settings/index.html +++ b/v4/theme-settings/index.html @@ -1 +1 @@ -主题配置 - Volantis

    创建主题配置文件

    主题目录下的 _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://cdn.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://cdn.jsdelivr.net/gh/inkss/common@master/cursor/text.png
    pointer: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/pointer.png
    default: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/left_ptr.png
    not-allowed: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/circle.png
    zoom-out: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/zoom-out.png
    zoom-in: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/zoom-in.png
    grab: https://cdn.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://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf
    weight: normal
    style: normal
    codefont:
    fontfamily: 'Menlo, Monaco'
    name: 'Monaco'
    url: https://cdn.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://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: '次浏览'
    # 文章评论数量:只支持 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://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_metabottom_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://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: 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: '日'

    每一个小部件都有 classdisplay,前者代表这个小部件是什么,后者代表这个小部件在什么桌面和移动平台中是否显示,如果在移动平台显示,由于屏幕宽度有限,侧边栏的小部件则会被移动到正文区域下方,因此部分侧边栏小部件便失去意义,建议设置为仅桌面端显示。

    小部件名:
    class: 小部件类别
    display: [小部件在桌面端是否显示, 小部件在移动设备是否显示]

    博主信息部件

    blog/_config.volantis.yml
    blogger:
    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: falsesocial 的具体内容请在网站页脚部分设置。

    文章目录部件

    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_numbermin_depthmax_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://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.yml
    repos:
    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.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 中的每一项支持的属性有: nameurliconimgavatar,其中 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 代表这个部件显示的内容,可选 excerptmorecontent 分别对应文章的摘要、摘要后面的内容、全文。

    选择评论系统

    目前支持的评论系统有: 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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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://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
    ... 可选配置项详见源码

    一款快速、简洁且高效的无后端评论系统
    https://github.com/MiniValine/MiniValine/

    blog/_config.volantis.yml
    comments:
    ...
    service: minivaline
    ...
    # MiniValine
    # https://github.com/MiniValine/MiniValine
    minivaline:
    js: https://cdn.jsdelivr.net/npm/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 URLAuthorization 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://cdn.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://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js
    # fontawesome
    fontawesome: https://cdn.jsdelivr.net/npm/@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://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js
    flying_pages: https://cdn.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://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js
    onlypost: false
    loadingImg: # https://cdn.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://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js
    css: https://cdn.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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css
    js: https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js

    # fontawesome animation
    fontawesome_animation:
    enable: #true
    css: https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css

    # Typing Effects
    comment_typing:
    enable: #true
    js: https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js

    # Slide Background
    backstretch:
    enable: #true
    js: https://cdn.jsdelivr.net/npm/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://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/012.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/019.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/033.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/035.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/038.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/039.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/042.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/052.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/054.jpg
    - https://cdn.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://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
    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://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 域名

    # Tidio聊天功能
    # https://www.tidio.com/
    tidio:
    enable: #true
    id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    幻灯片背景

    blog/_config.volantis.yml
    plugins:
    ...
    backstretch:
    enable: true
    js: https://cdn.jsdelivr.net/npm/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://cdn.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://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js
    css: https://cdn.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://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.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://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 域名

    Tidio

    blog/_config.volantis.yml
    plugins:
    ...
    # Tidio聊天功能
    # https://www.tidio.com/
    tidio:
    enable: true
    id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    评论

    \ No newline at end of file +主题配置 - Volantis

    创建主题配置文件

    主题目录下的 _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_metabottom_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: '日'

    每一个小部件都有 classdisplay,前者代表这个小部件是什么,后者代表这个小部件在什么桌面和移动平台中是否显示,如果在移动平台显示,由于屏幕宽度有限,侧边栏的小部件则会被移动到正文区域下方,因此部分侧边栏小部件便失去意义,建议设置为仅桌面端显示。

    小部件名:
    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: falsesocial 的具体内容请在网站页脚部分设置。

    文章目录部件

    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_numbermin_depthmax_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 中的每一项支持的属性有: nameurliconimgavatar,其中 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 代表这个部件显示的内容,可选 excerptmorecontent 分别对应文章的摘要、摘要后面的内容、全文。

    选择评论系统

    目前支持的评论系统有: 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 URLAuthorization 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

    评论

    \ No newline at end of file diff --git a/v5/advanced-settings/index.html b/v5/advanced-settings/index.html index 0dd259ce3e..43fbbaaaf2 100644 --- a/v5/advanced-settings/index.html +++ b/v5/advanced-settings/index.html @@ -1 +1 @@ -Volantis: 进阶设定 - 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
    ---

    为网站提速

    加载速度

    • 减少不必要的 js 插件,例如字数统计、动态背景。

    • 查找并解决拖慢速度的资源,以 Chrome 浏览器为例:

      1. 页面中点击右键,选择「检查」。
      2. 在右边的窗口中「Network」选项卡,并勾选「Disable cache」。
      3. 刷新网页,查看加载速度慢的资源。
        1. 加载缓慢的图片,建议使用 CDN。
        1. 加载缓慢的可以不用的 js 插件,建议舍弃。
        1. 加载缓慢却必须使用的 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 中,可以设置 keywordsdescriptionrobotsseo_title。其中 seo_title 仅仅用作网页标题,优先级高于 title

    使用 CDN

    对于大部分将博客 deploy 到 GitHub 的用户来说,直接加载本地资源速度比较慢,可以使用 jsdelivr 为开源项目提供的 CDN 服务。

    开启方法

    blog/_config.volantis.yml
    # 本地静态文件使用jsdelivr的min版本加速 https://www.jsdelivr.com/features
    # 默认使用 https://cdn.jsdelivr.net/npm/hexo-theme-volantis@<%- theme.info.theme_version %>/source/js/*.min.js 的CDN压缩版本(min.js),注意版本号对应关系!!可以通过修改以下配置项覆盖
    # 开发者注意 cdn.enable 设置为 false
    cdn:
    enable: false
    prefix: # CDN 前缀,为空使用默认值,链接最后不加 "/",例如: https://cdn.jsdelivr.net/gh/volantis-x/volantis-x.github.io@gh-page 填写最后编译生成的源码CDN地址前缀,此路径下应该含有/js与/css目录,该配置默认值是:"https://cdn.jsdelivr.net/npm/hexo-theme-volantis@"+ theme.info.theme_version +"/source"
    # 以下配置可以覆盖 cdn.prefix,配置项的值可以为空,但是要使用CDN必须依据路径填写配置项的键
    set:
    js:
    app: #/js/app.js
    css:
    style: #/css/style.css # (异步加载样式)

    如果你需要对样式进行 DIY,可以只关闭 style 文件的 CDN。

    从V5版本开始,首屏样式采用硬编码的方式写在HTML中。首屏样式内含 cover navbar search 的样式,其他样式放入/css/style.css异步加载。

    如果你需要对样式进行 DIY,请注意首屏渲染和异步延迟加载的差异。

    可以对 style.css 使用 HTTP/2 Server Push,但是此方案并不推荐。我们已经对style.css进行了preload处理,推荐使用对服务器压力成本较小的 CDN 服务。

    自定义 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 配置文件

    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 服务

    方案一 安装插件

    安装 hexo-offline-popup 或者 hexo-offline 插件,初次加载速度不变,后期切换页面和刷新网页速度越来越快。

    方案二 使用 workbox 自定义配置

    step 1. 修改 blog/_config.yml 文件。
    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>
    step 2. 在 blog/source 中创建 sw.js 文件。
    blog/source/sw.js
    importScripts('https://cdn.jsdelivr.net/npm/workbox-cdn@5.1.3/workbox/workbox-sw.js');

    workbox.setConfig({
    modulePathPrefix: 'https://cdn.jsdelivr.net/npm/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. 插件的自定义配置方法:

    如果您使用了头图,可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图:

    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 的这篇教程:

    更多进阶玩法

    详见 @TRHX 的这篇博客:

    内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

    评论

    \ No newline at end of file +Volantis: 进阶设定 - Volantis

    设置子模块

    将主题添加为子模块

    开始前需要确认不存在 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 中,可以设置 keywordsdescriptionrobotsseo_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 配置文件

    运行 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 文件。

    如果你使用了此方案,修改静态文件后发布网页一定要修改缓存版本号。

    方案三 参考官网 volantis-sw.js

    volantis-sw.js

    discussions/791

    安装「相关文章」插件

    1. 安装插件

      npm i -S hexo-related-popular-posts
    2. 插件的自定义配置方法:

    如果您使用了头图,可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图:

    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

    我们还支持以下评论系统提供的访问统计: walinetwikoodiscussartalk

    如需使用它们,请将上面 leancloudbusuanzi 的所有配置注释,并启用对应评论系统的统计功能

    字数和阅读时长

    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 的这篇教程:

    更多进阶玩法

    详见 @TRHX 的这篇博客:

    内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

    评论

    \ No newline at end of file diff --git a/v5/development-api/index.html b/v5/development-api/index.html index bdbd73fac0..649657f400 100644 --- a/v5/development-api/index.html +++ b/v5/development-api/index.html @@ -1 +1 @@ -Volantis: 开发文档 - Volantis


    全局变量 volantis

    我们提供了全局变量 volantis 和一些全局函数等主题开发调用接口。

    源码参考:layout/_partial/scripts/global.ejs

    Pjax

    Pjax 重载区域划分接口

    我们提供了可以实现Pjax重载区域灵活划分的开发接口。

    源码参考:layout/_third-party/pjax/index.ejs

    <pjax></pjax> 标签

    所有被 <pjax></pjax> 标签包裹的所有元素将被pjax重载。

    <pjax>
    <!--我是将被pjax重载的内容 begin-->
    <div>
    <div></div>
    <script></script>
    </div>
    <!--我是将被pjax重载的内容 end-->
    </pjax>

    使用案例:layout/_partial/snackbar.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/_third-party/pjax/index.ejs

    使用案例:layout/_third-party/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/_partial/scripts/darkmode.ejs

    暗黑模式样式

    详见:source/css/_plugins/dark.styl

    当前模式

    调用 volantis.dark.mode 查看当前模式。返回值为字符串 dark 或者 light

    暗黑模式触发器

    调用 volantis.dark.toggle() 触发切换亮黑模式。

    暗黑模式触发器回调函数

    调用 volantis.dark.push(callBack[,"callBackName"]) 传入触发器回调函数.

    使用案例:layout/_third-party/comments/utterances/script.ejs

    Message 消息提示

    我们提供了 Message 消息提示灵活的开发接口。

    源码参考:

    layout/_partial/scripts/global.ejs

    layout/_third-party/message/script.ejs

    volantis.message("title","message","type",autoClose,time)

    参数都是String类型,可选的。

    title标题
    message信息
    type图标类型 【info、warning、error、question】
    autoClose自动关闭
    time显示时间,默认3秒

    动态加载脚本

    源码参考:

    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/_third-party/aplayer/script.ejs

    由于返回的是 Promise 对象,也可以采用以下方式实现加载完成后调用回调函数:

    volantis.js("https://cdn.jsdelivr.net/npm/jquery").then(()=>{
    console.log("我在脚本加载完成后调用")
    })

    对本地文件使用CDN

    源码参考:

    layout/_partial/scripts/cdnCtrl.ejs

    theme.cdn.addJS("name","source","force")
    theme.cdn.addCSS("name","source","force")

    参数都为 String 类型,其中 source 和 force 是可选的。

    返回值为 CDN 处理后的链接,并存入theme.cdn.map.jstheme.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/jquery.parallax.min.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链接回调

    请注意,以上是主题开发文档,不是使用文档!

    评论

    \ No newline at end of file +Volantis: 开发文档 - Volantis


    样式文件说明

    /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.jstheme.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 学习如何创建插件。

    请注意,以上是主题开发文档,不是使用文档!

    评论

    \ No newline at end of file diff --git a/v5/faq/images/12.png b/v5/faq/images/12.png new file mode 100644 index 0000000000..852454addf Binary files /dev/null and b/v5/faq/images/12.png differ diff --git a/v5/faq/images/42.png b/v5/faq/images/42.png new file mode 100644 index 0000000000..26fb15705a Binary files /dev/null and b/v5/faq/images/42.png differ diff --git a/v5/faq/index.html b/v5/faq/index.html new file mode 100644 index 0000000000..29f56e70d4 --- /dev/null +++ b/v5/faq/index.html @@ -0,0 +1 @@ +Volantis: FAQ - Volantis


    这是什么?我在哪里?

    我也不知道

    我这里出现了故障,需要先做什么?


    控制台报错 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

    上面没有我要找的答案?

    尝试 打开搜索 或 常见问题与反馈渠道

    评论

    \ No newline at end of file diff --git a/v5/getting-started/index.html b/v5/getting-started/index.html index 1b7c97e723..eac08c53fc 100644 --- a/v5/getting-started/index.html +++ b/v5/getting-started/index.html @@ -1 +1 @@ -Volantis: 开始使用 - Volantis


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

    所有的 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 官方文档:

    也可以直接查看本站源码中站点配置文件的写法:_config.volantis.yml

    请对照 更新日志 进行更新.

    许可协议

    本主题采用 MIT开源许可协议 ,永久无限制免费使用。

    MIT开源许可协议

    被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
    被授权人可根据程式的需要修改授权条款为适当的内容。
    在软件和软件的所有副本中都必须包含版权声明和许可声明。

    配置与使用

    评论

    \ No newline at end of file +Volantis: 开始使用 - Volantis


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

    所有的 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 及以上版本!

    快速体验

    如果您已经具备环境配置条件,可以在终端中输入下面这行代码,稍等片刻即可尝鲜体验:

    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 官方文档:

    也可以直接查看本站源码中站点配置文件的写法:_config.volantis.yml

    请对照 更新日志 进行更新.

    许可协议

    本主题采用 MIT开源许可协议 ,永久无限制免费使用。

    MIT开源许可协议

    被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
    被授权人可根据程式的需要修改授权条款为适当的内容。
    在软件和软件的所有副本中都必须包含版权声明和许可声明。

    配置与使用

    评论

    \ No newline at end of file diff --git a/v5/page-settings/index.html b/v5/page-settings/index.html index 77013b3951..8377b682f2 100644 --- a/v5/page-settings/index.html +++ b/v5/page-settings/index.html @@ -1 +1 @@ -Volantis: 页面配置 - Volantis

    页面布局模板

    布局模板

    取值含义
    page独立页面
    post文章页面
    docs文档页面
    category分类页面
    tag标签页面
    friends友链页面
    list列表页面
    artitalk说说页面

    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: # 描述

    不同的布局方式,会用到一部分的字段,一般来说,titleavatarurl 都是必须的。这些数据被转成 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 友链给大家,常联系的自己再保存到静态友链。
    • 实测 GitHub API 速度和稳定性不如 Gitee ,如果追求稳定建议使用 Gitee。

    Artitalk页面

    创建页面文件

    Create file if not exists: source/artitalk/index.md
    ---
    layout: artitalk
    seo_title: 说说
    comments: false
    ---

    配置Artitalk

    在主题配置文件中找到以下内容

    artitalk:
    # Set `layout: artitalk` to enable in page
    # 配置项按照yml格式继续填写即可
    appId: # your appID
    appKey: # 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接口

    最后记得屏蔽Artitalk页面的pjax

    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

    字段是否必须值类型
    servernetease, tencent, kugou, xiami, baidu
    typesong, playlist, album, search, artist
    idsong 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://cdn.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
    ---

    页面自定义布局

    显示迷你音乐播放器

    标题右边显示迷你音乐播放器,支持的字段有:servertypeid

    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 的这篇文章:

    评论

    \ No newline at end of file +Volantis: 页面配置 - Volantis

    页面布局模板

    布局模板

    取值含义
    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: # 描述

    不同的布局方式,会用到一部分的字段,一般来说,titleavatarurl 都是必须的。这些数据被转成 HTML 标签插入到友链页面的 <!-- more --> 部分。

    Volantis 4.x 新增的网站卡片标签的样式 sites 网站卡片布局 在5.0版本移除 被 sites标签 friends标签 contributors标签 替代

    issues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代

    使用友链标签

    使用 友链标签 您可以在任何位置插入友链,支持静态数据和动态数据, 关于如何使用 友链标签 插入友链,详见:

    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

    字段是否必须值类型
    servernetease, tencent, kugou, xiami, baidu
    typesong, playlist, album, search, artist
    idsong 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
    ---

    页面自定义布局

    显示迷你音乐播放器

    标题右边显示迷你音乐播放器,支持的字段有:servertypeid

    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 的这篇文章:

    页面 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
    ---

    评论

    \ No newline at end of file diff --git a/v5/site-settings/index.html b/v5/site-settings/index.html index 72dfff1b0c..d6c1158c7c 100644 --- a/v5/site-settings/index.html +++ b/v5/site-settings/index.html @@ -1 +1 @@ -Volantis: 站点配置 - Volantis

    博客根目录下的 _config.yml 文件通常负责站点相关配置、第三方 npm 插件相关的配置。

    网站标题

    blog/_config.yml
    # 网站标题
    title: my blog

    网站图标

    blog/_config.yml
    # 网站图标,更多尺寸等图标请使用import方式批量导入
    favicon: https://cdn.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://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://cdn.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 中添加各种标签。metalink 对应 head 中的 <meta><link> 标签。script 可以在 body 末尾导入 js 代码。

    blog/_config.yml
    import:
    meta:
    - <meta name="msapplication-TileColor" content="#ffffff">
    - <meta name="msapplication-config" content="https://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/apple-touch-icon.png">
    - <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-32x32.png">
    - <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon-16x16.png">
    - <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
    - <link rel="mask-icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/safari-pinned-tab.svg" color="#5bbad5">
    - <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/favicon.ico">
    script:
    - <script></script>

    更多

    评论

    \ No newline at end of file +Volantis: 站点配置 - Volantis

    博客根目录下的 _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>

    更多

    评论

    \ No newline at end of file diff --git a/v5/tag-plugins/index.html b/v5/tag-plugins/index.html index d1466cdd7d..79cee8cb02 100644 --- a/v5/tag-plugins/index.html +++ b/v5/tag-plugins/index.html @@ -1 +1 @@ -Volantis: 标签插件 - Volantis

    为了兼容老用户,旧的标签插件在重构之前依然沿用旧的格式,即 command + 空格 作为参数分隔符,而部分新增标签插件是 空格 + 英文竖线 + 空格 ,请注意区分。

    我们也在探索哪种分隔符既简单又不容易引起冲突,所以可能存在多种格式,具体以对应文档描述为准。

    text

    下划线 的文本;带着重号 的文本;带波浪线 的文本;带 删除线 的文本

    键盘样式的文本: + D

    密码样式的文本:这里没有验证码

    带 {% u 下划线 %} 的文本;带 {% emp 着重号 %} 的文本;带 {% wavy 波浪线 %} 的文本;带 {% del 删除线 %} 的文本

    键盘样式的文本:{% kbd ⌘ %} + {% kbd D %}

    密码样式的文本:{% psw 这里没有验证码 %}

    span

    本插件最后更新于2.5 版本
    {% 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

    本插件最后更新于2.5 版本
    {% 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 的简便写法。

    最后更新于 2.3 版本
    {% note 样式参数, 文本内容 %}

    演示效果

    经典用法

    可以在配置文件中设置默认样式,为简单的一句话提供最的简便写法。

    note quote 适合引用一段话

    note info 默认主题色,适合中性的信息

    note warning 默认黄色,适合警告性的信息

    note error/danger 默认红色,适合危险性的信息

    note done/success 默认绿色,适合正确操作的信息

    更多图标

    这些都是默认样式,可以手动加上颜色:

    note radiation 默认样式

    note radiation yellow 可以加上颜色

    note bug red 说明还存在的一些故障

    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 标题, 链接, 图片链接(可选) %}

    演示效果

    上述示例的源码

    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 %}

    如果需要显示类似「团队成员」之类的一组含有头像的链接:

    或者含有图标的按钮:

    圆形图标 + 标题 + 描述 + 图片 + 网格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 %} |

    更多参数选择


    site

    网站卡片可以显示网站截图、logo、标题、描述,使用方法和友链标签一模一样,唯一的区别是数据文件名称为 sites.yml,可以和友链数据混用,通过分组过滤实现不一样的效果。

    示例写法
    {% sites only:community_team %}
    sites only:community_team

    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://cdn.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://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 代表默认打开。


    inlineimage

    Inlineimage 标签是一种行内图片标签,可以用来在一段话中间插入表情。

    本插件最后更新于 4.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

    image

    Image 标签是一种针对单个图片应用场景的标签,支持图片描述文字和指定宽度。

    本插件最后更新于 4.0 版本
    {% image 链接, width=宽度(可选), height=高度(可选), alt=描述(可选), bg=占位颜色(可选) %}

    演示效果

    添加描述:

    每天下课回宿舍的路,没有什么故事。
    每天下课回宿舍的路,没有什么故事。

    指定宽度:

    image

    指定宽度并添加描述:

    每天下课回宿舍的路,没有什么故事。
    每天下课回宿舍的路,没有什么故事。

    设置占位背景色:

    优化不同宽度浏览的观感
    优化不同宽度浏览的观感

    上述示例的源码

    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

    Gallery 标签是一种针对一组图片应用场景的标签。

    本插件最后更新于 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 音频链接 %}

    演示效果

    上述示例的源码

    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 %}

    在这个示例中同时出现了 imgvideo 那么它就是一个带有封面的视频,在视频加载完成之前会先显示视频封面。

    设备框架

    目前支持的有:

    iphone11

    如果您有以下其它设备框架图(svg),欢迎 PR 兼容。

    android, ipad, macbook, watch

    剪裁

    通过设置 part=top 或者 part=bottom 来显示上半部分或者下半部分,否则将显示完整的框架及其中的图片/视频。


    aplayer

    主题对 APlayer 插件的样式进行了兼容。安装插件:

    npm i -S 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 %}

    显示效果:

    对应的仓库链接:

    友链

    {% 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 标签之后才会显示。上述示例对应的仓库链接:

    分组

    这是主题官网的「示例博客」页面的数据:

    {% 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 %}

    上述示例对应的仓库链接:

    Hexo 通用标签

    在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。详见 Hexo 官方文档:

    评论

    \ No newline at end of file +Volantis: 标签插件 - Volantis

    为了兼容老用户,旧的标签插件在重构之前依然沿用旧的格式,即 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 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 标题::链接::图片链接(可选) %}

    演示效果

    上述示例的源码

    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 %}

    如果需要显示类似「团队成员」之类的一组含有头像的链接:

    或者含有图标的按钮:

    圆形图标 + 标题 + 描述 + 图片 + 网格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 %} |

    更多参数选择


    site

    网站卡片可以显示网站截图、logo、标题、描述,使用方法和 友链标签 一模一样,唯一的区别是数据文件名称为 sites.yml,可以和友链数据混用,通过分组过滤实现不一样的效果。

    最后更新于 5.0 版本
    {% sites [筛选方式]:[组名] %}

    演示效果

    上述示例的源码

    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 %}

    在这个示例中同时出现了 imgvideo 那么它就是一个带有封面的视频,在视频加载完成之前会先显示视频封面。

    设备框架

    目前支持的有:

    iphone11

    如果您有以下其它设备框架图(svg),欢迎 PR 兼容。

    android, ipad, macbook, watch

    剪裁

    通过设置 part=top 或者 part=bottom 来显示上半部分或者下半部分,否则将显示完整的框架及其中的图片/视频。


    aplayer

    主题对 APlayer 插件的样式进行了兼容。安装插件:

    npm i -S 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

    如果里的主题版本不支持或有问题可查看如下文档

    友链标签

    您可以在任何位置插入友链,支持静态数据和动态数据,静态数据需要写在数据文件中:

    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 格式,需要写在引号中。如果指定了 apirepo 字段,则从 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

    实现动态友链

    可以加载来自 issues 的友链数据,除了需要在 _data/friends.yml 中指定 apirepo 外,还需要做一下几件事:

    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

    Hexo 通用标签

    在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。详见 Hexo 官方文档:

    评论

    \ No newline at end of file diff --git a/v5/theme-settings/index.html b/v5/theme-settings/index.html index d58e341cf1..b8b9129afc 100644 --- a/v5/theme-settings/index.html +++ b/v5/theme-settings/index.html @@ -1 +1 @@ -Volantis: 主题配置 - Volantis

    创建主题配置文件

    主题目录下的 _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://cdn.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://cdn.jsdelivr.net/gh/inkss/common@master/cursor/text.png
    pointer: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/pointer.png
    default: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/left_ptr.png
    not-allowed: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/circle.png
    zoom-out: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/zoom-out.png
    zoom-in: https://cdn.jsdelivr.net/gh/inkss/common@master/cursor/zoom-in.png
    grab: https://cdn.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://cdn.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://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts/UbuntuMono/UbuntuMono-Regular.ttf
    weight: normal
    style: normal
    codefont:
    fontfamily: 'Menlo, Monaco'
    name: 'Monaco'
    url: https://cdn.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://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: '次浏览'
    # 文章评论数量:只支持 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://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_metabottom_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://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: 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: '日'

    每一个小部件都有 classdisplay,前者代表这个小部件是什么,后者代表这个小部件在什么桌面和移动平台中是否显示,如果在移动平台显示,由于屏幕宽度有限,侧边栏的小部件则会被移动到正文区域下方,因此部分侧边栏小部件便失去意义,建议设置为仅桌面端显示。

    小部件名:
    class: 小部件类别
    display: [小部件在桌面端是否显示, 小部件在移动设备是否显示]

    博主信息部件

    blog/_config.volantis.yml
    blogger:
    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: falsesocial 的具体内容请在网站页脚部分设置。

    文章目录部件

    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_numbermin_depthmax_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://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.yml
    repos:
    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.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 中的每一项支持的属性有: nameurliconimgavatar,其中 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 代表这个部件显示的内容,可选 excerptmorecontent 分别对应文章的摘要、摘要后面的内容、全文。

    选择评论系统

    目前支持的评论系统有: 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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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://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
    ... 可选配置项详见源码

    一款快速、简洁且高效的无后端评论系统
    https://github.com/MiniValine/MiniValine/

    blog/_config.volantis.yml
    comments:
    ...
    service: minivaline
    ...
    # MiniValine
    # https://github.com/MiniValine/MiniValine
    minivaline:
    js: https://cdn.jsdelivr.net/npm/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 URLAuthorization 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://cdn.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://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js
    # fontawesome
    fontawesome: https://cdn.jsdelivr.net/npm/@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://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js
    flying_pages: https://cdn.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://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js
    onlypost: false
    loadingImg: # https://cdn.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://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js
    css: https://cdn.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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css
    js: https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js

    # fontawesome animation
    fontawesome_animation:
    enable: #true
    css: https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css

    # Typing Effects
    comment_typing:
    enable: #true
    js: https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js

    # Slide Background
    backstretch:
    enable: #true
    js: https://cdn.jsdelivr.net/npm/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://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/012.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/019.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/033.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/035.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/038.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/039.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/042.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/052.jpg
    - https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/054.jpg
    - https://cdn.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://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
    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://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 域名

    # Tidio聊天功能
    # https://www.tidio.com/
    tidio:
    enable: #true
    id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    幻灯片背景

    blog/_config.volantis.yml
    plugins:
    ...
    backstretch:
    enable: true
    js: https://cdn.jsdelivr.net/npm/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://cdn.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://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js
    css: https://cdn.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://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.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://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 域名

    Tidio

    blog/_config.volantis.yml
    plugins:
    ...
    # Tidio聊天功能
    # https://www.tidio.com/
    tidio:
    enable: true
    id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    评论

    \ No newline at end of file +Volantis: 主题配置 - Volantis

    创建主题配置文件

    主题目录下的 _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 字段的先后顺序和组内菜单项的先后顺序决定。

    右键菜单类

    菜单项共分为两大类:pluginsmenus,前者放置内置组及内置菜单,允许添加/修改组内菜单;后者为用户自建菜单类,允许添加/修改组及组内菜单。一般意义上 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复制链接地址复制 aimage 下的链接至剪切板
    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:
    ...
    layout_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_metabottom_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: '日'

    每一个小部件都有 classdisplay,前者代表这个小部件是什么,后者代表这个小部件在什么桌面和移动平台中是否显示,如果在移动平台显示,由于屏幕宽度有限,侧边栏的小部件则会被移动到正文区域下方,因此部分侧边栏小部件便失去意义,建议设置为仅桌面端显示。

    小部件名:
    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: falsesocial 的具体内容请在网站页脚部分设置。

    文章目录部件

    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_numbermin_depthmax_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 中的每一项支持的属性有: nameurliconimgavatar,其中 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 代表这个部件显示的内容,可选 excerptmorecontent 分别对应文章的摘要、摘要后面的内容、全文。

    音乐部件

    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 URLAuthorization 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

    评论

    \ No newline at end of file diff --git a/v6/advanced-settings/index.html b/v6/advanced-settings/index.html new file mode 100644 index 0000000000..30ec77373d --- /dev/null +++ b/v6/advanced-settings/index.html @@ -0,0 +1 @@ +进阶设定 - Volantis

    设置子模块

    将主题添加为子模块

    开始前需要确认不存在 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 中,可以设置 keywordsdescriptionrobotsseo_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 配置文件

    运行 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 文件。

    如果你使用了此方案,修改静态文件后发布网页一定要修改缓存版本号。

    方案三 参考官网 volantis-sw.js

    volantis-sw.js

    discussions/791

    安装「相关文章」插件

    1. 安装插件

      npm i -S hexo-related-popular-posts
    2. 插件的自定义配置方法:

    如果您使用了头图,可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图:

    blog/_config.yml
    popularPosts:
    eyeCatchImageAttributeName: headimg

    注意

    需要升级到 5.0.1 及以上版本才可以支持自定义头图,详见 #29

    分析与统计

    数据统计

    PV 和 UV

    支持 不蒜子 的访问统计,在配置文件中设置。

    blog/_config.volantis.yml
    plugins:
    busuanzi:
    enable: true

    我们还支持以下评论系统提供的访问统计: walinetwikoodiscussartalk

    如需使用它们,请开启对应评论系统的相关设置,此时将接管含评论页面的 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 的这篇教程:

    更多进阶玩法

    详见 @TRHX 的这篇博客:

    内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。

    评论

    \ No newline at end of file diff --git a/v6/development-api/index.html b/v6/development-api/index.html new file mode 100644 index 0000000000..5494892e99 --- /dev/null +++ b/v6/development-api/index.html @@ -0,0 +1 @@ +开发文档 - Volantis


    样式文件说明

    /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 学习如何创建插件。

    请注意,以上是主题开发文档,不是使用文档!

    评论

    \ No newline at end of file diff --git a/v6/faq/images/12.png b/v6/faq/images/12.png new file mode 100644 index 0000000000..852454addf Binary files /dev/null and b/v6/faq/images/12.png differ diff --git a/v6/faq/images/42.png b/v6/faq/images/42.png new file mode 100644 index 0000000000..26fb15705a Binary files /dev/null and b/v6/faq/images/42.png differ diff --git a/v6/faq/index.html b/v6/faq/index.html new file mode 100644 index 0000000000..b41d394c36 --- /dev/null +++ b/v6/faq/index.html @@ -0,0 +1 @@ +FAQ - Volantis


    这是什么?我在哪里?

    我也不知道

    我这里出现了故障,需要先做什么?


    控制台报错 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

    上面没有我要找的答案?

    尝试 打开搜索 或 常见问题与反馈渠道

    评论

    \ No newline at end of file diff --git a/v6/getting-started/index.html b/v6/getting-started/index.html new file mode 100644 index 0000000000..9fa1205a3a --- /dev/null +++ b/v6/getting-started/index.html @@ -0,0 +1 @@ +开始使用 - Volantis


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

    所有的 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 及以上版本!

    快速体验

    如果您已经具备环境配置条件,可以在终端中输入下面这行代码,稍等片刻即可尝鲜体验:

    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 官方文档:

    也可以直接查看本站源码中站点配置文件的写法:_config.volantis.yml

    请对照 更新日志 进行更新.

    许可协议

    本主题采用 MIT开源许可协议 ,永久无限制免费使用。

    MIT开源许可协议

    被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
    被授权人可根据程式的需要修改授权条款为适当的内容。
    在软件和软件的所有副本中都必须包含版权声明和许可声明。

    配置与使用

    评论

    \ No newline at end of file diff --git a/v6/page-settings/index.html b/v6/page-settings/index.html new file mode 100644 index 0000000000..9b53811a81 --- /dev/null +++ b/v6/page-settings/index.html @@ -0,0 +1 @@ +页面配置 - Volantis

    页面布局模板

    布局模板

    取值含义
    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: # 描述

    不同的布局方式,会用到一部分的字段,一般来说,titleavatarurl 都是必须的。这些数据被转成 HTML 标签插入到友链页面的 <!-- more --> 部分。

    Volantis 4.x 新增的网站卡片标签的样式 sites 网站卡片布局 在5.0版本移除 被 sites标签 friends标签 contributors标签 替代

    issues 标签在5.0版本移除 被 sites标签 friends标签 contributors标签 替代

    使用友链标签

    使用 友链标签 您可以在任何位置插入友链,支持静态数据和动态数据, 关于如何使用 友链标签 插入友链,详见:

    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

    字段是否必须值类型
    servernetease, tencent, kugou, xiami, baidu
    typesong, playlist, album, search, artist
    idsong 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
    ---

    页面自定义布局

    显示迷你音乐播放器

    标题右边显示迷你音乐播放器,支持的字段有:servertypeid

    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 的这篇文章:

    页面 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
    ---

    评论

    \ No newline at end of file diff --git a/v6/site-settings/index.html b/v6/site-settings/index.html new file mode 100644 index 0000000000..f7be760243 --- /dev/null +++ b/v6/site-settings/index.html @@ -0,0 +1 @@ +站点配置 - Volantis

    博客根目录下的 _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

    更多

    评论

    \ No newline at end of file diff --git a/v6/tag-plugins/index.html b/v6/tag-plugins/index.html new file mode 100644 index 0000000000..14596165a4 --- /dev/null +++ b/v6/tag-plugins/index.html @@ -0,0 +1 @@ +标签插件 - Volantis

    为了兼容老用户,旧的标签插件在重构之前依然沿用旧的格式,即 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 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 标题::链接::图片链接(可选) %}

    演示效果

    上述示例的源码

    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 %}

    如果需要显示类似「团队成员」之类的一组含有头像的链接:

    或者含有图标的按钮:

    圆形图标 + 标题 + 描述 + 图片 + 网格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 %} |

    更多参数选择


    site

    网站卡片可以显示网站截图、logo、标题、描述,使用方法和 友链标签 一模一样,唯一的区别是数据文件名称为 sites.yml,可以和友链数据混用,通过分组过滤实现不一样的效果。

    最后更新于 5.0 版本
    {% sites [筛选方式]:[组名] %}

    演示效果

    上述示例的源码

    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 %}

    在这个示例中同时出现了 imgvideo 那么它就是一个带有封面的视频,在视频加载完成之前会先显示视频封面。

    设备框架

    目前支持的有:

    iphone11

    如果您有以下其它设备框架图(svg),欢迎 PR 兼容。

    android, ipad, macbook, watch

    剪裁

    通过设置 part=top 或者 part=bottom 来显示上半部分或者下半部分,否则将显示完整的框架及其中的图片/视频。


    aplayer

    主题对 APlayer 插件的样式进行了兼容。安装插件:

    npm i -S 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

    友链标签

    您可以在任何位置插入友链,支持静态数据和动态数据,静态数据需要写在数据文件中:

    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 格式,需要写在引号中。如果指定了 apirepo 字段,则从 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

    实现动态友链

    可以加载来自 issues 的友链数据,除了需要在 _data/friends.yml 中指定 apirepo 外,还需要做一下几件事:

    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

    Hexo 通用标签

    在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。详见 Hexo 官方文档:

    评论

    \ No newline at end of file diff --git a/v6/tag-plugins/no-pjax.html b/v6/tag-plugins/no-pjax.html new file mode 100644 index 0000000000..50531a598f --- /dev/null +++ b/v6/tag-plugins/no-pjax.html @@ -0,0 +1 @@ +不支持 pjax 的标签插件 - Volantis

    这里存放不支持 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

    如果里的主题版本不支持或有问题可查看如下文档

    评论

    \ No newline at end of file diff --git a/v6/theme-settings/index.html b/v6/theme-settings/index.html new file mode 100644 index 0000000000..937275efc8 --- /dev/null +++ b/v6/theme-settings/index.html @@ -0,0 +1 @@ +主题配置 - Volantis

    创建主题配置文件

    主题目录下的 _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 字段的先后顺序和组内菜单项的先后顺序决定。

    右键菜单类

    菜单项共分为两大类:pluginsmenus,前者放置内置组及内置菜单,允许添加/修改组内菜单;后者为用户自建菜单类,允许添加/修改组及组内菜单。一般意义上 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复制链接地址复制 aimage 下的链接至剪切板
    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_metabottom_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

    每一个小部件都有 classdisplay,前者代表这个小部件是什么,后者代表这个小部件在什么桌面和移动平台中是否显示,如果在移动平台显示,由于屏幕宽度有限,侧边栏的小部件则会被移动到正文区域下方,因此部分侧边栏小部件便失去意义,建议设置为仅桌面端显示。

    小部件名:
    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: falsesocial 的具体内容请在网站页脚部分设置。

    文章目录部件

    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_numbermin_depthmax_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 中的每一项支持的属性有: nameurliconimgavatar,其中 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 代表这个部件显示的内容,可选 excerptmorecontent 分别对应文章的摘要、摘要后面的内容、全文。

    音乐部件

    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 URLAuthorization 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-algoliasearchhexo-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

    评论

    \ No newline at end of file diff --git a/volantis-sw.js b/volantis-sw.js new file mode 100644 index 0000000000..56d2e43336 --- /dev/null +++ b/volantis-sw.js @@ -0,0 +1,2 @@ +"use strict";function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function _objectSpread(e){for(var r=1;re.length)&&(r=e.length);for(var t=0,n=new Array(r);t=0;--a){var c=this.tryEntries[a],i=c.completion;if("root"===c.tryLoc)return o("end");if(c.tryLoc<=this.prev){var u=n.call(c,"catchLoc"),s=n.call(c,"finallyLoc");if(u&&s){if(this.prev=0;--t){var o=this.tryEntries[t];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev=0;--r){var t=this.tryEntries[r];if(t.finallyLoc===e)return this.complete(t.completion,t.afterLoc),E(t),m}},"catch":function(e){for(var r=this.tryEntries.length-1;r>=0;--r){var t=this.tryEntries[r];if(t.tryLoc===e){var n=t.completion;if("throw"===n.type){var o=n.arg;E(t)}return o}}throw Error("illegal catch attempt")},delegateYield:function(r,t,n){return this.delegate={iterator:L(r),resultName:t,nextLoc:n},"next"===this.method&&(this.arg=e),m}},r}function asyncGeneratorStep(e,r,t,n,o,a,c){try{var i=e[a](c),u=i.value}catch(s){return void t(s)}i.done?r(u):Promise.resolve(u).then(n,o)}function _asyncToGenerator(e){return function(){var r=this,t=arguments;return new Promise((function(n,o){var a=e.apply(r,t);function c(e){asyncGeneratorStep(a,n,o,c,i,"next",e)}function i(e){asyncGeneratorStep(a,n,o,c,i,"throw",e)}c(undefined)}))}}var prefix="volantis-community",cacheSuffixVersion="00000018-::cacheSuffixVersion::",CACHE_NAME=prefix+"-v"+cacheSuffixVersion,PreCachlist=["/css/style.css","/js/app.js","/js/search/hexo.js"],NPMMirror=!0,NPMPackage="@mhg/volantis-community",NPMPackageVersion="1.0.1674055760561",debug=!0,handleFetch=function(){var e=_asyncToGenerator(_regeneratorRuntime().mark((function r(e){var t;return _regeneratorRuntime().wrap((function(r){for(;;)switch(r.prev=r.next){case 0:if(t=e.request.url,!/nocache/.test(t)){r.next=5;break}return r.abrupt("return",NetworkOnly(e));case 5:if(!/@latest/.test(t)){r.next=9;break}return r.abrupt("return",CacheFirst(e));case 9:if(!/cdnjs\.cloudflare\.com/.test(t)){r.next=13;break}return r.abrupt("return",CacheAlways(e));case 13:if(!/music\.126\.net/.test(t)){r.next=17;break}return r.abrupt("return",CacheAlways(e));case 17:if(!/qqmusic\.qq\.com/.test(t)){r.next=21;break}return r.abrupt("return",CacheAlways(e));case 21:if(!/jsdelivr\.net/.test(t)){r.next=25;break}return r.abrupt("return",CacheAlways(e));case 25:if(!/npm\.elemecdn\.com/.test(t)){r.next=29;break}return r.abrupt("return",CacheAlways(e));case 29:if(!/unpkg\.com/.test(t)){r.next=33;break}return r.abrupt("return",CacheAlways(e));case 33:if(!/.*\.(?:png|jpg|jpeg|svg|gif|webp|ico|eot|ttf|woff|woff2|mp3)$/.test(t)){r.next=37;break}return r.abrupt("return",CacheAlways(e));case 37:if(!/.*\.(css|js)$/.test(t)){r.next=41;break}return r.abrupt("return",CacheAlways(e));case 41:return r.abrupt("return",CacheFirst(e));case 42:case"end":return r.stop()}}),r)})));return function(r){return e.apply(this,arguments)}}(),cdn={gh:{jsdelivr:"https://cdn.jsdelivr.net/gh",fastly:"https://fastly.jsdelivr.net/gh",gcore:"https://gcore.jsdelivr.net/gh",testingcf:"https://testingcf.jsdelivr.net/gh",test1:"https://test1.jsdelivr.net/gh"},combine:{jsdelivr:"https://cdn.jsdelivr.net/combine",fastly:"https://fastly.jsdelivr.net/combine",gcore:"https://gcore.jsdelivr.net/combine",testingcf:"https://testingcf.jsdelivr.net/combine",test1:"https://test1.jsdelivr.net/combine"},npm:{jsdelivr:"https://cdn.jsdelivr.net/npm",fastly:"https://fastly.jsdelivr.net/npm",gcore:"https://gcore.jsdelivr.net/npm",testingcf:"https://testingcf.jsdelivr.net/npm",test1:"https://test1.jsdelivr.net/npm",unpkg:"https://unpkg.com",eleme:"https://npm.elemecdn.com"},cdnjs:{cdnjs:"https://cdnjs.cloudflare.com/ajax/libs",baomitu:"https://lib.baomitu.com",bootcdn:"https://cdn.bootcdn.net/ajax/libs",bytedance:"https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M",sustech:"https://mirrors.sustech.edu.cn/cdnjs/ajax/libs"}},cdn_match_list=[];for(var type in cdn)for(var key in cdn[type])cdn_match_list.push({type,key:cdn[type][key]});var _console=console,color={black:"#000000",red:"#FF0000",green:"#008000",yellow:"#FFFF00",blue:"#0000FF",magenta:"#FF00FF",cyan:"#00FFFF",white:"#FFFFFF"},add=function(){for(var e=[[]],r=0;ri)return e;if(c