前言

众所周知，Nuxt.js是一款服务端渲染框架，与Vue.js相比，好处在于利于SEO优化。用它来做博客门户再合适不过。基本上每个博客都有RSS订阅，也就是访客可以通过rss订阅，在不访问网站的情况下，就能获取该网站的最新文章。那么如何在Nuxt.js中实现呢？

正文

这里以Nuxt4为例

首先，我们需要在项目目录下创建个与app文件夹同级的server文件夹（如有请忽略），如下图：

然后呢，我们在server这个文件夹里可以创建个api文件夹，在里面，我们可以创建个feed.js，在里面编写相应代码来实现相应功能。

代码

import { Feed } from 'feed'
import axios from 'axios'


export default defineEventHandler(async (event) => {
const config = useRuntimeConfig()
// 定义博客地址
const blogUrl = "https://note.dongzi.xyz"

const res = await axios.get("这里填写你的文章列表api地址");

// console.log(res.data);
const data = res.data.results;

// 创建 feed 实例
const feed = new Feed({
title: '东子个人博客',
description: '东子个人博客,旨在分享在学习前端时的一些笔记和体会,让我们一起关注前端的最前沿',
id: blogUrl,
link: blogUrl,
language: 'zh', // 可选，默认为 'en'
image: `${blogUrl}/favicon.ico`,
favicon: `${blogUrl}/favicon.ico`,
updated:new Date(data[0].createdAt),
copyright: `All rights reserved ${new Date().getFullYear()}, 东子个人博客`,
})

// 上述的updated为最新一篇文章的创建时间，也可以是访问时的时间，可根据实际需要自行调整。


// 通过循环向里面添加内容
for(let i=0;i<data.length;i++){
    feed.addItem({
        title: data[i].title,
        description: data[i].description || '',
        id: `${blogUrl}/posts/${data[i].objectId}`,
        link: `${blogUrl}/posts/${data[i].objectId}`,
        date: new Date(data[i].createdAt),
    })
}

// 设置响应头并返回 feed 内容
event.node.res.setHeader('Content-Type', 'application/xml')
return feed.rss2() // 或者使用 feed.atom1() 生成 Atom 格式
})

通过以上代码，我们不难实现，这里以当前网站的最终效果为例：

题外话

早些时候，看到某Q群有人在聊京东云双11活动，发现有个1元注册 .com/.cn等域名，这让我有点蒙圈。大多的厂商，新用户最多1元注册top/xyz等，京东云这波直接1元注册.com/.cn也算是下了老本了，哈哈。

虽然我手里已经有不少域名了，现成的羊毛不薅白不薅，又来了个.com，哈哈，晚两天丢个 个人主页到上面吧。

结语

本文到此结束，下篇文章再见！