使用Hexo写博客

尽管 Hexo 支持 MarkDown,但是我们却不能像写单独的 MarkDown 文档时那样肆无忌惮。由于我们所写的文档是需要被解析为静态网页文件的,所以我们必须严格遵从 Hexo 的规范,这样才能解析出条理清晰的静态网页文件。

新建文档

假设我们的文章名为 “hello hexo markdwon”,在命令行键入以下命令即可:

$ hexo new "hello hexo markdown"

上述命令的结果是在 ./hexo/source/_posts 路径下新建了一个 hello-hexo-markdown.md 文件。

然后,我们就可以打开编辑器尽情地写作了。

文档格式

我们使用文本编辑器打开刚刚新建的 hello-hexo-markdown.md 文件,会发现其中已经存在内容:

---
title: hello hexo markdown
date: 2016-11-16 18:11:25
tags:
---

这些内容是干嘛的呢?事实上,他们就是用于设置 MarkDown 文档在被解析为静态网页文件时的相关配置,这些配置参数一般位于文件中最上方以 --- 分隔的区域。

其中,title 的值是当前文档名,也是将来在网页中显示的文章标题。

date 值是我们新建文档时的当地时区时间。

tags 值是文档的标签,我们可以随意赋值为文档贴标签。其用法如下:

---
title: hello hexo markdown
date: 2016-11-16 18:11:25
tags:
- hello
- hexo
- markdown
---

上面的配置参数为这篇文档贴上了 hellohexomardown 标签,如果站点使用的主题支持标签功能,MarkDown 文档被解析为静态网页文件后就可以看到效果。

除了以上这些,还有很多预先定义的参数 Front-mtter,我们这里选取一个常用且较为典型的配置参数 categories 讲解一下。

文章分类

categories 是用来给文章分类的,它跟 tags 不同的是其具有顺序性和层次性。

例如,我们写一篇关于 CSS3 动画的文章,我们可能会为其打标签 ”CSS3“、”动画“等,但是我们却会将其分在 CSS/CSS3 类别下,这个是有一定的相关性、顺序性和层次性。简单来说,categories 有点儿像新建文件夹对文档进行分门别类的归置。

categories 的用法同 tags 一样,只不过斗个 categories 值是分先后顺序的。

引用资源

写个博客,有时候我们会想添加个图片啦 O.O,或者其他形式的资源,等等。

这时,有两种解决办法:

  1. 使用绝对路径引用资源,在 Web 世界中就是资源的 URL

  2. 使用相对路径引用资源

文章资源文件夹

如果是使用相对路径引用资源,那么我们可以使用 Hexo 提供的资源文件夹功能。

使用文本编辑器打开站点根目录下的 _ config.yml 文件,将 post_asset_folder 值设置为 true

post_asset_folder: true

上面的操作会开启 Hexo 的文章资源文件管理功能。Hexo 将会在我们每一次通过 hexo new <title> 命令创建新文章时自动创建一个同名文件夹,于是我们便可以将文章所引用的相关资源放到这个同名文件夹下,然后通过相对路径引用。

相对路径引用的标签插件

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。我们可以通过使用 Hexo 提供的标签插件来解决这个问题:

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

比如说:当你打开文章资源文件夹功能后,你把一个 example.jpg 图片放在了你的资源文件夹中,如果通过使用相对路径的常规 markdown 语法 ![](/example.jpg) ,它将 不会 出现在首页上。(但是它会在文章中按你期待的方式工作)

!!!注意: 如果已经开启了文章的资源文件夹功能,当使用 MarkDown 语法引用相对路径下的资源时,只需 ./资源名称,不用在引用路径中添加同名文件夹目录层级。

正确的引用图片方式是使用下列的标签插件而不是 markdown :

{% asset_img example.jpg This is an example image %}

通过这种方式,图片将会同时出现在文章和主页以及归档页中。

文章摘要

有的时候,主题模板配置的不够好的话,Hexo 最终生成的静态站点是不会自动生成文章摘要的。

所以,为了保险起见,我们也自己手动设置文章摘要,这样也方便避免自动生成的摘要不优雅的情况。

设置文章摘要,我们只需在想显示为摘要的内容之后添 <!-- more --> 即可。像下面这样:

---
title: hello hexo markdown
date: 2016-11-16 18:11:25
tags:
- hello
- hexo
- markdown
---
​
我是短小精悍的文章摘要(๑•̀ㅂ•́)و✧
​
<!-- more -->
​
紧接着文章摘要的正文内容

这样,<!-- more --> 之前、文档配置参数之后中的内容便会被渲染为站点中的文章摘要。

注意!文章摘要在文章详情页是正文中最前面的内容。

生成文件

清除缓存文件

为了避免不必要的错误,在生成静态文件前,强烈建议先运行以下命令:

$ hexo clean

上述命令会清除本地站点文件夹下的缓存文件(db.json)和已有的静态文件(public)。

生成静态文件

写好 MarkDown 文档之后,我们就可使用以下命令生成静态文件:

$ hexo generate

然后我们就可以启动 Hexo 服务器,使用浏览器打开 http://localhost:4000 查看效果了。

示范

下图是一篇经过配置的简单文档,生成静态文件后在网站首页显示的结果。我们可以看到手动设置的摘要,以及打的标签生效了。

img

文章来源: lfkid.github.io, 作者:lfkid,版权归原作者所有,如需转载,请联系作者。

源文链接: https://lfkid.github.io/2016/11/16/Hexo%E6%95%99%E7%A8%8B%EF%BC%9A%EF%BC%88%E4%B8%89%EF%BC%89%E4%BD%BF%E7%94%A8Hexo%E5%86%99%E5%8D%9A%E5%AE%A2/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562530.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql过滤效率和java过滤效率_如何合理选择初中高效过滤器的效率?

利菲尔特环保科技点击蓝字 关注我们 各种型号的空气过滤器有不同的标准和使用效率&#xff0c;今天利菲尔特为您介绍各种类型的空气过滤器在不同地方的应用。一般情况下&#xff0c;最末一级过滤器决定空气净化的程度&#xff0c;上游的各级过滤器只起保护作用&…

宝塔面板搭建autoPicCdn:一款基于jsdelivr-Github的免费CDN图床

autoPicCdn是白嫖Github的存储空间&#xff0c;通过jsdelivr全球加速(含有国内节点)。实现图床加速的目的。加速效果非常不错&#xff0c;用站长工具检测&#xff0c;也是一片绿油油&#xff0c;所以用来存储一些静态文件是最合适不过了。 相关文章&#xff1a;GithubjsDelivrP…

物流设计大赛优秀作品_中国外运杯第七届全国大学生物流设计大赛案例专家评审会在京召开...

2020年9月10日&#xff0c;“中国外运杯”第七届全国大学生物流设计大赛案例专家评审会在京召开。中国物流与采购联合会副会长任豪祥、中国物流与采购联合会原副会长、中国物流与采购联合会专家委员会主任戴定一、中国外运股份有限公司首席数字官高翔等有关领导及来自行业企业、…

细思极恐---十年生死两茫茫,通信人,意欲亡。

每一位通信人&#xff0c;都可能面对过来自亲友的“灵魂三问”。 “通信究竟是什么&#xff1f;” “通信从哪里来&#xff1f;” “通信要往哪里去&#xff1f;” 讲真的&#xff0c;我不知道。。。。本篇博文是模仿codesheep羊哥写的&#xff0c;因为我们都学的通信&#x…

归并排序--Java

归并排序&#xff1a; 排序原理&#xff1a; 1、尽可能的一组数据拆分成两个元素相等的子组&#xff0c;并对每一个子组继续拆分&#xff0c;知道拆分后的每个子组的元素个数是1为止。 2、将相邻的两个子组进行合并成一个有序的大组 3、不断重复步骤2&#xff0c;直到最终只…

希尔排序--Java

希尔排序 排序原理&#xff1a; 1、选定一个增量h&#xff0c;按照增长量h作为数据分组的依据&#xff0c;对数据进行分组 2、对分好组的每一组数据完成插入排序 3、减小增长量&#xff0c;最小减为1&#xff0c;重复第二步操作 其中&#xff0c;希尔排序确定增长量h的规则…

插入排序--Java

插入排序&#xff1a; 原理&#xff1a; 1、把所有的元素分为两组&#xff0c;已经排序的和未排序的 2、找到未排序的组中的第一个元素&#xff0c;向已经排序的组中进行插入 3、倒叙遍历已经排序的元素&#xff0c;依次和待插叙的元素进行比较&#xff0c;直到找到一个元素…

redis 缓存预热_Redis:缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级

一、缓存雪崩缓存雪崩我们可以简单的理解为&#xff1a;由于原有缓存失效&#xff0c;新缓存未到期间(例如&#xff1a;我们设置缓存时采用了相同的过期时间&#xff0c;在同一时刻出现大面积的缓存过期)&#xff0c;所有原本应该访问缓存的请求都去查询数据库了&#xff0c;而…

用接口写冒泡排序

用接口写冒泡排序&#xff1a; package demo02.maopaoapi.Bubble; public class Bubble {/***对数组a中的元素进行排序*/public static void sort(Comparable[] a){for (int i a.length-1; i >0; i--) {for (int j 0; j < i; j) {//比较索引j和索引j1处的值if (greate…

选择排序--Java

选择排序&#xff1a;合适的元素放在合适的位置 1、每一次遍历的过程中&#xff0c;都假定第一个索引处的元素是最小值&#xff0c;和其他索引处的值依次进行比较&#xff0c;如果当前索引处的值大于其他某个索引处的值&#xff0c;则假定其他某个索引处的只为最小值&#xff…

Comparable接口的使用:(知识回顾)

Comparable接口的使用&#xff1a;&#xff08;知识回顾&#xff09; 1、定义一个学生类&#xff0c;具有年龄age和姓名username两个属性&#xff0c;并通过Comparable接口提供比较规则。 package demo02.sort; public class Student implements Comparable<Student>{p…

binary search(二分法)

binary search&#xff08;二分法&#xff09;&#xff1a; 代码&#xff1a; import java.util.Arrays;/*** 二分法查找元素*/ public class BinarySearch {public static void main(String[] args) {int[] arr {30,20,50,10,80,9,7,12,100,40,8};int searchWord 20;//要查…

冒泡排序--Java

1、冒泡排序 import java.util.Arrays; /*** 冒泡排序*/ public class Test01 {public static void main(String[] args) {int[] values {3,1,6,2,9,0,7,4,8,5};System.out.println("排序前数组&#xff1a;" Arrays.toString(values));int temp;for (int i 0; i …

Java_FileInputStream_读一个文件

Java_FileInputStream_读一个文件 代码: package demo01;import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException;public class FileInputStreamTest01 {public static void main(String[] args) {FileInputStream fis null;tr…

最大化窗口设置_Qt学习笔记4(窗口操作及插入图片)

窗口操作&#xff1a;Qt全屏显示函数 showFullScreen() Qt最大化显示函数 showMaximized()Qt最小化显示函数 showMinimized()Qt固定尺寸显示函数 resize(x,y)Qt设置最大尺寸函数 setMaximumSize(w,h)Qt设置最小尺寸函数 setMinimumSize(w,h)插入图片&#xff1a;Qt中没有Image组…

JDBC练习一

JDBC练习一 import java.sql.*;public class JDBCTest01 {public static void main(String[] args) {Connection conn null;Statement stmt null;try{// 1、注册驱动Driver driver new com.mysql.jdbc.Driver(); //多态&#xff0c;父类型引用指向子类型对象DriverManager.…

JDBC练习二

JDBC练习二 import java.sql.*; /*JDBC完成Delete */public class JDBCTest02 {public static void main(String[] args) {// 1、注册驱动// 2、获取连接// 3、获取数据库操作对象// 4、执行sql语句// 5、获取查询结果集// 6、释放资源Connection conn null;Statement stmt …

JDBC练习三

JDBC练习三 import java.sql.*; /*注册驱动的另一种方式 */public class JDBCTest03 {public static void main(String[] args) {try{// 注册驱动Class.forName("com.mysql.jdbc.Driver");// 获取连接Connection conn DriverManager.getConnection("jdbc:mysq…

JDBC练习四

JDBC练习四 import java.sql.*; import java.util.*; /*使用资源绑定器 */ public class JDBCTest04 {public static void main(String[] args) {ResourceBundle bundle ResourceBundle.getBundle("jdbc");String driver bundle.getString("driver");St…

JDBC练习五

JDBC练习五 /*执行DQL语句 */import java.sql.*; import java.util.*;public class JDBCTest05 {public static void main(String[] args) {// 1、注册驱动// 2、建立连接// 3、获取数据库操作对象// 4、执行sql语句// 5、获取查询结果集// 6、释放资源Connection conn null;…