akii
文章
学习

Hexo的基本操作手册

2023年3月31日 7 分钟阅读 浏览 喜欢 0 评论

Hexo c — hexo g — hexo s — hexo d

常用命令

新建文章

bash 
hexo new <文章标题> # 可以简写hexo n <文章标题>
例：hexo n HELLO WORLD

生成静态文件

由于Hexo是用Node.js来进行页面渲染，所以需要生成对应的静态文件

bash 
hexo generate # 可以简写hexo g

启动本地服务器

每篇文章总得查看无论是编排、内容，所以我们需要测试，这时候我们就需要本地服务了

bash 
hexo server # 可以简写hexo s

但是运行之前需要确保已经安装 hexo-server 插件

undefined 
npm install hexo-server --save

此时服务器就会开启4000端口供你使用，但是可能你的服务器端口被占用了，会提示以下错误

php 
FATAL Port 4000 has been used. Try other port instead.

此时你需要切换一个端口

bash 
hexo s -p 5000 # -p 是可以指定端口的操作

部署网站

bash 
hexo deploy # 可以简写 hexo d

这里涉及到几个知识点

  • 需要先渲染博客，也就是hexo g（可以hexo g -d一步操作）
  • 还需要配置博客目录下 _config.yml 文件中的deploy模块
bash 
# 之后会教大家如何操作
deploy:
    type: git
    repo: <git地址>
    branch: master

安装主题

戳这里到Hexo的插件库 https://links.jianshu.com/go?to=https%3A%2F%2Fhexo.io%2Fplugins%2F

博客配置

文章front-matter

bash 
---
title:
date:
tags:
categories:
keywords:
description:
top_img: （除非特定需要，可以不写）
comments: 是否展示评论系统（true.展示 false.不展示）
description: 节选，如果不填就默认从文章中选择配置的长度
cover:  首页缩略图
toc:  是否显示toc
toc_number: 是否显示toc数字
copyright: 是否显示版权
---
bash 
# 节选内容
auto_excerpt:
  enable: true
  length: 150

系统中英文替换

替换主题后你会发现首页的菜单一开始是英文名字，或者不是自己想要的样子，怎么办？ 配置 _config.yml

undefined 
language: zh-CN

新增菜单

此时发现点击页面都是空白

这时候就需要新增页面的操作了，但是注意这里的新增和新增文章不同，这里需要加上分类

csharp 
# 新增标签
hexo new page tags

在博客的根目录访问

bash 
source/tags/index.md

发现这是一个文档文件

是的，基本上大同小异，但是要注意，由于主题的底层已经加上了对该页面的效果，所以需要遵循命名规范后修改文档

bash 
title: 标签
date: 2019-10-01 10:00:00
type: "tags"

此时首页的标签按钮已经展示对应的页面内容了，其余的页面同理。

友情链接

  1. 前往你的Hexo根目录
  2. 输入 hexo new page link
  3. 找到 source/link/index.md 这个文件
  4. 编辑这个文件
bash 
title: 链接
date: 2019-10-01 10:00:00
type: "link"

注意，主题中配置友情链接的位置不是在该文件本身，而是需要你去 创建 source/_data 目录，并且新建文件 link.yml

cpp 
class:
  class_name: 友情链接
  link_list:
    1:
      name: 名称
      link: 地址
      avatar: 头像
      descr: 描述
    #2:
    #  name: xxxxxx
    #  link: https://www.xxxxxxcn/
    #  avatar: https://xxxxx/avatar.png
    #  descr: xxxxxxx

同时，可以在themes/Butterfly/_config.yml文件中，写上个人博客的信息，方便他人帮忙转载

cpp 
Flink:
  headline: 友情链接
  info_headline: 我的Blog资料
  name: Blog 名字： 俗俗俗俗俗人。
  address: Blog 地址： https://blog.thatwang.com/
  avatar: Blog 头像： https://blog.thatwang.com/img/avatar.png
  info: Blog 简介： 做个俗人，知世俗，而不俗
  comment: 如果需要交换链接，请给我留言，谢谢~

代码高亮

Butterfly支持五种高亮样式：

  • default
  • darker
  • pale night
  • light
  • ocean

配置 _config.yml

undefined 
highlight_theme: light

复制

配置 _config.yml

bash 
# Highlight theme
# ---------------
highlight_theme: light
highlight_copy: true    #代码复制按钮
highlight_lang: true     #代码语言提示
highlight_shrink: false #代码框不展开，需点击 '>' 打开

# copy setting
# 是否禁止复制（如果禁止，highlight_copy的功能将无效)
# copyright 复制的内容后面加上版权信息
copy:
  enable: true  # true 开启 / false 禁止
  copyright: true

换行

在默认情况下，配置中是不开启换行功能的，如果不希望在代码中有横向滚动条，可以开启这个功能。 配置 _config.yml

bash 
code_word_wrap: true
highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace:

社交图标

戳这里到对应的图标中心 配置 _config.yml

cpp 
social:
  fa fa-weixin: http://iblog.thatwang.com/qrcode_for_gh_706ce3f91494_258.jpg
  fa fa-weibo: http://weibo.cn/wordpole9981
  fa fa-qq: https://jq.qq.com/?_wv=1027&k=5E3IUHu

文章版权

配置 _config.yml

ruby 
post_copyright:
  enable: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

是否开启版权

bash 
copyright: false

文章打赏

配置 _config.yml

jsx 
reward:
  enable: true
  QR_code:
    - itemlist:
        img: /img/wechat.jpg
        text: 微信
    - itemlist:
        img: /img/alipay.jpg
        text: 支付宝

头像

配置 _config.yml

cpp 
avatar: https://xxxx/avatar.png

文章目录

配置 _config.yml

bash 
toc:
  enable: true
  number: true  # 显示章节数字

相关文章

配置 _config.yml

bash 
related_post:
  enable: true
  limit: 6         # 显示推荐文章数量

博客年份

配置 _config.yml

undefined 
since: 2018

页脚

配置 _config.yml

jsx 
footer_custom_text: <a href="https://blog.thatwang.com/">Everybody's good at something.</a>

夜间模式

Apple都有这模式了，我们也不能输呀

配置 _config.yml

bash 
darkmode:
  enable: true

阅读模式

阅读模式会去除文章以外的内容

配置 _config.yml

bash 
readmode:
  enable: true

侧边栏设置

配置 _config.yml

swift 
aside:
  position: right # left or right
  card_author: true
  card_announcement: true
  card_recent_post: true
  card_categories: true
  card_tags: true
  card_archives: true
  card_webinfo: true

访问人数

配置 _config.yml

bash 
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

运行时间

配置 _config.yml

bash 
runtimeshow:
  enable: true
  start_date: 6/7/2018 00:00:00  
  ##博客开通时间
  # 格式: 月/日/年 时间
  # 也可以写成 年/月/日 时间

相册

文章页面编辑以下markdown格式内容

undefined 
{% gallery %}
markdown 图片格式
{% endgallery %}

评论

戳这个leancloud服务 https://links.jianshu.com/go?to=https%3A%2F%2Fleancloud.cn%2Fdashboard%2Fdata.html%3Fappid%3Dfp5mCOihCGkpqjlVm6R7eQqk-gzGzoHsz%23%2F

其实Hexo能支持很多评论系统，但是用下来，就leancloud这个最舒服，最方便

配置 _config.yml

bash 
valine:
  enable: true # if you want use valine,please set this value is true
  appId: 配置中心查看  # leancloud application app id
  appKey: key  # leancloud application app key
  notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
  verify: false # valine verify code (true/false)
  pageSize: 10 # comment list page size
  avatar: robohash  # gravatar style https://valine.js.org/#/avatar
  lang: zh-cn # i18n: zh-cn/en
  placeholder: 来吧，造作吧，快活吧，肆无忌惮吧！(～￣￣)～ # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header info
  bg: /img/comment_bg.png  # valine background

img

注册登录

img

创建应用

img

获取key

此时就安装好了评论系统，就这么简单

img

评论

音乐

同样是使用leancloud服务

前面的注册逻辑与评论一样，接下来就是存储环节

加入单条音乐播放器的页面

bash 
{% aplayer "可以了" "陈奕迅" "https://xxx.xxx.com/92b3af330d2274b1fa55.mp3" "https://xxx.xxx.com/xx.png" "autoplay" %}

加入列表音乐播放器的页面

bash 
{% aplayerlist %}{"narrow": false,"autoplay": true,"showlrc": 3,"mode": "random","music": [{"title": "美好事物","author": "房东的猫","url": "http://xxx.xxx.com/945198c4909674765644.mp3","pic": "http://xxx.xxx.com/6e0e9e63cb0733f7ff12.png","lrc": ""},{"title": "尚好的青春","author": "云の泣","url": "http://xxx.xxx.com/5b42b829b8ae08ccabe0.mp3","pic": "http://xxx.xxx.com/889df742eca5261f2fc5.png","lrc": ""},{"title": "预谋邂逅","author": "阿肆","url": "http://xxx.xxx.com/1bd4f91441982710bcad.mp3","pic": "http://xxx.xxx.com/f72d61579f74d4ff9ce0.png","lrc": ""}]}{% endaplayerlist %}

即可

img

音乐播放器

分享

配置 _config.yml

bash 
sharejs:
  enable: true
  sites: wechat,weibo,qq

搜索

安装 hexo-generator-search ，根据文档做对应配置

配置 _config.yml

bash 
local_search:
  enable: true
  labels:
    input_placeholder: 试试看能找到啥宝藏吧!
    hits_empty: "客官，本店还未提供该服务: ${query}" # if there are no result

自定义主题

配置 _config.yml

bash 
theme_color:
   enable: true
   main: "#696969"
   paginator: "#00c4b6"
   button_hover: "#FF7242"
   text_selection: "#00c4b6"
   link_color: "#99a9bf"
   meta_color: '#858585'
   hr_color: "#A4D8FA"
   read-mode-bg_color: '#FAF9DE'
   inline-code-color: '#F47466'

打字效果

配置 _config.yml

bash 
activate_power_mode:
  enable: true

动态彩带

配置 _config.yml

bash 
canvas_ribbon_piao:
  enable: true
  mobile: false # false 手机端不显示 true 手机端显示

背景线条

配置 _config.yml

bash 
canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false #  false 手机端不显示 true 手机端显示

鼠标点击效果

配置 _config.yml

bash 
fireworks:
  enable: true
  
# 點擊出現愛心
click_heart:
  enable: true

首页弹幕座右铭

配置 _config.yml

bash 
# 主頁subtitle
# 打字效果
# (如果有英文逗號' , '，請使用轉義字符 &#44;)
subtitle:
  enable: true
  sub:
    - 努力不一定能成功&#44;但是永远不会后悔
    - Hard work may not always result in success&#44;but it will never result in regret
喜欢 0
评论区在赶来的路上...

Copyright © 2023 - 2026 Akii. All rights reserved.

Akii's Blog.

总之岁月漫长，然而值得等待