hexo新建博客页面和next主题相关配置--进阶篇

前言

上一篇介绍如何使用hexo搭建GitHub.io网站
链接：https://blog.csdn.net/weixin_43216105/article/details/83217249

此篇介绍如何给网站上传博客，配置主题等相关问题

我自己的网站：https://lijie-1024.github.io

使用hexo+next主题+GitHub搭建，具体问题可以留言问我。

本篇所包含的内容如下：

正文

一、如何上传博客文章

• 新建文章—cmd 运行

hexo new page "新建博文章的名称"

这时你的文件夹：\hexo\source\ _posts 将会看到 新建博文章的名称.md 文件

• 使用markdown文本编辑器编辑文章。
• 文章编辑好之后，cmd运行生成、部署命令：

      hexo clean
      hexo g //生成页面
      hexo d //上传GitHub
      //或者：
      hexo d -g  //简写  一步到位

• 上传好后就可以在自己的网站 https://lijie-1024.github.io 看到自己写的第一篇文章啦~~
• 注：熟悉之后，可以直接在\根目录\source\ _posts文件夹下直接创建新的md格式文件，本地写好之后，cmd运行：hexo d -g 就直接传到网站上面了。

二、下载主题–next

• 当你已经会写文章之后，肯定想要把自己的页面装饰的更好看一些，这时候就需要更改hexo主题，让你的页面更美观。
• 官方主题：https://hexo.io/themes/ 可以在这个网站内找到自己喜欢的模板主题。
• 我使用的是 -----next主题
• 配置next
  • 在 Hexo 中有两份主要的配置文件— _config.yml 根目录和主题下的，配置主题相关在theme文件夹下的config.yml比较多。
  • 下载next主题包– cd到根目录下cmd运行代码

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

• 当 克隆/下载 完成后，打开 根目录下的站点配置文件config.yml， 找到 theme 字段，并将其值更改为 next。 启用 NexT 主题
  

• 测试是否成功

  • cmd运行hexo clean; hexo g ; hexo s ;三行代码，从本地看是否成功更改。http://localhost:4000

三、配置主题–next

1. 根目录下的站点配置文件config.yml 配置博客名称和语言如下。
   
2. 在 theme目录下的config.yml，更改样式，只需要打开# 键即可 配置总样式，ctrl+f搜索schemes下有四种样式，我用的是mist，都可以试一试选自己喜欢的。
   

四、其他配置–根据自己喜好更改。

3. 网站logo
   
4. 菜单栏更改，需要那个页面打开#，“ 页面名称 || 字体图标 ”，字体图标和数字是可以选择取消的，false改为true为打开，都可以试一下。
   
   
5. 侧边栏相关链接打开，可以更改为自己的链接。前面是链接后面是小图标，都可以更改。links为相关拓展链接，
   
   
6. 可以更改侧边栏展示的图片。我换成了自己的照片。把想替换照片放在\themes\next\source\images文件夹下，引用就可以了。rounded：是控制照片扁圆。
   
7. 控制侧边栏位置 我的默认在左边。
   
8. 这是控制侧边栏显示，post是在有文章的时候才会显示侧边栏。
   
9. 文章打赏功能—微信二维码，支付宝二维码
   
10. 背景效果
    github源码： https://github.com/theme-next/theme-next-three 效果 cmd运行

git clone https://github.com/theme-next/theme-next-three source/lib/three

更改true和false，效果不同。

以上是基础的一些配置。

五、about / tags / categories等分页设置

• 在上述内容中打开了# 设置成可显示
• 创建分页面以tags为例——根目录下cmd运行

hexo new page tags

• 输入命令后，在myBlog/source下会新生成一个新的文件夹tags，在该文件夹下会有一个index.md文件。
• 在上步新生成的/tags/index.md中添加type: “tags”，index.md文件内容如下：其中comments是评论在tags页面不打开的意思。
• 设置具体文章的tags
  • 当要为某一篇文章添加标签，只需在boke/source/_post目录下的具体文章的tags中添加标签即可，如：
    

这就设置好了tags页面。其他页面同理，更改其type即可。cmd运行以下代码。

hexo new page categories
hexo new page about

六、 加入站点内容搜索功能

• 我使用Local Search。加入站点内容搜索功能步骤如下：
• 运行：

npm install hexo-generator-searchdb --save

• 在根目录的下的config.yml 页面最后添加代码。

#next search
search:  
    path: search.xml
    field: post
    format: html
    limit: 10000

之后再主页面的右边就有搜索按钮。配置成功在本地测试。

小结

• 以上是一些配置主题，每次现在本地测试，成功后，上传到github上即可。
• 之后会讲评论插件和分享功能。
• 这是next的配置，其他的主题同理，基本都是true和false更改，根据提示多试试就可以了。

• 结束，有问题可以留言