如何用原生Vanilla JS实现自动读取文件生成博客帖子组件？

是否可行？ #

可行，但需要服务器支持目录列表功能——前端JavaScript无法直接访问服务器文件系统，必须依赖服务器返回posts目录下的文件列表。

实现步骤 #

1. 开启服务器目录列表 #

不同服务器的配置方式不同：

• Python内置http.server：默认开启，直接运行python -m http.server即可。
• Apache：在站点配置或.htaccess中添加Options +Indexes。
• Nginx：在server/location块中添加autoindex on;。

2. 修改自定义Posts组件 #

通过fetch请求目录列表页面，解析出所有TXT文件，再逐个加载内容并渲染：

class Posts extends HTMLElement {
  constructor() {
    super();
  }

  async connectedCallback() {
    this.innerHTML = ''; // 清空初始内容

    try {
      // 请求posts目录的列表页面
      const dirRes = await fetch('posts/');
      if (!dirRes.ok) throw new Error('无法获取帖子目录');

      const dirHtml = await dirRes.text();
      // 解析HTML提取所有TXT文件链接（适配Python http.server的目录结构）
      const parser = new DOMParser();
      const doc = parser.parseFromString(dirHtml, 'text/html');
      const txtLinks = doc.querySelectorAll('a[href$=".txt"]');

      // 遍历每个TXT文件
      for (const link of txtLinks) {
        const postPath = `posts/${link.getAttribute('href')}`;
        // 获取帖子内容
        const postRes = await fetch(postPath);
        if (!postRes.ok) continue;

        const rawContent = await postRes.text();
        // 处理帖子标题（用文件名去掉后缀作为标题）
        const postTitle = link.textContent.replace('.txt', '');

        // 渲染帖子卡片
        this.innerHTML += `
          <div class="card">
            <h2>${postTitle}</h2>
            <h5>发布时间: ${new Date().toLocaleDateString()}</h5>
            <pre>${rawContent}</pre>
          </div>
        `;
      }
    } catch (err) {
      this.innerHTML = `<p>加载帖子失败：${err.message}</p>`;
    }
  }
}

customElements.define('posts-component', Posts);

3. 适配不同服务器的目录结构 #

不同服务器生成的目录页面HTML结构可能不同，需要调整querySelector：

• Apache目录列表：可能需要用td a[href$=".txt"]
• 其他服务器：查看目录页面的HTML源码，找到包含TXT文件链接的选择器。

4. 优化帖子格式（可选） #

如果想让帖子更规范，可以给TXT文件添加元数据，比如：

我的第一篇复古博客
2024-05-20
这是我在Geocities风格服务器上的第一篇帖子，用纯JS实现自动加载，太有意思啦！

然后在代码中解析这些元数据，替换默认的标题和日期：

// 替换原有的内容处理部分
const [title, dateStr, ...contentLines] = rawContent.split('\n');
const postTitle = title || link.textContent.replace('.txt', '');
const postDate = dateStr ? new Date(dateStr).toLocaleDateString() : new Date().toLocaleDateString();
const postContent = contentLines.join('\n');

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