【问题标题】：Add RSS to Next.js MDX Blog while using `rss` module for Node JS . How do I convert MDX to HTML?将 RSS 添加到 Next.js MDX 博客，同时使用 Node JS 的 `rss` 模块。如何将 MDX 转换为 HTML？
【发布时间】：2021-01-30 16:11:18
【问题描述】：

目前，我在将 MDX 转换为 HTML 时遇到问题。

我这样做是为了Tailwind Blog

Github上的完整代码→https://github.com/tailwindlabs/blog.tailwindcss.com

以下是相关代码：

脚本/build-rss.js

import fs from 'fs'
import path from 'path'
import getAllPostPreviews from '../src/getAllPostPreviews'

import RSS from 'rss'

const siteUrl = 'https://blog.tailwindcss.com'

const feed = new RSS({
  title: 'Blog – Tailwind CSS',
  site_url: siteUrl,
  feed_url: `${siteUrl}/feed.xml`,
})

getAllPostPreviews().forEach(({ link, module: { meta, default: html } }) => {
  console.log(html)
  const postText = `<div style="margin-top=55px; font-style: italic;">(The post <a href="${siteUrl + link}">${meta.title}</a> appeared first on <a href="${siteUrl}">Tailwind CSS Blog</a>.)</div>`;
  feed.item({
    title: meta.title,
    guid: link,
    url: `https://blog.tailwindcss.com${link}`,
    date: meta.date,
    description: meta.description,
    custom_elements: [{
      "content:encoded": html + postText
    }].concat(meta.authors.map((author) => ({ author: [{ name: author.name }] }))),
  })
})

fs.writeFileSync('./out/feed.xml', feed.xml({ indent: true }))

html 变量记录到控制台：

[Function: MDXContent] { isMDXComponent: true }

如何获得纯 HTML？

【问题讨论】：

标签： javascript node.js rss next.js mdxjs

【解决方案1】：

这比我想象的要复杂一些。无论如何，这是我为获取 HTML 所做的更改：

我添加了resourceQuery: /rss/ 到next.config.js 喜欢：

next.config.js

{
    resourceQuery: /rss/,
    use: [
        ...mdx,
        createLoader(function (src) {
            return this.callback(null, src)
        }),
    ],
},

通过添加一个新函数getAllPosts，在getAllPostPreviews.js 中使用上述rss 查询，例如：

getAllPostPreviews.js

export function getAllPosts() {
  return importAll(require.context('./pages/?rss', true, /\.mdx$/)).sort((a, b) =>
    dateSortDesc(a.module.meta.date, b.module.meta.date)
  )
}

我从Post.js 导出mdxComponents 喜欢：

Post.js

export const mdxComponents = {
  ...
}

最后，通过将MDXProvider 包裹在MDXProvider 中，将scripts/build-rss.js 更改为使用ReactDOMServer.renderToStaticMarkup()，例如：

import ReactDOMServer from 'react-dom/server'
import { MDXProvider } from '@mdx-js/react'
import { mdxComponents } from '../src/components/Post'
import { getAllPosts } from '../src/getAllPostPreviews'

getAllPosts().forEach(({ link, module: { meta, default: Content } }, i) => {
  const mdx = <MDXProvider components={mdxComponents}><Content /></MDXProvider>
  const html = ReactDOMServer.renderToStaticMarkup(mdx)
  ...
}

从https://ianmitchell.dev/blog/building-a-nextjs-blog-rss 和https://github.com/IanMitchell/ianmitchell.dev 得到这个想法

【讨论】：