Hexo+蝴蝶主题的基本使用
在上一篇教程文章1 里我们部署了基本的hexo页面并且安装了butterfly主题,但是只有一个页面并不能算一个网站,因此本篇教程教你如何进行一些写文章、生成子页面之类的基本的操作
生成页面
首先,使用hexo newpage生成一个新的文章
您可以在命令中指定文章的布局(layout),默认为 post
,可以通过修改 _config.yml
中的 default_layout
参数来指定默认布局。
Hexo 有三种默认布局:post
、page
和 draft
。在创建这三种不同类型的文件时,它们将会被保存到不同的路径;而您自定义的其他布局和 post
相同,都将储存到 source/_posts
文件夹。其中post 代表文章,page 选项代表子页面,你也可以自己在 根目录/source 文件夹下创建.md文件。
在Hexo中,文章 和子页面 是不一样的,文章是首页可以找到的带有标签的博文,子页面是网站右上角的例如标签、分类、友情链接、关于等页面。
生成网站必需的页面
标签页
使用 hexo new page tag
命令生成一个tag子页面
Front-matter 是 markdown 文件最上方以 — 分隔的区域,用于指定个别档案的变数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 --- title: 标签 # 【必需】页面标题 date: xxxx-xx-xx # 【必需】页面创建日期,默认生成,可以自定义 updated: # 更新日期,可以自定义 type: "tags" # 【必需】标签、分类和友情链接三个页面需要配置 comments: # 【可选】显示页面评论模块(默认 true) description: # 【可选】页面描述 keywords: # 【可选】页面关键字 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的配置) --- 标签
tag子页面会自动生成网站已有文章的标签,效果如下图所示(忽略我的主题美化,后面再说)
分类页
使用 hexo new page categories
命令生成一个分类子页面
1 2 3 4 5 6 --- title: 分类 date: 2022-05-01 00:00:00 type: "categories" --- 分类子页面
友情链接
使用 hexo new page link
命令生成一个友情链接页面
1 2 3 4 5 6 --- title: 友情链接 date: 2022-09-28 00:00:00 type: "link" --- 友情链接子页面
添加友情链接
本地生成
在Hexo博客目录中的source/_data(如果没有 _data 文件夹,请自行创建),创建一个文件link.yml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 - class_name: 网站 class_desc: 值得推荐的网站 link_list: - name: Hexo link: https://hexo.io/zh-tw/ avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg descr: 快速、简单且强大的网志框架 - class_name: 友情链接 class_desc: 那些人,那些事 link_list: - name: 猪梨村 link: https://www.zoulicheng.cn/ avatar: https://zoulicheng.oss-cn-shanghai.aliyuncs.com/img/quin.jpg descr: 飞机飞过天空 天空之城
远程拉取
从 4.0.0 开始,支持从远程加载友情链接,远程拉取只支持 json。
注意: 选择远程加载后,本地生成的方法会无效。
在 source/link/index.md 这个文件的 front-matter 添加远程链接
Json 的格式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 [ { "class_name" : "友情链接" , "class_desc" : "那些人,那些事" , "link_list" : [ { "name" : "猪梨村" , "link" : "https://www.zoulicheng.cn/" , "avatar" : "https://zoulicheng.oss-cn-shanghai.aliyuncs.com/img/quin.jpg" , "descr" : "飞机飞过天空 天空之城" } ] } , { "class_name" : "网站" , "class_desc" : "值得推荐的网站" , "link_list" : [ { "name" : "Hexo" , "link" : "https://hexo.io/zh-tw/" , "avatar" : "https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg" , "descr" : "快速、简单且强大的网志框架" } ] } ]
图库
图库页面只是普通的页面,你只需要hexo n page xxxxx 创建你的页面就行
然后使用标签外挂 galleryGroup,具体用法请查看对应的内容。
1 2 3 4 5 <div class="gallery-group-main"> {% galleryGroup '壁纸' '收藏的一些壁纸' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png % } {% galleryGroup '漫威' '关于漫威的图片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg % } {% galleryGroup 'OH MY GIRL' '关于OH MY GIRL的图片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg % } </div>
壁纸
收藏的一些壁纸
漫威
关于漫威的图片
OH MY GIRL
关于OH MY GIRL的图片
子页面也是普通的页面,你只需要hexo n page xxxxx 创建你的页面就行
然后使用标签外挂 gallery ,具体用法请查看对应的内容。
1 2 3 4 5 6 7 8 9 10 {% gallery %} ![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg) ![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg) ![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg) ![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg) ![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg) ![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg) ![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg) ![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg) {% endgallery %}
如果你想要使用 /photo/ohmygirl 这样的链接显示你的图片内容
你可以把创建好的 ohmygirl整个文件夹移到 photo文件夹里去
404页面
主题内置了一个简单的404页面,可在设置中开启
本地预览时,访问出错的网站是不会跳到404页面的。
如需本地预览,请访问http://localhost:4000/404.html
1 2 3 4 5 error_404: enable: true subtitle: "页面没有找到" background:
第一篇文章!
使用 hexo new test
命令生成一个标题为test的文章
Post Front-matter
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 --- title: test# 【必需】文章标题 date: xxxxxxx # 【必需】文章创建日期 updated: # 【可选】文章更新日期 tags: 初始之火 # 【可选】文章标签 categories: # 【可选】文章分类 keywords: # 【可选】文章关键字 description: # 【可选】文章描述 top_img: # 【可选】文章顶部图片 comments: # 【可选】显示文章评论模块(默认 true) cover: # 【可选】文章缩略图(如果没有设置top_ img,文章页顶部将显示缩略图,可设为false/图片地址/留空)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) --- # 文章标题 使用本地markdown编辑器尽情写作吧