serious
v1.2.2
Serious est un cadre permettant de créer des fictions épisodiques (ou sérialisées) pour le Web. Il prend un certain nombre de fichiers sources, écrits au format markdown, et compile ces fichiers dans une application Web simple et structurée d'une seule page que vous pouvez déployer sur votre hébergeur.
Licence MIT.
Installer via NPM : npm install -g serious-fiction
L'installation de Serious vous donne accès à une CLI simple avec laquelle créer vos histoires. Je suis nouveau dans l'écriture de CLI, ce n'est donc peut-être pas une expérience aussi complète que vous pourriez vous y attendre.
Vous devriez idéalement créer votre histoire dans un répertoire vide. Exécutez serious init dans le répertoire pour commencer.
Exécutez serious build pour reconstruire votre histoire et serious serve pour la visualiser localement. Vous pouvez combiner ces deux commandes (par exemple serious build serve ou serious serve build ) pour créer et visualiser rapidement l'histoire. Vous pouvez également exécuter serious build et actualiser l'onglet de votre navigateur (il peut parfois être nécessaire d'effectuer une actualisation matérielle, c'est-à-dire Ctrl + F5 ) pour voir les mises à jour sans avoir à servir à nouveau le site Web.
Serious utilise AJAX, vous devez donc le servir via localhost, vous ne pouvez pas simplement ouvrir le fichier index.html .
Lorsque vous exécutez serious init , un fichier config.json sera ajouté à votre répertoire. À l'avenir, j'espère intégrer cette partie de la CLI, mais pour l'instant, vous devrez la modifier à la main. Cela ressemble à ceci par défaut :
{
"title" : " The Title of Your Story " ,
"displayTitle" : " " ,
"subtitle" : " " ,
"description" : " A description of your website (for web searches) goes here. " ,
"copyright" : " © [year] [your name]. All rights reserved. " ,
"posts" : " episodes " ,
"input" : " ./src " ,
"output" : " ./publish " ,
"links" : [
{ "text" : " Website " , "url" : " https://twinelab.net " , "label" : " Learn more about Serious. " },
{ "text" : " Blog " , "url" : " https://twinelab.net/blog " , "label" : " Visit my blog. " }
],
"recentMax" : 5 ,
"recentsExcerpts" : 1 ,
"episodesExcerpts" : 3 ,
"debug" : false ,
"disqusShortname" : " " ,
"googleAnalytics" : " " ,
"cookieWarning" : true ,
"nswf" : false ,
"version" : " latest "
}| Option | Défaut | Description |
|---|---|---|
title | "The Title of Your Story" | C'est le nom de votre histoire. Il apparaît sur la page des épisodes récents et sur la page de la liste des épisodes, ainsi que dans l'onglet du navigateur. Les commentaires Disqus sont liés au titre, vous ne voudrez donc probablement pas le modifier. |
displayTitle | "" | Si vous mettez quelque chose ici entre les guillemets, cela remplacera votre titre partout dans votre histoire, à l'exception des commentaires Disqus. |
subtitle | "" | Ceci apparaît sous le titre de l'histoire principale sur certaines pages. Vous pouvez l'utiliser comme signature, sous-titre ou comme description très courte. |
description | "A description of your website (for web searches) goes here. | Ce que vous mettez ici n'apparaît sur aucune page, mais est répertorié sur certains sites Web, comme les moteurs de recherche ou les sites de réseaux sociaux, aux côtés de liens vers l'histoire. |
copyright | "© [year] [your name]. All rights reserved." | Un avis de droit d'auteur peut être affiché tout en bas de chaque page, juste au-dessus de l'inscription "Powered by Serious." le message est. Vous n'êtes pas nécessairement obligé de l'utiliser pour obtenir des informations sur les droits d'auteur. © est le code html pour © (le symbole du droit d'auteur). |
posts | "episodes" | Cette option peut être utilisée pour changer le mot utilisé pour désigner les publications de vos épisodes, afin que vous puissiez le remplacer par autre chose, comme "chapters" ou "verses" , en fonction de vos besoins. |
input | "./src" | Cela indique à Serious où chercher vos publications, par rapport à config.json . Passez-lui un dossier et il recherchera de manière récursive les fichiers markdown (qui ont l'extension .md ) à transformer en publications. En général, vous ne devriez pas avoir besoin de changer cela, placez simplement tous vos messages dans le dossier src . |
output | "./publish" | Semblable à ce qui précède, cela indique à Serious où placer votre page Web créée et où l'exécuter. Encore une fois, vous n’avez généralement pas besoin de changer cela. |
links | ... | Vous pouvez ajouter des liens au menu de la barre latérale en utilisant cette option. Chaque lien devrait ressembler à ceci : { "text": "Click here", "url": "www.somesite.com", "label": "this is a tooltip!" } . La propriété text contrôle le texte d'affichage du lien et l' url est l'endroit où le lien va lorsque vous cliquez dessus. La propriété label apparaît sous forme d'info-bulle lorsqu'un utilisateur passe sa souris sur le lien (en utilisant l'attribut HTML title ). Vous pouvez l'utiliser pour créer des liens vers votre blog personnel, votre site Web principal, Patreon, etc. |
recentMax | 5 | Cela contrôle le nombre d'épisodes Serious diffusés sur la page récente (et la page de destination). |
recentsExcerpts | 1 | Cela contrôle le nombre d'épisodes de la liste récente dont le contenu est affiché. Ceux qui ne sont pas affichés affichent à la place une ellipse (&helli;). Si vous souhaitez que tout le contenu soit affiché, définissez-le sur une valeur égale (ou supérieure) recentMax . |
episodesExcerpts | 3 | Cela contrôle le nombre d'épisodes de la liste d'épisodes dont le contenu est affiché, similaire à recentsExcerpts . |
debug | false | Cela active les fonctionnalités de débogage, y compris les journaux de la console et d'autres éléments. Généralement pas nécessaire pour la plupart des utilisateurs. Assurez-vous probablement que c'est faux avant le déploiement. |
disqusShortname | "" | Vous pouvez configurer des commentaires via Disqus. Un fil de commentaires sera ajouté à chaque épisode, mais pas aux méta-posts, listes, etc. Ajoutez simplement votre nom court ici, aucune configuration supplémentaire n'est nécessaire ! |
googleAnalytics | "" | Vous pouvez configurer Google Analytics pour votre histoire sérieuse. Créez simplement un compte, entrez l'URL de votre site, puis copiez et collez l'ID de suivi ici. |
cookieWarning | true | Ajoute à votre projet un avertissement de consentement aux cookies généré par le consentement aux cookies. Si vous avez votre propre solution, ou si vous ne vous en souciez tout simplement pas, vous pouvez la définir sur false. Serious lui-même n'utilise pas de cookies, il n'en a besoin que si vous utilisez Disqus et/ou Google Analytics. |
nsfw | false | Si c'est vrai, ajoute une boîte de dialogue d'avertissement en plein écran demandant à l'utilisateur de confirmer son âge, par défaut supérieur à 18 ans. Vous pouvez modifier la valeur en un nombre, par exemple 13 ou 21 pour demander à l'utilisateur de confirmer qu'il a dépassé d'autres âges. souhaite vérifier. |
version | "latest" | La version du moteur de rendu de Serious à inclure. "latest" est recommandé, mais si vous devez utiliser une version différente, vous pouvez la marquer ici. Consultez le journal des modifications ci-dessous pour une liste des versions. |
Vous pouvez écrire des épisodes en utilisant GitHub Flavored Markdown. En haut de chaque épisode, vous devriez avoir une présentation YAML pour décrire l'épisode :
---
title: Example Episode
subtitle: Serious Examples for Serious People
episode: 1
description: Welcome to Serious!
---
This is an **example episode**!
Welcome to Serious. To create episodes, you create a heading block like the one at the top of this file, then write your *markdown format content* after that.
| Paramètre | Description |
|---|---|
| titre | Le titre de l'épisode. Requis. |
| sous-titre | Le sous-titre de l'épisode. Facultatif. |
| épisode | Le numéro de l'épisode. Requis. Voir plus ci-dessous. |
| description | Une brève description de l'épisode (pas un extrait). Pas obligatoire mais recommandé. |
Lorsque vous numérotez vos épisodes, commencez à 1 (ne commencez pas à 0, cela provoquerait une erreur) et assurez-vous de ne pas doubler les chiffres (cela provoquerait également une erreur). Les épisodes ne doivent également jamais être rares. S'il y a un épisode 1 et un épisode 3, il devrait y avoir un épisode 2 ; cela ne provoquera pas d'erreur, mais cassera probablement le site Web généré.
Les publications « méta » sont des publications spéciales qui existent en dehors de la structure normale des épisodes. Des éléments comme une page À propos, des récapitulatifs, etc. Les méta-messages sont automatiquement ajoutés à la barre latérale sous forme de liens ; cliquer sur ces liens affiche la méta-publication. Pour en créer un, assurez-vous que le paramètre episode dans le texte préliminaire est meta plutôt qu'un nombre. Il existe également un paramètre link supplémentaire qui peut être utilisé pour modifier le texte du lien de la barre latérale ; si un paramètre link n'est pas fourni, le title est utilisé à la place. Si vous définissez le paramètre link sur _ (un seul trait de soulignement) pour empêcher la création d'un lien dans la barre latérale.
---
title: About My Story
link: About
label : Learn more...
subtitle: This is a meta post!
episode: meta
description: Meta posts are awesome!
---
By creating a post and making it's episode property in the header `meta` instead of a number, you can create a *meta post*, which will automatically appear as a link in the sidebar.
Le paramètre label ajoute un attribut de titre (et une "info-bulle") au lien généré dans la barre latérale.
Les paramètres d’une méta-post sont par ailleurs les mêmes que ceux d’un épisode normal. Notez que les titres des méta-posts doivent être uniques ; les épisodes n'ont pas cette limitation (même si c'est sage).
Vous pouvez créer des liens de démarque vers des épisodes spécifiques en créant des liens qui ressemblent à ceci :
[Last week](./?ep=10) our heroes...
Ce qui précède créerait un lien vers l'épisode 10. Pour créer des liens vers des méta-messages, vous devez connaître le titre, qui est normalisé et slugifié (par exemple, tronqué, en minuscules et toutes les valeurs autres que des lettres et des chiffres sont remplacées par tirets). Par exemple, si le paramètre title est ' About ', il devient ./?meta=about , tandis que Where is This Going? deviendrait ./?meta=where-is-this-going- .
Tout ce qui se trouve dans le dossier de sortie ( publish par défaut) est requis pour déployer le site Web. Copiez tous les fichiers sur votre solution d'hébergement pour les déployer.
Quelques thèmes CSS par moi.
Vous pouvez créer un thème en éditant le fichier theme.css dans le répertoire de sortie. Vous pouvez restaurer les valeurs par défaut ou recommencer en supprimant le fichier : un nouveau fichier theme.css vierge sera généré lors de la prochaine construction. Vous pouvez télécharger et installer des thèmes en écrasant le même fichier.
Le projet comprend actuellement trois composants principaux : le package NPM, qui est la Serious CLI ; le référentiel pour le moteur de rendu, les scripts et les styles qui sont servis à l'application Web générée via CDN ; et un référentiel pour les thèmes que j'ai créés. Tous ces composants pourraient nécessiter un peu de rangement, mais l’essentiel est que ces trois éléments sont développés en tandem, mais n’ont pas grand-chose à voir les uns avec les autres sur le plan fonctionnel.
nsfw .
