一. Markdown 基础语法 markdown 文本换行 : <br> markdown 文本空格 : 一个空格 两个空格   四个空格  
1.1 emoji 表情 Emoji 中文官网 (づ。◕‿‿◕。)づ
Emoji 表情使用方法:
使用 Emoji 官网查找复制
通过输入法可快速输入
通过 :grinning: 表情短码 进行输入
1 你好 😀, 欢迎来到我的知识库 💯 , 希望你为你提供帮助 💪🏻
你好 😀, 欢迎来到我的知识库 💯 , 希望你为你提供帮助 💪🏻
1.2 代码块 1 2 3 4 5 6 7 /```sh hexo clean; hexo s hexo clean; hexo g; hexo d git add .; git commit -m "npm publish" ; npm version patch; git push /```
1 2 3 4 5 hexo clean; hexo s hexo clean; hexo g; hexo d git add .; git commit -m "npm publish" ; npm version patch; git push
1.3 多级标题 1 2 3 4 5 6 7 8 9 10 11 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题
1.4 文字样式 1 2 3 4 5 6 7 8 9 <u > 下划线演示</u > 文字**加粗** 演示 文字*斜体* 演示 文本`高亮` 演示 文本~~删除~~线演示
下划线演示
文字加粗 演示
文字斜体 演示
文本高亮演示
文本删除线演示
1.5 引用 1 2 3 4 5 6 7 8 9 10 11 > Java > 二级引用演示 > MySQL > > > 外键 > > > > 事务 > > > > **行级锁** (引用内部一样可以用格式) > > ....
Java 二级引用演示 MySQL
外键
事务
行级锁 (引用内部一样可以用格式)
….
1.6 分割线
1.7 列表(*,+,-跟空格都可以) 1.7.1 无序列表 1 2 3 4 5 6 7 8 9 10 11 - Java- Python- ...* Java* Python* ...- Java- Python- ...
1.7,2 有序列表
1.8 图片 1 2 3 4 5 # 本地图片 <img src ="/assets/pusheencode.webp" alt ="示例图片" style ="zoom:50%;" /> # 在线图片 
1.9 表格 1 2 3 4 5 | 项目标号 | 资金 | 备注 | | -------- | -------- | ---- | | 1 | 100,000 | 无 | | 2 | 200,000 | 无 | | 3 | 300,600 | 重要 |
项目标号
资金
备注
1
100,000
无
2
200,000
无
3
300,600
重要
二. Butterfly 外挂标签
2.1 站外引用样式 1 {% link title,description,link %}
title: 标题
description: 说明
link: 🔗 链接
1 {% link 木偶の笔记,(づ。◕‿‿◕。)づ,https://pupper.cn %}
2,2 推荐卡片 https://blog.4t.pw/posts/7915d7de.html
1 {% card title,link,background-img,star-level,description,icon,type %}
title: 标题
link: 卡片链接
img: 背景图片
start-level: 星级
description: 鼠标悬浮说明
icon: 左上角图片
type: 类型
1 {% card 诡秘之主,https://book.qidian.com/info/1010868264/,https://bookcover.yuewen.com/qdbimg/349573/1010868264/300,4.5,第一次接触这种西方文学小说,刚开始感觉看不懂,断断续续看了很多次。后来越看越觉好看,每次看甚至都需要查“文档”,fa-solid fa-book-open,小说 %}
第一次接触这种西方文学小说,刚开始感觉看不懂,断断续续看了很多次。后来越看越觉好看,每次看甚至都需要查“文档”
查看详情
小说
2.3 行内文本样式 text 1 2 3 4 5 6 {% u 文本内容 %} {% emp 文本内容 %} {% wavy 文本内容 %} {% del 文本内容 %} {% kbd 文本内容 %} {% psw 文本内容 %}
1 2 3 4 5 6 1. 带 {% u 下划线 %} 的文本2. 带 {% emp 着重号 %} 的文本3. 带 {% wavy 波浪线 %} 的文本4. 带 {% del 删除线 %} 的文本5. 键盘样式的文本 {% kbd command %} + {% kbd D %}6. 密码样式的文本:{% psw 这里没有验证码 %}
带 下划线 的文本
带 着重号 的文本
带 波浪线 的文本
带 删除线 的文本
键盘样式的文本 command + D
密码样式的文本:这里没有验证码
2.4 行内文本 span 1 {% span 样式参数(参数以空格划分), 文本内容 %}
字体: logo, code
颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right
1 2 3 4 5 6 - 彩色文字 在一段话中方便插入各种颜色的标签,包括:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。 - 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 {% span center logo large, Volantis %} {% span center small, A Wonderful Theme for Hexo %}
彩色文字 在一段话中方便插入各种颜色的标签,包括:红色 、黄色 、绿色 、青色 、蓝色 、灰色 。
超大号文字 文档「开始」页面中的标题部分就是超大号文字。Volantis A Wonderful Theme for Hexo
2.5 段落文本 p 1 {% p 样式参数(参数以空格划分), 文本内容 %}
字体: logo, code
颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right
1 2 3 4 5 6 - 彩色文字 在一段话中方便插入各种颜色的标签,包括:{% p red, 红色 %}、{% p yellow, 黄色 %}、{% p green, 绿色 %}、{% p cyan, 青色 %}、{% p blue, 蓝色 %}、{% p gray, 灰色 %}。 - 超大号文字 文档「开始」页面中的标题部分就是超大号文字。 {% p center logo large, Volantis %} {% p center small, A Wonderful Theme for Hexo %}
2.7 上标标签 tip 1 {% tip [参数,可选] %}文本内容{% endtip %}
样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
自定义图标: 支持 fontawesome。
1 2 3 4 5 6 7 8 9 10 11 12 13 {% tip %}default{% endtip %} {% tip info %}info{% endtip %} {% tip success %}success{% endtip %} {% tip error %}error{% endtip %} {% tip warning %}warning{% endtip %} {% tip bolt %}bolt{% endtip %} {% tip ban %}ban{% endtip %} {% tip home %}home{% endtip %} {% tip sync %}sync{% endtip %} {% tip cogs %}cogs{% endtip %} {% tip key %}key{% endtip %} {% tip bell %}bell{% endtip %} {% tip fa-atom %}自定义 font awesome 图标{% endtip %}
2.8 动态标签 anima 1 {% tip [参数,可选] %}文本内容{% endtip %}
将所需的 CSS 类添加到图标(或 DOM 中的任何元素)。
对于父级悬停样式,需要给目标元素添加指定 CSS 类,同时还要给目标元素的父级元素添加 CSSfaa-parent animated-hover。(详情见示例及示例源码)You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow
可以通过给目标元素添加 CSS 类 faa-fast 或 faa-slow 来控制动画快慢。
2.9 复选列表 checkbox 1 {% checkbox 样式参数(可选), 文本(支持简单md) %}
样式: plus, minus, times
颜色: red,yellow,green,cyan,blue,gray
选中状态: checked
1 2 3 4 5 6 7 8 9 10 {% checkbox 纯文本测试 %} {% checkbox checked, 支持简单的 [markdown ](https://guides.github.com/features/mastering-markdown/ ) 语法 %} {% checkbox red, 支持自定义颜色 %} {% checkbox green checked, 绿色 + 默认选中 %} {% checkbox yellow checked, 黄色 + 默认选中 %} {% checkbox cyan checked, 青色 + 默认选中 %} {% checkbox blue checked, 蓝色 + 默认选中 %} {% checkbox plus green checked, 增加 %} {% checkbox minus yellow checked, 减少 %} {% checkbox times red checked, 叉 %}
2.10 单选列表 radio 1 {% radio 样式参数(可选), 文本(支持简单md) %}
颜色: red,yellow,green,cyan,blue,gray
选中状态: checked
1 2 3 4 5 6 7 {% radio 纯文本测试 %} {% radio checked, 支持简单的 [markdown ](https://guides.github.com/features/mastering-markdown/ ) 语法 %} {% radio red, 支持自定义颜色 %} {% radio green, 绿色 %} {% radio yellow, 黄色 %} {% radio cyan, 青色 %} {% radio blue, 蓝色 %}
2.11 时间轴 timeline 1 2 3 4 5 6 7 8 9 10 11 12 13 14 {% timeline 时间线标题(可选)[,color] %} <!-- timeline 时间节点(标题) --> 正文内容 <!-- endtimeline --> <!-- timeline 时间节点(标题) --> 正文内容 <!-- endtimeline --> {% endtimeline %}
title:标题/时间线
color:timeline 颜色:default(留空) / blue / pink / red / purple / orange / green
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 {% timeline 时间轴样式,blue %} <!-- timeline 2020-07-24 [2.6.6 -> 3.0 ](https://github.com/volantis-x/hexo-theme-volantis/releases ) --> 1. 如果有 `hexo-lazyload-image` 插件,需要删除并重新安装最新版本,设置 `lazyload.isSPA: true` 。2. 2.x 版本的 css 和 js 不适用于 3.x 版本,如果使用了 `use_cdn: true` 则需要删除。3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。4. 2.x 版本的置顶 `top: true` 改为了 `pin: true` ,并且同样适用于 `layout: page` 的页面。5. 如果使用了 `hexo-offline` 插件,建议卸载,3.0 版本默认开启了 pjax 服务。<!-- endtimeline --> <!-- timeline 2020-05-15 [2.6.3 -> 2.6.6 ](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6 ) --> 不需要额外处理。 <!-- endtimeline --> <!-- timeline 2020-04-20 [2.6.2 -> 2.6.3 ](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3 ) --> 1. 全局搜索 `seotitle` 并替换为 `seo_title` 。2. group 组件的索引规则有变,使用 group 组件的文章内,`group: group_name` 对应的组件名必须是 `group_name` 。3. group 组件的列表名优先显示文章的 `short_title` 其次是 `title` 。<!-- endtimeline --> {% endtimeline %}
如果有 hexo-lazyload-image 插件,需要删除并重新安装最新版本,设置 lazyload.isSPA: true。
2.x 版本的 css 和 js 不适用于 3.x 版本,如果使用了 use_cdn: true 则需要删除。
2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。
2.x 版本的置顶 top: true 改为了 pin: true,并且同样适用于 layout: page 的页面。
如果使用了 hexo-offline 插件,建议卸载,3.0 版本默认开启了 pjax 服务。
全局搜索 seotitle 并替换为 seo_title。
group 组件的索引规则有变,使用 group 组件的文章内,group: group_name 对应的组件名必须是 group_name。
group 组件的列表名优先显示文章的 short_title 其次是 title。
2.12 按钮 btns 1 2 3 4 {% btns 样式参数 %} {% cell 标题, 链接, 图片或者图标 %} {% cell 标题, 链接, 图片或者图标 %} {% endbtns %}
圆角样式:rounded, circle
增加文字样式:可以在容器内增加 标题 和描述文字
布局方式:默认为自动宽度,适合视野内只有一两个的情况。
参数
含义
wide
宽一点的按钮
fill
填充布局,自动铺满至少一行,多了会换行
center
居中,按钮之间是固定间距
around
居中分散
grid2
等宽最多 2 列,屏幕变窄会适当减少列数
grid3
等宽最多 3 列,屏幕变窄会适当减少列数
grid4
等宽最多 4 列,屏幕变窄会适当减少列数
grid5
等宽最多 5 列,屏幕变窄会适当减少列数
2.13 github 卡片 ghcard https://akilar.top/posts/615e2dec/
1 2 {% ghcard 用户名, 其它参数(可选) %} {% ghcard 用户名/仓库, 其它参数(可选) %}
使用,分割各个参数。写法为:参数名=参数值 以下只写几个常用参数值。
参数名
取值
释义
hide
stars,commits,prs,issues,contribs
隐藏指定统计
count_private
true
将私人项目贡献添加到总提交计数中
show_icons
true
显示图标
theme
查阅:Available
Themes 主题
2.14 网站卡片 sites 1 2 3 4 {% sitegroup %} {% site 标题, url=链接, screenshot=截图链接, avatar=头像链接(可选), description=描述(可选) %} {% site 标题, url=链接, screenshot=截图链接, avatar=头像链接(可选), description=描述(可选) %} {% endsitegroup %}
1 2 3 4 5 6 7 {% sitegroup %} {% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/fomalhaut1998/cdn-assets/avatar/avatar.png, description=简约风格 %} {% site inkss, url=https://inkss.cn, screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg, avatar=https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg, description=这是一段关于这个网站的描述文字 %} {% site MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, description=这是一段关于这个网站的描述文字 %} {% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %} {% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=这是一段关于这个网站的描述文字 %} {% endsitegroup %}
2.15 行内图片 inlineimage 1 {% inlineimage 图片链接, height=高度(可选) %}
1 2 3 这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。 这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。
这是 一段话。
这又是 一段话。
2.16 单张图片 image 1 {% image 链接, width=宽度(可选), height=高度(可选), alt=描述(可选), bg=占位颜色(可选) %}
图片宽度高度:width=300px, height=32px
图片描述:alt=图片描述(butterfly 需要在主题配置文件中开启图片描述)
占位背景色:bg=#f2f2f2
2.17 音频 audio 1 {% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}
Your browser does not support the audio tag.
2.18 视频 video
对齐方向:left, center, right
列数:逗号后面直接写列数,支持 1 ~ 4 列。
2.19 相册 gallery
gallerygroup 相册图库
1 2 3 4 5 <div class ="gallery-group-main" > {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} </div >
gallery 相册
1 2 3 {% gallery %} markdown 圖片格式 {% endgallery %}
参数名
释义
name
图库名字
description
图库描述
link
链接到对应相册的地址
img-url
图库封面
gallery 相册 区别于旧版的 Gallery 相册,新的 Gallery 相册会自动根据图片长度进行排版,书写也更加方便,与 markdown 格式一样。可根据需要插入到相应的 md。无需再自己配置长宽。建议在粘贴时故意使用长短、大小、横竖不一的图片,会有更好的效果。(尺寸完全相同的图片只会平铺输出,效果很糟糕)
1 2 3 4 5 <div class ="gallery-group-main" > {% galleryGroup MC 在Rikkaの六花服务器里留下的足迹 '/gallery/MC/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/1.jpg %} {% galleryGroup Gundam 哦咧哇gundam哒! '/gallery/Gundam/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907110508327.png %} {% galleryGroup I-am-Akilar 某种意义上也算自拍吧 '/gallery/I-am-Akilar/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907113116651.png %} </div >
1 2 3 4 {% gallery %}   {% endgallery %}
MC
在Rikkaの六花服务器里留下的足迹
Gundam
哦咧哇gundam哒!
I-am-Akilar
某种意义上也算自拍吧
[{"url":"https://random-img.pupper.cn/api?1","alt":""},{"url":"https://random-img.pupper.cn/api?2","alt":""}]
加载更多
2.20 折叠框 folding 1 2 3 4 5 6 7 {% folding 参数(可选), 标题 %}  {% endfolding %} 1. 颜色:blue, cyan, green, yellow, red2. 状态:状态填写 open 代表默认打开。
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 34 35 36 {% folding 查看图片测试 %}  {% endfolding %} {% folding cyan open, 查看默认打开的折叠框 %} 这是一个默认打开的折叠框。 {% endfolding %} {% folding green, 查看代码测试 %} 假装这里有代码块(代码块没法嵌套代码块) {% endfolding %} {% folding yellow, 查看列表测试 %} - haha- hehe{% endfolding %} {% folding red, 查看嵌套测试 %} {% folding blue, 查看嵌套测试2 %} {% folding 查看嵌套测试3 %} hahaha <span > <img src ='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style ='height:24px' > </span > {% endfolding %} {% endfolding %} {% endfolding %}
查看图片测试
查看默认打开的折叠框
查看代码测试
查看列表测试
查看嵌套测试
查看嵌套测试2 查看嵌套测试3 hahaha
2.21 分栏 tab 1 2 3 4 5 6 7 8 9 {% tabs Unique name, [index] %} <!-- tab [Tab caption] [@icon] --> Any content (support inline tags too). <!-- endtab --> {% endtabs %}
Unique name :
选项卡块标签的唯一名称,不带逗号。
将在#id 中用作每个标签及其索引号的前缀。
如果名称中包含空格,则对于生成#id,所有空格将由破折号代替。
仅当前帖子/页面的 URL 必须是唯一的!
[index]:
活动选项卡的索引号。
如果未指定,将选择第一个标签(1)。
如果 index 为-1,则不会选择任何选项卡。
可选参数。
[Tab caption]:
当前选项卡的标题。
如果未指定标题,则带有制表符索引后缀的唯一名称将用作制表符的标题。
如果未指定标题,但指定了图标,则标题将为空。
可选参数。
[@icon]:
FontAwesome 图标名称(全名,看起来像“ fas fa-font”)
可以指定带空格或不带空格;
例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
可选参数。
2.22 诗词标签 poem
title:诗词标题
author:作者,可以不写
1 2 3 4 5 6 7 8 9 10 11 12 {% poem 水调歌头,苏轼 %} 丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。 明月几时有?把酒问青天。 不知天上宫阙,今夕是何年? 我欲乘风归去,又恐琼楼玉宇,高处不胜寒。 起舞弄清影,何似在人间? 转朱阁,低绮户,照无眠。 不应有恨,何事长向别时圆? 人有悲欢离合,月有阴晴圆缺,此事古难全。 但愿人长久,千里共婵娟。 {% endpoem %}
水调歌头
苏轼
丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。 明月几时有?把酒问青天。 不知天上宫阙,今夕是何年? 我欲乘风归去,又恐琼楼玉宇,高处不胜寒。 起舞弄清影,何似在人间?
转朱阁,低绮户,照无眠。 不应有恨,何事长向别时圆? 人有悲欢离合,月有阴晴圆缺,此事古难全。 但愿人长久,千里共婵娟。
2.23 阿里图标 icon 1 {% icon [icon-xxxx],[font-size] %}
icon-xxxx:表示图标 font-class,可以在自己的阿里矢量图标库项目的 font-class 引用方案内查询并复制。
font-size:表示图标大小,直接填写数字即可,单位为 em。图标大小默认值为 1em。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 {% icon icon-rat_zi %}{% icon icon-rat,2 %} {% icon icon-ox_ chou,3 %}{% icon icon-ox,4 %}{% icon icon-tiger_yin,5 %}{% icon icon-tiger,6 %} {% icon icon-rabbit_ mao,1 %}{% icon icon-rabbit,2 %}{% icon icon-dragon_chen,3 %}{% icon icon-dragon,4 %} {% icon icon-snake_ si,5 %}{% icon icon-snake,6 %}{% icon icon-horse_wu %}{% icon icon-horse,2 %} {% icon icon-goat_ wei,3 %}{% icon icon-goat,4 %}{% icon icon-monkey_shen,5 %}{% icon icon-monkey,6 %} {% icon icon-rooster_ you %}{% icon icon-rooster,2 %}{% icon icon-dog_xu,3 %}{% icon icon-dog,4 %} {% icon icon-boar_ hai,5 %}{% icon icon-boar,6 %}
2.24 特效标签 wow 1 2 3 {% wow [animete],[duration],[delay],[offset],[iteration] %} 内容 {% endwow %}
animate: 动画样式,效果详见 animate.css 参考文档
duration: 选填项,动画持续时间,单位可以是 ms 也可以是 s。例如 3s,700ms。
delay: 选填项,动画开始的延迟时间,单位可以是 ms 也可以是 s。例如 3s,700ms。
offset: 选填项,开始动画的距离(相对浏览器底部)
iteration: 选填项,动画重复的次数
2.25 进度条 progress 1 {% progress [width] [color] [text] %}
width: 0 到 100 的阿拉伯数字
color: 颜色,取值有 red,yellow,green,cyan,blue,gray
text:进度条上的文字内容
1 2 3 4 5 6 {% progress 10 red 进度条样式预览 %} {% progress 30 yellow 进度条样式预览 %} {% progress 50 green 进度条样式预览 %} {% progress 70 cyan 进度条样式预览 %} {% progress 90 blue 进度条样式预览 %} {% progress 100 gray 进度条样式预览 %}
2.26 注释 notation 1 {% nota [label] , [text] %}
label: 注释词汇
text: 悬停显示的注解内容
1 {% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}
2.27 气泡注释 bubble 1 {% bubble [content] , [notation] ,[background-color] %}
content: 注释词汇
notation: 悬停显示的注解内容
background-color: 可选,气泡背景色。默认为“#71a4e3”
1 最近我学到了不少新玩意儿(虽然对很多大佬来说这些已经是旧技术了),比如 CSS 的{% bubble 兄弟相邻选择器,"例如 h1 + p {margin-top:50px;}" %},{% bubble flex布局,"Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性","#ec5830" %},{% bubble transform变换,"transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。","#1db675" %},animation 的{% bubble 贝塞尔速度曲线,"贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋","#de4489" %}写法,还有今天刚看到的{% bubble clip-path,"clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。","#868fd7" %}属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。
最近我学到了不少新玩意儿(虽然对很多大佬来说这些已经是旧技术了),比如 CSS 的兄弟相邻选择器 例如 h1 + p {margin-top:50px;} </span>,flex布局 Flex 是 Flexible Box 的缩写,意为弹性布局”,用来为盒状模型提供最大的灵活性” </span>,transform变换 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 </span>,animation 的贝塞尔速度曲线 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋 </span>写法,还有今天刚看到的clip-path clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。 </span>属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。
2.28 引用文献 reference 1 2 {% referto [id] , [literature] %} {% referfrom [id] , [literature] , [url] %}
referto 引用上标
id: 上标序号内容,需与 referfrom 标签的 id 对应才能实现跳转
literature: 引用的参考文献名称
referfrom 引用出处
id: 序号内容,需与 referto 标签的 id 对应才能实现 跳转
literature: 引用的参考文献名称
url: 引用的参考文献链接,可省略
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Akilar の糖果屋(akilar.top)是一个私人性质的博客{% referto '[1]','Akilarの糖果屋群聊简介' %},从各类教程至生活点滴,无话不谈。建群的目的是提供一个闲聊的场所。博客采用 Hexo 框架{% referto '[2]','Hexo中文文档' %},Butterfly 主题{% referto '[3]','Butterfly 安装文档(一) 快速开始' %} 本项目参考了 Volantis{% referto '[4]','hexo-theme-volantis 标签插件' %}的标签样式。引入`[tag].js` ,并针对`butterfly` 主题修改了相应的`[tag].styl` 。在此鸣谢`Volantis` 主题众开发者。 主要参考内容包括各个 volantis 的内置标签插件文档{% referto '[5]','Volantis文档:内置标签插件' %} Butterfly 主题的各个衍生魔改{% referto '[6]','Butterfly 安装文档:标签外挂(Tag Plugins' %}{% referto '[7]','小弋の生活馆全样式预览' %}{% referto '[8]','l-lin-font-awesome-animation' %}{% referto '[9]','小康的butterfly主题使用文档' %} {% referfrom '[1]','Akilarの糖果屋群聊简介','https://jq.qq.com/?_wv=1027&k=pGLB2C0N' %} {% referfrom '[2]','Hexo中文文档','https://hexo.io/zh-cn/docs/' %} {% referfrom '[3]','Butterfly 安装文档(一) 快速开始','https://butterfly.js.org/posts/21cfbf15/' %} {% referfrom '[4]','hexo-theme-volantis 标签插件','https://volantis.js.org/v5/tag-plugins/' %} {% referfrom '[5]','Volantis文档:内置标签插件','https://volantis.js.org/tag-plugins/' %} {% referfrom '[6]','Butterfly 安装文档:标签外挂(Tag Plugins','https://butterfly.js.org/posts/4aa8abbe/#%E6%A8%99%E7%B1%A4%E5%A4%96%E6%8E%9B%EF%BC%88Tag-Plugins%EF%BC%89' %} {% referfrom '[7]','小弋の生活馆全样式预览','https://lovelijunyi.gitee.io/posts/c898.html' %} {% referfrom '[8]','l-lin-font-awesome-animation','https://github.com/l-lin/font-awesome-animation' %} {% referfrom '[9]','小康的butterfly主题使用文档','https://www.antmoe.com/posts/3b43914f/' %}
Akilar の糖果屋(akilar.top)是一个私人性质的博客</span>[1] Akilarの糖果屋群聊简介 参考资料 </span></span>,从各类教程至生活点滴,无话不谈。建群的目的是提供一个闲聊的场所。博客采用 Hexo 框架</span>[2] Hexo中文文档 参考资料 </span></span>,Butterfly 主题</span>[3] Butterfly 安装文档(一) 快速开始 参考资料 </span></span>
本项目参考了 Volantis</span>[4] hexo-theme-volantis 标签插件 参考资料 </span></span>的标签样式。引入[tag].js,并针对butterfly主题修改了相应的[tag].styl。在此鸣谢Volantis主题众开发者。 主要参考内容包括各个 volantis 的内置标签插件文档</span>[5] Volantis文档:内置标签插件 参考资料 </span></span> Butterfly 主题的各个衍生魔改</span>[6] Butterfly 安装文档:标签外挂(Tag Plugins 参考资料 </span></span></span>[7] 小弋の生活馆全样式预览 参考资料 </span></span></span>[8] l-lin-font-awesome-animation 参考资料 </span></span></span>[9] 小康的butterfly主题使用文档 参考资料 </span></span>
2.29 隐藏块 1 2 3 {% hideBlock display,bg,color %} content {% endhideBlock %}
content:要隐藏的内容
display:展示前按钮显示的文字(可选)
bg:按钮的背景颜色(可选)
color:按钮显示的文字的颜色(可选)
1 2 3 4 {% hideBlock 点我预览, blue %} 这里有张图片: <img src ="https://s1.vika.cn/space/2022/10/30/b35fce448bc9404a8d65c3ce1e6e46eb" alt ="image (1)" style ="zoom:67%;" /> {% endhideBlock %}
点我预览
这里有张图片: