508 字
3 分钟
fuwari修复RSS图片不显示

前言
啊大家都知道,fuwari的RSS如果你用的是相对路径,那么生成的RSS将也是相对路径,但这样就看不了图了啊,所以本章将带你修复它
修改RSS配置文件
打开src/pages/rss.xml.ts,当然你也可以直接删了
直接一个全选删除再将下面的配置粘贴填入
import rss from '@astrojs/rss';import sanitizeHtml from 'sanitize-html';import MarkdownIt from 'markdown-it';import { getCollection } from 'astro:content';import { siteConfig } from '@/config';import { parse as htmlParser } from 'node-html-parser';import { getImage } from 'astro:assets';import type { APIContext, ImageMetadata } from 'astro';import type { RSSFeedItem } from '@astrojs/rss';import { getSortedPosts } from '@/utils/content-utils';
const markdownParser = new MarkdownIt();
// get dynamic import of images as a map collectionconst imagesGlob = import.meta.glob<{ default: ImageMetadata }>( '/src/content/**/*.{jpeg,jpg,png,gif,webp}', // include posts and assets);
export async function GET(context: APIContext) { if (!context.site) { throw Error('site not set'); }
// Use the same ordering as site listing (pinned first, then by published desc) const posts = await getSortedPosts(); const feed: RSSFeedItem[] = [];
for (const post of posts) { // convert markdown to html string const body = markdownParser.render(post.body); // convert html string to DOM-like structure const html = htmlParser.parse(body); // hold all img tags in variable images const images = html.querySelectorAll('img');
for (const img of images) { const src = img.getAttribute('src'); if (!src) continue;
// Handle content-relative images and convert them to built _astro paths if (src.startsWith('./') || src.startsWith('../')) { let importPath: string | null = null;
if (src.startsWith('./')) { // Path relative to the post file directory const prefixRemoved = src.slice(2); importPath = `/src/content/posts/${prefixRemoved}`; } else { // Path like ../assets/images/xxx -> relative to /src/content/ const cleaned = src.replace(/^\.\.\//, ''); importPath = `/src/content/${cleaned}`; }
const imageMod = await imagesGlob[importPath]?.()?.then((res) => res.default); if (imageMod) { const optimizedImg = await getImage({ src: imageMod }); img.setAttribute('src', new URL(optimizedImg.src, context.site).href); } } else if (src.startsWith('/')) { // images starting with `/` are in public dir img.setAttribute('src', new URL(src, context.site).href); } }
feed.push({ title: post.data.title, description: post.data.description, pubDate: post.data.published, link: `/posts/${post.slug}/`, // sanitize the new html string with corrected image paths content: sanitizeHtml(html.toString(), { allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']), }), }); }
return rss({ title: siteConfig.title, description: siteConfig.subtitle || 'No description', site: context.site, items: feed, customData: `<language>${siteConfig.lang}</language>`, });}
保存了,还需要安装一个pnpm包,不用管是什么,能帮我们转换成链接就是的了
pnpm add node-html-parser
WARNING在推送到仓库时,你可能会遇到warning: in the working copy of ‘pnpm-lock.yaml’, LF will be replaced by CRLF the next time Git touches it 这是由于空格不同引起的,但并不会影响部署,忽略即可