基于HTML模板，通过Strapi CMS生成SEO友好的博客详情页

要实现www.example.com/blog/[slug]的SEO友好URL，需要两步核心配置：服务器路由重写（把所有/blog/xxx请求指向单篇文章模板）和前端解析URL获取slug并渲染对应内容。

1. 服务器/托管平台路由配置 #

静态HTML站点需要让服务器把所有/blog/*的请求转发到同一个文章模板文件（比如blog-single.html），确保无论访问哪个slug，都加载同一个模板，再由JS动态获取内容。

Nginx配置示例 #

在站点配置中添加：

location /blog/ {
    try_files $uri $uri/ /blog-single.html;
}

Netlify/Vercel等静态托管平台 #

• Netlify：在项目根目录创建_redirects文件，内容：

  /blog/*    /blog-single.html   200
  

• Vercel：在vercel.json中添加：

  {
    "rewrites": [
      { "source": "/blog/:slug", "destination": "/blog-single.html" }
    ]
  }
  

2. 单篇文章模板（blog-single.html） #

创建通用模板，通过JS解析当前URL的slug，请求Strapi获取对应文章并渲染：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文章详情</title>
    <meta name="description" id="article-meta">
</head>
<body>
    <div id="article-container">
        <p>加载中...</p>
    </div>

    <script>
        // 解析URL中的slug
        function getSlugFromUrl() {
            const pathParts = window.location.pathname.split('/');
            return pathParts[pathParts.length - 1];
        }

        // 请求Strapi获取对应文章
        async function fetchArticleBySlug(slug) {
            try {
                // 替换为你的Strapi API地址，populate=*用于获取所有关联字段
                const response = await fetch(`https://your-strapi-api.com/api/blogs?filters[slug][$eq]=${slug}&populate=*`);
                const data = await response.json();
                
                if (data.data.length === 0) throw new Error('文章不存在');
                return data.data[0].attributes;
            } catch (error) {
                console.error('获取文章失败:', error);
                return null;
            }
        }

        // 渲染文章到页面
        async function renderArticle() {
            const slug = getSlugFromUrl();
            if (!slug) {
                document.getElementById('article-container').innerHTML = '<p>无效的文章地址</p>';
                return;
            }

            const article = await fetchArticleBySlug(slug);
            if (!article) {
                document.getElementById('article-container').innerHTML = '<p>未找到该文章</p>';
                return;
            }

            // 更新页面标题和meta信息（利于SEO）
            document.title = article.title;
            document.getElementById('article-meta').content = article.description;

            // 渲染文章内容
            const container = document.getElementById('article-container');
            container.innerHTML = `
                <h1>${article.title}</h1>
                <p class="article-date">${new Date(article.publishedAt).toLocaleDateString()}</p>
                <div class="article-content">${article.content}</div>
            `;
        }

        // 页面加载时执行渲染
        window.addEventListener('DOMContentLoaded', renderArticle);
    </script>
</body>
</html>

3. 博客列表页（blog.html）链接修改 #

把原来带参数的链接改成SEO友好的格式：

<!-- 原链接 -->
<!-- <a href="article.html?id=${article.slug}">${article.title}</a> -->

<!-- 修改后 -->
<a href="/blog/${article.slug}">${article.title}</a>

关键注意事项 #

• 确保Strapi的Blog内容类型中slug字段设置为唯一值，且API权限已配置为公开（或对应访问权限）。
• 如果Strapi中使用富文本编辑器，确保content字段返回HTML格式，以便前端直接渲染。
• 可扩展添加404页面跳转逻辑，提升用户体验。

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