安裝Hexo的hexo-admonition警告區塊外掛

Hexo的hexo-admonition的功能是在文章內插入警告區塊，例如提示、更新、備註、警告等等。其實就是文章內某個段落的額外說明，對於排版和閱讀都會比較清楚明暸。效果如下：
hexo-admonition Demo

安裝方式很簡單，先安裝外掛：

npm install hexo-admonition --save

加入自訂CSS，但是不要直接修改主題的CSS，這裡用自訂CSS檔案來載入。例如到Hexo Light主題新增/themes/light/source/css/_custom資料夾，裡面新增一個custom.styl檔案，內容加入：

.admonition {
  margin: 1.5625em 0;
  padding: .6rem;
  overflow: hidden;
  font-size: 1rem; /* 字體大小 */
  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;
}

編輯/themes/light/source/css/style.styl檔案，底下加入：

@import '_custom/custom'

改完就可以看到效果了。其他使用方法請參閱考開發者寫的說明。

參考文章：