跳至主要内容

客製化 NexT 主題：添加側邊欄 Tag Cloud / Mermaid 圖表

Tag Cloud​

hexo-tag-cloud​

命令列安裝​

npm install hexo-tag-cloud

文件配置​

以本人使用的 Next 主題示範，詳細可參考官方文件

找到theme/next/layout/_macro/sidebar.swig文件，在文貼上下列程式碼

{% if site.tags.length > 1 %}
  <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
  <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div id="myCanvasContainer" class="widget tagcloud">
      <canvas width="250" height="250" id="resCanvas" style="width:100%">
        {{ list_tags() }}
      </canvas>
    </div>
  </div>
{% endif %}

主題配置​

找到theme/next/_config.yml，在最下面貼上下列程式碼

# hexo-tag-cloud
tag_cloud:
    textFont: Trebuchet MS, Helvetica
    textColor: '#333'
    textHeight: 50
    outlineColor: '#E2E1D1'
    maxSpeed: 0.1

預覽​

Tag Cloud 預覽


Mermaid圖表​

hexo-filter-mermaid-diagrams​

github repo: hexo-filter-mermaid-diagrams

命令列安裝​

npm install hexo-filter-mermaid-diagrams --save

Next 啟用 Mermaid​

找到theme/next/_config.yml文件，找到 mermaid 的配置選項，設定 enable: true

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme:
    light: default
    dark: dark

找到theme/next/layout/partials/footer.swig，在最底加上下列程式碼

{% if theme.mermaid.enable %}
  <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>
{% endif %}

Hexo 啟用 Mermaid​

找到_config.yml文件，在最底加上下列程式碼

# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "7.1.2" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

預覽​

mermaid 畫面渲染


Reference​

標籤：
最後於 更新