Tag Plugins Showcase
目录
Alert
- syntax
1
2
3
{% alert [classes] %}
content
{% endalert %}
| Argument | Description | Demo｜ |
|---|---|---|
| Classes | info | info Alert |
| Classes | success | success Alert |
| Classes | warning | warning Alert |
| Classes | danger | danger Alert |
| Classes | no-icon |
块引用
- syntax
1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}
普通块引用
- eg
1
2
3
{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec
tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
引用书籍
- eg
1
2
3
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
引用 Twitter
- eg
1
2
3
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
引用网上的文章
- eg
1
2
3
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}
Every interaction is both precious and an opportunity to delight.
代码块
- syntax
1
2
3
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}
| Extra Options | Description | Default |
|---|---|---|
| line_number | Show line number | true |
| line_threshold | Only show line numbers as long as the numbers of lines of the code block exceed such threshold. | 0 |
| highlight | Enable code highlighting | true |
| first_line | Specify the first line number | 1 |
| mark | Line highlight specific line(s), each value separated by a comma. Specify the number range using a dash Example: mark:1,4-7,10 will mark lines 1, 4 to 7 and 10. |
|
| wrap | Wrap the code block in <table> |
true |
普通代码块
- eg
1
2
3
{% codeblock %}
alert('Hello World!');
{% endcodeblock %}
1 | alert('Hello World!'); |
指定语言代码块
- eg
1
2
3
4
5
6
{% codeblock lang:java %}
public void method() {
int a=0;
system.out.println(a);
}
{% endcodeblock %}
1 | public void method() { |
带有标题的块
- syntax
1
2
3
{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}
1 | array.map(callback[, thisArg]) |
带有标题和 URL 的块
- eg
1
2
3
4
{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}
1 | _.compact([0, 1, false, 2, '', 3]); |
带有 Tab 页的代码块
- eg
1
2
3
4
5
{% tabbed_codeblock [name] [link] %}
<!-- tab [lang] -->
source code
<!-- endtab -->
{% endtabbed_codeblock %}
- js
- css
- html
function $initHighlight(block, flags) {
try {
if (block.className.search(/\bno\-highlight\b/) != -1)
return processBlock(block.function, true, 0x0F) + ' class=""';
} catch (e) {
/* handle exception */
var e4x = <div>Example<p>1234</p></div>;
}
for (var i = 0 / 2; i < classes.length; i++) { // "0 / 2" should not be parsed as regexp
if (checkCondition(classes[i]) === undefined)
return /\d+[\s/]/g;
}
console.log(Array.every(classes, Boolean));
}Github 代码片段展示
- syntax
1
{% gist gist_id [filename] %}
Github Gist 被墙的厉害，请直接参考上面的语法使用，这里不展示实际效果了，不然页面就不再往下渲染了。
更多高级用法参考插件仓库说明
图像
- syntax
1
{% image [classes] group:group-name /path/to/image [/path/to/thumbnail] [width of thumbnail] [height of thumbnail] [title text] %}
| Argument | Description |
|---|---|
| Classes (optional) | You can add css classes to stylize the image. Separate class with whitespace. Tranquilpeak integrate many css class to create nice effects: - fancybox : Generate a fancybox image. - nocaption : Caption of the image will not be displayed. - left : Image will float at the left. - right : Image will float at the right. - center : Image will be at center. - fig-20 : Image will take 20% of the width of post width and automatically float at left. - fig-25 : Image will take 25% of the width of post width and automatically float at left. - fig-33 : Image will take 33% of the width of post width and automatically float at left. - fig-50 : Image will take 50% of the width of post width and automatically float at left. - fig-75 : Image will take 75% of the width of post width and automatically float at left. - fig-100 : Image will take 100% of the width of post width. - clear : Add a div with clear:both; style attached after the image to retrieve the normal flow of the post. |
| Group (optional) | Name of a group, used to create a gallery. Only for image with fancybox css class |
| Orignal image | Path to the original image. |
| Thumbnail image (optional) | Path to the thumbnail image. If empty, the orignal image will be displayed. |
| Width of thumbnail image (optional) | Width to the thumbnail image. If the thumbnail image is empty, width will be attached to thumbnail image created from original image. E.g : 150px or 85%. |
| Height of thumbnail image (optional) | Height to the thumbnail image. If the thumbnail image is empty, height will be attached to thumbnail image created from original image. E.g : 300px or 20%. |
| Title (optional) | Title of image displayed in a caption under image. Alt HTML attribute will use this title. E.g : "A beautiful sunrise". |
- eg
1
2
3
4
5
6
7
8
{% image fancybox clear group:travel https://img.biwin.eu.org/touxiang.jpeg "A beautiful sunrise" %}
{% image fancybox fig-50 left group:travel https://img.biwin.eu.org/touxiang.jpeg "A beautiful sunrise" %}
{% image fancybox fig-50 right clear group:travel https://img.biwin.eu.org/touxiang.jpeg "A beautiful sunrise" %}
{% image fancybox fig-25 left group:travel https://img.biwin.eu.org/touxiang.jpeg %}
{% image fancybox fig-75 right group:travel https://img.biwin.eu.org/touxiang.jpeg %}
{% image fancybox fig-25 left group:travel https://img.biwin.eu.org/touxiang.jpeg %}
{% image fancybox fig-25 left clear group:travel https://img.biwin.eu.org/touxiang.jpeg %}
A beautiful sunriseA beautiful sunriseA beautiful sunrise引术语
- syntax
- left
- right
1
2
3
{% pullquote [class] %}
content
{% endpullquote %}
老版《Java编程思想》（原书名《Thinking in Java》）得益作者开放深度研讨的创作方式，受到了全世界读者的追捧，被译为了十几种语言。但遗憾的是，在经历了
4 个版本的更新后，其最后一版发布于 2007 年，之后再无更新。
Here is a pullquote left. 左侧的 Pull Quote.
直至 Java 8 发布，随着大量新特性的发布，原书作者 Bruce Eckel 觉得很有必要重塑这本经典的《Java编程思想》，于是重新动笔完成了最新版本《On
Java》， 一经发布就得到了读者的高度关注。
Here is a pullquote right. 右侧的 Pull Quote.
从我学习Java的经验来看，《Thinking in Java》是讲解Java编程的最佳书籍！
这本书不仅详细地介绍Java语法、知识点、API类库使用，更重要的是对Java
OOP编程思想娓娓道来，让读者在潜移默化中理解了OOP思想，这是在其他编程书籍很少能见到的。在这点上不得不慨叹Bruce
Eckel在讲解OOP编程思想方面有很高的天赋！
高亮文本
- syntax
1
2
3
{% hl_text [(classes | hexa code | rgb color | rgba color)] %}
content
{% endhl_text %}
| Argument | Description | Demo |
|---|---|---|
| Classes | red | your highlighted text |
| Classes | green | your highlighted text |
| Classes | blue | your highlighted text |
| Classes | purple | your highlighted text |
| Classes | orange | your highlighted text |
| Classes | yellow | your highlighted text |
| Classes | cyan | your highlighted text |
| Classes | parimay | your highlighted text |
| Classes | success | your highlighted text |
| Classes | waring | your highlighted text |
| Classes | danger | your highlighted text |
| Classes | color(#00FFFF) | your highlighted text |
| Classes | rgb color(rgb(66,185,131)) | your highlighted text |
夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，曾不知老之将至。及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀。况修短随化，终期于尽。古人云：“死生亦大矣。”岂不痛哉！
每览昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。固知一死生为虚诞，齐彭殇为妄作。后之视今，亦犹今之视昔。悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。 后之览者，亦将有感于斯文。
Youtube
国内被墙，不做效果演示。
更多高级用法参考插件仓库说明
视频
- syntax
1
{% video [classes] videoURL [Optional Poster (Thumbnail) URL] [Width] [Caption] %}
| Argument | Description |
|---|---|
| Classes (optional) | Make sure to separate your class properties with whitespaces. Tranquilpeak integrates many css classes to create nice effects: - left : Video will float at the left (default alignment). - right : Video will float at the right. - center : Video will be at center. - clear : Add a div with clear:both; style attached after the image to retrieve the normal flow of the post. - nocaption : the provided caption will not be displayed. - loop : once over, the video will playback from the beginning. - nocontrols : The video’s default controls will be hidden. Most browsers still make them accessible by right clicking on the video. - autoplay : Video will autoplay on page load. must be used with the ‘mute’ class to obey browser standards. Most likely will not work otherwise. - muted : The video will be muted - fig-20 : Image will take 20% of the width of post width and automatically float at left. - fig-25 : Image will take 25% of the width of post width and automatically float at left. - fig-33 : Image will take 33% of the width of post width and automatically float at left. - fig-50 : Image will take 50% of the width of post width and automatically float at left. - fig-75 : Image will take 75% of the width of post width and automatically float at left. - fig-100 : Image will take 100% of the width of post width. |
| videoURL | Path to the original video. |
| Poster image (optional thumbnail) | Path to the thumbnail image. If empty, the initial frame of video will be displayed. |
| Width of thumbnail image (optional) | Width of the video frame. E.g : 85%. |
| Caption (optional) | Title of image displayed in a caption under image. Alt HTML attribute will use this title. E.g : “A beautiful sunrise”. |
- eg
1
{% video center https://img.biwin.eu.org/smile.mp4 https://img.biwin.eu.org/smile.mp4 100% Poster (Thumbnail) Enabled %}
Poster (Thumbnail) Enabled
宽图像
- syntax
1
{% wide_image /path/to/image [title text] %}
| Argument | Description |
|---|---|
| Image | Path to the original image. |
| Title(optional) | Title of image displayed in a caption under image. Alt HTML attribute will use this title. E.g : "A beautiful sunrise". |
- eg
1
{% wide_image https://5b868fd.webp.li/car.jpg "A beautiful sunrise" %}
A beautiful sunriseHexo 官方的 Tag plugins
Hexo 官方的 Tag 插件地址，可以再学习学习 tag-plugins
关于媒体文件的 tag 发现一个插件
后续由需要可以使用看看 hexo-tag-mmedia
