介绍Hexo一些基本设置,比如分类,标签,作者,简要概述等等以及MarkDown的写法

1.Hexo创建文章、标签、分类的Front-matter方法 Ⅰ   Front-matter Ⅱ

Front-matter 是md文件最上方以 — 分隔的区域,用于指定个别文件的变量

其实Front-matter就是在\Hexo\source_posts下的.md文件中书写文章标题,上传时间,分类名,标签名等等

字段 含义 值类型 默认值
layout 布局模版 String -
title 标题 String -
date 创建时间 Date 文件创建时间
description 页面描述、摘要 String -
cover 是否显示封面 Bool true

2.Markdown标题页的写法

    ---
    layout: 页面布局(配合主题文档使用)
    title: 文章名称
    date: 文章日期
    comments: 文章是否开启评论
    photos: 文章封面图(仅部分主题支持)
    tags: 
      - 文章标签一
      - 文章标签二
    categories: # 文章分类(文章分类等级)
                - 父分类
                - 子分类
                - 孙分类
    description: 文章描述,即要在首页显示的摘要(仅部分主题支持)
    ---

    这里是摘要   
        
    这里是正文

    注意:description 和  方式显示摘要二选一即可,部分主题不支持description,
    每个配置英文冒号后面要空一格,不同主题配置有所差异,具体要参考主题文档

3.md文件的基本写法

【Markdown写法大全】

3.1. ``` 代码段 ``` : 表示以原格式展示代码片段。比如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function () {
......
//鼠标进入的时候,其他的li标签透明度:0.5
$(".wrap li").hover(function() {
$(this).siblings().stop().fadeTo(400, 0.5); //.stop():停止所有在指定元素上正在运行的动画。
}, function() {
// 鼠标离开,其他li 透明度改为 1
$(this).siblings().stop().fadeTo(400, 1);
});
console.log($('.attr a').prop('href'));
console.log($('.attr a').prop('title'));
console.log($('input:checkbox').attr('id'));
console.log($('.office p:eq(0)').scrollTop());
})

3.2. <img src=”url” width=” “>

   表示在md文件中展示图片,若不想破坏图片原格式,就只需要写width或者height其中一个,另一个会自适应变化

3.3. 文本修饰:粗体,斜体…

   粗体文本用两个*或_包含,斜体文本用两个_或*包含

3.4. 表格(注意其格式)

语法说明

  1. 第一行为表头,第二行分隔表头和主体部分,第三行开始每一行为一个表格行。
  2. 列于列之间用管道符|隔开。原生方式的表格每一行的两边也要有管道符。
  3. 第二行还可以为不同的列指定对齐方向。默认为左对齐,在-右边加上:就右对齐。
1
2
3
4
5
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |

3.5. 颜色RGB和字体以及背景颜色

1
2
3
4
5
6
7
8
9
10
<font face="Tahoma">这是一串Tahoma字体</font><br/>
<font face="黑体">这是一串黑体字</font><br/>
<font face="微软雅黑">这是一串微软雅黑</font><br/>
<font face="STCAIYUN">这是一串华文彩云</font><br/>
<font color=#00ced1 size=7 face="黑体">背景色+字体+字的size</font><br/>
<font color=#00ffff size=72>颜色设置</font><br/>
<font color=gray size=72>灰色处理</font><br/>
<table><tr><td bgcolor=#bfe1f1>背景色是:#bfe1f1</td></tr></table>

Size:规定文本的尺寸大小。可能的值:从 1 到 7 的数字。浏览器默认值是 3

这是一串Tahoma字体

这是一串黑体字

这是一串微软雅黑

这是一串华文彩云

背景色+字体+字的size

颜色设置

灰色处理

3.6. 转义字符

<br> : 换行

\ : 转义字符,原生字符,不加修饰

&nbsp; : 空格

3.7 每一篇博文设置图片

只需要在文章前面配置 photos 关键字即可,若没有这种配置,可以选择在正文插入图片,然后使用 将图片显示在摘要里

3.8 Markdown的todo list写法

代码:

1
2
3
4
5
6
7
8
近期任务安排:
- [x] 整理Markdown手册
- [ ] 改善项目
- [x] 优化首页显示方式
- [x] 修复闪退问题
- [ ] 修复视频卡顿
- [ ] A3项目修复
- [x] 修复数值错误

显示效果:

3.9 hexo-matrix主题支持图片缩放设置

<fancybox>图片设置</fancybox>

3.10 列表嵌套

上一级和下一级之间敲三个空格即可

1
2
3
4
5
6
7
8
9
10
11
+ 一级无序列表内容

* 二级无序列表内容(三个空格)
* 二级无序列表内容
* 二级无序列表内容

+ 一级无序列表内容

1. 二级有序列表内容
2. 二级有序列表内容
3. 二级有序列表内容

4.Hexo的搜索search功能设置

问题描述:

      在我的博客中点击search,输入相关关键字后,点击查询到的相关文章,会出现404错误

解决方法:

1.检查是否安装文档要求正确的安装了依赖包。
2.检查根目录配置文件是否有search字段冲突(我的根目录配置文件中没有search字段)。
3.检查我们的主题(我使用的是Material X主题)的配置文件是否开启search功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 搜索配置
search:
enable: true
service: hexo
# google
google_api_key:
google_engine_id:
# algolia
algolia_app_id:
algolia_api_key:
algolia_index_name:
# azure
azure_service_name:
azure_index_name:
azure_query_key:
# baidu
baidu_api_id:

4.这是最容易忽略的,但往往也是问题出现的源头,请检查根目录配置文件中的链接是否正确,如:

1
2
3
4
url: https://fioralove.github.io
# 这里似乎存在一个bug,推荐填写GitHub Page的访问地址,不要使用自己在阿里云以及其它的域名注册服务商所提供的地址
# 比如我在阿里云所注册的https:AhriLove.top,填上依旧会出现404错误
root: /

5.封面轮播图

封面幻灯片轮播图片怎么引入本地的照片??
修改主题下_config.yml文件,里面有个banner改一下,多加几行即可

6.front-matter设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
front-matter是指两个\---之间的内容
\---
title: Javascript篇章四:快速入门
// 小图标
icons: [fas fa-fire accent]
date: 2019-11-21
toc: true #是否显示文章目录
categories: #分类
- javascript
// 是否显示封面
cover: true
tags: #标签
// 是否置顶文章
top: true
// 文章右边的音乐块
music:
enable: true # true(文章内和文章列表都显示) internal(只在文章内显示)
server: netease # netease(网易云音乐)tencent(QQ音乐) xiami(虾米) kugou(酷狗)
type: song # song (单曲) album (专辑) playlist (歌单) search (搜索)
id: 26664345 # 歌曲/专辑/歌单 ID
// 作者相关信息块
author:
name: 作者
avatar: https://img.vim-cn.com/a1/d53c11fb5d4fd69529bc805d385fe818feb3f6.png
url: https://baidu.com
meta:
header: \[title, author, date, categories, counter, top]
footer: \[updated, tags, share]
---


// 文章描述
<!-- more -->

 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议