Sapper / Svelte: Как добавить файлы разметки?

Обновление 2020-06-14:

Также существует версия GitHub (с 11 ноября 2019 г.), которая публикуется с помощью Netlify и имеет добавлен личный домен. Поэтому, в отличие от версии GitLab, он не использует базовый URL Sapper для изменения базового пути, что необходимо для страниц GitLab и GitHub, если вы не добавите собственный домен.

Оригинальный ответ 2019-10-24:

Вы можете найти это репо полезным. У меня также есть открытый PR в репозитории Sapper Template. Markdown ветка в январе 2019 года, а затем добавление поддержки Svelte 3 в мае 2019 года, но, вероятно, проще посмотреть и клонировать мое репо на GitLab, плюс в нем есть более свежие обновления зависимостей, которые я еще не добавил в PR.

Я опубликовал 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.

Вы можете получить больше удовольствия, используя MDsveX, который представляет собой процессор Svelte Markdown, созданный одним из основных членов сообщества. .

Однако да, вы также можете просто использовать marked или snarkdown (это то, что я использую), так же, как вы использовали бы любую другую библиотеку - просто импортируйте ее и передайте ей свой код уценки.

Я согласился с подходом @Antony Jones. Я поместил файлы .md в свою папку routes / и использовал Svelte Preprocess Markdown, установив это в моей конфигурации накопительного пакета для обработки .md файлов (превращая их в .svelte файлы). Файлы .md организованы в подпапки в папке routes /, и каждая папка имеет страницу индекса, на которой будут перечислены ссылки на страницы, созданные файлами или папками внутри. Вот ссылка на репо, если вы хотите его проверить: ссылка. Работа над этим все еще продолжается.

Однако, как сказал @rdela в своих комментариях, этот подход менее гибкий, чем обработка сообщений с использованием вашего собственного кода, чтобы получить первый материал, как в репозитории шаблона, а затем фильтровать сообщения, помещая их в папки на основе тегов в их главный вопрос или что-то в этом роде.