前言

这篇文章长期更新 (如果文章还在的话)。

一、主题使用

1、转圈圈(2.9.6版本已解决)

幻灯片图片使用 透明度图片/svg 会暴露转圈圈：

2、后续更新(2.9.6版本已更新)

3、标签添加图片加载问题(2.9.6版本已解决)

由于懒加载，使得标签里面的图片加载不出来：

4、添加mermaid放大拖拽功能

本文档记录了对 Bearsimple 主题中 Mermaid 图表功能的修改，主要包括添加 svg-pan-zoom 库支持以及将控制按钮定位到右上角的修改。

修改1: 更新CSS样式，将控制按钮定位到右上角

<style>
.mermaid-container {
    position: relative;
    margin: 1rem 0;
}
.mermaid-controls {
    /* 修改2: 将控制按钮定位到右上角 */
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    z-index: 10;
}
.mermaid-controls button {
    padding: 5px 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}
.mermaid-controls button:hover {
    background: #0056b3;
}
.mermaid-controls button:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.mermaid-zoom-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid #eee;
    border-radius: 4px;
    min-height: 200px;
}
.mermaid-zoom-container svg {
    max-width: unset;
}
.mermaid-pan-active {
    cursor: move !important;
}
</style>

修改3: 更新wrapMermaidDiagrams函数，调整控制按钮容器的结构

function wrapMermaidDiagrams() {
    document.querySelectorAll('.mermaid:not(.wrapped)').forEach(el => {
        // 创建外部容器
        const container = document.createElement('div');
        container.className = 'mermaid-container';
        
        // 创建可缩放容器
        const zoomContainer = document.createElement('div');
        zoomContainer.className = 'mermaid-zoom-container';
        
        // 创建控制按钮
        const controls = document.createElement('div');
        controls.className = 'mermaid-controls';
        controls.innerHTML = `
            <button class="mermaid-zoom-in" title="放大"><i class="fa fa-search-plus"></i></button>
            <button class="mermaid-zoom-out" title="缩小"><i class="fa fa-search-minus"></i></button>
            <button class="mermaid-reset" title="重置"><i class="fa fa-refresh"></i></button>
            <button class="mermaid-pan" title="拖拽移动"><i class="fa fa-arrows"></i></button>
            <button class="mermaid-fit" title="适应屏幕"><i class="fa fa-expand"></i></button>
        `;
        
        // 包装元素 - 将控制按钮放在zoomContainer内以确保正确定位
        el.parentNode.insertBefore(container, el);
        zoomContainer.appendChild(el);
        container.appendChild(zoomContainer);
        zoomContainer.appendChild(controls);
        
        // 添加标记防止重复包装
        el.classList.add('wrapped');
    });
}

解决加载问题

5、添加登录才显示评论区功能

在function.php代码里面插入该功能的选项

        array(
            'id'       => 'Comment_LoginOnly',
            'type'     => 'switcher',
            'title'    => '登录才显示评论区',
            'default'  => false,
            'subtitle' => '开启后未登录用户将看不到评论区，登录后才显示评论区'
        ),

大约位置：

comment.php文件插入if判断

位置1：文件开头

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; 
// 添加这两行
$isUserLoggedIn = $this->user->hasLogin();
$loginOnlyEnabled = Bsoptions('Comment_LoginOnly') == true;

位置2：评论卡片开始处

php<?php if (!$loginOnlyEnabled || $isUserLoggedIn): ?>  <!-- 添加这行 -->
<div class="comment-card">

位置3：文件末尾
找到最后的：

</div></div>
</div>

</div>

修改为：

</div></div>
</div>

<?php else: ?>
<!-- 未登录用户看到的提示 -->
<div class="comment-card">
<h3 class="ui header">
  <i class="comment alternate outline icon"></i>评论区
</h3>
<div class="ui message">
  <div class="header">请先登录</div>
  <p>只有登录用户才能查看和发表评论。</p>
  <a href="<?php $this->options->adminUrl('login.php'); ?>" class="ui blue button">
    <i class="sign in icon"></i>立即登录
  </a>
</div>
</div>
<?php endif; ?>

</div>

大约位置：

6、解决侧边目录树加载问题

使用cdn加速静态存储后，发现目录树加载不出来，于是添加缓存，修改compoment/sidebar.php

<script>
       (function(){
           // 确保Menutree加载完成后再执行初始化
           function initMenutree() {
               if (typeof Menutree !== 'undefined') {
                   if($('.post-content').length && $('.post-content').has('h1,h2,h3,h4,h5,h6').length){
                       $('.bsmenutree').show();
                       const defaults = Menutree.DEFAULTS;
                       let menutree;
                       defaults.title =  false, 
                       defaults.selector = "h1,h2,h3,h4,h5,h6",
                       defaults.position = "sticky",
                       defaults.showCode = false,
                       defaults.stickyHeight = 0,
                       defaults.hasToolbar = false,
                       defaults.parentElement = "#menutree",
                       defaults.articleElement = "#bs_toc_body",
                       
                       menutree = new Menutree(Menutree.DEFAULTS);
                   }
               } else {
                   // 如果Menutree还未加载完成，等待一段时间后重试
                   setTimeout(initMenutree, 100);
               }
           }
           
           // 等待DOM加载完成后初始化
           if (document.readyState === 'loading') {
               document.addEventListener('DOMContentLoaded', initMenutree);
           } else {
               // DOM已经加载完成
               initMenutree();
           }
       })();
  </script>

7、视频

8、优化表格

<style>
/* 表格外层横向滚动 */
table {
  border-collapse: collapse;
  width: 100%;
  display: block;        /* 让表格块状，可滚动 */
  overflow-x: auto;      /* 横向滚动 */
  white-space: nowrap;   /* 不换行 */
  max-width: 100%;
}

/* 表头和单元格样式 */
table th, table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;   /* 内容不换行 */
}

/* 表头固定 */
table thead th {
  background-color: #f8f8f8;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* hover 效果（可选） */
table tbody tr:hover {
  background-color: #f1f1f1;
}

/* 可选：表格边框圆角和阴影 */
table {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
</style>

二、插件使用

1、Lopwon_Hub插件的使用

找到主题目录里面的page/post.php

在输出文章前：

<?php echo reEmoPost(ShortCode($this->content,$this,$this->user->hasLogin(),$this->fields->ArticleType)); ?>

添加：

<?php
$content = $this->content;
$content = Typecho_Plugin::factory('Content')->LopwonHub($content);
$this->content = $content;
?>

若文章开启了插件Echarts，应可以显示：

[chart-ec_1]

2、足迹使用iframe添加在首页最底部

page/index-z.php中：

      echo $content;
     ?>
     
     <?php endif; ?>

的后面添加代码：

    <!-- 足迹开始 -->     
     <?php if($this->getCurrentPage() == 1): ?>
     <iframe src="https://www.hansjack.com/footprint.html" frameborder="0" width="100%" height="400" style="margin-top: 40px; border: 2px solid #ccc; border-radius: 12px; overflow: hidden;"></iframe>
     <?php endif; ?>
    <!-- 足迹结束 -->

3、插入猜你想搜（Lopwon_Hub）

         <div id="header">
             <div class="site-name">
<?php if(!empty(Bsoptions('Search')[0]) && @in_array('header',Bsoptions('Search'))) :?>   
        <form name="pcsearch" role="search" method="get" id="searchform1">
 <div class="bearmargin" style="float:right;"><div class="ui category search"><div class="ui large icon input pc">
      <input class="prompt" id="pcsearch" type="text" name="s" placeholder="输入关键词实时搜索">
      <i class="search link icon"></i>
 //这里插入，限制4个词     
      <?php Typecho_Plugin::factory('Search')->LopwonHub(); ?>
      
</div></div></div>