移植安知鱼中控台

1.准备

theme/butterfly/layout/includes/anzhiyu/console.pug

#console
  .console-card-group-reward
    ul.reward-all.console-card
      each item in theme.reward.QR_code
        li.reward-item
          a(href=url_for(item.link || item.img), target='_blank')
            img.post-qr-code-img(alt=item.text, src=url_for(item.img))
          .post-qr-code-desc=item.text
  .console-card-group
    .console-card-group-left
      !=partial('includes/widget/card_newest_comment', {}, {cache: true})
    .console-card-group-right
      .console-card.tags
        .card-content
          if theme.nav_music.enable && theme.nav_music.console_widescreen_music
            .author-content-item-tips 音乐
            span.author-content-item-title 灵魂的碰撞💥
          else 
            .author-content-item-tips 兴趣点
            span.author-content-item-title 寻找你感兴趣的领域
            !=partial('includes/widget/card_console_tags', {}, {cache: true})
      .console-card.history
        .item-headline
          i.anzhiyufont.anzhiyu-icon-box-archiv
          span 文章
        !=partial('includes/widget/card_console_archives', {}, {cache: true})
  .button-group
    if theme.darkmode.enable
      .console-btn-item
        a.darkmode_switchbutton(title='显示模式切换', href='javascript:void(0);')
          i.anzhiyufont.anzhiyu-icon-moon
    .console-btn-item#consoleHideAside(onclick='anzhiyu.hideAsideBtn()', title='边栏显示控制')
      a.asideSwitch
        i.anzhiyufont.anzhiyu-icon-arrows-left-right
    if theme.comment_barrage_config.enable
      .console-btn-item.on#consoleCommentBarrage(onclick='anzhiyu.switchCommentBarrage()', title='热评开关')
        a.commentBarrage
          i.anzhiyufont.anzhiyu-icon-message
    if theme.nav_music.enable
      .console-btn-item#consoleMusic(onclick='anzhiyu.musicToggle()', title='音乐开关')
        a.music-switch
          i.anzhiyufont.anzhiyu-icon-music
    if theme.shortcutKey.enable
      .console-btn-item#consoleKeyboard(onclick='anzhiyu.keyboardToggle()', title='快捷键开关')
        a.keyboard-switch
          i.anzhiyufont.anzhiyu-icon-keyboard
  .console-mask(onclick='anzhiyu.hideConsole()', href='javascript:void(0);')

其中：第11行的引用，经对比，完全等价于

!=partial('includes/widget/card_tags', {}, {cache: true})

css 样式

#console {
  display: flex;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  justify-content: center;
  opacity: 0;
  transition: 0.3s ease-out, color 0s;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  margin: 0 !important;
  z-index: 2;
}
#console-music-bg {
  display: none;
}

#console.show,
#console.reward-show {
  opacity: 1;
  pointer-events: all;
}

#console.reward-show .console-card-group {
  pointer-events: none;
}

#console .console-card-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 30px;
  transform: translateY(20px);
  transition: 0.3s;
  opacity: 0;
  max-width: 80%;
  max-height: 70%;
}

#console.show .console-card-group {
  transform: translateY(0px);
  opacity: 1;
  transition-delay: 0.1s;
}

#console .console-card-group-left {
  margin-right: 0.5rem;
  width: 40%;
  height: 100%;
}

#console .console-card-group-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 60%;
  overflow: hidden;
  min-width: 575px;
}

#console .console-card {
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  border: var(--style-border);
  box-shadow: var(--anzhiyu-shadow-border);
  padding: 40px;
}

#console .console-card.tags {
  height: calc(100% - 172px);
}

#console .console-mask {
  background: var(--anzhiyu-maskbgdeep);
  backdrop-filter: saturate(100%) blur(0px);
  -webkit-backdrop-filter: blur(0px);
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  transition: 0.3s;
  margin: 0px !important;
}

#console.show .console-mask,
#console.reward-show .console-mask {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: translateZ(0);
}


#center-console:checked + label {
  right: 0;
  top: 0.5rem;
  z-index: 31;
}
#center-console:checked + label:hover::after {
  background: var(--anzhiyu-main) !important;
}
#center-console:checked + label::after {
  content: "";
  width: 35px;
  height: 35px;
  display: block;
  position: absolute;
  z-index: -1;
  top: -6px;
  left: -6.3px;
  background: var(--anzhiyu-fontcolor) !important;
  border-radius: 50px;
}
#center-console:checked + label:is(.widget,
#center-console:checked + label .widget:hover) i {
  height: calc(var(--icon-size) / 4.5);
  background: var(--anzhiyu-white) !important;
}
#center-console:checked + label i.left {
  width: 100% !important;
  -webkit-transform: rotate(-45deg) !important;
  -moz-transform: rotate(-45deg) !important;
  -o-transform: rotate(-45deg) !important;
  -ms-transform: rotate(-45deg) !important;
  transform: rotate(-45deg) !important;
}
#center-console:checked + label i.center {
  width: 0 !important;
}
#center-console:checked + label i.right {
  width: 100% !important;
  -webkit-transform: rotate(45deg) !important;
  -moz-transform: rotate(45deg) !important;
  -o-transform: rotate(45deg) !important;
  -ms-transform: rotate(45deg) !important;
  transform: rotate(45deg) !important;
}
[data-theme="dark"] #center-console:checked + label:is(.widget,
#center-console:checked + label .widget:hover) i {
  background: var(--anzhiyu-black) !important;
}

themes\butterfly\layout\includes\header\nav.pug 中，增加一个启用控制台的图标

if theme.centerConsole.enable
        input#center-console(type="checkbox")
        label.widget(for="center-console" title=_p("中控台") onclick="anzhiyu.switchConsole();")
          i.left
          i.widget.center
          i.widget.right

      !=partial('includes/anzhiyu/console', {}, {cache:true})

以上代码解读 - 点击查看详情

逐行解读

1. if theme.centerConsole.enable

功能
：
- 检查 theme.centerConsole.enable 是否启用（布尔值）。
- 如果此配置项为 true，则渲染以下内容；否则，跳过该部分代码。
上下文
：
- theme.centerConsole 是在主题配置文件（如 _config.yml）中定义的选项，用于控制是否显示 “中控台” 功能。

2. input#center-console(type=”checkbox”)

功能
：
- 创建一个 HTML <input> 元素，类型为 checkbox，并为其指定了 id="center-console"。
作用
：
- 该复选框可能用于显示或控制 “中控台” 的状态（如激活或禁用）。
- 在用户勾选或取消勾选时，浏览器会自动更改复选框的状态。

功能：
- 创建一个 <label> 元素，关联到上方的复选框（通过 for="center-console" 属性）。
- 标签的 title 属性通过 _p("中控台") 动态获取多语言翻译后的 “中控台” 文本。
- 当用户点击该标签时，会触发 onclick 中定义的 anzhiyu.switchConsole() 方法。
关键点：
- for="center-console"
  ：
  - 绑定到复选框 id="center-console"。
  - 用户点击该标签时，相当于点击复选框本身。
- title=_p("中控台")
  ：
  - _p 是主题中用于多语言翻译的函数，通常从语言文件（如 zh-Hans.yml）中获取对应的翻译文本。
- onclick="anzhiyu.switchConsole();"
  ：
  - 绑定了 JavaScript 方法 anzhiyu.switchConsole()，点击时触发 “中控台” 的切换功能。

2.然后

themes\butterfly\source\js\main.js 中

var consoleEl = document.getElementById("console");

const iooio = {
  // 显示中控台
  showConsole: function () {
    consoleEl.classList.add("show");
  },
  //隐藏中控台
  hideConsole: function () {
    if (consoleEl.classList.contains("show")) {
      // 如果是一般控制台，就关闭一般控制台
      consoleEl.classList.remove("show");
    } 
    // 获取center-console元素
    const centerConsole = document.getElementById("center-console");

    // 检查center-console是否被选中
    if (centerConsole.checked) {
      // 取消选中状态
      centerConsole.checked = false;
    }
  },
}

1.准备

逐行解读

1. if theme.centerConsole.enable

2. input#center-console(type=”checkbox”)

3. label.widget(for=”center-console” title=_p(“中控台”) onclick=”anzhiyu.switchConsole();”)

2.然后