安裝hexo-admonition提示區塊外掛

hexo-admonition-new

建議換成hexo-admonition-new，該專案是根據hexo-admonition迭代更新。更新內容如下：

  1. 修正一些錯誤（例如無法斷行，或是空行段落無法被引用等等）。
  2. 標題加入圖示。
  3. 內容可折疊（可選）。
  4. 深色模式。
  5. 更多提示類型。

功能示範：https://blog.x1ren.top/2025/07/28/test2/

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

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

npm install hexo-admonition --save

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

/* --- 容器基本設定 --- */
.admonition {
  margin: 20px 0 20px 0; /* 區塊四周間距 */
  padding: .6rem;
  overflow: hidden;
  font-size: 1rem; /* 字體大小 */
  page-break-inside: avoid;
  border-left: .3rem solid #42b983;
  /* border-radius: .3rem; 四邊圓角 */
  /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); 邊框陰影 */
  background-color: #fafafa;
}

/* === 只針對 Admonition 內的段落強制換行 === */
.admonition p {
  white-space: pre-line;
}

/* --- 標題區域設定 --- */
p.admonition-title {
  position: relative;
  margin: -.6rem -.6rem .8em -.6rem !important;
  padding: .4rem .6rem .4rem 2.8rem;
  font-weight: 700;
  color: #555;
}

/* --- Icon 通用設定 (FA4 優化版) --- */
.admonition-title::before {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  transform: translateY(-45%); /* 微調對齊 */

  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 1.2rem;
  line-height: 1;

  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent !important;
}

/* =========================================
   各類型顏色設定
   ========================================= */

/* 1. Note (新增：筆記類型 - 綠色系) */
.note > .admonition-title {
  background-color: rgba(66, 185, 131, .1);
  color: #42b983;
}
.admonition.note {
  border-color: #42b983;
}
.note > .admonition-title::before {
  color: #42b983;
  content: "\f040";   /* FA4: Pencil (鉛筆) */
}

/* 2. Info / Todo (藍色系) */
.info > .admonition-title,
.todo > .admonition-title {
  background-color: rgba(0,184,212,.1);
  color: #00b8d4;
}
.admonition.info,
.admonition.todo {
  border-color: #00b8d4;
}
.info > .admonition-title::before,
.todo > .admonition-title::before {
  color: #00b8d4;
  content: "\f05a";   /* FA4: Info Circle */
}

/* 3. Warning / Attention / Caution (橘色系) */
.warning > .admonition-title,
.attention > .admonition-title,
.caution > .admonition-title {
  background-color: rgba(255,145,0,.1);
  color: #ff9100;
}
.admonition.warning,
.admonition.attention,
.admonition.caution {
  border-color: #ff9100;
}
.warning > .admonition-title::before,
.attention > .admonition-title::before,
.caution > .admonition-title::before {
  color: #ff9100;
  content: "\f071";   /* FA4: Exclamation Triangle */
}

/* 4. Failure / Error (紅色系) */
.failure > .admonition-title,
.missing > .admonition-title,
.fail > .admonition-title,
.error > .admonition-title {
  background-color: rgba(255,82,82,.1);
  color: #ff5252;
}
.admonition.failure,
.admonition.missing,
.admonition.fail,
.admonition.error {
  border-color: #ff5252;
}
.failure > .admonition-title::before,
.missing > .admonition-title::before,
.fail > .admonition-title::before,
.error > .admonition-title::before {
  color: #ff5252;
  content: "\f057";   /* FA4: Times Circle */
}

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

/* 修正 Admonition 無標題時，文字偏下方的問題 */
.admonition > :not(.admonition-title):first-child {
  margin-top: 0 !important;
}

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

@import '_custom/admonition'

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

效果如下：
hexo-admonition Demo

參考文章：