hexo写文章基本操作及Markdown语法

置顶 | 发表于 更新于 分类于 ，

hexo写博客基础操作，包含常用markdown语法，hexo创建页面，发布文章等

官网提供语法说明：Hexo基础操作

创建文章和发布

创建新页面：

1
hexo new newpapername

然后在source/_post中打开markdown文件，就可以开始编辑了
当你写完的时候，再执行下面三行命令

1
2
3
hexo clean：清除了你之前生成的东西，也可以不加
hexo generate：顾名思义，生成静态文章，可以用hexo g缩写
hexo deploy：部署文章，可以用hexo d缩写

主要文件头信息

生成的md文件头信息说明

1
2
3
4
title：文章标题
date：生成时间
tags：标签，多个标签书写格式--->[1,2,3]
categories：分类

加密头信息

加密文章书写格式（需要安装插件）

1
2
3
password: 该博客加密使用的密码
abstract: 该博客的摘要，会显示在博客的列表页
message: 查看博客时，密码输入框上面的描述性文字

置顶方式头信息

再头信息中加入（需要安装插件支持）

1
top: num（num越大越靠前）

自定义摘要

在摘要后加下面代码

1
<!-- more -->

添加404页面

在 hexo/source 目录内新建 404.html
设置元数据信息，如果不想套用主题布局可设置 layout 为 false

1
2
layout: false    
title: "My Blog Name | 404"

创建自定义页面

1
hexo new page pageName

页面配置

1
2
3
4
5
6
layout: page
title: pageTitle    # 必须，页面名称
description:        # 页面二级标题，描述性文字
comments: false     # 禁用评论，可选，默认开启
reward: false       # 禁用打赏，可选，默认开启
urlname: xxxxxx     # 更换本文地址路径

适用next主题的操作

Bootstrap Callout

1
{% note class_name %} Content (md partial supported) {% endnote %}

其中class值可以为default primary success info warning danger

Content (md partial supported)

Content (md partial supported)

Content (md partial supported)

Content (md partial supported)

Content (md partial supported)

Content (md partial supported)

no class_name

danger no-icon

插入视频

1
2
{% video https://example.com/sample.mp4 %}
{% video /path/to/your/video.mp4 %}

选项卡

“tab” 为选项卡的名称，可以自定义，数字是几表示从第几个选项卡开始。非必须，若数值为 - 1 则隐藏选项卡内容。

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,2 %}
<!-- tab -->
this is tab1
<!-- endtab -->
<!-- tab -->
this is tab2
<!-- endtab -->
<!-- tab -->
this is tab3
<!-- endtab -->
{% endtabs %}

this is tab1

this is tab2

this is tab3

名字写在选项里面

1
2
3
4
5
6
7
8
9
10
11
{% tabs Fourth unique name %}
<!-- tab Solution 1 -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab Solution 2 -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab Solution 3 -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

Font Awesome 图标

Font Awesome 是一套绝佳的图标字体库和 CSS 框架。
Font Awesome 字体为您提供可缩放矢量图标, 它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式。
要使用 Font Awesome 图标，请在 HTML 页面的 部分中添加以下行：

国内推荐 CDN
1
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
海外推荐 CDN
1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

next 已经引用了，可以直接用，比如：

1
2
3
4
5
6
7
8
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>

动态图标

1
2
3
4
5
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

iframe

在文章中插入iframe
1
{% iframe url [width px] [height px] %}

Todo list

1
2
3
4
5
6
7
8
9
<ul>
<li><i class="fa fa-check-square"></i> 已完成</li>
<li><i class="fa fa-square"></i> 未完成</li>
</ul>

<!--或者-->

- <i class="fa fa-check-square"></i> 已完成
- <i class="fa fa-square"></i> 未完成
  • 已完成
  • 未完成

文本居中的引用

1
2
3
4
5
6
7
8
9
<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>

<!-- 标签 方式，要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}

<!-- 标签别名 -->
{% cq %} blah blah blah {% endcq %}

显示效果如下

blah blah blah

常用Makedown语法

代码块样式

我是代码块的标题wjup的博客
1
2
三个点后面的参数
[language] [title] [url] [link text]
该代码块的语言是diff
1
2
-  printf("Hello World!");
+  printf("Hello_World!");

控制图片大小位置

直接使用html语法，其中div的alien可居左/中/右，img可设置宽高

1
2
<div align=center>
<img src="链接" width="宽度" height="高度" alt="图片名称">

段落首行缩进

  • 方法一

    1
    2
    3
    半方大的空白&ensp;或&#8194;(缩进1/2个中文)
    全方大的空白&emsp;或&#8195;(缩进1个中文)
    不断行的空白格&nbsp;或&#160;(缩进1/4个中文)

  • 方法二
      推荐全角空格，切换到全角模式下（一般的中文输入法都是按 shift + space）输入两个空格就行了。这个相对来说稍微干净一点，而且宽度是整整两个汉字，很整齐

表格

1
2
3
|标题一|标题二|标题三|
|:--------|:---------:|---------:|
|居左|居中|居右|
标题一 标题二 标题三
居左 居中 居右

超链接

1
More info: [Deployment](https://hexo.io/docs/deployment.html)

More info: Deployment

图片

  • 引用网络图片

    1
    ![图片描述](http://wjup-git.kuaiyunds.com/wjup-git/wang_banner.jpg "title")

  • 引用本地图片（插件支持）,图片放在博文同名文件夹下

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

加粗、斜体、又斜又粗、着重突出、删除线

1
对于__加粗__和对于*斜体*的***结合***`处理`~~啊呀呦~~

对于加粗和对于斜体的结合处理啊呀呦

任务列表

1
2
3
- [x] 任务1，已完成;
- [x] 任务2，已完成;
- [ ] 任务3，未完成;
  • 任务1，已完成;
  • 任务2，已完成;
  • 任务3，未完成;

引用

1
2
3
4
> 唐朝
>> 文化
>>> 李白
>>>> 路漫漫其修远兮，吾将上下而求索

唐朝

文化

李白

路漫漫其修远兮，吾将上下而求索

无序列表、有序列表

1
2
3
4
5
6
* 写法一
+ 写法二
- 写法三
1. 排序一
2. 排序二
5. 自动校正序号三
  • 写法一
  • 写法二
  • 写法三
  1. 排序一
  2. 排序二
  3. 自动校正序号三

分割线

1
2
3
****
----
____

HTML标签

原生折叠隐藏

open属性可以设置默认为显示

1
2
3
4
<details open="open">
    <summary>标题内容</summary>
    <div>折叠内容</div>
</details>
标题内容
折叠默认显示内容
标题内容
折叠默认折叠内容

-------------本文结束感谢您的阅读-------------
 相关文章
感觉文章不错，就赏个吧！
0%