Sapper/Svelte：如何添加Markdown文件？

Question

我正在使用默认的sapper-template-rollup来创建一个基于Sapper的博客。

在博客文件夹中，确实提到了从Markdown文件生成数据的方法。但是我找不到如何实现？

- JustineKizhak

---

寻找一个适用于你的模块打包工具（如webpack、rollup等）的Markdown加载器插件。 - voscausa

这很简单，你可以使用 marked 包，并且你绝对可以参考 Svelte 如何构建自己的博客页面。在这里查看 https://github.com/sveltejs/svelte/blob/master/site/src/routes/blog/_posts.js - Jerric Lyns John

Answer 1

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

主要的更改在于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;

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

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

Your markdown content.

- Mike Nikles

Answer 2

我采用了@Antony Jones的方法。我把.md文件放在我的routes/文件夹中，并使用Svelte Preprocess Markdown，在我的rollup配置中设置它来处理.md文件（将它们转换成.svelte文件）。.md文件按子文件夹组织在routes/文件夹中，每个文件夹都有一个索引页面，列出由文件或文件夹内部生成的页面的链接。如果您想查看，请点击此处link访问存储库。它仍然是一个正在进行中的工作。

正如@rdela在他的评论中所说，这种方法不如使用自己的代码处理帖子灵活，以获取前置信息，就像模板存储库中所做的那样，然后根据前置信息中的标签过滤帖子，将它们放入基于标签的文件夹中，或者类似于此的操作。

- mmmm

Answer 3

更新于2020年6月14日:

现在也有GitHub版本(自2019年11月11日起)了，它使用Netlify发布并添加了自定义域名。因此，与GitLab版本不同，它不使用Sapper的基本URL来更改基本路径，这在GitLab和GitHub页面中是必要的，除非您添加自定义域名。

原始答案为2019年10月24日:

您可能会发现此存储库有所帮助。我还在Sapper模板存储库上有一个开放PR, 首先在2019年1月修订了旧的Markdown分支，然后在2019年5月添加了Svelte 3支持，但查看和克隆我的GitLab存储库可能更容易，并且它具有我尚未添加到PR的更多当前依赖项更新。

- rdela

---

我看到所有的帖子在顶级域名后面都会有一个链接，例如 www.example.com/post1、www.example.com/post2。但是，如果有人想要使用该模板对帖子进行分类怎么办？例如 www.example.com/svelte-posts/post1、www.example.com/vuejs-posts/post1。 - JustineKizhak

@JustineKizhak 如果你想要使用传统的WordPress风格分类，我会将其添加到文章的markdown开头部分中(Jekyll文档)，然后使用动态参数创建一个分类页面模板，并在个人文章模板中添加链接到任何分类。 - rdela

@JustineKizhak 标签在我的经验中几乎总是比分类更好，因为您可以添加任意数量的标签。如果您写了一篇比较Svelte和Vue的文章呢？为什么不让它同时出现在两个标签下呢？所以你应该使用标签而不是分类。WordPress在这方面有着漫长而混乱的历史，我认为他们最终使分类行为类似于标签，因为他们厌烦了人们在想要使用标签时使用分类并抱怨的情况。 - rdela

现在我明白了，标签确实提供了更多的灵活性，但是对于分类，我们能否在js中做些什么来解析并将不同类别的博客保存在单独的json文件中，例如svelte-posts.json、vue-posts.json，因为我理解一篇文章不能属于多个类别。因此，[category]/index.svelte只能获取相应的json并按时间顺序呈现它。我可以看到自己同时使用分类和标签。分类作为分组，标签用于过滤。但我想对于过滤，我还需要进行服务器端设置。 - JustineKizhak

我会尝试找出解决方案并在您的问题下发布。感谢您的回答。 - JustineKizhak

Answer 4

你可以尝试使用MDsveX，这是由社区核心成员之一创建的Svelte Markdown处理器，可能会更加顺利。

当然，你也可以像使用其他库一样，直接使用marked或snarkdown（我使用的是后者），只需导入并将你的Markdown代码传递给它即可。

- Antony Jones