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. 第三点
无序号:
* 星号列表
+ 加号列表
- 减号列表
效果:
第一点
第二点
第三点
星号列表
加号列表
减号列表
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. 图片


{% 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 盒模型 %}
效果:
注:效果不显示
{% 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. 转义
符号 | 转义 |
---|---|
! | ! |
" |
" 或 "
|
# | # |
$ | $ |
% | % |
& |
& 或 &
|
' | ' |
( | ( |
) | ) |
* | * |
+ | + |
< |
< 或 <
|
= | = |
> |
> 或 >
|
? | ? |
@ | @ |
[ | [ |
\ | \ |
] | ] |
{ | { |
| | | |
} | } |
luweiweiwei
做个安静大气的美女子
被 1 篇内容引用
推荐阅读
前端代码重构
一、代码规范化 整理一套vscode中格式化配置,在页面保存时自动格式化,团队成员格式统一(搭配eslint)。 整理项目中的命名(不要嫌长,但也不能过于冗长,尽量能让人一眼看明白) 私有变量前加'_' 方法使用驼峰...
stardew赞 19阅读 4.6k评论 2
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库
XboxYan赞 35阅读 2.7k评论 2
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...
XboxYan赞 30阅读 3.9k评论 2
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...
XboxYan赞 31阅读 2.5k评论 2
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!
SegmentFault思否赞 20阅读 5k评论 10
由小见大!不规则造型按钮解决方案
今天,有个群友在群里提问,使用 CSS 能否实现下述这个图形:emmm,中间这个酷似三次贝塞尔曲线的造型,使用 CSS 不太好实现。我的建议是切图实现,然而群友要求一定要用 CSS 实现。虽然麻烦,但是这个图形勉强也...
chokcoco赞 17阅读 1.3k
CSS 如何根据背景色自动切换黑白文字?
在项目中,经常会碰到背景色不确定的场景,为了让内容文字足够清晰可见,文字和背景之间需要有足够的对比度。换句话说,当背景是深色时,文字为白色,当背景是浅色时,文字为黑色,就像这样:
XboxYan赞 19阅读 1.7k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。