给 Stellar 编写和添加组件 以 侧边栏添加 Waline 为例

<%
function layoutDiv() {
  var el = '<widget class="widget-wrapper post-list">';
  el += '<link rel="stylesheet" href="https://blog.b1gm4x.com/css/waline.css"/>';
  el += '<div class="widget-header dis-select">';
  el += '<span class="name">' + '博客留言' + '</span>' + '</div>';
  el += '<div id="waline">' + '</div>';
  el += '<script type="module">' + "import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js'; init({ el: '#waline', dark: false, serverURL: 'https://blog.b1gm4x.com/comments', login: 'disable', wordLimit: 0, comment: false, path: 'side-bar', pageview: true});" + '</script>';
  el += '</widget>';
  return el;
}
%>
<%- layoutDiv() %>

....
#侧边评论
sidecommet:
  layout: sidecommet
....

...
######## Main ########
# 站点主结构树
site_tree:
  # -- 列表类页面 -- #
  # 主页配置
  home:
    leftbar: welcome, recent, <mark>sidecommet</mark>
    rightbar: 
  # 博客列表页配置
  index_blog:
    base_dir: blog # 只影响自动生成的页面路径
    menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id
    leftbar: welcome, recent, <mark>sidecommet</mark> # for categories/tags/archives
    rightbar: 
    nav_tabs:  # 近期发布 分类 标签 专栏 归档 and ...
      # '朋友文章': /friends/rss/
  # 博客专栏列表页配置
  index_topic:
    base_dir: topic # 只影响自动生成的页面路径
    menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 topic 的页面默认使用这里配置的 menu_id
  # 文档列表页配置
  index_wiki:
    base_dir: wiki # 只影响自动生成的页面路径
    menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id
    leftbar: related, recent, <mark>sidecommet</mark> # for wiki
    rightbar: 
    nav_tabs:
      # 'more': https://github.com/xaoxuu
  # -- 内容类页面 -- #
  # 博客文章内页配置
  post:
    menu_id: post # 未在 front-matter 中指定 menu_id 时，layout 为 post 的页面默认使用这里配置的 menu_id
    leftbar: related, recent, <mark>sidecommet</mark> # for pages using 'layout:post'
    rightbar: ghrepo, toc
  # 博客专栏文章内页配置
  topic:
    menu_id: post
  # 文档内页配置
  wiki:
    menu_id: wiki # 未在 front-matter 中指定 menu_id 时，layout 为 wiki 的页面默认使用这里配置的 menu_id
    leftbar: tree, related, recent, <mark>sidecommet</mark> # for wiki
    rightbar: ghrepo, toc
  # 作者信息配置
  author: 
    base_dir: author # 只影响自动生成的页面路径
    menu_id: post
    leftbar: recent, timeline, <mark>sidecommet</mark>
    rightbar: timeline
  # 错误页配置
  error_page:
    menu_id: post
    '404': '/404.html'
    leftbar: recent, timeline, <mark>sidecommet</mark>
    rightbar: timeline
  # 其它自定义页面配置 layout: page
  page:
    leftbar: recent, <mark>sidecommet</mark>
    rightbar: toc
...