信息栏是介绍人物的重要部分，虽然我们实际上是通过自己设计的插件管理信息栏，但是我们也会专门说明在在只使用HTML和CSS的情况下这里的信息栏怎么使用和制作。

为什么制作信息栏

信息栏最重要的是通过列表的形式直观展示一个人的信息，对于文章来说，人物介绍中有着相当多零碎且繁琐的内容，信息栏是处理这些内容的最优解。

除此之外，信息栏的正确使用也可以避免这些繁琐内容污染文章本身的内容，在文章本身絮絮叨叨讲述角色的爱好、基本信息甚至外貌会影响观感。

如果你要制作的是网络百科和角色展示这样的网站或页面，信息栏是非常重要的部分

信息栏的制作

通过上文我们也知道了，信息栏的本质其实是有一定复杂度的表格，如果没有代码基础，我们更建议用自定义HTML而非编辑表格，有代码基础的可以通过自己建立一个插件解决，例如重现Fandom里的信息栏编辑页面。

也是因此，信息栏的基础是“表格”以及表格内容的填充，所以第一步就是你要知道你需要介绍什么，这样的思路无论是介绍人物，还是事件、理论、地区、物件等等都一样适用，但是我们建议以基本信息为基础来制作信息栏，例如姓名、种族、生卒年、基础的外貌、爱好、基本的社会关系等等，而具体的经历、性格等等这些可以展开的更适合放入文章的主题内容，可以参考现实中的各个网络百科的介绍栏，如果你想要写动漫的角色介绍，那么萌娘百科和一些自建的维基网站就是不错的选择。

当你想好这些内容之后，我们就可以制作信息栏了。

以下为我们直接使用的信息栏的HTML和JS：

<!-- 角色信息栏 - HTML结构 (含折叠功能) -->
<div class="character-info-box">
    <!-- 图片区域 -->
    <div class="character-image-container">
        <!--
            如果有图片，使用下面这行并替换 src 和 alt
            <img src="你的图片URL" alt="角色中文名" class="character-image">
        -->
        <div class="default-image-text">
            待补充图像<br>
            (需要图像文件)
        </div>
    </div>

    <!-- 信息表格 -->
    <table class="info-table">
        <thead>
            <tr>
                <!-- 表头格式: 中文名 (英文名) -->
                <th colspan="2">角色中文名 (Character English Name)</th>
            </tr>
        </thead>
        <tbody>
            <!-- 基本信息 - 折叠部分 -->
            <tr class="section-header" onclick="toggleSection('basic-info')">
                <td class="label-cell section-label" colspan="2">基本信息 <span class="toggle-icon">+</span></td>
            </tr>
            <tbody id="basic-info" class="section-content">
                <tr>
                    <td class="label-cell">中文名</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">日文名</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">英文名</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">真性</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">生日</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">学校</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">组织</td>
                    <td class="content-cell">-</td>
                </tr>
            </tbody>

            <!-- 外貌 - 折叠部分 -->
            <tr class="section-header" onclick="toggleSection('appearance')">
                <td class="label-cell section-label" colspan="2">外貌 <span class="toggle-icon">+</span></td>
            </tr>
            <tbody id="appearance" class="section-content">
                <tr>
                    <td class="label-cell">身高</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">体重</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">三围</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">发色</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">瞳色</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">特征</td>
                    <td class="content-cell">-</td>
                </tr>
            </tbody>

            <!-- 爱好 - 折叠部分 -->
            <tr class="section-header" onclick="toggleSection('hobbies')">
                <td class="label-cell section-label" colspan="2">爱好 <span class="toggle-icon">+</span></td>
            </tr>
            <tbody id="hobbies" class="section-content">
                <tr>
                    <td class="label-cell">动物</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">颜色</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">食物</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">书籍</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">影画</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">音乐</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">地点</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">人</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">擅长</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">重要之物</td>
                    <td class="content-cell">-</td>
                </tr>
                <tr>
                    <td class="label-cell">厌恶</td>
                    <td class="content-cell">-</td>
                </tr>
            </tbody>
        </tbody>
    </table>
</div>

<!-- 折叠功能所需的 JavaScript -->
<script>
    function toggleSection(sectionId) {
        var content = document.getElementById(sectionId);
        var icon = content.previousElementSibling.querySelector('.toggle-icon');
        if (content.style.display === "none" || content.style.display === "") {
            content.style.display = "table-row-group";
            icon.textContent = "-";
        } else {
            content.style.display = "none";
            icon.textContent = "+";
        }
    }

    // 页面加载完成后，默认折叠所有部分
    document.addEventListener('DOMContentLoaded', function() {
        var sections = document.querySelectorAll('.section-content');
        sections.forEach(function(section) {
            section.style.display = "none"; // 默认隐藏
            // 更新图标
            var header = section.previousElementSibling;
            if (header) {
                var icon = header.querySelector('.toggle-icon');
                if (icon) {
                    icon.textContent = "+";
                }
            }
        });
    });
</script>

以下为我们为信息栏制作的CSS（在主题的额外CSS中）：

  /* 角色信息栏容器样式 */
  .character-info-box {
    width: 300px; /* 电脑/平板上保持 300px 宽度 */
    float: right; /* 浮动到右侧 */
    margin: 10px 0 10px 15px; /* 外边距 */
    border: 2px solid #87CEEB; /* 天蓝色边框 */
    border-radius: 5px; /* 圆角 */
    background-color: #f9f9f9; /* 背景色 */
    font-family: Arial, sans-serif;
    font-size: 14px;
    box-sizing: border-box; /* 包含padding和border */
    overflow: hidden; /* 防止内容溢出 */
    /* flex-shrink: 0; float布局下不需要 */
  }

  /* 图片容器 */
  .character-image-container {
    width: 100%;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e0f7fa;
    border-bottom: 1px solid #87CEEB;
  }

  /* 默认图片文字 */
  .default-image-text {
    color: #7f7f7f;
    font-style: italic;
    text-align: center;
    padding: 20px;
  }

  /* 角色图片样式 */
  .character-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* 表格样式 */
  .info-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  /* 表头样式 */
  .info-table th {
    background-color: #87CEEB;
    color: white;
    padding: 10px 5px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #d0e8f9;
    font-size: 16px;
  }

  /* 表格数据单元格样式 */
  .info-table td {
    padding: 8px 10px;
    border: 1px solid #ddd;
    vertical-align: top;
    word-wrap: break-word;
  }

  /* --- 关键优化 1: 调整列宽 --- */
  /* 表格第一列为标签 (压缩宽度) */
  .label-cell {
    /* width: 30%; */ /* --- 移除原来的 30% 宽度 --- */
    width: 90px; /* --- 设置一个更紧凑的固定宽度 --- */
    font-weight: bold;
    background-color: #e1f5fe;
    font-size: 13px;
  }

  /* 表格第二列为内容 (占据剩余空间) */
  .content-cell {
    /* width: 70%; */ /* --- 移除原来的 70% 宽度 --- */
    width: calc(100% - 90px); /* --- 剩余空间给内容列 --- */
    font-size: 13px;
  }

  /* --- 关键优化 2: 响应式设计 (适配手机) --- */
  @media screen and (max-width: 768px) {
    .character-info-box {
      width: 100%; /* 手机上宽度变为 100% */
      float: none; /* 取消浮动，使其换行显示 */
      max-width: none; /* 覆盖可能的 max-width 限制 */
      margin: 10px 0; /* 调整手机上的外边距 */
    }
  }

  /* --- 折叠功能相关样式 (保持不变) --- */
  .section-header {
    cursor: pointer;
    user-select: none;
  }

  .section-label {
    background-color: #b3e5fc;
    text-align: left;
    font-weight: bold;
    padding: 8px 10px;
    position: relative;
  }

  .toggle-icon {
    position: absolute;
    right: 10px;
    transition: transform 0.2s ease;
  }

  .section-content {
    /* display 属性由 JavaScript 控制 */
  }

  .section-header:hover .section-label {
    background-color: #9fd7f9;
  }

而现在我们的信息栏是通过插件实现的，这会在相关的文章介绍里说明。