非JS非服务端：如何通过变量为href属性赋值？

方法1：使用<base>标签（适合根路径统一场景） #

• 核心作用：为页面所有相对URL设置基准路径，减少重复书写完整域名的工作量
• 实操步骤：在页面<head>中添加如下代码，替换为你的站点根URL：

  <base href="https://your-domain.com/">
  

  之后所有导航链接只需写相对路径，比如<a href="about.html">关于我们</a>，浏览器会自动拼接基准路径
• 局限性：仅能统一前缀，无法单独定义不同页面的独立链接变量

方法2：使用HTML导入（<link rel="import">）—— 最推荐的集中管理方案 #

• 核心作用：将导航、页脚链接的代码单独存放在一个HTML文件中，所有页面导入该文件，实现一处修改全站同步
• 实操步骤：
  1. 创建独立的shared-links.html文件，写入所有重复的导航/页脚代码：

     <!-- 桌面端导航 -->
     <nav class="desktop-nav">
       <a href="home.html">首页</a>
       <a href="services.html">服务</a>
       <a href="contact.html">联系我们</a>
     </nav>
     <!-- 移动端导航 -->
     <nav class="mobile-nav">
       <a href="home.html">首页</a>
       <a href="services.html">服务</a>
       <a href="contact.html">联系我们</a>
     </nav>
     <!-- 页脚站点地图 -->
     <footer class="sitemap">
       <a href="home.html">首页</a>
       <a href="services.html">服务</a>
       <a href="contact.html">联系我们</a>
     </footer>
     

  2. 在每个页面的<body>开头导入该文件：

     <link rel="import" href="shared-links.html">
     

  3. 用CSS控制不同导航的显示隐藏，比如：

     .mobile-nav { display: none; }
     @media (max-width: 768px) {
       .desktop-nav { display: none; }
       .mobile-nav { display: block; }
     }
     

• 注意事项：现代主流浏览器均支持该特性，若遇到老旧浏览器兼容问题，可提前测试

方法3：CSS伪元素模拟（仅应急，不推荐） #

• 说明：CSS无法直接修改HTML的href属性，此方法仅能模拟链接文本的统一，实际跳转仍依赖真实链接
• 实操步骤：
  1. 在:root中定义文本变量：

     :root {
       --link-home-text: "首页";
       --link-services-text: "服务";
     }
     

  2. 在HTML中保留真实href，用伪元素显示文本：

     <a href="home.html" class="link-home"></a>
     

     .link-home::after { content: var(--link-home-text); }
     

• 局限性：仅能统一文本，无法统一href，本质没解决链接复用的核心问题

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