转自我的博客:https://blog.pcstar.top
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。本文中我们将对hexo中nexT主题搭建的自己的博客站点进行配置,为你打造个性化博客系统。
目录
- Hexo博客发布流程
- 新建带日期格式的博文
- 博文插入图片
- 链接持久化
- 添加分享功能(百度分享)
- 添加搜索功能
- nexT小白必看-开始使用
- nexT小白必看-主题配置
- nexT小白必看-第三方服务
- nexT进阶必看-内建标签
- nexT进阶必看-进阶设定
- nexT进阶必看-常见问题
- Hexo类似平台
- 修改文章内超链接文本样式
1. Hexo博客发布流程
- hexo init (初始化一个博客系统)
- hexo new post “博文名称” (新增一个博文)
- hexo generate (编译博文)
- hexo server(或hexo s –debug) (本地启动进行预览)
hexo deploy (发布到远程服务器上)
站点文件.config.yml中配置git
deploy: - type: git repo: github: git@github.com:github账号/发布仓库,分支名称 coding: git@git.coding.net:coding账号/发布仓库,分支名称
安装hexo-deployer-git插件
npm install --save hexo-deployer-git
2. 新建带日期格式的博文
使用hexo new post “博文名称”生成的博文以博文名称生成文件,当文件太多时不便于管理查看,生成yyyy-MM-dd-博文名称的名称有助于我们管理自己的博文。
在站点文件_config.yml中设置博客生成名称:
# Writing
new_post_name: :year-:month-:day-:title.md # File name of new posts
重新执行hexo new post “博文名称”命令,就可以生成yyyy-MM-dd-博文名称.md类型的名称了。
3. 博文插入图片
- 配置站点文件_config.yml:
post_asset_folder: true
- 安装上传本地图片的插件
npm install https://github.com/CodeFalling/hexo-asset-image –save - 执行hexo new post “xxxx”
在/source/_posts文件夹内除了生成xxxx.md文件还会生成一个同名的文件夹,把图片复制到同名文件夹中,在博文中添加图片:
{% asset_img 图片名.png 图片 %}
4. 链接持久化
在Hexo中当我们创建的博文名包含中文的名的时候,url链接地址经常会变成一串很长的难以理解的字符串,不利于博文的链接分享,以及搜索引擎搜索,我能可以让url链接持久化来解决这个问题。
1. 安装url地址持久化插件:
npm install hexo-abbrlink --save
- 配置站点文件_config.yml:
permalink: post/:abbrlink.html
permalink_defaults:
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
5. 添加分享功能(百度分享)
配置主题文件_config.yml:
baidushare:
type: button
6. 添加搜索功能
- 安装 hexo-generator-searchdb 插件
$ npm install hexo-generator-searchdb –save - 配置站点文件_config.yml:
# 搜索
search:
path: search.xml
field: post
format: html
limit: 10000
- 配置主题文件_config.yml:
local_search:
enable: true
7. nexT小白必看-开始使用
如果你时刚开始搭建nexT博客系统,请参照官方文档-开始使用进行配置。
8. nexT小白必看-主题配置
如果你已经参照官方文档-开始使用配置完成,请参照官方文档-主题配置进行配置你的主题。
9. nexT小白必看-第三方服务
如果你想使用第三方插件,如在线评论、统计访客、分享博文、搜索引擎等,请参照官方文档-第三方服务进行配置你的博客。
10. nexT进阶必看-内建标签
假如你已经参照nexT小白必看部分内容进行了设置,那么恭喜你,你的博客已经可以完美上线运行了,如果想继续优化你的博客,在书写博文时使用一些内建标签,请阅读官方文档-内建标签。
11. nexT进阶必看-进阶设定
该部分是对你的博客站点进行优化的,如果你想要让你的博客变得更好,请阅读官方文档-进阶设定。
12. nexT进阶必看-常见问题
如果在搭建博客过程中遇到一些问题,可以参考官方文档-常见问题来解决问题,也可以在评论框进行提问解决。
13. Hexo类似平台
这是和Hexo类似的平台,有兴趣可以研究研究Hexo类似平台。
14. 修改文章内超链接文本样式
修改文件 themes\next\source\css_common\components\post\post.styl,在末尾添加css样式:
// 修改文章内超链接文本样式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}
效果如下图所示: