当前位置：首页 > 前端开发 > 正文内容

Next.js项目App目录怎么简略集成markdown博客

邻居的猫1个月前 (12-09)前端开发1458

文章原文：Next.js项目App目录怎么简略集成markdown博客

此教程适用于比较简略的项目完结，假如你是刚入门next，而且不想用太杂乱的办法去完结一个博客项目，那么这个教程就挺合适你的。

Next.js官方关于markdown的文档有阐明过怎么烘托markdown，也是针对App目录的，但我测验过并不太行，或许是版其他问题，不论怎么样，最终我并没有处理这个问题，而是用了其他计划去完结。

此教程适用于app目录的next项目，下面的比方刚好是多语言结构的项目。

完结思路

结合文件结构说明一下大致逻辑：

Markdown文件放在/app/_articles/[lang]文件夹下办理，假如你是多语言目录，那么每个语种都是独自一个文件夹，假如不是，那么能够直接放在/app/_articles文件夹下。

别的markdown文件里从榜首行开端能够放入一些Frontmatter，一般放在文件最初，用---符号分割开，供给一些额定信息，如发布时刻、更新时刻，是否现已发布，对应的描绘，这类的信息能够自定义的，便利你做许多个性化的操作，一般我用来做meta信息的填充。

这儿能够给一些Frontmatter的比方：

---
title: "这是博客标题"
createdAt: "2024-11-12"
updatedAt: "2024-11-12"
isPublished: true
description: "这是博客描绘"
---

跟着你文件的增多，你需求一些代码来办理、显现你的markdown信息，比方：

在你的blog页面展现一切的markdown博客。
依据markdown文件名称跳转对应的博客概况，比方拜访https://i18ncode.com/blog/how-nextjs-app-simply-make-i18n 能正常显现how-nextjs-app-simply-make-i18n.mdx文件内的文本。
烘托markdown文本，当然要包含对应页面的meta信息。

详细代码

大致要做的作业如上所述，下面贴对应的代码。

先封装好一些通用办法在/lib/mdx.ts文件中，便利后续调用：

// mdx.ts

import fs from "fs";
import path from "path";
import matter from "gray-matter";
import readingTime from "reading-time";

const articlesDirectory = path.join(process.cwd(), "app/_articles");
const webContentDirectory = path.join(process.cwd(), "app/_contents");

// 获取 MDX/MD 原始数据
export function getMdxRawData(fileName: string, lang: string, hasSuffix: boolean) {
    let fullPath = path.join(articlesDirectory, lang, `${fileName}`);
    let suffix = hasSuffix // 判别是否有后缀，没有的话就加上后缀
        ? ""
        : fs.existsSync(`${fullPath}.mdx`)
            ? ".mdx"
            : ".md";
    const fileContents = fs.readFileSync(`${fullPath}${suffix}`, "utf8");
    return fileContents;
}

// 处理 MDX/MD 原始数据中的 frontmatter
export function getMdxFrontmatter(mdxRawData: string) {
    const { content, data } = matter(mdxRawData);
    return {
        content,
        frontmatter: data,
        readingTime: readingTime(content).text, // 核算阅览时刻
    };
}

// 获取文章的一切信息
export function getArticlesData(fileName: string, lang: string, hasSuffix = false) {
    return {
        ...getMdxFrontmatter(getMdxRawData(fileName, lang, hasSuffix)),
        fileName: fileName.split(".").slice(0, -1).join("."), // 去除后缀
    };
}

// 获取 _articles 目录下的一切文章
export function getAllArticlesData(lang: string) {
    const fileNames = fs.readdirSync(articlesDirectory + "/" + lang);
    const allArticlesData = fileNames.map((fileName) => {
        return getArticlesData(fileName, lang,true);
    });
    return allArticlesData;
}

你能够依据你项目的详细状况来调整上面的代码。

在你的blog页面展现一切的markdown博客

调用上面封装好的getAllArticlesData办法，该办法支撑一个叫lang的参数，这是多语言项目里有的参数，假如你传入的值为en，那么它就会去/app/_articles/en下获取一切的markdown文件。

然后不要忘掉按时刻排序：

export default async function BlogPage({params: {lang}}: { params: { lang: Locale } }) {
    const allArticlesData = getAllArticlesData(lang);
    const dictionary = await getDictionary(lang);
    const sortedArticles = allArticlesData.sort((a, b) => {
        // 将日期字符串转换为日期目标
        const dateA = new Date(a.frontmatter.createdAt).getTime();
        const dateB = new Date(b.frontmatter.createdAt).getTime();

        // 比较日期，返回值决议排序
        return dateB - dateA; // 倒序排序
    });
    return (
        <div>
            <div className="mb-16">
                <h1 className={title()}>{dictionary.blog.title}</h1>
                <div className="mt-8">
                    {sortedArticles.map(article => (
                        <Blog blog={article} key={article.fileName} lang={lang} />
                    ))}
                </div>
            </div>
            <CallToAction dictionary={dictionary} />
        </div>
    );
}

依据markdown文件名称跳转对应的博客概况

Blog组件中运用简略的跳转：

<Link href={`/${lang}/blog/${blog.fileName}`} />

将文件名传递曩昔，概况页面会依据文件名找到对应的文件进行烘托。

烘托markdown文本

在/app/[lang]/blog/[id]/page.tsx页面下则是对详细的markdown进行解析和烘托，将对应的内容填入页面，烘托meta信息：

import { getArticlesData } from "@/lib/mdx";
import { Remarkable } from 'remarkable';
import hljs from 'highlight.js';
import {getDictionary} from "@/get-dictionaries";
import CallToAction from "@/components/cta";
import React from "react";

export const generateMetadata = async ({ params }: any) => {
    const { content, frontmatter, readingTime } = getArticlesData(params.id, params.lang);
    const lang = await getDictionary(params.lang);
    return {
        title: frontmatter.title + " | " + lang.blog.meta.title,
        description: frontmatter.description,
        openGraph: {
            title: frontmatter.title + " | " + lang.blog.meta.title,
            type: "website",
            url: ``,
            images: [
                {
                    // 此处还能够有width和height特点，see:https://medium.com/@moh.mir36/open-graph-with-next-js-v13-app-directory-22c0049e2087
                    url: "/logo.png",
                    alt: ""
                }
            ],
            siteName: "",
            description: frontmatter.description,
            locale: ""
        },
        twitter: {
            images: [
                {
                    url: "/logo.png",
                    alt: ""
                }
            ],
            title: frontmatter.title + " | " + lang.blog.meta.title,
            description: frontmatter.description,
            card: "summary_large_image"
        },
    }
}
// !important：博客的排版需求在tailwind.config.js中增加插件：require("@tailwindcss/typography")，自行检查对应代码
const Page = async ({ params }: any) => {
    const { content, frontmatter, readingTime } = getArticlesData(params.id, params.lang);
    const md = new Remarkable({
        html: true,
        breaks: true,
        linkify: true,
        typographer: true,
        highlight: function (str: string, lang: string) {
            if (lang && hljs.getLanguage(lang)) {
                try {
                    return hljs.highlight(lang, str).value;
                } catch (err) {}
            }

            try {
                return hljs.highlightAuto(str).value;
            } catch (err) {

            }

            return ''; // use external default escaping
        }
    });
    const blog = md.render(content, frontmatter);
    const dictionary = await getDictionary(params.lang);

    return (
        <main className="container pb-24 text-start">
            <div
                className="prose dark:prose-invert prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg dark:prose-headings:text-white w-screen p-4">
                <div dangerouslySetInnerHTML={{__html: blog}} className="prose-pre:p-4 dark:prose-pre:bg-gray-800 w-full p-4"/>
            </div>
            <CallToAction dictionary={dictionary} />
        </main>
    );
};
export default Page;

这儿用了Remarkable计划替代了Next的MDXRemote组件。

到这儿根本上完结了一半，可是款式方面或许会用短缺，需求在tailwind.config.js中增加插件：require("@tailwindcss/typography")，代码如下：

import {nextui} from '@nextui-org/theme'

/** @type {import('tailwindcss').Config} */
module.exports = {
    //...
    plugins: [
        // ....
        require("@tailwindcss/typography"), // markdown typography
    ],
}

OK，到这儿根本功德圆满，就能够正常显现了，当然，过程中需求装置一些依靠，依据你项目里缺的依靠来装置就能够了。

关于多语言Markdown文件的办理和翻译

你能够看到，运用这种办法，假如是多语言的站点，那么你不可避免地要翻译和办理好对应的markdown文件。

用gpt翻译的话长度会受约束，榜首个语种还好，第二个语种之后就会开端忘掉原文，然后就开端胡说八道了；要么你就每次对话都带上原文让gpt翻译，这样对话没几轮就得敞开一个新的对话了。

我刚开端做这类作业的时分完结一篇博客需求一整个下午的时刻，这实在是太耗时了。

机器翻译更无法承受，它无法辨认markdown的符号，会格局紊乱，别的机翻作用略显僵硬。

根据这块的考虑我做了个专门针对这种状况的翻译器，有需求的朋友能够体会一下markdown翻译器。

markdown翻译器考虑了长度问题，做了文本切开并分段恳求，你能够把一整个markdown文本塞进去翻译，直接获取最终的全体成果，通过重复测验我这是没什么问题的；别的也做了markdown格局的辨认和保存，不必惧怕丢掉格局；最终也考虑了本土化的状况，相同的文本也尽量要求AI用更本土化的办法表达出来，应该是比较合适做国际化的朋友了。

最终，感谢你阅览到这儿，博客处会时不时更新一些独立开发的技能共享，期望能为更多的开发者朋友供给一些东西以外的协助吧。