hexo+butterfly博客功能完善和美化（四）---博客上传

hexo+butterfly博客功能完善和美化（四）—博客上传

这是最后一期讲美化和功能完善了，笔者会陆续把csdn上面的博客转移到我的博客网站上面，大家可以来访问

Darlingの妙妙屋

1.图床

主要是用作博客封面的图片会很多，所以会用到图床

这个是一个上传图片的软件，一般把图片存在云服务器上面，然后你会获得一个外链，可以直接访问到你的图片

好处：

1.你用链接的话，你的博客封面的图片就不用存在本地，外存会小一点

2.每次hexo g，hexo d的速度会快一点。再者可能别人访问你的网站的速度会快一点？这个我没测试过

3.最重要的是文章里面的图片基本是必须用链接？不然文章里面的各种截图都放到本地的img感觉会很占外存，部署也比较麻烦。大家可以试试文档里面的照片都存在本地，然后hexo d之后看看是否可以加载出来，个人感觉有点困难

坏处的话就是配置很麻烦

不过笔者目前用到的图片比较少，给不了相关的建议，我可以用图床但是页面的顶部图之类的暂时还用的是写到myblog的img中去了，但是文章中的图片都已经上传了云服务器得到的链接

但是笔者两年前就配置好了，也忘记咋配置大家可以搜一搜相关的教程，笔者用的是picgo+阿里云服务器

2.front-matter

0.介绍

这个是用来控制你的页面和博客的相关信息的

Front-matter 是 markdown 文件最上方以---分隔的区域，用于指定个别档案的变数。

• Page Front-matter 用于页面配置
• Post Front-matter 用于文章页配置

如果标注可选的参数，可根据自己需要添加，不用全部都写在markdown里

1.页面控制：Page Front-matter

---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
---

写法	解释
title	【必需】页面标题
date	【必需】页面创建日期
type	【必需】标签、分类和友情链接三个页面需要配置
updated	【可选】页面更新日期
description	【可选】页面描述
keywords	【可选】页面关键字
comments	【可选】显示页面评论模块(默认 true)
top_img	【可选】页面顶部图片
mathjax	【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex	【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside	【可选】显示侧边栏 (默认 true)
aplayer	【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink	【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)

给大家看一下我的标签页当做例子吧

---
title: tags
date: 2025-03-18 12:54:10
type: "tags"
orderby: random
order: 1
top_img: /img/tags.jpg
comments: false
---

2.帖子控制：Post Front-matter

markdown

---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
---

写法	解释
title	【必需】文章标题
date	【必需】文章创建日期
updated	【可选】文章更新日期
tags	【可选】文章标籤
categories	【可选】文章分类
keywords	【可选】文章关键字
description	【可选】文章描述
top_img	【可选】文章顶部图片
cover	【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
comments	【可选】显示文章评论模块(默认 true)
toc	【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number	【可选】显示toc_number(默认为设置中toc的number配置)
toc_style_simple	【可选】显示 toc 简洁模式
copyright	【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author	【可选】文章版权模块的文章作者
copyright_author_href	【可选】文章版权模块的文章作者链接
copyright_url	【可选】文章版权模块的文章连结链接
copyright_info	【可选】文章版权模块的版权声明文字
mathjax	【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex	【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aplayer	【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink	【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
aside	【可选】显示侧边栏 (默认 true)

也是同样给大家看一下我的一个帖子的例子

---
title: Day68 | 灵神 | 二分查找：H指数II
tags:
  - 刷题记录
  - 算法
  - 二分查找
categories: 刷题记录
cover: /img/cover.png
abbrlink: 23628
date: 2025-03-20
---html

3.Markdown文档以及语法

这个靠大家自己搜一搜啦，笔者用的记笔记的软件是typora，有破解版

下载后建议typora+picgo图床进行笔记记录，会很轻松

4.标签页和分类页

1. 用命令行新建一个页面：（页面名称可以任意）

hexo new page "tages" 

2. 打开 /source/tages/index.md，设置其类型 type 值为“tages”

---
title: tags
date: 2025-03-18 12:54:10
type: "tags"
orderby: random
order: 1
top_img: /img/tags.jpg
comments: false
---

这个可以照着front-matter的含义进行编写

分类页类似我就不再赘述了

5.具体文章上传

1.图片问题

我还是建议搞个图床，不然本地还要存储博客里面的图片，那真的挺占存储空间的

如果上传了博客，部署到了github上面之后，图片显示不了，那大概率就是在/img下你没放博客的图片，所以显示不了

2.单个文件上传

写好front-matter放在文章的顶部，然后直接拖入/_posts文件夹

front-matter示例

然后执行hexo cl

hexo g

hexo s去看看效果

hexo d部署

3.直接上传整个文件夹

把文件夹的每个文件都写好front-matter之后把整个文件夹拖动到里面就行

6.每个标签的标签页和每个分类的分类页

• 可以在每个页面的front-matter里面设置，这个是单独配置
• 也可以在配置文件里面设置，这个是全局配置，每个标签比如二分查找，算法，点击去之后的页面都是一个顶部图片
  • 

就是图中的tag_per_img和category_per_img这两项，代表的每个标签的标签页面的顶部图片