Hexo系列(五) 撰写文章
在利用 Hexo 框架搭建一个属于我们自己的博客网站后,下面我们就来谈谈怎样在网站上书写我们的第一篇博客吧
一、创建文章
在站点文件夹中打开 git bash,输入如下命令创建文章,其中 title
为文章的标题
$ hexo new "title"
当输入命令后,就会在 source/_post
文件夹下创建一个文件,命名为:title.md
这个文件就是将要发布到网站上的原始文件,用于记录文章内容
下面,我们将要在这个文件中写下我们的第一篇博客
二、编写文章(基于 Markdown)
1、Markdown 简介
但是,在我们正式写下第一个文字前,我们需要了解一下究竟什么是 Markdown?
Markdown 是一种可以使用普通文本编辑器编写的 标记语言,通过简单的 标记语法,它可以使普通文本内容具有一定的格式
基于 Markdown 语法的简洁性,它已经成为目前世界上最流行的用于书写博客的语言
2、Markdown 语法
在编写 Markdown 时,博主强烈的推荐给大家一款简洁易用的 Markdown 编辑器 —— Typora
按照官方的说法就是 简单而强大,它不仅支持原生的语法,也支持对应的快捷键,更重要的是它还可以 实时预览
这里附上 Typora 的下载地址:https://www.typora.io/,有兴趣的朋友可以下载来试试
好,下面开始进入正题,介绍一些常用的 Markdown 语法
(1)标题
Markdown 语法:
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
Typora 快捷键:
Ctrl+1:一级标题
Ctrl+2:二级标题
Ctrl+3:三级标题
Ctrl+4:四级标题
Ctrl+5:五级标题
Ctrl+6 :六级标题
Ctrl+0:段落
(2)粗体、斜体、删除线和下划线
Markdown 语法:
*斜体*
**粗体**
***加粗斜体***
~~删除线~~
Typora 快捷键:
Ctrl+I:斜体
Ctrl+B:粗体
Ctrl+U:下划线
Alt+Shift+5:删除线
(3)引用块
Markdown 语法:
> 文字引用
Typora 快捷键: Ctrl+Shift+Q
(4)代码块
Markdown 语法:
`行内代码````
多行代码
多行代码
```
Typora 快捷键:
行内代码:Ctrl+Shift+`
多行代码:Ctrl+Shift+K
(5)公式块
Markdown 语法:
$$
数学公式
$$
Typora 快捷键: Ctrl+Shift+M
(6)分割线
Markdown 语法:
方法一:---方法二:+++方法三:***
(7)列表
Markdown 语法:
1. 有序列表项* 无序列表项+ 无序列表项- 无序列表项
Typora 快捷键:
有序列表项:Ctrl+Shift+[
无序列表项:Ctrl+Shift+]
(8)表格
Markdown 语法:
表头1|表头2
-|-|-
内容11|内容12
内容21|内容22
Typora 快捷键: Ctrl+T
(9)超链接
Markdown语法:
方法一:[链接文字](链接地址 "链接描述")
例如:[示例链接](https://www.example.com/ "示例链接")方法二:<链接地址>
例如:<https://www.example.com/>
Typora快捷键: Ctrl+K
(10)图片
Markdown语法:
![图片文字](图片地址 "图片描述")
例如:![示例图片](https://www.example.com/example.PNG "示例图片")
Typora快捷键: Ctrl+Shift+I
说明:在 Hexo中 插入图片时,请按照以下的步骤进行设置
将 站点配置文件 中的
post_asset_folder
选项的值设置为 true在站点文件夹中打开 git bash,输入命令
npm install hexo-asset-image --save
安装插件这样,当使用
hexo new title
创建文章时,将同时在source/_post
文件夹中生成一个与 title 同名的文件夹,我们只需将图片放进此文件夹中,然后在文章中通过 Markdown 语法进行引用即可例如,在资源文件夹(就是那个与 title 同名的文件夹)中添加图片 example.PNG,则可以在对应的文章中使用语句
![示例图片](title/example.PNG "示例图片")
添加图片
3、高级设置
(1)模板设置
当我们使用命令 hexo new "title"
创建文章时,Hexo 会根据 /scaffolds/post.md
对新文章进行初始化
换言之,/scaffolds/post.md
就是新文章的 模板,所以我们可以修改它来适应自己的写作习惯
一个简单的示例如下:
title: {{ title }}
date: {{ date }}
tags:
categories:
(2)头部设置
在每篇利用 Hexo 创建的文章的开头,都会有对文章进行说明的文字,叫做 文章头部
文章的头部除了可以设置文章标题、发布日期等基础信息外,还可以为文章添加标签、分类等
一个简单的示例如下:
title: Title
date: YYYY-MM-DD HH:MM:SS
tags: [tag1, tag2, ...]
categories: category
注意:属性和属性值之间必须有一个空格,否则会解析错误
(3)首页显示
在利用 Hexo 框架搭建的博客网站中,首页会显示文章的内容,且默认显示文章的全部内容
如果当文章太长的时候就会显得十分冗余,所以我们有必要对其进行精简
这时,我们只需在文章中使用 <!--more-->
标志即可,表示只会显示标志前面的内容
三、部署发布
在站点文件夹中打开 git bash,输入如下命令部署和发布文章
$ hexo g -d
建议:在使用 hexo g
部署之后,可以先使用 hexo s
运行本地站点,然后在浏览器输入地址 http://lacolhost:4000/ 查看运行结果,检查无误后再使用 hexo d
发布
Hexo系列(五) 撰写文章相关推荐
- 数据库分库分表(sharding)系列(五) 一种支持自由规划无须数据迁移和修改路由代码的Sharding扩容方案...
为什么80%的码农都做不了架构师?>>> 版权声明:本文由本人撰写并发表于2012年9月份的<程序员>杂志,原文题目<一种支持自由规划的Sharding扩容方 ...
- 《ASP.NET Core In Action》读书笔记系列五 ASP.NET Core 解决方案结构解析1
<ASP.NET Core In Action>读书笔记系列五 ASP.NET Core 解决方案结构解析1 参考文章: (1)<ASP.NET Core In Action> ...
- Silverlight Blend动画设计系列五:故事板(StoryBoards)和动画(Animations)
原文:Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations) 正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Bl ...
- 盘点2013年那些最优秀的网页设计作品【系列五】
这个系列的文章向大家展示2013年最优秀的国外网页设计作品,这些都是过去的一年在图片,纹理,导航等等各个方面的优秀网站.2013年,网页设计领域出现了几个新的流行趋势,最热门的就是响应式设计(Resp ...
- 智能路由器-OpenWRT 系列五 (NAS-SMB家庭共享)
NAS是我觉得家里必不可少的一台设备,NAS 全称 Network Attached Storage,即网络附加存储服务器,它通过自身的操作系统和 SMB/NFS/CIFS/FTP 等多种通信协议来给 ...
- C#系列五《程序的分支》
从前面的文章中我们不难看出来,我们程序的执行顺序是从上到下顺序执行的,那么有时候我们需要程序在某个条件成立时,执行指定的代码片段,那么怎么样来控制这样流程呢?这个就是我们今天这篇文章所需要讨论的.那么 ...
- 深入剖析Redis系列(五) - Redis数据结构之字符串
前言 字符串类型 是 Redis 最基础的数据结构.字符串类型 的值实际可以是 字符串(简单 和 复杂 的字符串,例如 JSON.XML).数字(整数.浮点数),甚至是 二进制(图片.音频.视频),但 ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- python 解方程 sympy_Python数据处理篇之Sympy系列(五)---解方程
前言 sympy不仅在符号运算方面强大,在解方程方面也是很强大. 本章节学习对应官网的:Solvers 官方教程 (一)求解多元一次方程-solve() 1.说明: 解多元一次方程可以使用solve( ...
最新文章
- FT《金融时报》:中国巨头争夺企业级市场,阿里云份额已近六成
- Machine Learning week 8 quiz: Principal Component Analysis
- cocos 修改层级_cocos creator 场景如何透明,多个canvas层级显示
- GIS中最短路径的实现
- 北京科技大学计算机硕士,北京科技大学计算机专业硕士只有面授上课吗
- Flutter Container 容器以及对齐方式 Alignment
- Linux之深入理解anaconda使用
- 4. tensorflow2实现抽样分布—卡方分布、F分布、t分布、Beta分布、Gamma分布——python实战
- 笔记篇二:鸢尾花数据集分类
- ubuntu查看系统版本
- 量子计算机中的物理知识,量子计算机和物理学上的量子力学关系大吗?
- VUE图片裁剪,打码,旋转功能
- 四川民办高校计算机专业排名2015,2015中国民办大学最佳专业排行榜10强
- Mysql --分表、分库、分区(横向纵向、分区列)的区别与详解
- 【程序员必备】七夕表白攻略:”月遇从云,花遇和风,晚上的夜空很美“。(附源码合集)
- python量化选股策略_【机器学习】第六课:基于SVM的量化选股策略
- jstree刷新数据
- 使用 rsync 服务(二)
- ElasticSearch英文基本查询
- 2019复旦大学计算机分数线,2019复旦大学录取分数线(在各省市录取数据)
热门文章
- 联盟服务器维护,英雄联盟维护时间 lol官网服务器维护公告
- hgame2023 week2 writeup
- pde与波长 sipm 关系_SiPM应用于LiDAR:为何要先解决延时脉冲,而不是先提升PDE?...
- 使用云主机进行深度学习
- Raptor入门练习
- 【UE4】蓝图结构体入门及案例
- Orchard学习 01、orchard日志
- 计算机应用基础 周凌,计算机基础毕业论文范文
- 如何求一个关系模式的候选码
- 关于android webview 端调原生app 的支付宝接口实现 还有BeeCloud(秒支付) 的接入使用