如何基于模板为请愿网站生成唯一URL与详情页面？

嘿，别慌！你要实现的这个功能其实有个专业叫法——动态路由（Dynamic Routing）搭配服务器端模板渲染（Server-Side Template Rendering），我给你拆解成新手能一步步跟着走的步骤，绝对好懂～

你看到change.org里的/p/count-every-vote-in-pennsylvania这种URL，其中的count-every-vote-in-pennsylvania叫做Slug——就是把请愿标题转成小写、空格换成连字符、去掉特殊字符的友好字符串，用来做每个请愿的唯一标识（当然也可以用数据库里的ID，但Slug更直观，对用户和搜索引擎都友好）。

整个流程的逻辑是：

用户点击列表页的请愿标题 → 跳转到带Slug（或ID）的动态URL → 服务器根据这个Slug去数据库里查对应请愿的详情 → 把数据填充到预先写好的HTML模板里 → 返回给用户完整的请愿详情页

1. 给请愿数据加唯一标识（Slug/ID） #

如果你的数据库还没这个字段，赶紧加上：

• 要是用Slug：给数据库的请愿表加一个slug字段，类型设为VARCHAR，并且设置成唯一键（保证每个请愿的Slug不重复）。存请愿的时候，自动把标题转换成Slug：比如把“Count Every Vote in Pennsylvania”转成count-every-vote-in-pennsylvania（可以用对应编程语言的字符串处理工具来做，比如Python的slugify库，Node.js的slugify包）。
• 要是用ID：直接用数据库自增的ID就行，比如123，URL就变成/p/123，但不如Slug友好，新手可以先从ID入手，再升级成Slug。

2. 配置动态路由规则 #

不管你用什么后端语言，都能轻松配置动态路由，举几个新手常用的例子：

• Python Flask：

  @app.route('/p/<petition_slug>')
  def show_petition(petition_slug):
      # 用slug去数据库查询对应的请愿数据
      petition = db.query("SELECT * FROM petitions WHERE slug = %s", (petition_slug,))
      if not petition:
          return "请愿不存在！", 404
      # 把数据传到模板里渲染
      return render_template('petition_detail.html', petition=petition)
  

• Node.js Express：

  app.get('/p/:petitionSlug', (req, res) => {
      const slug = req.params.petitionSlug;
      // 用slug查数据库
      db.query('SELECT * FROM petitions WHERE slug = ?', [slug], (err, results) => {
          if (err || results.length === 0) {
              return res.status(404).send('请愿不存在！');
          }
          const petition = results[0];
          // 把数据传到模板（比如EJS、Pug）渲染
          res.render('petition_detail', { petition });
      });
  });
  

• PHP：
  先通过Apache的.htaccess或者Nginx配置URL重写，把/p/xxx指向petition_detail.php?slug=xxx，然后在petition_detail.php里：

  <?php
  $slug = $_GET['slug'];
  // 连接数据库查询
  $stmt = $pdo->prepare("SELECT * FROM petitions WHERE slug = ?");
  $stmt->execute([$slug]);
  $petition = $stmt->fetch();
  if (!$petition) {
      http_response_code(404);
      echo "请愿不存在！";
      exit;
  }
  ?>
  <!-- 下面是HTML模板，直接用PHP变量填充 -->
  <h1><?php echo $petition['title']; ?></h1>
  <p><?php echo $petition['description']; ?></p>
  

3. 填充模板生成详情页 #

写一个通用的请愿详情模板（比如petition_detail.html），用占位符代替动态内容，比如：

<!DOCTYPE html>
<html>
<head>
    <title>{{ petition.title }} | 我的请愿网站</title>
</head>
<body>
    <h1>{{ petition.title }}</h1>
    <div class="description">{{ petition.description }}</div>
    <div class="signature-count">已有 {{ petition.signature_count }} 人签名</div>
    <!-- 其他内容比如签名按钮、分享按钮 -->
</body>
</html>

服务器会把查询到的petition数据替换掉这些占位符，生成独一无二的详情页。

4. 列表页生成跳转链接 #

在你的请愿列表页里，给每个标题加上指向对应动态URL的链接：

<!-- 假设你用模板循环渲染列表 -->
{% for petition in petitions %}
    <tr>
        <td><a href="/p/{{ petition.slug }}">{{ petition.title }}</a></td>
        <!-- 其他列比如签名数、创建时间 -->
    </tr>
{% endfor %}

这样用户点击标题就会跳转到专属的详情页，这个URL就是可以直接分享的唯一链接啦！

• 优先用Slug：虽然ID更简单，但Slug能让URL更直观，比如/p/count-every-vote-in-pennsylvania比/p/123更容易让用户理解内容，对SEO也有帮助。
• 处理404：一定要加判断，如果用户输入的Slug/ID不存在，返回404页面，别让用户看到空白或者报错信息。
• 分享功能：可以在详情页加个复制URL的按钮，用JavaScript就能实现，方便用户一键分享。
• 暂时忽略追踪参数：change.org URL里的?source_location=petitions_browse是用来追踪用户来源的，新手可以先把核心功能做好，之后再考虑添加这类统计功能。

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