Sapper/Svelte: 如何添加markdown文件？

Question

我正在使用默认 sapper-template-rollup 使用 Sapper 创建博客。

在blog文件夹中，确实提到了从markdown文件生成数据。但是我找不到怎么办？

Answer 1

2020-06-14 更新：

GitLab 和 GitHub 页面需要 GitHub version as well now (since 2019-11-11) that publishes with Netlify and has a custom domain added. So unlike the GitLab version, it does not use Sapper's base URL to alter the base path，除非您添加自定义域。

原回答2019-10-24：

您可能会发现 this repo helpful. I also have an open PR on the Sapper Template repo, first revising the old Markdown branch in Jan. 2019 and then adding Svelte 3 support in May 2019, but it is probably easier to look at and clone my repo on GitLab，而且它还有更多我尚未添加到 PR 中的当前依赖项更新。

Answer 2

使用 MDsveX 您可能会更喜欢它，这是一个由核心社区成员之一创建的 Svelte Markdown 处理器。

但是是的，您也可以只使用 marked 或 snarkdown（这是我使用的），就像您使用任何其他库一样 - 只需导入它并传递您的降价代码。

Answer 3

我采用了@Antony Jones 的方法。我将 .md 文件放在我的 routes/ 文件夹中并使用了 Svelte Preprocess Markdown, setting it up in my rollup config to process .md files (turning them into .svelte files). The .md files are organized into sub-folders within the routes/ folder, and each folder has an index page that will list links to the pages made by the files or folders inside. Here is a link to the repo if you want to check it out: link。它仍在进行中。

正如@rdela 在他的评论中所说，尽管如此，这种方法不如使用您自己的代码处理帖子以获取前端内容（就像它们在模板回购中所做的那样）灵活，然后过滤帖子，将它们放入基于前面内容中的标签或类似内容的文件夹。

Answer 4

我发布了 https://github.com/mikenikles/sapper-template-with-markdown，它展示了如何使用默认的 Sapper 模板，但是使用 *.md 文件作为博客 post 的内容。

主要变化在 src/routes/blog/_posts.js 中，我将内容替换为：

const fs = require('fs');
const frontMatter = require('front-matter');
const marked = require('marked');

const posts = fs.readdirSync('./src/posts').map(postFilename => {
  const postContent = fs.readFileSync(`./src/posts/${postFilename}`, {
    encoding: 'utf8'
  });
  const postFrontMatter = frontMatter(postContent);
  return {
    title: postFrontMatter.attributes.title,
    slug: postFrontMatter.attributes.slug,
    html: marked(postFrontMatter.body)
  }
});

posts.forEach(post => {
    post.html = post.html.replace(/^\t{3}/gm, '');
});

export default posts;

然后，每个博客 post 作为 Markdown 文件存储在 src/posts 中，格式如下：

---
title: 'What is Sapper?'
slug: 'what-is-sapper'
---

Your markdown content.

Sapper/Svelte: 如何添加markdown文件？

Sapper/Svelte: How do I add markdown files?

markdown

svelte

sapper