0
点赞
收藏
分享

微信扫一扫

hexo实战:(二)个人博客优化合集

前言

上次介绍了使用 Hexo+GitHub Pages,零成本搭建一个专属自己的独立博客网站。我觉得那篇文章是没有入门门槛的,不管你是什么行业,只要想打造个人 IP,又不太想受博客平台约束,那么读完后动手操作一下也能轻松完成。而这次呢,上篇也说了 Hexo 会出三篇内容,这里就要在前者基础上做进一步升级,将完成下面七个主要的博客常用功能。


指标

  • Hexo 如何安装 Butterfly 主题并配置?
  • Hexo 如何创建页面和添加文章?
  • Hexo 如何添加第三方评论系统?
  • Butterfly 主题如何添加站内搜索?
  • Butterfly 主题如何添加百度统计?
  • Butterfly 主题如何添加文章置顶功能?
  • Butterfly 主题如何配置 RSS 和 404 页面?
  • 如何配合 Typora 完成 md 的同步与本地备份?


主题添加与配置

Hexo 官网专门有一个栏目的主题列表,这里我选的 “butterfly”,首先拉取主题代码到 themes 目录下,然后在 Hexo 的配置中启动主题。


拉取主题包

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly


启动主题

theme: butterfly


基础配置

基础配置主要是设置网站的标题、描述、SEO、菜单等项,下面我就列出 hexo 的 config(根目录下_config.yml),和主题 Butterfly 的 config(themes 的 Butterfly 下_config.yml),并注释相关项的简介仅供参考。


hexo_config.yml

title: ZERO开发                           #网站标题
subtitle: 一个独立开发者的博客               #网站副标题
description: 公众号:ZERO开发               #网站描述
keywords: 技术博客、独立开发者、PHP开发、Pthon开发、人工智能、物联网、游戏开发
author: 北桥苏              #您的名字
language: zh-CN            #网站使用的语言
timezone:            	   #网站时区。Hexo 默认使用您电脑的时区

# URL 网址
## 如果您的网站存放在子目录中,
## 例如 http://yoursite.com/blog,则请将您的 url 
## 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
url: http://z11r00.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory 目录配置
source_dir: source       #源文件夹,这个文件夹用来存放内容。
public_dir: public       #公共文件夹,这个文件夹用于存放生成的站点文件。
tag_dir: tags            #标签文件夹
archive_dir: archives    #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #nclude code 文件夹
i18n_dir: :lang          #国际化(i18n)文件夹
skip_render:             #跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。

# Writing 文章
new_post_name: :title.md # 新建文章默认文件名
default_layout: post     # 默认布局
titlecase: false # Transform title into titlecase
external_link: true # 在新标签中打开一个外部链接,默认为true
filename_case: 0    #转换文件名,1代表小写;2代表大写;默认为0,意思就是创建文章的时候,是否自动帮你转换文件名,默认就行,意义不大。
render_drafts: false  #是否渲染_drafts目录下的文章,默认为false
post_asset_folder: false #启动 Asset 文件夹
relative_link: false    #把链接改为与根目录的相对位址,默认false
future: true        #显示未来的文章,默认false
syntax_highlighter: highlight.js
highlight:    #代码块的设置
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

# Category & Tag 分类和标签的设置
default_category: uncategorized        #默认分类
category_map:                          #分类别名
tag_map:                               #标签别名

# 全局日期格式化
date_format: YYYY-MM-DD
time_format: HH:mm:ss
updated_option: 'mtime'
pagination_dir: page    #分页目录

## 插件index,用于显示分页和排序配置
index_generator:
  path: ''
  per_page: 5	# 0.关闭分页功能  >0.每页条数
  order_by:
    top: -1		# 置顶排序: -1.倒序 1.正序
    date: -1	# 日期排序: -1.倒序 1.正序

# 主题启动配置
theme: butterfly

# Deployment github部署配置
deploy:
  type: git
  repository: https://github.com/z11r00/z11r00.github.io
  branch: main
  
##hexo-generator-search搜索插件配置
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  
## rss配置
feed:
  type: atom
  path: atom.xml
  limit: 20

## rss位置
rss: /atom.xml


hexo_butterfly_config.yml


创建菜单页面

页面包括标签页(tags)、分类页(categories)、友链页(link)、关于页(about),当然也可以自行添加,比如音乐电影之类。不过添加这种页面方式都大同小异,以下以标签页举例。


运行命令

hexo new page tags


编辑 MD

运行命令后,会在 source 下根据 butterfly 模板生成对应的 md 文件,tags 就是 tags,不过要将 md 文件的 type 修改为对应的类型,类型见上。

title: 标签页
date: 2024-05-02 21:01:24
type: "tags"

hexo实战:(二)个人博客优化合集_博客搭建


Page(页面)front-matter

title: 页面名称
date:  创建日期
type: (tags,link,categories这三个页面需要配置)
comments: (是否需要显示评论,默认true)
description: 用于SEO优化
top_img: (设置顶部图)
mathjax: (数学公式显示是否支持)
katex:   (Tex公式显示是否支持)


创建文章

写文章,可以通过命令创建,也可以在 source/_posts 目录下,自行新建 markedown 文件,因为命令也是在_posts 文件夹下新建。


运行命令

hexo new "文章的大标题"


Post(文章)front-matter

title: CentOS7下Tomcat启动慢的原因及解决方案
date: 2017-12-02 21:01:24
description:文章描述,用于做SEO优化的
keywords: 文章SEO关键词
top_img: 文章顶部图
cover: 文章缩略图(封面图)
toc: true (是否显示文章目录)
toc_number: true (是否显示文章目录的标识数字)
copyright: true (是否显示版权)
mathjax: (数学公式显示是否支持)
katex:   (Tex公式显示是否支持)
hide: false (是否隐藏当前文章)
comments: true #是否可评论
toc: true #是否显示文章目录
categories: "云服务器" #分类
tags:   #标签
 - centOS
 - tomcat


站内搜索添加

站内搜索,我是采用的 hexo-generator-search 插件解决方案,安装完插件,然后配置一下,最后用 hexo 清理再生成一下全站静态,同时在根目录也会生成一个 search.xml,用于做字符串模糊匹配的。


插件安装

npm install hexo-generator-search --save


添加或配置

-config(hexo配置)

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

-butterfly-config(butterfly主题配置)

local_search:
  enable: true
  preload: false
  CDN:


清理与生成

hexo clean && hexo g

hexo实战:(二)个人博客优化合集_github_02


评论系统添加

第三方评论系统我这里使用的是 Gitalk ,Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。使用 GitHub 登陆,能支持多国语言,至于他的原理,其他博主有介绍。这里就不展开了,如果有时间以后可能会整体介绍一下常用的第三方评论系统,因为我还是希望评论能支持多种方式登陆的,目前没有找到合适的就先选择 Gitalk。


注册应用账号

hexo实战:(二)个人博客优化合集_博客搭建_03


获取参数

注册成功后拿到 “Client ID” 和 “Client secrets”(点击生成再复制),其中注意的是 Homepage URL 要设置为 用户名.github.io 精确到 https 的地址。Authorization callback URL 填写注册的域名,如果绑定了个性化域名就填自己的域名,也是要精确到 https 的位置。

hexo实战:(二)个人博客优化合集_博客搭建_04


修改 Butterfly 配置

打开 butterfly 主题的配置文件,第一个找到 “gitalk” 项,将上面复制的 client id 和 client secrets 粘贴。

第二个找到 “comments”,将 use 配置为 "gitalk",当然也可以用 valine、Disqus 之类的第三方评论系统。

comments:
  use: # 使用的第三方评论系统名称
  text: true # 是否在按钮旁显示评论名称
  # If you set it to true, the comment count will be invalid
  lazyload: false # 是否设置评论窗为懒加载
  count: true # 是否设置评论数统计
  card_post_count: true # 是否将评论数显示到首页
  
gitalk:
  client_id: # github应用ID
  client_secret: # github应用密钥
  repo: 用户名.github.io
  owner: 用户名
  admin: 用户名


博客仓库设置

进入仓库,点击 “Settings”,找到 “Features”, 将 “Issues” 勾选。

hexo实战:(二)个人博客优化合集_github_05


文章置顶功能添加

打开 hexo 配置文件 _config.yml,如果前面有 per_page 的关闭,使用的是 hexo-generator-index 插件排序,可以自定义序号和日期排序。

如何要置顶文章,只需在文章 md 的 front-matter 里添加一个 top 参数,数值自定。文章列表会出现一个钉子图标,要看到效果则要 hexo 先清理再生成。


添加配置

index_generator:
  path: ''
  per_page: 5  # 每页条数
  order_by:	   
    top: -1	   # 置顶: -1.倒序 1.顺序
    date: -1   # 日期: -1.倒序 1.顺序


md 文章设置

hexo实战:(二)个人博客优化合集_ide_06


清理与生成

hexo clean && hexo g

hexo实战:(二)个人博客优化合集_博客搭建_07


RSS 配置

对于 RSS 输出功能,需要安装 hexo-generator-feed 插件。最后使用 hexo 清理再生成,博客根目录就会生成 atom.xml


插件安装

npm install hexo-generator-feed --save


添加配置

feed:
  type: atom
  path: atom.xml
  limit: 20


设置 RSS 地址

rss: /atom.xml


设置 404 页面

在 hexo 的_config.yml 找到或添加 error_404,设置开启,分别添加标题和背景图。

error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: /img/404.jpg

hexo实战:(二)个人博客优化合集_hexo_08


添加百度统计

先登陆或注册百度统计平台,找到 “使用设置” -> “代码获取” -> “新版统计代码获取”,然后会看到一段 js 代码,只需要复制如下的一个 32 位长度的字符串。最后将该字符串粘贴到 butterfly 的 config.yml 中的 baidu_analytics 中,部署后一天就可以在后台查看统计报表了。

 


MarketDown 用法

关于新建的文章,我希望本地能备份一份,有 md 文件和图片,方便上传到其他平台博客。那要怎么做呢,这里我用一个免费的 md 工具 ——Typora 为例。


创建文件和文件夹

创建一个以文章标题的文件夹,里面再分别创建一 img 文件夹和同文章标题的 md 文件,img 下再创建一个与文章标题同名的文件夹。

hexo实战:(二)个人博客优化合集_hexo_09


Typora 设置

依次找到 “文件” -> “偏好设置” -> "图像" , 将插入图片时的下拉选中 “复制到指定路径”,填入下面的值。

./img/${filename}/

hexo实战:(二)个人博客优化合集_ide_10

第二步找到 “格式” -> "图像" -> “设置图片根目录”,选择 markdown 文件同级的目录,最后复制图片时就会复制到 img 下的文章同名目录下。

hexo实战:(二)个人博客优化合集_github_11

为什么要这样设置?因为 Hexo 的图片在打包前都是在主题包 /source/img 里,而为了方便本地能按文章存储,也方便将本地的文章图片直接丢到 img 下,然后 md 文件放到_post 中。打包之后就能以仓库图片展示,而且按文章分类存储,以后删除起来也一目了然。

hexo实战:(二)个人博客优化合集_hexo_12


写在最后

这次的优化看起来好像是面面俱到了,但其实关于 Hexo 主题还有更细节的处理。比如可以添加博客看板精灵,酷炫的动态大背景,还有鼠标跟随或点击特效等等。但是我这博客目前定位主要以内容为主,所以暂时就就演示了,当然,如果有用户喜欢也可以马上加上去的。

最后呢,就是三部曲的第二篇结束了,那下次就自然地要开始进入 Hexo 章最后一篇。现在是计划介绍一下怎么让博客被各大搜索引擎收录,以及一些推广心得等等。具体的详细内容未定,更新时间也还不知道,因为在等我那个小游戏的软著下来,下来后我一定要好好写一篇软著申请避坑的文章,可实在是太难等了!

(我是一个持续摸索个人副业的普通程序员,关注我,和你一起探索更多可能。——ZERO 开发)

hexo实战:(二)个人博客优化合集_hexo_13

举报

相关推荐

0 条评论