hexo新建博客页面和next主题相关配置--进阶篇
前言
上一篇介绍如何使用hexo搭建GitHub.io网站
此篇介绍如何给网站上传博客,配置主题等相关问题
我自己的网站: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
- 根目录下的站点配置文件config.yml 配置博客名称和语言如下。
- 在 theme目录下的config.yml,更改样式,只需要打开# 键即可 配置总样式,ctrl+f搜索schemes下有四种样式,我用的是mist,都可以试一试选自己喜欢的。
四、其他配置–根据自己喜好更改。
- 网站logo
- 菜单栏更改,需要那个页面打开#,“ 页面名称 || 字体图标 ”,字体图标和数字是可以选择取消的,false改为true为打开,都可以试一下。
- 侧边栏相关链接打开,可以更改为自己的链接。前面是链接后面是小图标,都可以更改。links为相关拓展链接,
- 可以更改侧边栏展示的图片。我换成了自己的照片。把想替换照片放在\themes\next\source\images文件夹下,引用就可以了。rounded:是控制照片扁圆。
- 控制侧边栏位置 我的默认在左边。
- 这是控制侧边栏显示,post是在有文章的时候才会显示侧边栏。
- 文章打赏功能—微信二维码,支付宝二维码
- 背景效果
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中添加标签即可,如:
- 当要为某一篇文章添加标签,只需在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更改,根据提示多试试就可以了。
- 结束,有问题可以留言