hexo+css创建自己的blog(语法手册)

hexo语法使用手册

title: Manual
date: 2017-09-05 15:11:08
updated: 2017-09-05 15:11:08
tags:


注意:因语法问题,有些hexo的效果在segmentfault中无法正常显示。

1. 列表

有序号:
1. 第一点
2. 第二点
3. 第三点

无序号:
* 星号列表
+ 加号列表
- 减号列表

效果:

  1. 第一点

  2. 第二点

  3. 第三点

  • 星号列表

  • 加号列表

  • 减号列表

2. 块注释

> 区块引用

或者:
{% blockquote %}
普通的引用
{% endblockquote %}

嵌套引用
> 一层引用
>> 两层引用

效果:

区块引用

注:blockquote效果不显示
{% blockquote %}
普通的引用
下一行
{% endblockquote %}

一层引用

两层引用

3. 分割线

***
---

效果:



4. 链接

[这是一个绝对路径的链接](https://hexo.io/zh-cn/docs/writing.html)
[这是一个相对路径的链接](/document/2017/08/07/hello-world/)
{% link text url [external] [title] %}
你好,我是{% link 百度 https://www.baidu.com/ 搜索  度娘 %}.

效果:
这是一个绝对路径的链接
这是一个相对路径的链接

注:效果不显示
你好,我是{% link 百度 https://www.baidu.com/ 搜索 度娘 %}.

5. 加粗

**双星加粗**
__双下划线加粗__

效果:
双星加粗
双下划线加粗

6. 斜体

*星号斜体*
_下划线斜体_

效果:
星号斜体
下划线斜体

7. 图片

![图1. 我最爱的炮兵](/document/assert/img.jpg "Title")

![图2. 我的头像](https://sfault-avatar.b0.upaiyun.com/267/966/2679662993-581186b9d2f8a_big64 "Title")

{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

{% img [box-model] http://weex.apache.org/cn/references/images/css-boxmodel.png 377 340 weex 盒模型 %}

效果:
图1. 我最爱的炮兵

图2. 我的头像

注:效果不显示
{% img [box-model] http://weex.apache.org/cn/ref... 377 340 weex 盒模型 %}

8. 代码

多行代码块使用三个`
单行代码使用一个`
console.log('hello world!')

9. 标题

方法1: - 和 = (任何数量等效)
一级标题
===
二级标题
---

方法2: #
# 一级 H1
## 二级 H2
### 三级 H3
#### 四级 H4
##### 五级 H5
###### 六级 H6

效果:
方法1: - 和 =

一级标题

二级标题

方法2: #

一级

二级

三级

四级
五级
六级

10. jsfiddle

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

{% jsfiddle stardew/ffnm6Lsd/1/ %}  点击左上角fiddles

注:效果不显示
{% jsfiddle stardew/ffnm6Lsd/1/ %}

11. iframe

{% iframe url [width] [height] %}

{% iframe https://www.baidu.com/ 500 300 %}

注:效果不显示
{% iframe https://www.baidu.com/ 500 300 %}

12. 表格

左左中右对齐


dog | bird | cat
--- | ---- | ---
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz

dog | bird | cat
:---- | :---- | :----
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz

dog | bird | cat
:----: | :----: | :----:
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz

dog | bird | cat
----: | ----: | ----:
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz
dog bird cat
foo foo foo
bar bar bar
baz baz baz
dog bird cat
foo foo foo
bar bar bar
baz baz baz
dog bird cat
foo foo foo
bar bar bar
baz baz baz
dog bird cat
foo foo foo
bar bar bar
baz baz baz

13. 原生代码

{% raw %}
content
{% endraw %}

或者直接
content

<span class="color-box" style="background:#FF00FF;color:#FF00FF"> yy </span> #FF00FF

注:效果不显示
<span class="color-box" style="background:#FF00FF;color:#FF00FF"> yy </span> #FF00FF

14. 转义

符号 转义
! &#33;
" &#34;&quot;
# &#35;
$ &#36;
% &#37;
& &#38;&amp;
' &#39;
( &#40;
) &#41;
* &#42;
+ &#43;
< &#60;&lt;
= &#61;
> &#62;&gt;
? &#63;
@ &#64;
[ &#91;
\ &#92;
] &#93;
{ &#123;
| &#124;
} &#125;

luweiweiwei
做个安静大气的美女子

做个安静大气的美女子

6.1k 声望
152 粉丝
0 条评论
推荐阅读
前端代码重构
一、代码规范化 整理一套vscode中格式化配置,在页面保存时自动格式化,团队成员格式统一(搭配eslint)。 整理项目中的命名(不要嫌长,但也不能过于冗长,尽量能让人一眼看明白) 私有变量前加'_' 方法使用驼峰...

stardew19阅读 4.6k评论 2

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.7k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan30阅读 3.9k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan31阅读 2.5k评论 2

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5k评论 10

封面图
由小见大!不规则造型按钮解决方案
今天,有个群友在群里提问,使用 CSS 能否实现下述这个图形:emmm,中间这个酷似三次贝塞尔曲线的造型,使用 CSS 不太好实现。我的建议是切图实现,然而群友要求一定要用 CSS 实现。虽然麻烦,但是这个图形勉强也...

chokcoco17阅读 1.3k

封面图
CSS 如何根据背景色自动切换黑白文字?
在项目中,经常会碰到背景色不确定的场景,为了让内容文字足够清晰可见,文字和背景之间需要有足够的对比度。换句话说,当背景是深色时,文字为白色,当背景是浅色时,文字为黑色,就像这样:

XboxYan19阅读 1.7k

封面图

做个安静大气的美女子

6.1k 声望
152 粉丝
宣传栏