建筑设计网站 知乎河北邯郸做移动网站
hexo+butterfly博客功能完善和美化（四）—博客上传
这是最后一期讲美化和功能完善了，笔者会陆续把csdn上面的博客转移到我的博客网站上面，大家可以来访问
Darlingの妙妙屋
文章目录
- hexo+butterfly博客功能完善和美化（四）---博客上传
- 1.图床
- 2.front-matter
- 0.介绍
- 1.页面控制：Page Front-matter
- 2.帖子控制：Post Front-matter
- 3.Markdown文档以及语法
- 4.标签页和分类页
- 5.具体文章上传
- 1.图片问题
- 2.单个文件上传
- 3.直接上传整个文件夹
- 6.每个标签的标签页和每个分类的分类页
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.标签页和分类页
- 用命令行新建一个页面：（页面名称可以任意）
hexo new page "tages"
- 打开 /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这两项，代表的每个标签的标签页面的顶部图片