在利用 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中 插入图片时,请按照以下的步骤进行设置

  1. 站点配置文件 中的 post_asset_folder 选项的值设置为 true

  2. 在站点文件夹中打开 git bash,输入命令 npm install hexo-asset-image --save 安装插件

  3. 这样,当使用 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系列相关文章】

Hexo系列(五) 撰写文章的更多相关文章

  1. Hexo系列(四) NexT主题配置

    Hexo 框架允许我们更换合适的主题,以便于构建不同风格的网站,这里介绍目前最常使用的一款主题之一 -- NexT 一.NexT 安装 在正式开始讲解 NexT 安装之前,我们必须明确以下几个概念: ...

  2. Hexo系列(三) 常用命令详解

    Hexo 框架可以帮助我们快速创建一个属于自己的博客网站,熟悉 Hexo 框架提供的命令有利于我们管理博客 1.hexo init hexo init 命令用于初始化本地文件夹为网站的根目录 $ he ...

  3. Hexo系列(二) 配置文件详解

    Hexo 是一款优秀的博客框架,在使用 Hexo 搭建一个属于自己的博客网站后,我们还需要对其进行配置,使得 Hexo 更能满足自己的需求 这里所说的配置文件,是位于站点根目录下的 _config.y ...

  4. Hexo系列(一) 搭建博客网站

    写在前面的话:本系列文章主要参考 Hexo官方说明文档,同时结合自己在使用过程中的一些心得体会,撷取下来,和大家分享分享.好,下面闲话不多说,马上开始我们的 Hexo 之旅吧 温馨提醒:博主使用的操作 ...

  5. hexo系列教程

    hexo系列教程来源: http://zipperary.com/2013/05/28/hexo-guide-1/ hexo系列教程:(一)hexo介绍 什么是hexo hexo是一个基于Node.j ...

  6. CSS 魔法系列:纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. Netty4.x中文教程系列(五)编解码器Codec

    Netty4.x中文教程系列(五)编解码器Codec 上一篇文章详细解释了ChannelHandler的相关构架设计,版本和设计逻辑变更等等. 这篇文章主要在于讲述Handler里面的Codec,也就 ...

  8. JVM系列五:JVM监测&工具

    JVM系列五:JVM监测&工具[整理中]  http://www.cnblogs.com/redcreen/archive/2011/05/09/2040977.html 前几篇篇文章介绍了介 ...

  9. SQL Server 2008空间数据应用系列五:数据表中使用空间数据类型

    原文:SQL Server 2008空间数据应用系列五:数据表中使用空间数据类型 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Server 2008 R2调测 ...

随机推荐

  1. Oracle 11g OEM登录后提示“出现内部错误”

    使用oem登录时提示:“出现内部错误.有关详细信息, 请查看日志文件”. 具体原因未知,发现使用SQL Plus登录一次之后,再次登录即可.

  2. 3.CCFadeOutTRTiles,部落格效果,跳动的方块特效,3D瓷砖晃动特效,破碎的3D瓷砖特效,瓷砖洗牌特效,分多行消失特效,分多列消失特效

     1 TiledGrid3D //TiledGrid3D //CCFadeOutTRTiles * action = CCFadeOutTRTiles::create(2, CCSize(20,2 ...

  3. luogu3225 [HNOI2012]矿场搭建

    题目大意 给出一个有$n(n\leq 500)$个节点的无向图,一个满足条件的点集$V$会使得对于图中的每一个节点$u$,满足路径起点为$u$终点$v\in V$的路径集合$P_u$中总存在至少两条路 ...

  4. 深入理解android view 生命周期

    作为自定义 view 的基础,如果不了解Android  view 的生命周期 , 那么你将会在后期的维护中发现这样那样的问题 ....... 做过一段时间android 开发的同学都知道,一般 on ...

  5. C++模板(菜鸟教程)

    C++模板(菜鸟教程) C++ 模板 模板是泛型编程的基础,泛型编程即以一种独立于任何特定类型的方式编写代码. 模板是创建泛型类或函数的蓝图或公式.库容器,比如迭代器和算法,都是泛型编程的例子,它们都 ...

  6. C# Path 有关于文件路径获取的问题 的方法

    string Current = Directory.GetCurrentDirectory();//获取当前根目录 //private string strFilePath = Applicatio ...

  7. 杂项:ASP.NET Web API

    ylbtech-杂项:ASP.NET Web API ASP.NET Web API 是一种框架,用于轻松构建可以访问多种客户端(包括浏览器和移动设备)的 HTTP 服务. ASP.NET Web A ...

  8. SpringMVC之DispatcherServlet详解

    SpringMVC是一种基于请求启动的WEB框架,并且使用了前端控制器的设计模式,所有满足[WEB-INF/web.xml]文件中的[url-pattern]的匹配条件的请求,这些满足的请求都会交给这 ...

  9. TPshop规格组合错误

    TPshop规格组合错误 修改: admin/logic/goodslogic.class.php 中 方法:getSpecInput() 中 asort($spec_arr_sort) 去掉

  10. POJ 3468 线段树+状压

    题意:给你n个数,有对区间的加减操作,问某个区间的和是多少. 思路:状压+线段树(要用lazy标记,否则会TLE) //By SiriusRen #include <cstdio> #in ...