2020-07-15发表blog26 分钟读完 (大约3936个字)0次访问

Hexo进阶使用

这是一篇对hexo以及typora等博客工具的食用说明手册，随时补充。

总览

hexo静态博客，简洁大气，个人比较中意。typora作为轻量级的markdown编辑器，界面也比较简洁，当然在支持上不够完全。导致了一些markdown语法的页面渲染与本地有所区别，特此记录。
也可以考虑换个大型的编辑器？

Hexo

hexo插件

hexo插件比较丰富，可以在官方插件页下载使用插件。

hexo-filter-flowchat渲染flow图，

hexo-filter-mermaid-diagrams渲染mermaid和diagrams，

hexo-filter-sequence渲染序列图，

live2d-widget看板娘，没啥用，还有可能挡住内容和按钮，减慢加载速度。

hexo-bilibili-card插入哔哩哔哩视频卡片具体有没用，好不好用有待测试。

hexo-blog-encrypt文章加密，确实可以加密，但是解密之后好像样式会崩。

hexo标签

hexo使用标签语言可以实现丰富页面的媒体展示。hexo官方标签插件介绍，不能嵌入到markdown语法中。

quote引用

quote

1
2
3

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

俱往矣，数风流人物，还看今朝

毛泽东沁园春·雪

code block代码块

code

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}

{% codeblock action_logic.vhd lang:vhdl https://github.com/scutLMG/pixels_plane-VHDL %}
library IEEE;
use IEEE.STD_LOGIC_1164.ALL;
use IEEE.STD_LOGIC_ARITH.ALL;
use IEEE.STD_LOGIC_UNSIGNED.ALL;
{% endcodeblock %}

action_logic.vhdpixels_plane-VHDL

library IEEE;
use IEEE.STD_LOGIC_1164.ALL;
use IEEE.STD_LOGIC_ARITH.ALL;
use IEEE.STD_LOGIC_UNSIGNED.ALL;

和markdown语法的区别在于可以添加标题和链接及其名字。markdown语法中强行写入标题，会导致编辑器中无法识别并分配上色方案，但是hexo网页渲染是没问题的，所以其实区别不大。

YouTube视频

youtube

1	{% youtube video_id [type] [cookie] %}

img图片

img

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

title text为悬停显示名称，alt text为图像标题。图片路径的名称不要带空格，特别是像通过批量重命名的图片，名称就有空格，往往无法显示。

link链接

link

1	{% link text url [external] [title] %}

博客加入了链接，不如`markdown`自带的方便好用。

摘要

在markdown文件中使用可以将其之上的文字划分为摘要，在主页时，文章只显示摘要和阅读更多按钮。

hexo命令

hexo clean 清除旧的缓存，source文件夹中的文件不会被清除。

hexo g生成博客

hexo s本地运行博客预览，可以进行实时的样式、文章修改（当然了，还是要刷新的）

hexo d上传到github

hexo new page page_name生成新页面时使用，生成后要在配置文件内添加导航分栏，自定义渲染以及布局文件。

Front-matter

front-matter似乎是属于yaml的一种书写方式。写在.md文件的头部，定义其表现形式，使用三重虚线包围

Front Matter，Hexo-Front-matter，一般就下面几个参数。

参数	描述	默认值
`layout`	布局	`config.default_layout`
`title`	标题	文章的文件名
`date`	建立日期	文件建立日期
`updated`	更新日期	文件更新日期
`comments`	开启文章的评论功能	true
`tags`	标签（不适用于分页）
`categories`	分类（不适用于分页）

其他（HTML块）

HTML块的使用。主要是图片插入。

typora支持使用HTML，所以图片也可以使用HTML的方式插入，但样式需要通过内联样式 style 的方式修改。

而图片可以直接使用 <img> 标签插入，但因为HTML5废弃了居中属性，所以要实现对齐，需要用 <div> 包裹，并在 <div> 内添加内联样式。下为一例，除此以外，其他需求也可以通过插入HTML的方式实现。

1
2
3

<div align="center">
    <img src="/gallery/link.jpg" alt="林克" style="zoom:40%;" /> 
</div>

Typora

主要是markdown语法和Typora的显示兼容。

Markdown语法已经很熟练了，而且编辑器大部分都很友好，懒得写了。可查询网页markdown指南中文版，以及Typora支持，有不太熟悉的再写到下面。

插入空行使用：TAB+空格，</br>标签等等。

其他的待补充。

Bulma

一种css框架。

按钮

<div class="buttons">
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>
</div>

光有按钮肯定是不行的，一般我们还需要给按钮增加事件，比如点击下面的按钮，可以显示一条一言（Hitokoto）。

↑↑↑ 试着点击“显示一言”！

<button class="button is-info" onclick="showHitokoto(event)">显示一言</button>
<blockquote class="hitokoto">↑↑↑ 试着点击“显示一言”！</blockquote>

<script>
function showHitokoto (event) {
    event.target.classList.add('is-loading');
    $.ajax({
        type: 'GET',
        url: 'https://v1.hitokoto.cn/',
        success: function (data) {
            $('.hitokoto').text(data.hitokoto);
            event.target.classList.remove('is-loading');
        }
    });
}
</script>

进度条

<progress class="progress is-info" value="20" max="100"></progress>
<progress class="progress is-success" value="40" max="100"></progress>
<progress class="progress is-warning" value="60" max="100"></progress>
<progress class="progress is-danger" value="80" max="100"></progress>
<progress class="progress is-info" max="100"></progress>

Pixabay 是全球知名的图库网站及充满活力的创意社区,拥有上百万张免费正版高清照片素材,涵盖风景、人物、动态、静物等多种分类,你可以在任何地方使用 Pixabay 图库中的素材…

网易云音乐是一款专注于发现与分享的音乐产品,依托专业音乐人、DJ、好友推荐及社交功能,为用户打造全新的音乐生活。

哔哩哔哩是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。

石墨文档是全新一代云 Office 办公软件,支持多人在线协作编辑文档和表格,独有内容级安全,全过程留痕可追溯。PC 端和移动端全覆盖,随时随地远程办公。即写即存…

<div class="tabs is-toggle"><ul>
<li class="is-active"><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
<span>Pictures</span>
</a></li>
<li><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
<span>Music</span>
</a></li>
<li><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
<span>Videos</span>
</a></li>
<li><a onclick="onTabClick(event)">
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
<span>Documents</span>
</a></li>
</ul></div>

{% raw %}<div id="Pictures" class="tab-content" style="display: block;">{% endraw %}
[Pixabay](https://pixabay.com/zh/) 是全球知名的图库网站及充满活力的创意社区,拥有上百万张免费正版高清照片素材,涵盖风景、人物、动态、静物等多种分类,你可以在任何地方使用 Pixabay 图库中的素材...
{% raw %}</div>{% endraw %}
{% raw %}<div id="Music" class="tab-content">{% endraw %}
[网易云音乐](https://music.163.com/) 是一款专注于发现与分享的音乐产品,依托专业音乐人、DJ、好友推荐及社交功能,为用户打造全新的音乐生活。
{% raw %}</div>{% endraw %}
{% raw %}<div id="Videos" class="tab-content">{% endraw %}
[哔哩哔哩](https://www.bilibili.com/) 是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。
{% raw %}</div>{% endraw %}
{% raw %}<div id="Documents" class="tab-content">{% endraw %}
[石墨文档](https://shimo.im/) 是全新一代云 Office 办公软件,支持多人在线协作编辑文档和表格,独有内容级安全,全过程留痕可追溯。PC 端和移动端全覆盖,随时随地远程办公。即写即存...
{% raw %}</div>{% endraw %}

<style type="text/css">
.content .tabs ul { margin: 0; }
.tab-content { display: none; }
</style>

<script>
function onTabClick (event) {
    var tabTitle = $(event.currentTarget).children('span:last-child').text();
    $('.article .content .tab-content').css('display', 'none');
    $('.article .content .tabs li').removeClass('is-active');
    $('#' + tabTitle).css('display', 'block');
    $(event.currentTarget).parent().addClass('is-active');
}
</script>