Hexo 支持admonition 插件

安装hexo-admonition 插件

1. 在Blog目录下执行如下命令安装插件

npm install hexo-admonition --save

2. 在修改主题样式，增加admonition样式

   • 在Blog根目录下找到./node_modules/hexo-theme-icarus/source/css目录
   • 添加一个自定义css文件，例如 custom.styl，具体的css样式文件拷贝此文件中；
   • 在style.styl中引入custom.styl文件@import 'custom'

如果无法显示样式

如果在本地可以显示admonition样式但是在github上无法显示样式可以尝试将 custom.styl 样式文件内容直接写入到tyle.styl

如何使用hexo-admonition

在md文件中加入如下内容

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

   提示类型 type 将用作 CSS 类名称，暂支持如下类型：
    - note
    -  info, todo
    - warning, attention, caution
    -  error, failure, missing, fail

Hexo-admonition 插件使用示例

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

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

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

参考信息

1. github地址：https://github.com/lxl80/hexo-admonition
2. 参考样式文件

   .admonition {
   margin: 1.5625em 0;
   padding: 1rem;
   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;
   }