700字范文 > 【Hexo】Hexo-NexT主题-博客搭建

【Hexo】Hexo-NexT主题-博客搭建

时间：2020-02-18 00:32:27

为了记录我的大学生活的学习，在春节前决定搭建一个自己的博客来记录自己大学四年的生活和学习，本文为参考b站up:Mackxin的教程来进行记录我对Hexo-next主题的学习过程以及练练手，以后不记得了的知识点就在本文中查找。

01 启用next主题

先进入next主题官网下载next主题

点击开始使用

下载好这个主题，然后通过Sublime打开blog/_config.yml，ctrl+F搜索theme，在theme中修改成next主题，记得ctrl+S保存

theme: next

然后cmd进入hexo，先后输入

hexo clhexo ghexo s

然后进入自己的blog就可以看见自己修改好了next主题啦

ps：本文使用的编译器是sublime text3，其他的编译器也行，例如vscode等。

02 更改next主题为中文

通过sublime打开blog/_config.yml，ctrl+F搜索language，将language改成zh-Hans

language: zh-Hans

ctrl+S保存，然后刷新自己的blog就可以看见自己的blog改成中文啦

如果还没有就在cmd打开hexo

hexo clhexo ghexo s

再刷新自己的blog就可以看见啦

02 添加标签页和分类页

先进入根目录hexo/blog/theme/next/_config.yml 通过sublime打开

ctrl+F搜索menu

home: / || home#about: /about/ || usertags: /tags/ || tagscategories: /categories/ || tharchives: /archives/ || archive#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat

把tags和categories前面的#删掉

打开tags(标签)和categories(分类)

然后刷新blog就可以看见上面的标签页和分类页就打开了

但是打开的分类页和标签页都是error，因为我们还没有创建分类页和标签页

04 创建标签页和分类页

4.1 创建标签页

进入blog的根目录

再cmd中打开hexo，输入命令，回车

hexo n page tags

然后就会在hexo/blog/source下看见新的一个文件夹tags

现在在自己的blog首页就可以打开标签了

然后我们打开tags文件夹中的index.md，我这里通过sublime打开

title改成中文的标签，增加一行添加type: "tags"类型，一定要添加type

---title: 标签date: -02-13 23:22:04type: "tags"---

然后刷新自己的blog，就可以看见中文的暂无标签，如果我们删掉type，那就只会显示标签，不会显示暂无标签

4.2 创建分类页

然后我们通过cmd打开hexo，输入

hexo n page categories

我们就可以看见hexo/blog/source下看见一个新的文件夹categories

然后我们打开categories文件夹中的index.md，我这用sublime打开，跟刚刚一样的操作

title改成分类，添加type行，如下

---title: 分类date: -02-14 00:02:58type: "categories"---

然后刷新自己的blog就可以看见了

05 主题样式的更改

next主题中内置了有好几种样式，我们刚开始用到的是Muse，要更改的话进行如下操作

先打开blog/themes/next/_config.yml，我这里还是通过sublime打开，然后ctrl+F搜索Schemes，可以看见

# ---------------------------------------------------------------# Scheme Settings# ---------------------------------------------------------------# Schemes#scheme: Muse#scheme: Mist#scheme: Piscesscheme: Gemini

我们在要用的样式前去掉#，不用的就不用打开，像这样，我这里就是用到的是第四种样式Gemini

ctrl+S保存好以后刷新以后就可以看见自己选择的样式了

06 设置头像

先进入主题的根目录blog/themes/next/_config.yml

通过sublime打开后ctrl+F搜索avatar，然后打开，即把#号去掉，这里的头像可以放自己的连接，最好是尺寸小的，可以是网上有权访问的图片的链接，也可以是自己本地的，最好放在blog/themes/next/source/images目录下，然后直接通过/imgages/xxx.xxx打开

avatar: /images/1.jpg

07 更改标题作者

我们通过sublime打开blog/_config.yml

# Sitetitle: 我的盒子subtitle: ''description: ''keywords:author: 安河桥北以北language: zh-Hanstimezone: ''

title更改成自己的标题，author也更改成自己就行了

刷新一个自己的blog，如果不行就先清理再刷新打开

hexo clhexo ghexo s

然后就可以看见自己的名字那些就修改好了

08 启用侧边栏社交链接

先通过sublime打开blog/themes/next/_config.yml，然后ctrl+F搜索Social

social:GitHub: /ChenAi007 || githubE-Mail: mailto:xxxxx@ || envelope#Weibo: /bxh || googleTwitter: /Tim_qwq || twitterQQZone: https://user./xxxxx#FB Page: /yourname || facebook#VK Group: /yourname || vk#StackOverflow: /yourname || stack-overflow#YouTube: /yourname || youtube#Instagram: /yourname || instagram#Skype: skype:yourname?call|chat || skype

把social的#删除就可以打开这个社交链接了

我们还可以添加微博什么的，都可以，如上所示，自行修改和添加

然后我们刷新自己的blog就可以看见自己头像下面就有这几个链接了

09 启用友情链接

先通过sublime打开blog/themes/next/_config.yml，然后ctrl+F搜索links

删除links前面的#号，就启用了友情链接，至于链接以及简介由自己添加

links:QQZone: https://user./xxxxx

然后刷新自己的blog就可以在社交链接下看见友情链接了

10 新建一篇文章

打开cmd，打开hexo，进入到自己的blog

然后输入命令

hexo n yourname

yourname是你的文章的名字，然后回车

然后就可以在hexo/blog/source/_posts中看见自己新建的文章了

然后我们hexo s开启本地链接

打开自己的blog就可以看见自己的文章了

然后通过sublime进入这个文章，前面的title还可以自己更改，tags可以添加自己的标签，分类也可以自己分类

---title: Hexo-next主题-博客搭建date: -02-14 13:49:27tags:- 生活- 学习categories: 我的大学生活---

在—下面就可以进行自己的主文编辑了

其中#后跟的是一级标题，##后跟的是二级标题，###跟的是三级标题

# 我的大学生活## 第一篇博客### 这个是三级标题

11 Markdowm的基本使用

通过sublime打开自己的文章

多少个#号就是多少级标题

11.1 添加列表

- 列表1a 子列表b 子列表- 列表2

这样就可以添加列表，挺好tab后可以添加子列表

11.2 添加链接

[baidu]()

[]中是简介，()中是连接

11.3 添加图片

![image](/images/xxx.xxx)

11.4 斜体

*斜体*

在星号中间写文章

11.5 字体加粗

**粗体**

同上，只不过换成两个星号

11.5 代码块

#include <iostream>using namespace std;int main(){cout << "hello world!" << endl;return 0;}

通过tab上面的那个英文符号，两点是单行，六点是多行

11.6 添加引用

引用

> 引用

11.7 添加横线

---或者------------------------或者***等方式

12 开启文章的打赏功能

先通过sublime进入主题的配置文件blog/themes/next/_config.yml，ctrl+F搜索reward

打开reward就行了，打开各个方式后然后添加自己的付款码等

# Reward#reward_comment: 打赏作者鸡腿🍗#wechatpay: /images/wechatpay.png#alipay: /images/alipay.jpg#bitcoin: /images/bitcoin.png

13 开启微信个人二维码/公众号等

通过sublime进入主题的配置文件blog/themes/next/_config.ynl，ctrl+F搜索wechat

# Wechat Subscriber#wechat_subscriber:#enabled: true#qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg#description: ex. subscribe to my blog by scanning my public wechat account

打开后添加qrcode就行了，description添加描述，刷新blog后就会在自己blog下面看见

14 设置头像为圆形可旋转

先通过sublime进如blog/themes/next/source/css/common/components/sidebar/sidebar-author.styl

将文件ctrl+A全选后粘贴下面这段代码

.site-author-image {display: block;margin: 0 auto;padding: $site-author-image-padding;max-width: $site-author-image-width;height: $site-author-image-height;border: $site-author-image-border-width solid $site-author-image-border-color;border-radius: 50%;transition: 2s all;}.site-author-image:hover{transform: rotate(360deg);}.site-author-name {margin: $site-author-name-margin;text-align: $site-author-name-align;color: $site-author-name-color;font-weight: $site-author-name-weight;}.site-description {margin-top: $site-description-margin-top;text-align: $site-description-align;font-size: $site-description-font-size;color: $site-description-color;}

然后刷新自己的blog就可以看见自己的头像就是圆的了，然后鼠标指向头像就可以看见自己的头像旋转起来了，挪开也会旋转

15 首页文章设置阅读全文

通过sublime打开blog/themes/next/_config.yml，然后ctrl+F搜索auto_excerpt

将enable中的false改成true，长度自定义

auto_excerpt:enable: falselength: 150

也可以直接在文章中添加

 //这个的上面是可以显示的，下面是不能显示的，要通过阅读全文才可以进入查看到

16 添加动态背景

通过sublime打开blog/themes/next/_config.yml，ctrl+F搜索canvas

# Canvas-nestcanvas_nest: false# three_wavesthree_waves: true# canvas_linescanvas_lines: false# canvas_spherecanvas_sphere: false

选择一个或者多个打开就行，false改成true就行了，可以多开，记得ctrl+S保存

17 给博客添加fork Github

可以在右上角和左上角放置一个链接

打开这两个网站 /github-conrners/ 和 /-12-19-github-ribbons

选择一个然后复制

打开hexo/blog/themes/next/layout/_layout.swig，找到23行下面添加你复制到的，然后在href上改成自己的地址

如

<a href="/ChenAi007" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

然后在cmd

hexo clhexo ghexo s

然后刷新blog就可以看见右上角或者左上角就有一个链接模块啦

18 修改文章内连接样式

通过sublime打开hexo/blog/themes/next/source/css/common/components/post/post.styl

在后面添加代码

.post-body p a{color: blue; // 鼠标指向前的颜色border-bottom: none;&:hover{color: purple; // 鼠标指向后的颜色}}

19 修改文章第部带#的标签

通过sublime打开hexo/blog/themes/next/layout/_macoro/post.swig

然后打开 https://fontawesome.lo/lcons/ 选择一个图标

在刚刚的sublime中找到359行，其中有个#，删除#，改成下面的，下面的是google的G符号，具体什么符号可以根据自己的喜好选择

<i class="fa fa-google"></i>

20 Valine评论(也可以用来必力和Gitment评论)

通过sublime进入hexo/blog/themes/next/_config.yml，ctrl+F搜索valine

然后登入此网站: 注册一个账号，创建一个新应用，然后打开应用keys

复制AppID和AppKey到_config.yml中，如下

valine:enable: true # 改成tureappid: your appidappkey: your appkeynotify: false # mail notifier , /xCss/Valine/wikiverify: false # Verification codeplaceholder: Just go go # comment box placeholderavatar: mm # gravatar styleguest_info: nick,mail,link # custom comment headerpageSize: 10 # pagination size

保存刷新以后这就打开了评论系统啦

21 增加本地搜索功能

先打开next官网，选择搜索服务，Local Search

先在cmd中打开hexo，输入

npm install hexo-generator-searchdb --save

再在hexo/blog/_config.yml，中任意位置添加

search:path: search.xmlfield: postformat: htmllimit: 10000

然后打开hexo/blog/themes/next/_config.yml，ctrl+F搜索local

enable: false 改成 true

local_search:enable: true

22 增加不蒜子统计功能

打开主题配置文件blog/themes/next/_config.yml，ctrl+F搜索busuanzi

配置更改如下:

busuanzi_count:# count values only if the other configs are falseenable: true# custom uv span for the whole sitesite_uv: truesite_uv_header: 本站访问数<i class="fa fa-user"></i>site_uv_footer: 人次# custom pv span for the whole sitesite_pv: truesite_pv_header: 本站总访问量<i class="fa fa-eye"></i>site_pv_footer: 次# custom pv span for one page onlypage_pv: truepage_pv_header: 本页总阅读数<i class="fa fa-file-o"></i>page_pv_footer: 次

23 增加内容分享服务

打开主题配置文件blog/themes/next/_config.yml，ctrl+F搜索

jiathis: true

24 增加加载效果

通过sublime打开主题配置文件blog/themes/next/_config.yml，ctrl+F搜索pace

# Progress bar in the top during page loading.pace: true# Themes list:#pace-theme-big-counter#pace-theme-bounce#pace-theme-barber-shop#pace-theme-center-atom#pace-theme-center-circle#pace-theme-center-radar#pace-theme-center-simple#pace-theme-corner-indicator#pace-theme-fill-left#pace-theme-flash#pace-theme-loading-bar#pace-theme-mac-osx#pace-theme-minimal# For example# pace_theme: pace-theme-center-simplepace_theme: pace-theme-corner-indicator

需要哪个加载效果就将那个复制到pace_theme中

25 点击爆炸效果

在\blog\themes\next\source\js\src中建一个fireworks.js的文件

具体代码美哟找到，暂时不更新这板块内容

26 隐藏网页第部强力驱动

通过sublime打开hexo/blog/themes/next/layout/_partials/footer.swig，为了方便ctrl+A，ctrl+C，ctrl+V即可

<div class="copyright">{##}{% set current = date(Date.now(), "YYYY") %}{##}© {% if theme.footer.since and theme.footer.since != current %}{{ theme.footer.since }} — {% endif %}{##}<span itemprop="copyrightYear">{{ current }}</span><span class="with-love"><i class="fa fa-{{ theme.footer.icon }}"></i></span><span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright || config.author }}</span>{% if theme.post_wordcount.totalcount %}<span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-area-chart"></i></span>{% if theme.post_wordcount.item_text %}<span class="post-meta-item-text">{{ __('post.totalcount') }}:</span>{% endif %}<span title="{{ __('post.totalcount') }}">{##}{{ totalcount(site, '0,0.0a') }}{##}</span>{% endif %}</div>{% if theme.footer.custom_text %}<div class="footer-custom">{##}{{ theme.footer.custom_text }}{##}</div>{% endif %}