🍳此文要解决的问题

原博客本地文件库在linux系统下，现在想迁移到windows下。
原博客使用的next主题版本落后
如何使配置文件不依赖next主题配置文件，使next主题文档更新更方便？

🚲方法

🍗博客搭建工具有哪些？

hexo 速度快，中文文档和教程比较多
jekyll 基于ruby语言
hugo 基于go语言部署最快
pelican 基于python语言快与安全

🧨基本原理

            graph LR
            A[模板] --> B[编译]
C(内容) --> B
B --> D[网络发布]

🍔我们用哪个工具？

在此，作者选择采用hexo工具。原因如下

作者以前的博客既是使用hexo搭建的，配置和上手较快。
作者尝试过使用github服务器自带的jekyll，发现生成速度比较慢，除此之外还需要git命令行操作，记住命令行比较麻烦。
hexo 开发者是台湾人，故而中文社区比较庞大；
hexo的模板个人感觉比较jekyll模板功能更加丰富。

*hexo主题模板有很多，配置文件中文文档最全的当属next主题 *

老版本中文配置文档 不推荐使用
next 主题官网说明文档 具有官方维护团队，推荐使用该文档进行学习

🚆如何将博客的本地文档迁移到windows下

将博客文件夹拷贝到windows
安装node.js
进入博客文件夹，安装npm
1
npm install
安装hexo
1
npm install hexo
hexo生成部署即可

👼如何更新next主题

1.从github上下载next主题，解压后放置到themes主题下；

Solution 1
Solution 2

github网页下载并解压

在博客根文件夹下，命令行克隆

1	git clone https://github.com/theme-next/hexo-theme-next themes/next

修改themes/next/_config.yml配置文件，具体配置方法参考next 主题官网说明文档

😍如何使配置文件不依赖`themes/next/_config.yml`

只需将themes/next/_config.yml中你想修改的内容，拷贝到你的博客根目录下的_config.yml文件中就可以了。

注意：在拷贝到根目录下的_config.yml文件中前，需要添加theme_config:, 拷贝内容为其子内容，注意格式。拷贝内容每行前需要有两个空格，可以通过文档列编辑添加。

下次更新next版本，只需到next文件夹下，运行命令行get pull即可。

🎈如何自定义配色布局等

🎩页面布局配置

编辑根目录下source\_data下的配置文档，如styles.styl``variables.styl等即可。

🎃配置成功测试

插件测试具体见官方网站说明

🧨Label测试

label.js

{% label [class]@Text %}

[class] : default | primary | success | info | warning | danger.
          '@Text' can be specified with or without space
          E.g. 'success @text' similar to 'success@text'.
          If not specified, default class will be selected.

1	{% label @ipsum %} {% label primary@dolor sit %} {% label success@adipiscing elit, %} sed {% label info@do eiusmod %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim *ad* minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate ~~velit~~ esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

✨图片组加载配置，3副图两行排列

grouppicture.js

{% grouppicture [group]-[layout] %}{% endgrouppicture %}
{% gp [group]-[layout] %}{% endgp %}

[group]  : Total number of pictures to add in the group.
[layout] : Default picture under the group to show.

🎄mermaid 测试

mermaid.js

{% mermaid type %}
{% endmermaid %}

type : type of the mermaid chart, visit https://github.com/knsv/mermaid for more information.

            sequenceDiagram
            participant Alice
participant Bob
participant John as John
Second Line
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.
Bob-->Alice: Checking with John...
alt either this
Alice->>John: Yes
else or this
Alice->>John: No
else or this will happen
Alice->John: Maybe
end
par this happens in parallel
Alice -->> Bob: Parallel message 1
and
Alice -->> John: Parallel message 2
end

            graph LR
            47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)

🎉tabs测试

使用方法

tabs.js

{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name   : Unique name of tabs block tag without comma.
                Will be used in #id's as prefix for each tab with their index numbers.
                If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
                Only for current url of post/page must be unique!
[index]       : Index number of active tab.
                If not specified, first tab (1) will be selected.
                If index is -1, no tab will be selected. It's will be something like spoiler.
                Optional parameter.
[Tab caption] : Caption of current tab.
                If not caption specified, unique name with tab index suffix will be used as caption of tab.
                If not caption specified, but specified icon, caption will empty.
                Optional parameter.
[@icon]       : FontAwesome icon name (without 'fa-' at the begining).
                Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
                Optional parameter.

This is Tab 1.

One
Two
Three

4-spaces code block:

nano /etc

Tagged code block:

1
2
3

code tag
code tag
code tag

Note default tag.

This is Tab 2.

Five
Six
Seven

This is Tab 3.

This is Sub Tab 1.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

This is Sub Tab 2.

This is Sub Tab 3.

This is Sub-Sub Tab 1 of Sub Tab 3.

This is Sub-Sub Tab 2 of Sub Tab 3.

This is Sub-Sub Tab 3 of Sub Tab 3.

🎊Note测试

使用方法：

note.js

{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}

[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

All parameters are optional.

Primary Header

Welcome to Hexo!

Info Header

Welcome to Hexo!

Success Header

Welcome to Hexo!

Warning Header

Welcome to Hexo!

Danger Header

Welcome to Hexo!

等等

🎋button测试

button.js

{% button url, text, icon [class], [title] %}
<!-- Tag Alias -->
{% btn url, text, icon [class], [title] %}

url     : Absolute or relative path to URL.
text    : Button text. Required if no icon specified.
icon    : FontAwesome icon name (without 'fa-' at the begining). Required if no text specified.
[class] : FontAwesome class(es): fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
          Optional parameter.
[title] : Tooltip at mouseover.
          Optional parameter.

Text Text & Title

Text & Large Icon Text & Large Icon & Title

Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident Ipsum , sunt in culpa qui officia deserunt mollit anim id est laborum.

Text & Icon Text

Link

Previous Chapter Next Chapter

🎏Caniuse测试

canius.js

{% caniuse feature @ periods %}
<!-- Tag Alias -->
{% can feature @ periods %}

feature : Search for the feature you want on https://caniuse.com, then click on the hash sign to the left of the search result heading and you will get the unique name of this feature.
periods : Select the browser versions to display. Supported values: past_1, past_2, past_3, past_4, past_5, current, future_3, future_2, future_1. If this value is empty, the default value 'current' will be used.

🧧pdf测试

pdf.js

{% pdf url [height] %}

[url]    : Relative path to PDF file.
[height] : Optional. Height of the PDF display element, e.g. 800px.

🎞video测试

video.js

1	{% video url %}

Hubery-Lee

hexo结合next主题搭建博客及其版本更新方法

🍳此文要解决的问题

🚲方法

🍗博客搭建工具有哪些？

🧨基本原理

🍔我们用哪个工具？

🚆如何将博客的本地文档迁移到windows下

👼如何更新next主题

😍如何使配置文件不依赖`themes/next/_config.yml`

🎈如何自定义配色布局等

🎩页面布局配置

🎃配置成功测试

🧨Label测试

✨图片组加载配置，3副图两行排列

🎄mermaid 测试

🎉tabs测试

🎊Note测试

Primary Header

Info Header

Success Header

Warning Header

Danger Header

🎋button测试

🎏Caniuse测试

🧧pdf测试

🎞video测试

🍳此文要解决的问题

🚲方法

🍗博客搭建工具有哪些？

🧨基本原理

🍔我们用哪个工具？

🚆如何将博客的本地文档迁移到windows下

👼如何更新next主题

😍如何使配置文件不依赖themes/next/_config.yml

🎈如何自定义配色布局等

🎩页面布局配置

🎃配置成功测试

🧨Label测试

✨图片组加载配置，3副图两行排列

🎄mermaid 测试

🎉tabs测试

🎊Note测试

Primary Header

Info Header

Success Header

Warning Header

Danger Header

🎋button测试

🎏Caniuse测试

🧧pdf测试

🎞video测试

😍如何使配置文件不依赖`themes/next/_config.yml`