基于Bootstrap搭建小生意网站：求简易博客页面自动生成方案

嘿，作为刚入门时也给家里人搭过小生意网站的开发者，太懂你这种想给普通操作水平的家人弄个简单博客后台的需求了！结合你正在用Bootstrap的情况，给你几个接地气、好上手的方案：

这个方案完全不用写后端代码，家人只要会用Excel就能搞定内容输入，对你这个新手来说也最省心：

• 第一步：让家人在Google Sheets里建一个表格，列设置成「标题」「内容」「发布日期」「分类」，像填普通表格一样输入博客内容就行。
• 第二步：把表格设置成「公开可查看」（注意不要设成可编辑！），然后获取表格的API数据源链接（在Google Sheets的「文件-发布到网络」里选「CSV」或者「JSON」格式，复制链接）。
• 第三步：在你的Bootstrap页面里写一段简单的JavaScript，用fetch() API读取这个链接的数据，然后动态生成博客列表和详情页：

  // 假设你的Google Sheets JSON链接是这个
  const sheetUrl = "你的表格JSON链接";
  
  fetch(sheetUrl)
    .then(response => response.json())
    .then(data => {
      const blogList = document.getElementById('blog-list');
      // 遍历表格数据，生成Bootstrap卡片
      data.forEach(post => {
        const card = document.createElement('div');
        card.className = 'card mb-3';
        card.innerHTML = `
          <div class="card-body">
            <h5 class="card-title">${post.title}</h5>
            <p class="card-text">${post.content.substring(0, 100)}...</p>
            <p class="card-text"><small class="text-muted">${post.date}</small></p>
            <button class="btn btn-primary" onclick="showPost('${post.title}', '${post.content}')">查看全文</button>
          </div>
        `;
        blogList.appendChild(card);
      });
    });
  
  // 显示博客详情的函数
  function showPost(title, content) {
    const modal = document.getElementById('blog-modal');
    document.getElementById('modal-title').textContent = title;
    document.getElementById('modal-content').innerHTML = content;
    // 用Bootstrap的模态框展示详情
    const bootstrapModal = new bootstrap.Modal(modal);
    bootstrapModal.show();
  }
  

• 第四步：在你的HTML里准备好Bootstrap的模态框和博客列表容器，家人每次更新表格内容，网站上的博客就会自动同步，完全不用你手动操作！

如果你想让博客内容存在自己的服务器上，不想依赖第三方工具，可以试试这个方案，代码量也不大：

• 第一步：用Bootstrap做一个后台输入页面，加个简单的富文本编辑器（比如TinyMCE，直接引入CDN就行，不用安装），让家人可以像用Word一样排版内容：

  <div class="container mt-5">
    <h2>发布新博客</h2>
    <form method="POST" action="save-post.php">
      <div class="form-group mb-3">
        <label for="title">博客标题</label>
        <input type="text" class="form-control" id="title" name="title" required>
      </div>
      <div class="form-group mb-3">
        <label for="content">博客内容</label>
        <textarea id="content" name="content" class="form-control" rows="10"></textarea>
      </div>
      <div class="form-group mb-3">
        <label for="password">验证密码</label>
        <input type="password" class="form-control" id="password" name="password" required>
      </div>
      <button type="submit" class="btn btn-success">发布博客</button>
    </form>
  </div>
  
  <!-- 引入TinyMCE富文本编辑器 -->
  <script src="https://cdn.tiny.cloud/1/你的免费API密钥/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    tinymce.init({
      selector: '#content',
      plugins: 'advlist autolink lists link image charmap preview anchor',
      toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
      height: 400
    });
  </script>
  

• 第二步：写一个简单的PHP脚本save-post.php，用来接收表单提交的内容，生成对应的博客页面：

  <?php
  // 简单的密码验证，防止外人提交
  if ($_POST['password'] != '你设定的专属密码') {
    die('权限不足，请输入正确密码');
  }
  
  $title = $_POST['title'];
  $content = $_POST['content'];
  $date = date('Y-m-d');
  // 用日期+标题做文件名，避免重复
  $filename = date('Ymd') . '-' . str_replace(' ', '-', strtolower($title)) . '.html';
  // 确保posts目录存在
  if (!is_dir('posts')) {
    mkdir('posts', 0755);
  }
  
  // 博客详情页的Bootstrap模板
  $template = <<<EOT
  <!DOCTYPE html>
  <html>
  <head>
    <title>$title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container mt-5">
      <h1>$title</h1>
      <p class="text-muted">$date</p>
      <div class="mt-4">$content</div>
      <a href="../blog-list.php" class="btn btn-primary mt-3">返回博客列表</a>
    </div>
  </body>
  </html>
  EOT;
  
  // 保存生成的博客页面
  file_put_contents('posts/' . $filename, $template);
  
  // 跳转到博客列表页
  header('Location: blog-list.php');
  ?>
  

• 第三步：写一个blog-list.php页面，用来展示所有博客的列表：

  <?php
  $postsDir = 'posts/';
  $posts = scandir($postsDir);
  // 过滤掉.和..，并按修改时间倒序排列
  $posts = array_filter($posts, function($file) {
    return $file != '.' && $file != '..';
  });
  usort($posts, function($a, $b) use ($postsDir) {
    return filemtime($postsDir . $b) - filemtime($postsDir . $a);
  });
  ?>
  <div class="container mt-5">
    <h1>博客列表</h1>
    <div class="row">
      <?php foreach($posts as $post): ?>
        <?php
        // 从文件名提取标题
        $titlePart = explode('-', pathinfo($post, PATHINFO_FILENAME));
        array_shift($titlePart); // 去掉日期前缀
        $title = ucwords(str_replace('-', ' ', implode('-', $titlePart)));
        // 获取文件创建时间
        $date = date('Y-m-d', filectime($postsDir . $post));
        ?>
        <div class="col-md-4 mb-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title"><?php echo $title; ?></h5>
              <p class="card-text text-muted"><?php echo $date; ?></p>
              <a href="<?php echo $postsDir . $post; ?>" class="btn btn-primary">查看全文</a>
            </div>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  </div>
  

• 不管用哪个方案，都给后台加个简单的密码验证，比如方案2里的密码字段，或者方案1里把表格的编辑权限仅开放给家人账号。
• 用Bootstrap的响应式组件，确保博客在手机和电脑上都能正常显示——小生意的客户很多都是用手机浏览的。

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