如何将Contentful+Angular5博客URL从ID改为标题/URL别名？

当然碰到过这种需求！把URL从一堆看不懂的ID改成友好的slug，不仅美观还利于SEO，我来一步步帮你搞定：

步骤1：更新路由配置 #

首先把路由里的:id参数改成更贴合的:slug，让路由语义更清晰：

{path: 'blog/:slug', component: BlogDetailsPageComponent}

步骤2：修改跳转逻辑，传递Slug而非ID #

原来的goToBlogDetailsPage是传博客ID，现在改成传你在Contentful里新增的slug字段。假设你的博客数据对象里，slug字段存在fields.urlSlug下（记得换成你自己实际的字段标识符，Contentful里字段的API ID是自定义的）：

goToBlogDetailsPage(blogSlug) {
  this.router.navigate(['/blog', blogSlug]);
}

同时要更新模板里的点击事件，把原来传blog.sys.id改成传slug：

<!-- 原来的写法 -->
<!-- <a (click)="goToBlogDetailsPage(blog.sys.id)">查看博客</a> -->

<!-- 修改后的写法 -->
<a (click)="goToBlogDetailsPage(blog.fields.urlSlug)">查看博客</a>

步骤3：修改Contentful查询方法，通过Slug获取单篇博客 #

原来的getOneBlog是用sys.id查询，现在改成用slug字段来匹配。同样要注意替换成你实际的slug字段API ID：

getOneBlogBySlug(slug): Promise<Entry<any>>{
  // 这里的fields.urlSlug要换成你在Contentful里设置的slug字段的API ID
  return this.client.getEntries(Object.assign({ content_type: 'blog' }, {'fields.urlSlug': slug}))
    .then(res => res.items[0]);
}

步骤4：在详情组件中通过Slug参数获取博客数据 #

在BlogDetailsPageComponent里，通过路由参数拿到slug，然后调用上面的新方法获取博客内容：

import { ActivatedRoute } from '@angular/router';
// 导入你的Contentful服务

@Component({
  // ... 组件配置
})
export class BlogDetailsPageComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private contentfulService: YourContentfulService // 换成你的服务类名
  ) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      const blogSlug = params.get('slug');
      this.contentfulService.getOneBlogBySlug(blogSlug)
        .then(blog => {
          // 这里处理拿到的博客数据，比如赋值给组件变量用于渲染
          console.log('获取到的博客:', blog);
        })
        .catch(err => {
          // 处理查询失败的情况，比如slug不存在时跳转到404
          console.error('查询博客失败:', err);
        });
    });
  }
}

重要提醒 #

• 一定要确保Contentful里的slug字段是唯一的！可以在Contentful的内容模型设置里给slug字段开启唯一性验证，避免多个博客使用相同slug导致查询出错。
• 如果之前的代码里还有其他地方调用了旧的getOneBlog方法，记得同步更新成用slug查询的版本，避免出现逻辑问题。

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