使用 `.js` 文件从 `.mdx` 文件中读取 `frontmatter` 的值

Question

我想使用https://github.com/iamvishnusankar/next-sitemap生成站点地图。

但是，我平时使用的时候是这样的：

下一个-sitemap.js

module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
}

它为我所有的 post 生成站点地图。

虽然，在我的 .mdx 文件中，我有一个 published 键来知道 post 是 draft 还是准备好成为 [=13] =]喜欢：

export const meta = {
    title: 'Hello World',
    date: '2020-09-11T14:54:37.229Z',
    tags: ['hello', 'world'],
    author: 'Akshay Kadam',
    published: false,
}

# Hello World

This is my first blog post, not yet ready to be published

如何从 .mdx 文件中读取 published 键以便生成仅 published: true post 的站点地图？

注意： 我不能使用 https://www.npmjs.com/package/gray-matter 因为我的 .mdx 文件有一个导出的对象作为元数据。

Answer 1

我使用了自定义站点地图生成器，例如：

scripts/build-sitemap.js

const fs = require('fs')
const glob = require('fast-glob')
const prettier = require('prettier')
const { getAllPublishedEssays } = require('@/utils/essay/getAllEssayPreviews')
const { getAllPublishedTutorials } = require('@/utils/tutorial/getAllTutorialPreviews')

const posts = [...getAllPublishedEssays(), ...getAllPublishedTutorials()]

const config = {
    siteUrl: 'https://akshaykadam.com',
    changefreq: 'daily',
    priority: '0.7',
    lastmod: new Date().toISOString(),
}

const robotsTxt = `
User-agent: *
Allow: /
Host: ${config.siteUrl}
Sitemap: ${config.siteUrl}/sitemap.xml
`.trim()

const main = async () => {
    const prettierConfig = await prettier.resolveConfig('./prettier.config.js')

    const sitemap = `
        <?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
            ${posts
                            .map((post) => {
                                return `
                        <url>
                                                        <loc>${`${config.siteUrl}/${post.slug}`}</loc>
                                                        <changefreq>${`${config.changefreq}`}</changefreq>
                                                        <priority>${`${config.priority}`}</priority>
                                                        <lastmod>${`${config.lastmod}`}</lastmod>
                        </url>
                    `
                            })
                            .join('')}
        </urlset>
    `

    const formatted = prettier.format(sitemap, {
        ...prettierConfig,
        parser: 'html',
    })

    fs.writeFileSync('public/sitemap.xml', formatted)
    fs.writeFileSync('public/robots.txt', robotsTxt)
}

main()

getAllEssayPreviews.ts

export const getAllPublishedEssays = (): Array<{
    slug: string
    module: any
}> =>
    importAll(require.context('../../pages/essay/?rss', true, /\.mdx$/))
        .filter((p: Post) => p.module.meta.published)
        .sort((a: Post, b: Post) => dateSortDesc(a.module.meta.date, b.module.meta.date))

next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
    .
    .
    .
    webpack: (config, options) => {
        .
        .
        .
        if (!options.dev && options.isServer) {
            const originalEntry = config.entry

            config.entry = async () => {
                const entries = { ...(await originalEntry()) }
                entries['./scripts/build-rss'] = './scripts/build-rss.js'
                entries['./scripts/build-sitemap'] = './scripts/build-sitemap.js'
                return entries
            }
        }

        return config
    },
})

使用 `.js` 文件从 `.mdx` 文件中读取 `frontmatter` 的值

Read the values from `frontmatter` from `.mdx` files using a `.js` file

javascript

node.js

next.js

mdxjs

下一个-sitemap.js

scripts/build-sitemap.js

getAllEssayPreviews.ts

next.config.js