2

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

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

4

4 回答 4

2

我发布了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;

然后，每篇博文都存储src/posts为 Markdown 文件，格式如下：

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

Your markdown content.
于 2020-04-29T13:28:31.573 回答
1

使用由核心社区成员之一创建的 Svelte Markdown 处理器MDsveX可能会有更多的乐趣。

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

于 2019-10-24T08:18:18.427 回答
1

我采用@Antony Jones 的方法。我将.md文件放在我的 routes/ 文件夹中并使用Svelte Preprocess Markdown，在我的汇总配置中将其设置为处理.md文件（将它们转换为.svelte文件）。这些.md文件被组织到 routes/ 文件夹中的子文件夹中，每个文件夹都有一个索引页面，该页面将列出指向由其中的文件或文件夹创建的页面的链接。如果您想查看它，这里是一个指向 repo 的链接：link。它仍在进行中。

不过，正如@rdela 在他的评论中所说，这种方法不如使用您自己的代码处理帖子以获取模板存储库中的头条内容，然后过滤帖子，根据标签将它们放入文件夹中他们的前事，或类似的事情。

于 2020-04-23T02:48:39.863 回答
1

2020 年 6 月 14 日更新：

现在也有一个GitHub 版本（自 2019 年 11 月 11 日起），它使用 Netlify 发布并添加了一个自定义域。因此，与 GitLab 版本不同的是，它不使用 Sapper 的基本 URL 来更改GitLab 和 GitHub 页面所需的基本路径，除非您添加自定义域。

原答案2019-10-24：

你可能会发现这个 repo很有帮助。我还有一个关于 Sapper Template 存储库的公开 PR，首先在 2019 年 1 月修改旧的 Markdown 分支，然后在 2019 年 5 月添加 Svelte 3 支持，但在 GitLab 上查看和克隆我的存储库可能更容易，而且它有我还没有添加到 PR 中的更多当前依赖项更新。

于 2019-10-24T07:35:38.467 回答