编程导航会员会员
登录/注册

【Node】data.json 版 仿照编程导航 自娱自乐 只有发布功能

地址：http://123.60.153.252:8101 （1Panel 部署）

介绍：AI 生成代码，node data.json 版 仿照编程导航 自娱自乐 只有发布功能

技术栈：node、ejs、data.json

工具： 页面：https://mastergo.com 截图生成页面，样式为 tailwindcss（强烈推荐这个工具，完全一比一复制页面） AI：deepseek 2.5 （官网太卡了，先用这个）

现在很喜欢用 node 搞些玩的小项目，因为只占服务器不到 50M 内存，Java 的话一个要占1G

灵感： 模仿编程导航的网站 - 编程导航 - 程序员编程学习交流社区

今天摸鱼搞的，后面再慢慢加些新功能

PixPin_2025-02-08_17-44-04.png

项目结构：

PixPin_2025-02-08_17-47-41.png

代码：

app.js：

▼
js
复制代码
const express = require("express");
const bodyParser = require("body-parser");
const fs = require("fs");
const app = express();
const port = 8101;

// 设置模板引擎为 EJS
app.set("view engine", "ejs");
app.set("views", "./views");

// 静态文件服务
app.use(express.static("public"));

// 解析 POST 请求体
app.use(bodyParser.urlencoded({ extended: true }));

// 模拟数据库，存储发布的内容
let posts = [];

// 读取 data.json 文件中的数据
const loadPosts = () => {
  try {
    const data = fs.readFileSync("data.json", "utf8");
    posts = JSON.parse(data);
  } catch (err) {
    posts = [];
  }
};

// 保存数据到 data.json 文件
const savePosts = () => {
  fs.writeFileSync("data.json", JSON.stringify(posts), "utf8");
};

// 标签数据
const tags = ["日常", "Java", "Python", "后端", "前端", "个人介绍"];

// 首页路由
app.get("/", (req, res) => {
  res.render("index", { posts: posts, tags: tags, activeTag: null }); // 默认 activeTag 为 null
});

// 交流路由，展示没有 title 的内容
app.get("/exchange", (req, res) => {
  const exchangePosts = posts.filter((post) => !post.title);
  res.render("index", { posts: exchangePosts, tags: tags, activeTag: null });
});

// 文章路由，展示有 title 的内容
app.get("/articles", (req, res) => {
  const articlePosts = posts.filter((post) => post.title);
  res.render("index", { posts: articlePosts, tags: tags, activeTag: null });
});

// 发布内容路由
app.post("/post", (req, res) => {
  const content = req.body.content;
  const selectedTags = req.body.tags || []; // 获取选择的标签
  const title = req.body.title; // 获取文章标题

  if (content) {
    const timestamp = Date.now().toString();
    // 生成 3 位随机数字
    const randomPart = Math.floor(Math.random() * 900) + 100;
    const id = `${timestamp}${randomPart}`; // 组合时间戳和随机数
    posts.unshift({
      id: id, // 添加 id
      username: "溜达丶99",
      avatar:
        "https://ygr99.oss-cn-shenzhen.aliyuncs.com/utools/%E5%A4%B4%E5%83%8F.jpg",
      content: content,
      tags: selectedTags, // 存储标签
      title: title, // 存储文章标题
      time: new Date().toLocaleString(),
    });
    savePosts(); // 保存数据到文件
  }
  res.redirect("/");
});

// 标签过滤路由
app.get("/tag/:tag", (req, res) => {
  const tag = req.params.tag;
  const filteredPosts = posts.filter((post) => post.tags.includes(tag));
  res.render("index", { posts: filteredPosts, tags: tags, activeTag: tag }); // 传递 activeTag
});

// 获取帖子详情路由
app.get("/post/:id", (req, res) => {
  const postId = req.params.id;
  const post = posts.find((p) => p.id === postId); // 假设每个帖子都有一个唯一的 id
  if (post) {
    res.render("detail", { post: post });
  } else {
    res.status(404).send("帖子不存在");
  }
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
  loadPosts(); // 启动时加载数据
});

index.ejs：

▼
ejs
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>阿柑笔记 - 技术分享社区</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#1677ff",
              secondary: "#4096ff",
            },
            borderRadius: {
              none: "0px",
              sm: "2px",
              DEFAULT: "4px",
              md: "8px",
              lg: "12px",
              xl: "16px",
              "2xl": "20px",
              "3xl": "24px",
              full: "9999px",
              button: "4px",
            },
          },
        },
      };
    </script>
    <style>
      body {
        min-height: 1024px;
      }
      .logo {
        font-family: "Pacifico", serif;
      }
      input:focus {
        outline: none;
      }
      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      .tag-panel {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 10;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 8px;
        width: 200px;
      }
      .tag-panel.active {
        display: block;
      }
    </style>
  </head>
  <body class="bg-gray-50">
    <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
      <div
        class="max-w-[1440px] mx-auto px-6 h-[60px] flex items-center justify-between"
      >
        <div class="flex items-center gap-12">
          <a href="/" class="flex items-center gap-2">
            <img
              src="https://ai-public.mastergo.com/ai/img_res/c9f0c303e3a496eb261ff5d39583b5eb.jpg"
              alt="Logo"
              class="w-8 h-8"
            />
            <span class="logo text-xl text-gray-800">阿柑笔记</span>
          </a>
          <nav class="flex items-center gap-8">
            <a href="/" class="text-primary font-medium">首页</a>
            <a href="/exchange" class="text-gray-600 hover:text-primary"
              >交流</a
            >
            <a href="/articles" class="text-gray-600 hover:text-primary"
              >文章</a
            >
            <a href="/questions" class="text-gray-600 hover:text-primary"
              >问答</a
            >
          </nav>
        </div>
        <div class="flex items-center gap-4">
          <div class="relative">
            <input
              type="text"
              placeholder="搜索"
              class="w-[240px] h-[36px] px-4 pl-10 bg-gray-100 rounded-button text-sm"
            />
            <i
              class="fas fa-search absolute left-3 top-[10px] text-gray-400 text-sm"
            ></i>
          </div>
          <button
            class="h-[36px] px-4 bg-primary text-white rounded-button whitespace-nowrap hover:bg-primary/90"
          >
            发布
          </button>
          <div class="relative">
            <button class="relative">
              <i class="far fa-bell text-gray-600 text-xl"></i>
              <span
                class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center"
                >2</span
              >
            </button>
          </div>
          <a
            href="/profile"
            class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center"
          >
            <i class="fas fa-user text-gray-500"></i>
          </a>
        </div>
      </div>
    </header>
    <main class="max-w-[1440px] mx-auto px-6 pt-[84px] flex gap-6">
      <div class="flex-1">
        <div class="bg-white rounded-lg p-4 mb-6">
          <form action="/post" method="POST">
            <div class="flex gap-4 mb-4">
              <button
                type="button"
                class="flex-1 h-[40px] bg-primary text-white rounded-button whitespace-nowrap hover:bg-primary/90"
              >
                <i class="fas fa-comment-dots mr-2"></i>随便聊
              </button>
              <button
                type="button"
                class="flex-1 h-[40px] bg-gray-100 text-gray-600 rounded-button whitespace-nowrap hover:bg-gray-200"
              >
                <i class="fas fa-pen mr-2"></i>写文章
              </button>
            </div>
            <div id="article-form" style="display: none">
              <input
                type="text"
                name="title"
                placeholder="请输入文章标题"
                class="w-full h-[40px] px-4 bg-gray-50 rounded-lg mb-4 text-sm"
              />
            </div>
            <div class="relative">
              <textarea
                name="content"
                placeholder="快来跟大家分享吧~"
                class="w-full h-[120px] p-4 bg-gray-50 rounded-lg resize-none text-sm"
              ></textarea>
              <div class="absolute right-4 bottom-4 flex items-center gap-4">
                <button
                  type="button"
                  id="tag-button"
                  class="text-gray-400 hover:text-primary"
                >
                  <i class="fas fa-hashtag text-lg"></i>
                </button>
                <button type="button" class="text-gray-400 hover:text-primary">
                  <i class="far fa-image text-lg"></i>
                </button>
                <button
                  type="submit"
                  class="px-4 h-[32px] bg-primary text-white rounded-button whitespace-nowrap hover:bg-primary/90"
                >
                  发布
                </button>
              </div>
              <!-- 标签选择面板 -->
              <div id="tag-panel" class="tag-panel">
                <% tags.forEach(tag => { %>
                <label
                  class="flex items-center gap-2 p-1 hover:bg-gray-100 cursor-pointer"
                >
                  <input
                    type="checkbox"
                    name="tags"
                    value="<%= tag %>"
                    class="tag-checkbox"
                  />
                  <span><%= tag %></span>
                </label>
                <% }) %>
              </div>
            </div>
            <!-- 已选标签展示区域 -->
            <div id="selected-tags" class="flex mt-3 space-x-2"></div>
          </form>
        </div>

        <div class="bg-white rounded-lg p-4">
          <div class="flex items-center gap-6 mb-6 pb-4 border-b overflow-x-auto">
            <a href="#" class="text-gray-600 hover:text-primary whitespace-nowrap">关注</a>
            <!-- 最新标签的特殊处理 -->
            <a
              href="/"
              class="text-gray-600 hover:text-primary whitespace-nowrap <%= activeTag === null ? 'font-medium text-primary' : '' %>"
              >最新</a
            >
            <a href="#" class="text-gray-600 hover:text-primary whitespace-nowrap">热门</a>
            <% tags.forEach(tag => { %>
              <% const isActive = activeTag === tag ? 'font-medium text-primary' : ''; %>
              <a
                href="/tag/<%= tag %>"
                class="text-gray-600 hover:text-primary whitespace-nowrap <%= isActive %>"
              ><%= tag %></a>
            <% }) %>
          </div>
        
          <!-- 内容区域 -->
          <div class="space-y-6">
            <% if (posts.length > 0) { %>
              <% posts.forEach(post => { %>
              <article class="pb-6 border-b last:border-none">
                <div class="flex items-center gap-3 mb-3">
                  <img
                    src="<%= post.avatar %>"
                    alt="Avatar"
                    class="w-10 h-10 rounded-full"
                  />
                  <div>
                    <h3 class="font-medium"><%= post.username %></h3>
                    <p class="text-sm text-gray-500"><%= post.time %></p>
                  </div>
                </div>
                <% if (post.title) { %>
                <h2 class="font-bold text-xl mb-2"><%= post.title %></h2>
                <% } %>
                <% if (post.content.length > 200) { %>
                  <p class="text-gray-600 mb-4">
                    <%= post.content.substring(0, 200) %>...
                    <a href="/post/<%= post.id %>" class="text-primary hover:underline">显示更多</a>
                  </p>
                <% } else { %>
                  <p class="text-gray-600 mb-4"><%= post.content %></p>
                <% } %>
                <!-- 展示标签 -->
                <% if (post.tags && post.tags.length > 0) { %>
                <div class="flex mt-3 space-x-2">
                  <% post.tags.forEach(tag => { %>
                  <span
                    class="px-2 py-1 bg-gray-100 text-xs text-gray-600 rounded"
                    ><%= tag %></span
                  >
                  <% }) %>
                </div>
                <% } %>
                <div class="flex items-center gap-6">
                  <button
                    class="flex items-center gap-1 text-gray-500 hover:text-primary"
                  >
                    <i class="far fa-thumbs-up"></i>
                    <span>0</span>
                  </button>
                  <button
                    class="flex items-center gap-1 text-gray-500 hover:text-primary"
                  >
                    <i class="far fa-comment"></i>
                    <span>0</span>
                  </button>
                  <button
                    class="flex items-center gap-1 text-gray-500 hover:text-primary"
                  >
                    <i class="far fa-star"></i>
                    <span>收藏</span>
                  </button>
                  <button
                    class="flex items-center gap-1 text-gray-500 hover:text-primary"
                  >
                    <i class="far fa-share-square"></i>
                    <span>分享</span>
                  </button>
                </div>
              </article>
              <% }) %>
              <!-- 当有数据时，在最后一条数据的下面加上“已经到底了”，居中显示 -->
              <div class="text-center text-gray-500 mt-4">已经到底了</div>
            <% } else { %>
              <!-- 没有数据的时候，显示“暂无数据” -->
              <div class="text-center text-gray-500 mt-4">暂无数据</div>
            <% } %>
          </div>
          
          


        </div>
        
      


        </div>
      </div>

      <aside class="w-[300px] space-y-6">
        <div class="bg-white rounded-lg p-4">
          <div class="flex items-center gap-3 mb-4">
            <img
              src="https://ai-public.mastergo.com/ai/img_res/aaef73f7b8c8438d00067702db009aa8.jpg"
              alt="Avatar"
              class="w-16 h-16 rounded-full"
            />
            <div>
              <h3 class="font-medium mb-1">未登录</h3>
              <p class="text-sm text-gray-500">这个人还没有介绍自己</p>
            </div>
          </div>
          <div class="flex items-center justify-around pb-4 border-b">
            <div class="text-center">
              <div class="font-medium">0</div>
              <div class="text-sm text-gray-500">关注</div>
            </div>
            <div class="text-center">
              <div class="font-medium">0</div>
              <div class="text-sm text-gray-500">粉丝</div>
            </div>
          </div>
          <button
            class="w-full h-[36px] mt-4 bg-primary text-white rounded-button whitespace-nowrap hover:bg-primary/90"
          >
            登录/注册
          </button>
        </div>

        <div class="bg-white rounded-lg p-4">
          <div class="flex items-center justify-between mb-4">
            <h3 class="font-medium">热门话题</h3>
            <a href="#" class="text-sm text-gray-500 hover:text-primary"
              >更多</a
            >
          </div>
          <div class="space-y-4">
            <a href="#" class="flex items-center justify-between group">
              <span class="group-hover:text-primary">日常</span>
              <span class="text-sm text-gray-500">9</span>
            </a>
            <a href="#" class="flex items-center justify-between group">
              <span class="group-hover:text-primary">Java</span>
              <span class="text-sm text-gray-500">8</span>
            </a>
            <a href="#" class="flex items-center justify-between group">
              <span class="group-hover:text-primary">Python</span>
              <span class="text-sm text-gray-500">8</span>
            </a>
            <a href="#" class="flex items-center justify-between group">
              <span class="group-hover:text-primary">后端</span>
              <span class="text-sm text-gray-500">8</span>
            </a>
            <a href="#" class="flex items-center justify-between group">
              <span class="group-hover:text-primary">前端</span>
              <span class="text-sm text-gray-500">1</span>
            </a>
          </div>
        </div>
        <div class="bg-white rounded-lg p-4">
          <div class="flex items-center justify-between mb-4">
            <h3 class="font-medium">热门文章</h3>
            <a href="#" class="text-sm text-gray-500 hover:text-primary"
              >更多</a
            >
          </div>
          <div class="space-y-4">
            <a href="#" class="block group">
              <h4 class="text-sm group-hover:text-primary line-clamp-2">
                深入理解 Java 虚拟机：JVM 调优实战指南
              </h4>
              <div class="flex items-center gap-2 mt-1">
                <span class="text-xs text-gray-500">阅读 2890</span>
                <span class="text-xs text-gray-500">评论 156</span>
              </div>
            </a>
            <a href="#" class="block group">
              <h4 class="text-sm group-hover:text-primary line-clamp-2">
                React 18 新特性解析与最佳实践
              </h4>
              <div class="flex items-center gap-2 mt-1">
                <span class="text-xs text-gray-500">阅读 2156</span>
                <span class="text-xs text-gray-500">评论 89</span>
              </div>
            </a>
            <a href="#" class="block group">
              <h4 class="text-sm group-hover:text-primary line-clamp-2">
                微服务架构设计与实现：从理论到实践
              </h4>
              <div class="flex items-center gap-2 mt-1">
                <span class="text-xs text-gray-500">阅读 1890</span>
                <span class="text-xs text-gray-500">评论 78</span>
              </div>
            </a>
          </div>
        </div>
      </aside>
    </main>

    <script>
      // 标签功能逻辑
      const tagButton = document.getElementById("tag-button");
      const tagPanel = document.getElementById("tag-panel");
      const selectedTagsContainer = document.getElementById("selected-tags");
      const tagCheckboxes = document.querySelectorAll(".tag-checkbox");

      // 显示/隐藏标签面板
      tagButton.addEventListener("click", () => {
        tagPanel.classList.toggle("active");
      });

      // 选择标签
      tagCheckboxes.forEach((checkbox) => {
        checkbox.addEventListener("change", () => {
          updateSelectedTags();
        });
      });

      // 更新已选标签
      function updateSelectedTags() {
        selectedTagsContainer.innerHTML = "";
        const selectedTags = [];
        tagCheckboxes.forEach((checkbox) => {
          if (checkbox.checked) {
            selectedTags.push(checkbox.value);
          }
        });

        selectedTags.forEach((tag) => {
          const tagElement = document.createElement("span");
          tagElement.className =
            "px-2 py-1 bg-gray-100 text-xs text-gray-600 rounded flex items-center gap-1";
          tagElement.innerHTML = `
                ${tag}
                <button onclick="removeTag('${tag}')" class="text-gray-400 hover:text-red-500">
                    <i class="fas fa-times"></i>
                </button>
            `;
          selectedTagsContainer.appendChild(tagElement);
        });
      }

      // 移除标签
      window.removeTag = function (tag) {
        const checkbox = document.querySelector(
          `.tag-checkbox[value="${tag}"]`
        );
        if (checkbox) {
          checkbox.checked = false;
          updateSelectedTags();
        }
      };

      // 切换随便聊聊和写文章
      document.querySelectorAll('button[type="button"]').forEach((button) => {
        button.addEventListener("click", () => {
          const isArticle = button.textContent.includes("写文章");
          document.getElementById("article-form").style.display = isArticle
            ? "block"
            : "none";
          document.querySelector('textarea[name="content"]').placeholder =
            isArticle ? "请输入文章内容" : "快来跟大家分享吧~";
        });
      });
    </script>
  </body>
</html>

detail.ejs：

▼
ejs
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>阿柑笔记 - 帖子详情</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      rel="stylesheet"
    />
    <!-- 引入 highlight.js 的 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
    />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#1677ff",
              secondary: "#4096ff",
            },
            borderRadius: {
              none: "0px",
              sm: "2px",
              DEFAULT: "4px",
              md: "8px",
              lg: "12px",
              xl: "16px",
              "2xl": "20px",
              "3xl": "24px",
              full: "9999px",
              button: "4px",
            },
          },
        },
      };
    </script>
    <style>
      body {
        min-height: 1024px;
      }
      .logo {
        font-family: "Pacifico", serif;
      }
      input:focus {
        outline: none;
      }
      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      /* Markdown 内容样式 */
      #markdown-content {
        color: #4b5563; /* 文字颜色 */
        line-height: 1.6;
      }

      #markdown-content h1,
      #markdown-content h2,
      #markdown-content h3,
      #markdown-content h4,
      #markdown-content h5,
      #markdown-content h6 {
        font-weight: bold;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
      }

      #markdown-content h1 {
        font-size: 2rem;
      }

      #markdown-content h2 {
        font-size: 1.75rem;
      }

      #markdown-content h3 {
        font-size: 1.5rem;
      }

      #markdown-content p {
        margin-bottom: 1rem;
      }

      #markdown-content pre {
        background-color: #f8f8f8;
        padding: 16px;
        border-radius: 4px;
        overflow-x: auto;
        margin-bottom: 1rem;
      }

      #markdown-content code {
        font-family: monospace;
        background-color: #f8f8f8;
        padding: 2px 4px;
        border-radius: 4px;
      }

      #markdown-content blockquote {
        border-left: 4px solid #ddd;
        padding-left: 1rem;
        color: #666;
        margin: 1rem 0;
      }

      #markdown-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
      }

      #markdown-content th,
      #markdown-content td {
        border: 1px solid #ddd;
        padding: 8px;
      }

      #markdown-content th {
        background-color: #f4f4f4;
      }

      #markdown-content ul,
      #markdown-content ol {
        margin-bottom: 1rem;
        padding-left: 1.5rem;
      }

      #markdown-content li {
        margin-bottom: 0.5rem;
      }
      #markdown-content a {
        color: #0066ff;
      }
    </style>
  </head>
  <body class="bg-gray-50">
    <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
      <div
        class="max-w-[1440px] mx-auto px-6 h-[60px] flex items-center justify-between"
      >
        <div class="flex items-center gap-12">
          <a href="/" class="flex items-center gap-2">
            <img
              src="https://ai-public.mastergo.com/ai/img_res/c9f0c303e3a496eb261ff5d39583b5eb.jpg"
              alt="Logo"
              class="w-8 h-8"
            />
            <span class="logo text-xl text-gray-800">阿柑笔记</span>
          </a>
          <nav class="flex items-center gap-8">
            <a href="/" class="text-primary font-medium">首页</a>
            <a href="/exchange" class="text-gray-600 hover:text-primary"
              >交流</a
            >
            <a href="/articles" class="text-gray-600 hover:text-primary"
              >文章</a
            >
            <a href="/questions" class="text-gray-600 hover:text-primary"
              >问答</a
            >
          </nav>
        </div>
        <div class="flex items-center gap-4">
          <div class="relative">
            <input
              type="text"
              placeholder="搜索"
              class="w-[240px] h-[36px] px-4 pl-10 bg-gray-100 rounded-button text-sm"
            />
            <i
              class="fas fa-search absolute left-3 top-[10px] text-gray-400 text-sm"
            ></i>
          </div>
          <button
            class="h-[36px] px-4 bg-primary text-white rounded-button whitespace-nowrap hover:bg-primary/90"
          >
            发布
          </button>
          <div class="relative">
            <button class="relative">
              <i class="far fa-bell text-gray-600 text-xl"></i>
              <span
                class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center"
                >2</span
              >
            </button>
          </div>
          <a
            href="/profile"
            class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center"
          >
            <i class="fas fa-user text-gray-500"></i>
          </a>
        </div>
      </div>
    </header>
    <main class="max-w-[1440px] mx-auto px-6 pt-[84px] flex gap-6">
      <div class="flex-1">
        <div class="bg-white rounded-lg p-4 mb-6">
          <article class="pb-6">
            <div class="flex items-center gap-3 mb-3">
              <img
                src="<%= post.avatar %>"
                alt="Avatar"
                class="w-10 h-10 rounded-full"
              />
              <div>
                <h3 class="font-medium"><%= post.username %></h3>
                <p class="text-sm text-gray-500"><%= post.time %></p>
              </div>
            </div>
            <% if (post.title) { %>
            <h2 class="font-bold text-xl mb-2"><%= post.title %></h2>
            <% } %>
            <!-- Markdown 内容容器 -->
            <div id="markdown-content"><%= post.content %></div>
            <!-- 展示标签 -->
            <% if (post.tags && post.tags.length > 0) { %>
            <div class="flex mt-3 space-x-2">
              <% post.tags.forEach(tag => { %>
              <span class="px-2 py-1 bg-gray-100 text-xs text-gray-600 rounded"
                ><%= tag %></span
              >
              <% }) %>
            </div>
            <% } %>
            <div class="flex items-center gap-6">
              <button
                class="flex items-center gap-1 text-gray-500 hover:text-primary"
              >
                <i class="far fa-thumbs-up"></i>
                <span>0</span>
              </button>
              <button
                class="flex items-center gap-1 text-gray-500 hover:text-primary"
              >
                <i class="far fa-comment"></i>
                <span>0</span>
              </button>
              <button
                class="flex items-center gap-1 text-gray-500 hover:text-primary"
              >
                <i class="far fa-star"></i>
                <span>收藏</span>
              </button>
              <button
                class="flex items-center gap-1 text-gray-500 hover:text-primary"
              >
                <i class="far fa-share-square"></i>
                <span>分享</span>
              </button>
            </div>
          </article>
        </div>
      </div>
    </main>

    <!-- 引入 marked 和 highlight.js 的 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

    <script>
      // 使用 marked.js 渲染 Markdown 内容
      const markdownContent = document.getElementById("markdown-content");
      const markdownText = markdownContent.textContent; // 获取原始的 Markdown 文本
      markdownContent.innerHTML = marked.parse(markdownText); // 渲染 Markdown 为 HTML

      // 使用 highlight.js 高亮代码块
      document.querySelectorAll("pre code").forEach((block) => {
        hljs.highlightBlock(block);
      });
    </script>
  </body>
</html>
项目
NodeJS
0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
一个人丶99
一个人丶99
等级
内容推荐
更多
AI 热点监控平台项目 VibeCoding 学习 -未完成 后续要持续更新
3
耄耋专属AI Loop全自动编码器技术笔记
4
开源我的 Vibe Coding 工作流，已有人靠它把项目做完了
7
为啥codex老是提示这个啊
2
看项目一定要跑通吗
2
作者分享
更多
【Electron】图片魔方
3
梦里的场景像被岁月浸过的老胶片，每一帧都带着温润的质感——指尖触到的藤蔓带着晨露的冰凉，远处钟楼的铜铃声震得空气发颤，甚至连擦肩而过的陌生人衣角上的暗纹，都清晰得如同刻在视网膜上。当意识从梦境的深潭里浮上来时，指尖还残留着虚空中攥住的微凉，目光扫过熟悉的天花板，却有半分恍惚悬在现实与幻梦的交界处，仿佛灵魂还在那片真实得令人心悸的风景里迟迟不肯归位。
2
99起始页：[99起始页](http://123.60.153.252:99) 上班摸鱼之作：一个拥有 40 多个组件的浏览器标签页，而且 99% 的代码都是 AI 帮我实现的！【从 4 月 6 日实现第一个组件，到现在 5 月 29 日，平均一天一个组件，中间有 1 个星期比较消极没咋搞】从随机哔哩哔哩到观音灵签，每个组件都是工作间隙的小小成就。 虽然只是基于前端三件套的简单实现，但借助 Cursor 和 AI 的强大能力，我只需提出想法，代码就自动生成了。这种高效协作让我能在不引人注意的情况下，悄悄构建自己的数字乐园。 当我看到这些组件在页面上流畅运行时，那种成就感比完成工作任务还要爽！这大概是 AI 时代最完美的摸鱼方式了。 #AI 编程 #上班摸鱼 #前端开发 #打工人的小确幸
4
反常规工具类型设计文档 ——5 大「反向生活助手」创意
3
程序员自救指南：从「想做很多事」到「开始第一件事」
8
下载 APP