Hexo next主题博客搭建及美化

转载及引用

hexo主题配置一    hexo主题配置二    hexo主题配置三    hexo主题配置四    hexo主题配置五    Hexo博客提交百度和Google收录    hexo个人博客收录谷歌的详细过程(有图)    Hexo NexT 魔改系列之三 ── 评论篇    更好的基于 github issues 的评论系统——utterances    Hexo Next 集成 utterances 评论系统    Hexo 双线部署到 Coding Pages 和 GitHub Pages 并实现全站 HPPTS

安装 next 主题

1. 在git上克隆主题文件

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

1. 在站点目录下的配置文件_config.yml 中找到以下部分，并修改。

theme: next  #选择博客主题，名字为themes中选择的主题文件夹名称

下载好主题后，在Hexo中切换主题只需修改站点配置文件中theme属性来配置，想换就换。

1. next主题中提供了四种样式，选择自己喜欢的。 在 themes-> next ->_config.yml 文件中找到一下代码，去掉 # 即可选择主题样式。

   # Schemes
   #scheme: Muse
   #scheme: Mist
   #scheme: Pisces
   scheme: Gemini
   

   3.1 当 选择 Mist 主题样式时，解决菜单样式居中

   • 在 themes/next/source/css/_schemes/Mist/_menu.styl 文件下，添加 text-align 属性

      .menu {
        text-align:right;
        margin: 0;
     

2. hexo常用命令

 hexo n "博客名称"  => hexo new "博客名称"   #这两个都是创建新文章，前者是简写模式
$ hexo p  => hexo publish
$ hexo g  => hexo generate  #生成
$ hexo s  => hexo server  #启动服务预览
$ hexo d  => hexo deploy  #部署

$ hexo server   #Hexo 会监视文件变动并自动更新，无须重启服务器。
$ hexo server -s   #静态模式
$ hexo server -p 5000   #更改端口
$ hexo server -i 192.168.1.1   #自定义IP
$ hexo clean   #清除缓存，网页正常情况下可以忽略此条命令

购买域名

1. 在 阿里云，腾讯云这些网站购买域名(需要实名认证)，或者翻墙买 .me, .io 这些域名(有钱大佬可以尝试，不知道访问这些域名需不需要翻墙)。

2. 在 站点目录下的source目录下创建文件 CNAME，写上自己的域名(如我自己的)

   frontwhite.xyz
   

菜单设置

菜单设置

用于设置博客上方导航栏显示，在主题配置文件_config.yml 中修改。

menu:
  home: / || home  #首页
  #about: /about/ || user  #关于
  tags: /tags/ || tags  #标签
  categories: /categories/ || th  #分类
  #archives: /archives/ || archive #归档
  #schedule: /schedule/ || calendar  #日程表
  #sitemap: /sitemap.xml || sitemap  #站点地图
  commonweal: /404/ || heartbeat   # 404页面

只是在menu选项中  去掉#   还不能让标签页面、分类页面生效，需要我们手动创建。

创建标签，分类页面

打开命令行，进入博客所在文件夹。执行以下命令，创建标签和分类。

  hexo new page tags
  hexo new page categories

同时，在/source目录下会生成一个tags文件夹，里面包含一个index.md文件。

+ 修改生成的source/tags/index.md文件,加上type: "tags",才行，title可以随便写
```
---
title: 学习之路
date: 2019-12-21 11:13:45
type: "tags"
---
```

+ 修改生成的source/tags/categories.md文件,加上type: "categories"
```
---
title: 分类
date: 2019-12-18 19:45:11
type: "categories"
---
```

文章标签和分类

在所写的文章里的头部，加上以下代码，即可在标签页看到标签个数和标签，分类也是如此

 ---
tags: [学习，小白]
categories: test
---

这里的tags和categories就是给文章加上标签和分类，两者的区别就是categories是有层级的，像上面那样分类里Next就是Hexo的子类，Hexo是不支持指定多个同级分类的。