基于Hexo和Butterfly创建个人技术博客,(3) 创建博客文章及文章模板配置

news2024/11/20 1:38:06

Hexo官司网查看 这里
笔者个人站查看 这里

特别说明:

  1. hexo博客站点发布的文件全是静态文件,没有任何后台服务。博文的发布过程是:1、在本地用hexo new命令创建.md文件----2、经hexo g命令生成.html文件-----3、再通过hexo d命令发布到远程主机上上面。
    a、第1步中可以用其它格式文件编写,但需要安装对应的处理引擎;
    b、第3步中发布过程视情况而定,也可以选择手动上传等;

最佳实践:建议有技术能力的同学可以把生成的文件用git做下版本管理,然后按需增量部署而不是每次全量覆盖(这个话题会在高级内容中详细描述如何操作),这样可以避免破坏原有积累的一些数据,比如访问次数等统计信息;

本章目标:
掌握如何创建新博客文章的方法

一、概述

文章可以手动创建,也可以通过hexo new命令创建,创建文章的命令是hexo new。hexo官方建议的流程如下:
在这里插入图片描述

  1. 首先确定layout模板,模板中定义的内容可以认为是一种公共内容的提取,模板的内容称为Front-matter,在创建文章时会自动添加到新文件中。hexo自带了三种模板(可按实际情况修改):page、post、draft。
    • page:用于创建列表页;
    • post:用于创建具体的博客文章;
    • dratf:用于创建草稿(一般不太用)。
  2. 使用 hexo new命令创建文章。

二、创建模板

模板的概念
所谓的layout模板就是schffolds文件夹下面的.md文件,在新建文章时Hexo 会把 scaffolds 文件夹内相对应的文件添加到新文件的头部,Hexo 有三种默认模板:postpagedraft,区别是创建文章后会被保存到不同的路径;

  1. layout可以自定义,自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。
  2. 如果修改文章的 front-matter 设置 layout: false,则不会使用任何一种布局了。
  3. layout不是必须的,它只是一种创建文章的快捷方式。但还是建议掌握这个流程,可以节省很多时间。
布局生成的.md文章存放路径
post/source/_posts
page/source
draft/source/_drafts

简单模板
模板可使用全局变量,在Tags Plugin语法一章中会详细讲解,一个简单的post.md模板定义如下,其它可配置的属性见下节Front-matter:

---
title: {{ title }}
date: {{ date }}
comments: false
---

自定义模板
一个自定义layout的例子,photo是一个自定义的布局,Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md,如果没有找到会忽略掉,然后文章文件保存到source/_posts 文件夹中,但需要注意其front-matter的值为photo,建议修改成正确的值。

$ hexo new photo "My Gallery"

2.1、Front-matter配置说明

Front-matter 是文章(.md)文件最上方以 --- 分隔的区域,用于设置文章的属性,此处是hexo默认的属性,在butterfly主题中又扩展了一部分,在后面章节会详细描述:

---
title: Hello World
date: 2013/7/13 20:46:25
---
参数描述默认值
layout布局config.default_layout
title标题文章的文件名
date建立日期文件建立日期
updated更新日期文件更新日期
comments开启文章的评论功能true
tags标签(不适用于分页)
categories分类(不适用于分页)
permalink覆盖文章的永久链接,永久链接应该以 /.html 结尾null
excerpt纯文本的页面摘要。
disableNunjucks启用时禁用 Nunjucks 标签 {{ }}/{% %} 和 标签插件的渲染功能false
lang设置代码块语言以自动检测功能继承自 _config.yml

2.2、categories和tags配置

只有文章支持分类和标签,在 Hexo 中分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games

为文章添加多个分类,可以尝试以下 list 中的方法。此时这篇文章同时包括三个分类: PlayStation 和 Games 分别都是父分类 Diary 的子分类,同时 Life 是一个没有子分类的分类。

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

2.3、模板示例

page

---
title: {{ title }}
date: {{ date }}
reward:
description:
top_img:  # butterfly主题扩展,用于设置文章顶图用,后面的文章中会详细说明
comments: false
---

post

---
title: {{ title }}
date: {{ date }}
tags:
categories:
keywords:
description:
top_img:  # butterfly主题扩展,用于设置文章顶图用,后面的文章中会详细说明
cover:    # butterfly主题扩展,用于设置文章顶图用,后面的文章中会详细说明
comments: false
---

dratf

---
title: {{ title }}
tags:
---

因模板可以后期再修改,所以建站初期建议用上述示例模板就可以了,不需要定义的太复杂,在建站过程中逐渐优化。

三、创建新文章

使用如下命令:

$ hexo new [layout] <title>

文件默认支持: markdown、ejs、pug三种不同格式来编写。

3.1、创建新文章

如果不指定layout,则默认为 post,是由 _config.yml 中的 default_layout 参数来指定的。如果标题包含空格的话,请使用引号括起来。

创建两次同名的文件,生成的.md文件不会覆盖。hexo会自动在文件名后加索引:但要注意,经hexo g生成的.html文件的实际链接与 permalink 的配置有关

示例如下:

/source目录下
#创建文件:/source/_posts/test.md
$ hexo new post test

#创建文件: source/_posts/about/me.md  (在source目录下创建子目录)
$ hexo new page --path about/me 

在网站根目录下
#创建文件: /source/about/me.md  (在根目录下)
$ hexo new page --path about/me "About me"

3.2、创建列表页

如果选择layout==post一般是创建博文使用,如果选择page模板则一般是创建列表页面或其它特殊的页面,示例如下:

#创建文件:/source/tags/index.md  
$ hexo new page tags
#创建文件:/source/link/index.md 
$ hexo new page link
#创建文件:/source/categories/index.md 
$ hexo new page categories

3.3、创建草稿(不太建议使用)

创建文件时指定布局为:draft后,文件会被保存到 source/_drafts 文件夹,再通过 publish 命令将草稿移动到 source/_posts 文件夹中:

$ hexo publish [layout] <title>

四、 文件名称设置

Hexo 默认以标题做为文章文件的名称,由参数new_post_name: title.md指定。举例来说,设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章,可以使用以下占位符:

变量描述
:title标题(小写,空格将会被替换为短杠)
:year建立的年份,比如, 2015
:month建立的月份(有前导零),比如, 04
:i_month建立的月份(无前导零),比如, 4
:day建立的日期(有前导零),比如, 07
:i_day建立的日期(无前导零),比如, 7

文件名称设置修改后不会对网站运行产生任何影响,只会对后续文件命名规则有影响,建议保持默认值即可。

五、引用数据共享

本小节严格来说是属于文章编辑的部分。笔者想了想还是按文章编写和资源使用这两个维度来区分,把共享数据和模板归为同一类别。但又与后续tag plugin有些联系所以有意放在此章末尾来讲解。

5.1、数据共享

如果某些数据是需要重复使用的,可以考虑使用「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件。举例来说,在 source/_data 文件夹中新建 menu.yml 文件,内容如下:

Home: /
Gallery: /gallery/
Archives: /archives/

您就能在模板中使用这些数据了:

<% for (var link in site.data.menu) { %>
  <a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>

渲染结果如下 :

<a href="/"> Home </a>
<a href="/gallery/"> Gallery </a>
<a href="/archives/"> Archives </a>

5.2、资源共享

此处没有明确编码方法会比较迷糊,先了解下概念,详细使用方法可参考 hexo文章编写之Tags Plugin语法 文章中对图片和资源的用法描述,

1.全局资源

Asset 代表 source 文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

2.文章专用资源

如果资源只给特定的文章使用,可以将 config.yml 文件中的 post_asset_folder 选项设为 true,然后在每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个与文章title同名的文件夹,然后就可以把有关的资源放在这个关联文件夹中,再通过相对路径来引用它们

post_asset_folder: true

但要注意这需要用到Hexo专用的tag语法,比方法:把一个 example.jpg 图片放在了你的资源文件夹中,使用时不能使用 [](example.jpg),而要使用![](example.jpg)

5.3、资源引用方法

1.AssetTag相对路径引用方法

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo 3 的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

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

正确的引用图片方式是使用下列的标签插件而不是 markdown语法,通过这种方式,图片将会同时出现在文章和主页以及归档页中。

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

2.Markdown 相对路径引用方法

这需要一个插件$ npm install hexo-renderer-marked --save,默认是安装的了,安装后就无须使用asset_img标签了。需先配置一下:

#_config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

启用后,资源图片将会被自动解析为其对应文章的路径。例如: image.jpg 位置为 /2020/01/02/foo/image.jpg ,这表示它是 /2020/01/02/foo/ 文章的一张资源图片, ![](image.jpg) 将会被解析为 <img src="/2020/01/02/foo/image.jpg">

六、测试新文章

此时还没有配置路径,所以我们可以在流量器上手写URL,比如:

$hexo new page test;  #新创建一个名为test的文件
$hexo g   #生成html
$hexo server --debug #启动服务

在/public/posts/文件夹下查找test.html,然后修改浏览器的Url即可查看,此时也可以修改test.md文件,刷新浏览器会自动更新。

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

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

相关文章

知网CN期刊《才智》简介及投稿邮箱

《才智》杂志成立于2001年&#xff0c;隶属吉林省人事厅&#xff0c;是经国家新闻出版总署批准的&#xff0c;吉林省人事系统唯一一本面向全国公开发行的杂志。是一本专业发表各类论文评定职称的省级理论性杂志。以挖掘各行各业拔尖人才、促进科教兴国、振兴人才市场为己任&…

python套接字(二):实现一个服务器和多客户端连接

文章目录 前言一、问题二、实现一个服务器连接多个客户端1、问题分析2、代码实现a、服务器端b、客户端 3、运行 前言 在上一篇博客python套接字(一)&#xff1a;socket的使用简单说明了一下套接字的使用&#xff0c;也实现了使用套接字来传输消息&#xff0c;但是也有一个问题…

深度学习应用篇-推荐系统[12]:经典模型-DeepFM模型、DSSM模型召回排序策略以及和其他模型对比

【深度学习入门到进阶】必看系列&#xff0c;含激活函数、优化策略、损失函数、模型调优、归一化算法、卷积模型、序列模型、预训练模型、对抗神经网络等 专栏详细介绍&#xff1a;【深度学习入门到进阶】必看系列&#xff0c;含激活函数、优化策略、损失函数、模型调优、归一化…

JavaWeb笔记(五)

JavaWeb后端 经过前面的学习&#xff0c;现在终于可以正式进入到后端的学习当中&#xff0c;不过&#xff0c;我们还是需要再系统地讲解一下HTTP通信基础知识&#xff0c;它是我们学习JavaWeb的基础知识&#xff0c;我们之前已经学习过TCP通信&#xff0c;而HTTP实际上是基于T…

使用SonarLint在开发阶段提高代码质量

使用SonarLint在开发阶段提高代码质量 SonarLint是什么 SonarLint是一个免费的IDE插件&#xff0c;是一个代码质量工具。 它可以在我们编写代码的时候&#xff0c;就帮我我们发现问题并提醒我们。可以帮助我们养成良好的代码习惯。 它支持5000条规则&#xff0c;可以帮助我…

如何在Microsoft Excel中使用MATCH查找值的位置

当你需要在电子表格中查找值的确切位置时,可以使用 Excel 中的 MATCH 函数。这样可以避免你手动搜索可能需要参考的位置或其他公式。 MATCH 函数通常与 INDEX 函数一起用作高级查找。但在这里,我们将介绍如何单独使用 MATCH 来找到价值所在。 一、Excel中的MATCH函数是什么 …

11. Synchronized与锁升级

11.1 面试题 ● 谈谈你对Synchronized的理解 ● Sychronized的锁升级你聊聊 ● Synchronized实现原理&#xff0c;monitor对象什么时候生成的&#xff1f;知道monitor的monitorenter和monitorexit这两个是怎么保证同步的嘛&#xff1f;或者说这两个操作计算机底层是如何执行的 …

【企业业务架构】LEANIX : 业务能力

业务能力是组织执行核心功能所需的能力、材料和专业知识的表达或发声。企业架构师使用业务能力来说明业务的总体需求&#xff0c;以便更好地制定满足这些业务需求的 IT 解决方案。 目录 介绍业务能力建模您可以通过业务能力映射实现什么&#xff1f;并购管理IT风险管理创新管理…

手把手教你入门 Docker

博主介绍&#xff1a; ✌博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家✌ Java知识图谱点击链接&#xff1a;体系化学习Java&#xff08;Java面试专题&#xff09; &#x1f495;&#x1f495; 感兴趣的同学可以收…

DAY 76 分布式监控平台:zabbix

市场上常用的监控软件&#xff1a; 传统运维&#xff1a;zabbix、 Nagios云原生环境&#xff1a; Prometheus &#xff08;go语言开发的&#xff09; zabbix概述 作为一个运维&#xff0c;需要会使用监控系统查看服务器状态以及网站流量指标&#xff0c;利用监控系统的数据去…

国内云服务器全面对比

想要领取优惠券购买云服务可以前往我的云服务器领券购买。 经过疫情三年&#xff0c;大多行业开始复苏&#xff0c;企业开始布局以后得发展&#xff0c;云服务器作为企业发展几乎是必须的&#xff0c;一个企业从无到有&#xff0c;要经历很多&#xff0c;比如企业官网搭建&…

GaussDB云数据库SQL应用系列—索引管理

目录 一、前言 二、注意事项 三、索引创建 1、创建普通索引 2、创建唯一索引 3、创建多字段索引 4、创建部分索引 5、创建表达式索引 四、索引管理 1、查看索引信息 2、删除索引 总结 一、前言 随着互联网的快速发展&#xff0c;数据量呈现爆炸式增长。如何高效地…

PLC现场安装时需要注意的几个关键点

PLC适用于大多数工业现场&#xff0c;但它对使用场合、环境温度等还是有一定要求。控制PLC的工作环境&#xff0c;可以有效地提高它的工作效率和寿命。 在安装PLC时&#xff0c;要避开下列场所&#xff1a; 1.环境温度超过0 ~ 50℃的范围&#xff1b; 2.相对湿度超过85%或者…

Coggle 30 Days of ML 打卡任务二:苹果病害数据加载与数据增强

Coggle 30 Days of ML 打卡任务二&#xff1a;苹果病害数据加载与数据增强 任务二&#xff1a;苹果病害数据加载与数据增强 难度/分值&#xff1a;中/2 打卡内容&#xff1a; 参赛选手名称&#xff1a;AppleDoctor完成日期&#xff1a;2023.6.9任务完成情况&#xff1a; 使…

第四章 完型填空

第四章 完型填空 第一节 真题 2020-完型填空- Section I Use of English Directions&#xff1a; Read the following text. Choose the best word (s) for each numbered blank and mark A, B, C or D on the ANSWER SHEET. (10 points) Being a good parent is, of cour…

Vue中使用editor.md(1):简单使用

0. 背景 在Vue项目中添加一个markdown编辑器&#xff0c;选择使用editor.md&#xff0c;记录在Vue项目中的简单使用。 1. 环境配置 1.1 下载editor.md 官网地址&#xff1a;http://pandao.github.io/editor.md/ 项目文件解压后放入&#xff1a;public/static/内 1.2 下…

【Linux】进程间的通信之共享内存

进程间的通信之共享内存 一、system V 内存共享原理二、共享内存的使用1、ftok函数2、shmget函数3、shmat函数4、shmdt函数5、shmctl函数6、代码使用 三、一些细节的补充 一、system V 内存共享原理 利用内存共享进行进程间的通信的原理其实分为以下几个步骤&#xff1a; 在物…

chatgpt赋能python:Python如何将英文转化为中文的最佳方法

Python如何将英文转化为中文的最佳方法 介绍 在现代全球化社会中&#xff0c;国与国之间的交流越来越频繁&#xff0c;相应的语言翻译工具的需求也愈发迫切。Python是一种易于学习、快速上手的编程语言&#xff0c;适合初学者和经验丰富的程序员使用&#xff0c;在语言翻译方…

技术很牛逼,不会讲PPT,可惜了!

怎样才能做好一场技术分享呢&#xff1f;结合我的经历&#xff0c;做了一些总结。 2015年&#xff0c;我出版《技术管理之巅》以后&#xff0c;先后收到QCon、CSDN、IT168等业界知名技术大会的邀请担任分享嘉宾&#xff0c;几年下来发表了近百场技术及管理相关话题的分享&#…

工业4G路由器 小体积4G LTE通信模块转有线转WiFi充电桩视频安防监控物联网路由器上网CPE

4G LTE代表第四代长期演进&#xff0c;这是一种用于通过蜂窝网络提供高速数据传输的无线通信技术。它是移动网络技术的最新标准&#xff0c;提供比其前身3G更快的数据传输速度。它广泛用于移动设备、物联网设备和机器对机器通信。 近年来&#xff0c;随着物联网技术的快速发展…