300 更新于2025-08-04 07:08:00

前言

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

一、主题使用

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

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

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

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

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

4、添加mermaid放大拖拽功能

mindmap root((Uforms 功能流程)) 表单创建与管理入口访问后台管理界面点击"创建"菜单处理加载create.php 显示表单编辑器 (templates/form-editor.php) 字段拖拽排序保存表单数据调用Ajax保存 (ajax.php?action=save_form) 存储保存到uforms_forms表保存字段到uforms_fields表结果返回管理界面在manage.php中显示新表单表单展示前端展示通过短代码 [uforms name="form_name"] 通过URL访问 /uforms/form/form_name 处理流程 Plugin.php解析短代码调用front.php渲染表单加载模板 templates/form.php 显示表单字段表单提交入口用户填写表单点击提交按钮验证前端验证后端验证验证码检查文件上传处理处理 Action.php处理提交 front.php处理数据保存到uforms_submissions表通知邮件通知 Slack通知反馈成功消息错误提示数据管理提交查看后台访问"视图" 加载submissions.php 从数据库获取提交数据展示提交详情数据导出选择导出格式调用export.php 生成CSV/Excel文件统计分析访问analytics.php 使用echarts生成图表显示统计数据日历功能预约表单启用日历设置访问/uforms/calendar/form_id 加载fullcalendar 显示可预约时间时间管理设置工作时间设置不可预约日期处理预约提交

本文档记录了对 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>

前言

一、主题使用

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

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

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

4、添加mermaid放大拖拽功能

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

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

解决加载问题

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

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

comment.php文件插入if判断

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

7、视频

8、优化表格

二、插件使用

1、Lopwon_Hub插件的使用

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

3、插入猜你想搜（Lopwon_Hub）

那年今日

微信分享二维码

随机文章

实现 3D Minecraft 角色展示只需要 skinview3d

【通知】MediaLibrary插件已经发布！

实践第一，走出自己的第一步！

2025-08-25日记

C 语言笔记

我要戒掉甜瘾！

评论区

赞赏支持作者