Я пишу сайт для многопользовательской игры, используя Svelte в качестве SPA, с express и socket.io. Для страниц справки, руководства по игре и правил игры мне нужно написать «книги» разных видов с оглавлением, содержащим ссылки на более 10 страниц. Поэтому я решил использовать svelte-preprocess-markdown для упрощения моей работы.
Каждая книга живет в своей собственной папке с файлом данных до c (svelte или js), массивом {title, component}, поэтому ранг в массиве дает соответствующий порядок главы. Я использую эту технику, так как импорт * stati c in JS.
Я протестировал приведенный ниже код, очевидно, он работает довольно хорошо, но теперь мне нужно создать универсальный c компонент, чтобы избежать дублирование кода путем изоляции его основной логики c. Я думаю, что использование слотов может решить проблему, но я не могу понять, как это сделать ...
РЕДАКТИРОВАТЬ:
Я редактировал этот пост, потому что я нашел обходной путь, и изменил пример кода.
В отдельной папке в виде файлов * .md (svelte + markdown) находятся 10 глав книг, каждый из которых экспортирует заголовок в C, например
# file: src/help/Chapter1.md
<script>
export let title = 'chapter 1 entry inside ToC'
</script>
# Chapter one
This chapter explains how to write your own 'Minibook'
* they use md+svelte files
* 1 chapter === 1 file
* entry ToC title exported per-chapter
Feel free to edit yours ;-)
To C отвечает за статический импорт страниц книги и их упорядочение / сортировку / упорядочение в массиве конструкторов компонентов.
# file: src/help/toc.js
import { default as Chapter1 } from './Chapter1.md'
import { default as Chapter2 } from './Chapter2.md'
import { default as Chapter3 } from './Chapter3.md'
import { default as Chapter4 } from './Chapter4.md'
// decide here the order in the ToC
export const toc = [Chapter1, Chapter4, Chapter3, Chapter2]
Затем вызывается компонент Minibook.svelte и To C в вашем конкретном экземпляре:
# file: src/Help.svelte
<script>
import Minibook from './Minibook.svelte'
import { toc } from './help/toc.js'
</script>
<Minibook {toc} />
После этого вы можете использовать Help.svelte в любом месте вашего приложения. Вот обходной код Minibook.svelte (generi c)
<script>
import { onMount } from 'svelte'
export let toc
const titles = []
let init = true
let current = 0
const navigate = (offset) => {
current += offset
// cycle over ToC
current <= 0 ? current = toc.length - 1 : null
current >= toc.length ? current = 0 : null
}
const jump = (index) => { current = index }
// adjust properly flag (see #if below)
onMount (() => {
init = false
})
</script>
<div class="minibook">
<div class="test">
<button on:click={ () => navigate (-1)}> PREV </button>
<button on:click={ () => navigate ( 1)}> NEXT </button>
{ current }
</div>
<ul class="toc">
{#each titles as title, index }
<li>
<button on:click={ () => jump (index)}>{ title}</button>
</li>
{/each}
</ul>
<div class="deck">
{#each toc as entry, index }
{#if init || current === index }
<svelte:component this={ entry } bind:title={titles[index] } />
{/if}
{/each}
</div>
</div>
Позвольте мне объяснить, что здесь делается:
svelte: директива компонента динамически ВСЕМ страницы во время инициализации, и bind: title ... используется для накопления массива титров, который можно использовать для накапливания списка To C!
Теперь у вас есть только чтобы немного поиграть с CSS и переходами, чтобы создать красивую «карточную колоду» с To C, переходящим на страницы глав
наконец, я не использовал слоты! Могут ли они быть полезны здесь?
Вот некоторые результаты поиска Google:
Мне не удалось создать экземпляр компонента без его рендеринга внутри тега script Minibook.svelte (hélas!), Поэтому было немного сложно правильно создайте раздел заголовков To C, поскольку для компонентов требуется целевой элемент DOM, но какой использовать? и как легко получить доступ к свойству title?