如何用纯HTML/CSS无框架实现侧边菜单且避免代码重复？

嘿，这个需求我太熟悉了——纯静态HTML/CSS做带Encarta风格侧边菜单的百科，还要避免重复写菜单，同时拒绝frames破坏URL和书签功能，确实有几个落地的方案，我给你逐个说清楚：

方案1：服务器端包含（SSI）——最省心的静态方案 #

这应该是最贴合你需求的办法，不需要JS、PHP，只需要你的服务器支持SSI（Apache、Nginx这些主流服务器默认都能开启，配置也简单）。

操作步骤： #

1. 把侧边菜单单独抽成一个纯HTML文件，比如叫menu.html，里面只放菜单的结构（比如<ul>列表），样式可以单独写在CSS文件里引入就行。
2. 在每篇文章的HTML页面里，需要放菜单的位置插入这条注释：

   <!--#include virtual="/menu.html" -->
   

3. 给服务器做个小配置：
   • 如果你用Apache：确保mod_include模块是启用的，要么把页面后缀改成.shtml，要么在.htaccess里加两行让.html文件也能解析SSI：

     AddType text/html .html
     AddOutputFilter INCLUDES .html
     

   • 如果你用Nginx：在站点配置里加ssi on;就行，记得重启服务。

这样服务器会自动把menu.html的内容插入到每个页面的对应位置，你只需要维护一份菜单，每个文章页面都是独立URL，书签功能完全正常，完美符合你的要求。

方案2：静态站点生成器——纯静态输出，无需服务器配置 #

如果你的服务器不支持SSI，或者你想本地生成好所有页面再上传，用静态站点生成器（SSG）就很合适，比如Jekyll、Eleventy、Hugo这些，操作也不复杂。

操作步骤： #

1. 先写一个菜单的模板片段（比如Jekyll里的_includes/menu.html），把菜单结构放在这里。
2. 做一个文章模板，在模板里引入这个菜单片段，比如用{% include menu.html %}（不同生成器语法略有不同，但逻辑一样）。
3. 把每篇文章的内容写成Markdown或者简单的HTML片段，然后用生成器一键生成所有带菜单的完整HTML页面。
4. 把生成好的所有HTML、CSS文件上传到服务器就行，服务器不需要任何特殊配置，因为最终都是纯静态文件。

这个方案的好处是完全脱离服务器依赖，开发时只需要维护一份菜单，生成所有页面，适合静态托管的场景（比如GitHub Pages）。

方案3：单页面+CSS :target伪类——零依赖但适合内容少的情况 #

如果你的100多篇内容都比较短，不想碰服务器配置也不想用工具，可以试试这个纯HTML/CSS的单页面方案，用:target伪类控制文章显示。

示例代码： #

<!DOCTYPE html>
<html>
<head>
    <style>
        .encyclopedia-container {
            display: flex;
            gap: 20px;
        }
        .sidebar-menu {
            width: 220px;
            border-right: 1px solid #eee;
            padding: 15px;
            background: #f8f8f8;
        }
        .article-area {
            flex: 1;
            padding: 15px;
        }
        .article {
            display: none;
        }
        /* 点击锚点后显示对应文章 */
        .article:target {
            display: block;
        }
        /* 默认显示第一篇文章 */
        .article:first-of-type {
            display: block;
        }
    </style>
</head>
<body>
    <div class="encyclopedia-container">
        <div class="sidebar-menu">
            <ul>
                <li><a href="#article-1">条目1</a></li>
                <li><a href="#article-2">条目2</a></li>
                <!-- 剩下的90+条目... -->
            </ul>
        </div>
        <div class="article-area">
            <div id="article-1" class="article">
                <h2>条目1标题</h2>
                <p>条目1的内容...</p>
            </div>
            <div id="article-2" class="article">
                <h2>条目2标题</h2>
                <p>条目2的内容...</p>
            </div>
            <!-- 剩下的90+文章内容... -->
        </div>
    </div>
</body>
</html>

这个方案完全不需要任何外部依赖，每个条目对应your-page.html#article-X的URL，书签功能正常，但缺点是所有内容都在一个页面里，100多篇的话文件会很大，加载速度可能受影响，适合内容较短的场景。

方案对比选哪个？ #

优先推荐方案1（SSI），如果服务器不支持就选方案2，内容少的话可以试试方案3。

内容的提问来源于stack exchange，提问作者user7023624