嘘~ 正在从服务器偷取页面 . . .

Hexo-admonition使用说明


参考文档:lxl80/hexo-admonition: Add block-styled admonition to hexo, e.g. note, warning or error. | Hexo内容辅助插件,支持向文档中添加如提示、警告、错误等块式内容。 (github.com)

WARNING

暂时未完成该插件 css 对于深色模式的适配功能
暂时未解决实际高度比预计高度多一行空白行的问题
若您此时为深色模式,请切换成浅色模式


简介

Hexo 内容辅助插件,支持将类似 reStructuredText 的警告提示块添加到 Markdown 文档中。例如 note、warning、error 等提示块,效果如下:

Info信息标题

这是一条不带标题的提示信息。


安装

npm install hexo-admonition --save

使用说明

1.语法说明

Hexo-admonition 遵循一种简单的语法:每个块都以 !!! 开头,然后是代表提示类型的关键字(type)及标题(title)。例如:

!!! note Hexo-admonition 插件使用示例
    这是基于 hexo-admonition 插件渲染的一条提示信息。类型为 note,并设置了自定义标题。

    提示内容开头留 4 个空格,可以有多行,最后用空行结束此标记。

在 Hexo 渲染前,将被转换成如下内容:

<div class="admonition note ">
  <p class="admonition-title">Hexo-admonition 插件使用示例</p>
  <p>这是基于 hexo-admonition 插件渲染的一条提示信息。类型为 note,并设置了自定义标题。</p>
  <p>提示内容开头留 4 个空格,可以有多行,最后用空行结束此标记。</p>
</div>

最终呈现效果如下:

Hexo-admonition 插件使用示例

这是基于 hexo-admonition 插件渲染的一条提示信息。类型为 note,并设置了自定义标题。
提示内容开头留 4 个空格,可以有多行,最后用空行结束此标记。


2.支持的类型

提示类型 type 将用作 CSS 类名称,暂支持如下类型:

  • note
  • info, todo
  • warning, attention, caution
  • error, failure, missing, fail

3.设置/隐藏标题

标题 title 是可选的,当未设置时,将以 type 作为默认值:

!!! warning
    这是一条采用默认标题的警告信息。

效果如下:

warning

这是一条采用默认标题的警告信息。


如果不想显示标题,可以将 title 设置为 ""

!!! Warning ""
    这是一条不带标题的警告信息。

效果如下:

这是一条不带标题的警告信息。


样式配置

打开 themes\hexo-theme-matery\source\css\my.css,加入以下代码:

/*Hexo-Admonition*/
.admonition {
  margin: 1.5625em 0;
  padding: .6rem;
  overflow: hidden;
  font-size: .64rem;
  page-break-inside: avoid;
  border-left: .3rem solid #42b983;
  border-radius: .3rem;
  box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,.05), 0 0 0.05rem rgba(0,0,0,.1);
  background-color: #fafafa;
}

p.admonition-title {
  position: relative;
  margin: -.6rem -.6rem .8em -.6rem !important;
  padding: .4rem .6rem .4rem 2.5rem;
  font-weight: 700;
  background-color:rgba(66, 185, 131, .1);
}

.admonition-title::before {
  position: absolute;
  top: .9rem;
  left: 1rem;
  width: 12px;
  height: 12px;
  background-color: #42b983;
  border-radius: 50%;
  content: ' ';
}

.info>.admonition-title, .todo>.admonition-title {
  background-color: rgba(0,184,212,.1);
}

.warning>.admonition-title, .attention>.admonition-title, .caution>.admonition-title {
  background-color: rgba(255,145,0,.1);
}

.failure>.admonition-title, .missing>.admonition-title, .fail>.admonition-title, .error>.admonition-title {
  background-color: rgba(255,82,82,.1);
}

.admonition.info, .admonition.todo {
  border-color: #00b8d4;
}

.admonition.warning, .admonition.attention, .admonition.caution {
  border-color: #ff9100;
}

.admonition.failure, .admonition.missing, .admonition.fail, .admonition.error {
  border-color: #ff5252;
}

.info>.admonition-title::before, .todo>.admonition-title::before {
  background-color: #00b8d4;
  border-radius: 50%;
}

.warning>.admonition-title::before, .attention>.admonition-title::before, .caution>.admonition-title::before {
  background-color: #ff9100;
  border-radius: 50%;
}

.failure>.admonition-title::before,.missing>.admonition-title::before,.fail>.admonition-title::before,.error>.admonition-title::before{
  background-color: #ff5252;;
  border-radius: 50%;
}

.admonition>:last-child {
  margin-bottom: 0 !important;
}

文章作者: 目棃
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 目棃 !
评论
  目录