Hexo中Next主题个性化美化的解决方案

 

 

前提是已经安装Node.js 、Git 和Hexo以及注册Github账户；

 

安装流程可见：使用 Github Pages 和 Hexo 搭建自己的独立博客【超级详细的小白教程】

1、Next主题的启用

在Hexo下面的themes中，右键 选择Git base here

复制这行代码

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

等待完成后，打开Hexo的这个文件

image-20200628135626463

找到 theme

image-20200628135105789

把 theme 后面的 landscape 改成 next 即可；

然后在Hexo文件夹中 右键 Git base here

输入以下命令，启动本地预览

image-20200628135424948

出现下面两个INFO表示成功，在浏览器中进入http://localhost:4000进行查看；

image-20200628135511979

查看后需要关闭的话 则要在命令行输入Ctrl + c 结束；

这样 next主题就启动成功了；

2、更改Next主题为中文

同样打开Hexo的_config.yml文件，这是配置文件

找到Site 下的 language ，改成zh-CN即可

image-20200628135739023

然后在命令行可开启本地预览查看；

image-20200628135927788

3、添加标签页和分类页

打开文件

image-20200628140039796

找到meau 然后把tags 和 categories前面的#号去掉，然后保存

image-20200628140120038

然后本地预览 可发现

image-20200628140232539

但是点进去后不会显示，因为你没有创建标签页和分类页

4、正确打开标签页和分类页

进入文件夹

image-20200628140429336

启动git命令行

输入命令： hexo n page tags

就会在source中创建tags文件夹，并在里面创建index.md文件，表示已经可以使用；

image-20200628140636484

然后打开index.md 进行修改

image-20200628140719419

注意冒号后面必须有一个空格；

对于分类页同理，hexo n page categories 然后修改的时候type: “categories”；

5、主题样式的更改

在next的主题配置文件里面 找到Schemes ，发现有四种主题：

要用哪个就把哪个前面的#去掉，其它的三个加上# (#代表注释)；

image-20200628141115598

Muse：

image-20200628141204775

Mist：

image-20200628141238974

pisces：

image-20200628141307437

Gemini：

image-20200628141335864

改完保存，本地预览即可；

6、更改图像

在next配置文件中，找到

image-20200628141530909

默认就是这个样子

image-20200628141647247

更改的话只需改url后面的网站，网站的内容就是你将用的图像；

7、更改标题、作者和链接

在Hexo的配置文件下，找到

image-20200628141842513

然后对这些进行修改 保存即可；

8、启动侧边栏社交链接

打开next的配置文件中，找到social links

image-20200628142003322

对后面的链接进行修改 然后去掉# 即可显示；

注意 #号是注释作用，只有去掉#号才能生效；

9、启用友情链接

在next的配置文件中 找到

image-20200628171948200

links：

名称: url

显示出来是这样：

上面那个title：Links也是可以改的，比如我改成友情链接，显示是这样：

image-20200628172147758

10、新建一篇文章

Hexo文件中打开命令行；

输入：hexo n 文件名
//在Hexo\source\_posts下建立对应.md形式的文件

image-20200628172458284

进入本地预览；

image-20200628173013617

11、markdown基本使用

创建一个测试文档

image-20200628213826125

输入— 然后回车，头部格式就出来了，接着输入该文档的title、tag、categories、description等待；就是下面这样：

image-20200628214022639

插入链接

[ 链接标题 ]（链接url）

插入图片/文件

！[ 文件标题 ]（文件/图片url）

斜体

两个*号中间的内容是斜体

字体是斜的

粗体

两个**号之间的是粗体

字体是粗的

插入代码块

单行：//单行代码

代码块：

// 代码块x
// xx
// xx

引用

输入一个> 随后输入的内容就是引用；

分割线

连续三个 - 或者 三个 *，然后回车

12、开启打赏功能

next里面的配置文件中，找到Reward

image-20200628215929193

然后enable 和 animation 设置为true

并添加个人的微信收款码和支付宝收款码；

放到 next/source/images 中；

13、开启订阅公众号

在next的配置文件中找到subscribe

image-20200628224305802

可通过以下四个方式订阅，也可添加；

14、设置头像为圆形可旋转

需要对这个文件进行修改；

image-20200628224655531

按下图修改

image-20200629113603426

然后直接打开next的配置文件，找到avatar

image-20200628230323716

把rounded和rotated设置为true；

rounded是说要不要把图像设置为圆形；

rotated是说要不要让它转，如果要修改转的一些详细信息，就要到之前说的那个siderbar-author那个文件去修改；

15、首页文章设置阅读全文

next的配置文件下，找到这里

image-20200628230736955

把这两个都设置为true，默认应该是true；

然后有两种方法：

法1：

image-20200628231016093

在博客的头部 添加description，然后在后面输入你的描述，那么在你的博客中，这篇文章就只会显示你写的描述，剩下的由阅读全文这个按钮代替；

法2：

在文章中输入这一行代码，那么默认这行代码之前的部分为描述，之后的部分在阅读全文中显示；

image-20200628231353466

16、添加动态背景

今天在学习使用Hexo修改next的背景时，发现：
在这里插入图片描述

这几个东西我无论设置哪些个为true，都调不出动态背景；
随后开始在网上搜，发现大多都是针对老版本的NexT调动态背景或者canvas_nest的解决方法，不过也受到一些启发，这里就用新版本的演示一下：

1、首先看这里
在这里插入图片描述
Dependencies: https://github.com/theme-next/theme-next-three
表示这三个动态背景依赖于git克隆(clone)才能使用；

2、然后在next文件下打开Git命令行界面，准备clone
输入命令后，等待下载；
在这里插入图片描述
下载后就会有一个这样的文件出现在next文件夹中
在这里插入图片描述

只需要将此文件重命名为three，然后剪贴到next/source/lib文件下下面即可；

在这里插入图片描述

3、依赖包已经克隆了，之后就只用改之前那几个参数就能调选择你喜欢的动态背景了；
在这里插入图片描述
调完后，hexo s 本地预览下；

如果你对canva_nest有着独特的喜爱，那就clone它的依赖包放入next/source/lib中，然后千万记得，在next的_config.yml文件中加上这样两句话：
在这里插入图片描述

​ 想打开时，把enable置为true即可，这个与上面动态背景总开关没联系！等于说你可以上面设为false，canvas_nest设置为true，它一样可以用这个动态背景！

17、给博客添加fork Github

进入这个网站GitHub Corners

选一个心仪的图标，然后复制它旁边框框里的内容；

image-20200629002050858

打开文件

image-20200629002131129

搜索headband，在它下面插入这段复制的内容；

image-20200629002201440

image-20200629002321850

然后把 href 那里的网址改成自己github的地址！！！

保存，再本地预览即可看见；

18、修改文章内链接样式

打开next内部的这个文件：

image-20200629002546357

在此文件的最后面加上代码块：

.post-body p a{
  color: #345;
  border-bottom: none;
  &:hover{
    color: white;
  }
}

image-20200629003117190

19、怎样修改文章底部#标签式样

打开这个文件：

image-20200629003249240

找到这个位置

image-20200629003405007

在 rel=“tag”> 后插入

图标可以在Font awesome中找自己喜欢的，替换就行；

20、增加Valine评论功能

注册LeanCloud网站

实名认证

验证邮箱

然后创建应用，进入应用设置

image-20200629010133054

进入之后，复制应用Keys下的AppID和Appkey；

在next的配置文件中找到如图valine位置

image-20200629010337501

更改为

image-20200629010532354

将自己的appid和appkey复制过去；

保存；

21、增加搜索功能

next的配置文件中，置local_search为true

image-20200629011131547

22、增加不蒜子统计功能

next的配置文件中找到这个并置为true；

image-20200629011914774

23、内容分享服务（未完成）

image-20200629012648472

24、增加加载效果

image-20200629013406859

置为true；

然后在next下，打开git命令行，输入

git clone https://github.com/theme-next/theme-next-pace

等待依赖包下载成功即可；

25、增加点击爆炸效果(未完成)

26、隐藏底部 强力驱动

image-20200629014215836

置为false就行；

27、增加字数统计和阅读时长功能(未完成)

image-20200629015538934

clone了包，开了true，不知道为啥还是不行；

28、我的博客

欢迎大家来看我的博客：tacoyu23的博客；

有任何问题和建议，欢迎评论！

posted @ 2020-06-29 11:38  Luweir  阅读(705)  评论(0)  编辑  收藏  举报