hexo开始写博客
新建文章
命令:
hexo new [layout] title 或 hexo n [layout] title |
创建文章前要先选定模板,在hexo中也叫做布局。hexo支持三种布局(layout):post(默认)、draft、page。
这块先介绍如何使用已有布局,后面还将会介绍如何自定义布局。
在博客目录下输入以下命令时,会默认使用post布局,然后自动在source_posts目录生成一个text.md文件:
hexo n text |
当然,也可以执行布局
hexo n [layout_name] draft1 |
该命令创建了一个使用特定布局的名为draft1的文章。
打开之前创建的test.md文件,可以看到文章开头包含如下内容:
--- |
如何自定义布局呢?实际上,布局是一个markdown文件,它们保存在scaffolds/目录下,可以看到hexo自带的三种布局其实就是三个.md文件:
每一个文件中的内容实际只包含一个Front-matter。
因此,可以在这里修改布局或者建立新的布局,然后创建文章时使用这些布局。
开始写文章
两个虚线之间的内容就是叫Front-matter,主要是文章的配置,具体配置如下,不同主题配置不一样,这块以Matery主题为例
Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。
配置选项 | 默认值 | 描述 |
---|---|---|
title | Markdown 的文件标题 | 文章标题,强烈建议填写此选项 |
date | 文件创建时间日期 | 建议使用发布日期时间 |
author | 根 _config.yml 中的 author | 文章作者 |
img | featureImages 中的某个值 | 文章特征图,推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg |
top | true | 推荐文章(文章是否置顶),如果 top 值为 true,则会作为首页推荐文章 |
cover | false | v1.0.2版本新增,表示该文章是否需要加入到首页轮播封面中 |
coverImg | 无 | v1.0.2版本新增,表示该文章在首页轮播封面需要显示的图片路径,如果没有,则默认使用文章的特色图片 |
password | 无 | 文章阅读密码,如果要对文章设置阅读验证密码的话,就可以设置 password 的值,该值必须是用 SHA256 加密后的密码,防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项 |
toc | true | 是否开启 TOC,可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项 |
mathjax | false | 是否开启数学公式支持 ,本文章是否开启 mathjax,且需要在主题的 _config.yml 文件中也需要开启才行 |
summary | 无 | 文章摘要,自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要 |
categories | 无 | 文章分类,本主题的分类表示宏观上大的分类,只建议一篇文章一个分类 |
tags | 无 | 文章标签,一篇文章可以多个标签 |
keywords | 文章标题 | 文章关键字,SEO 时需要 |
reprintPolicy | cc_by | 文章转载规则, 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个 |
以下为文章的 Front-mattre示例:
--- |
【Tips】发现一个问题,每次hexo n的时候Front-matter中内容少的可怜,那怎么修改默认的格式呢?只要去主目录下找到scaffolds文件夹下找到一个post.md文件修改即可:
--- |
文章插入图片
图片几乎是写博客时不可或缺的元素。在hexo中插入图片需要先进行一些设置,不过在介绍那之前让我们先回顾一下markdown引用图片的语法:
 |
- path是必选的,表示图片的路径,可使用绝对或相对路径。
- alt是可选的,是图片无法加载时的替代描述文本。
- title是可选的,是图片的标题。
在hexo中,引用图片不是简单的使用上述语法即可,你还需要为图片制定一个资源文件夹。具体来说,hexo中文章引用图片有两种方式:
将所有文章的图片放到source/images 文件夹中(没有就自己创建一个),然后使用markdown语句引用图片。这种方法一般适用于包含少量图片的hexo项目,但是当文章数量增多,图片数也随之增加后,该管理方式就显得有些混乱。因此我个人推荐你使用下面一种方法。
为每一个文章创建一个资源文件夹,将图片保存其中,具体步骤如下:
在博客根目录打开_config.yml文件做如下修改:
yaml post_asset_folder: true然后使用hexo n text命令后创建一个使用post布局名为text的文章,你将发现hexo在\source_post文件夹下创建了一个\text文件夹以及同名的.md文件:
最后就可以打开text.md文件进行编辑了,你可以把要引用的图片放到同名文件夹下,然后使用相对路径进行引用。注意:请不要自作聪明将text.md文件移动到同名文件夹下,经本人尝试,发现这样会导致图片无法正常引用。
Tip:如果你使用的是Typora编辑器,可以在编辑器的文件/偏好设置/图像中进行如下设置:
这样每次直接拷贝到文章的截图将会被自动保存到同名的文件夹下,非常方便~
但有可能设置了上面的相关配置后,图片依旧加载不出来,下面是两种解决办法:
本地图片加载不出来
插件hexo-renderer-marked解决了这个问题。可以直接用npm install hexo-renderer-marked命令直接安装,之后在config.yaml中更改配置如下:
post_asset_folder: true |
hexo三连后,本地加载的图片就可以正常显示了。
在线图片加载不出来
这个解决方法其实很简单,只需要文章的头部如下图所示位置添加这一句话就可以完美解决问题
插入视频
<video width="480" height="320" controls> |
- video_path是视频的存储路径(含双引号),你可以把视频放在文章的同名资源文件夹下,然后用相对路径方式引用。
- width和height是视频区块的宽度和高度,可自定义。
删除文章
删除文章的过程一样也很简单,先删除本地文件,然后通过生成和部署命令进而将远程仓库中的文件也一并删除。具体来说,以最开始默认形成的helloworld.md这篇文章为例。
首先进入到source / _post 文件夹中,找到helloworld.md文件,在本地直接执行删除。然后依次执行hexo g,hexo d,再去主页查看你就会发现你的博客上面已经空空如也了,这就是如何删除文章的方法。