Sapper/Svelte:如何添加 Markdown 文件?

2024-02-01

我正在使用 Sapper 使用默认创建博客工兵模板汇总 https://github.com/sveltejs/sapper-template-rollup.

在博客文件夹中,它确实提到了从 Markdown 文件生成数据。但我找不到该怎么做?


我发表了https://github.com/mikenikles/sapper-template-with-markdown 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.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Sapper/Svelte:如何添加 Markdown 文件? 的相关文章

随机推荐

  • 谷歌电子表格中的逻辑例外/差异范围

    我想变得合乎逻辑 A B or A B 在谷歌电子表格中 所以 有 A A 1 2 3 4 and B B 2 3 5 6 所以我的公式 my amazing formula A A B B 应该返回 1 4 A 的元素不存在于 B 中 问
  • React 等价于 ng-repeat

    我是 React js 的新手 我正在尝试绑定数据数组 我正在寻找 ng repeat 的等效项 但我在文档中找不到它 e g var data red green blue 使用角度我会在我的html中做这样的事情 div i div 我
  • OpenGL 编译着色器已损坏

    我正在尝试在 OpenGL 3 2 中编译着色器程序 但遇到奇怪的链接错误 创建顶点和片段着色器并编译并附加它们后 我尝试将它们链接到程序中 但收到以下信息日志错误 ERROR Compiled vertex shader was corr
  • 在 Google 地图上放置街景按钮

    如何在相当典型的 Google 地图上放置街景按钮 使其与右上角的标准地图 卫星 混合按钮一致 我见过这样的一个例子 但现在找不到了 所以 我知道这是可能的 确实是的 人们可以在地图选项中指定控制位置 寻找控制定位 in the 在线文档
  • 有没有办法通过 adobe air 在 Android 上访问蓝牙

    您可以通过 adobe air for mobile 访问 android 的蓝牙 API 吗 确实有一个 Native Process API http tv adobe com watch adc presents invoke nat
  • 从结果创建 Observable

    我正在尝试 Angular2 我注意到 http 服务使用Observable对象而不是Promise 我不太喜欢这个选择 async await即将抵达 在我的服务中 我下载了一份列表Plants来自网络服务 单击植物 我会使用路由显示详
  • Foreach 与 Scala 中的 Map [重复]

    这个问题在这里已经有答案了 我尝试了两种方法来列出一些东西 var response List RS TxnNested consumertxnlist foreach txData gt response RS TxnNested bla
  • 动态改变较少的变量

    我想在客户端更改一个 less 变量 假设我有一个 less 文件 color1 123456 color2 color1 111111 title color color1 text color color2 我希望用户选择一种颜色并更改
  • touchDragged 在 libgdx 中如何工作?

    我目前正在学习libgdx游戏编程 现在我已经学会了如何使用touchDown 但我不知道如何使用touchDragged 计算机如何知道手指被拖动的方向 用户是否向左或向右拖动 计算机不知道这一点 或者至少界面不会告诉你这个信息 它看起来
  • Web 服务器找不到请求的资源 Visual Studio 调试

    Issue 我有一个在 Visual Studio 2012 中运行的 net 4 0 Web 应用程序 每次我去调试该站点时都会收到以下错误 Web 服务器找不到请求的资源 我尝试过的 我已经按照微软的网站提供了解决方案 msdn htt
  • 存储 JavaScript 对象的状态

    我试图将 this 的统计信息存储在我的 javscript 对象中 以便稍后在我的应用程序中我可以将 this 返回到之前的状态 我以为我可以使用闭包来完成 但到目前为止我还没有成功 我的想法是做这样的事情 function SavedF
  • 对 char 进行按位运算给出 32 位结果

    我一直在用 C 编写一个程序 将字符的前 4 位移至末尾 将后 4 位移至开头 对于大多数值 它可以正常工作 以及相反的操作 但对于某些值 如 8 x y z 它给出的结果是 32 位值 通过打印变量的十六进制值检查值 谁能解释为什么会发生
  • Selenium-js:Firefox:错误:TimedPromise 在 300000 毫秒后超时

    我正在尝试在网站上运行我的 selenium javascriptbet365 com https bet365 com 我使用的是 Firefox geckodriver 我尝试了无头模式和正常模式 但为了理解 调试问题 非无头模式很有帮
  • 如何将 XAResource 与现有事务一起使用?

    我的用例是 我有一个现有的 JTA TransactionManager 和一个正在进行的事务 我想在此事务中将 Neo4j 列为 XAResource 以便它可以在适当的 2PC 中准备 提交 我没有在 Neo4j 中看到公共 XARes
  • 可以使用 CSS 设置动态类的样式吗? [复制]

    这个问题在这里已经有答案了 我有一堂课叫 box 159每次刷新屏幕时数字都会变化 有没有办法定义这个字段 比如background color 在CSS中 是的 仅使用 CSS 就可以实现 选项 1 按前缀值匹配 Use CSS 类选择器
  • global.json 和 src 文件夹有多重要?

    在 VS 2015 中 当您使用此方法创建新的 MVC 6 0 应用程序时 File gt New gt Project gt ASP NET Web Application gt ASP NET 5 Preview Templates 您
  • 错误代码与错误条件

    我不太明白为什么我们需要区分错误代码 std error code 和一个错误condition std error condition 它们不是同一个东西吗 错误条件与错误代码相比有哪些优点 From http en cppreferen
  • 绘制谷歌折线,线宽以米为单位设置

    我注意到 当您在谷歌地图中绘制折线时 您会设置它的宽度 以像素为单位 笔画宽度 有没有办法可以将其设置为米 不幸的是 我不知道有什么简单的方法可以做到这一点 该 API 似乎没有这方面的文档 我认为该功能不受支持 一个问题是 像素在 API
  • 将命令行变量传递到基于 WiXx 的 Windows Installer MSI

    我正在使用 WiX 构建 MSI 安装程序 并且使用WixUI Advanced 我的定义ApplicationFolder看起来像这样 遵循另一个SO答案中的建议 WiX 技巧和技巧 https stackoverflow com que
  • Sapper/Svelte:如何添加 Markdown 文件?

    我正在使用 Sapper 使用默认创建博客工兵模板汇总 https github com sveltejs sapper template rollup 在博客文件夹中 它确实提到了从 Markdown 文件生成数据 但我找不到该怎么做 我