serious
v1.2.2
Serious es un marco para construir ficción episódica (o serializada) para la web. Toma varios archivos fuente, escritos en formato Markdown, y los compila en una aplicación web simple y estructurada de una sola página para que usted pueda implementarla en su servidor web.
Licencia MIT.
Instalar a través de NPM: npm install -g serious-fiction
La instalación de Serious le brinda acceso a una CLI simple para crear sus historias. Soy nuevo en la escritura de CLI, por lo que puede que no sea una experiencia con todas las funciones que cabría esperar.
Lo ideal sería crear su historia en un directorio vacío. Ejecute serious init en el directorio para comenzar.
Ejecute serious build para reconstruir su historia y serious serve para verla localmente. Puede combinar estos dos comandos (por ejemplo, serious build serve o serious serve build ) para crear y ver rápidamente la historia. También puede ejecutar serious build y actualizar la pestaña de su navegador (es posible que a veces necesite una actualización completa, que es Ctrl + F5 ) para ver las actualizaciones sin necesidad de volver a publicar el sitio web.
Serious usa AJAX, por lo que debe servirlo a través de localhost, no puede simplemente abrir el archivo index.html .
Cuando ejecutas serious init , se agregará un archivo config.json a tu directorio. En el futuro, espero que esto forme parte de la CLI, pero por ahora, tendrás que editarlo a mano. Tiene este aspecto por defecto:
{
"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 "
}| Opción | Por defecto | Descripción |
|---|---|---|
title | "The Title of Your Story" | Este es el nombre de tu historia. Aparece en la página de episodios recientes y en la página de lista de episodios, y en la pestaña del navegador. Los comentarios de Disqus están vinculados al título, por lo que probablemente no querrás cambiarlo. |
displayTitle | "" | Si pones algo aquí entre comillas, reemplazará tu título en todas partes de tu historia, excepto en los comentarios de Disqus. |
subtitle | "" | Esto aparece debajo del título de la historia principal en algunas páginas. Puedes usarlo como firma, subtítulo o una descripción muy breve. |
description | "A description of your website (for web searches) goes here. | Lo que ingresas aquí no aparece en ninguna página, sino que aparece en algunos sitios web, como motores de búsqueda o sitios de redes sociales, junto con enlaces a la historia. |
copyright | "© [year] [your name]. All rights reserved." | Se puede mostrar un aviso de derechos de autor en la parte inferior de cada página, justo encima de "Powered by Serious." mensaje es. No es necesario que utilice esto para obtener información sobre derechos de autor. © es el código html para © (el símbolo de copyright). |
posts | "episodes" | Esta opción se puede usar para cambiar la palabra utilizada para referirse a las publicaciones de tus episodios, de modo que puedas cambiarla por otra, como "chapters" o "verses" , según tus necesidades. |
input | "./src" | Esto le indica a Serious dónde buscar sus publicaciones, en relación con config.json . Pásele una carpeta y buscará recursivamente archivos de rebajas (que tienen la extensión .md ) para convertirlos en publicaciones. Generalmente, no deberías necesitar cambiar esto, simplemente coloca todas tus publicaciones en la carpeta src . |
output | "./publish" | De manera similar a lo anterior, esto le indica a Serious dónde colocar su página web creada y desde dónde ejecutarla. Nuevamente, generalmente no es necesario cambiar esto. |
links | ... | Puede agregar enlaces al menú de la barra lateral usando esta opción. Cada enlace debería verse así: { "text": "Click here", "url": "www.somesite.com", "label": "this is a tooltip!" } . La propiedad text controla el texto que se muestra del enlace y la url es a donde va el enlace cuando se hace clic. La propiedad label aparece como información sobre herramientas cuando un usuario pasa el mouse sobre el enlace (usando el atributo html title ). Puede utilizar esto para crear enlaces a su blog personal, sitio web principal, Patreon, etc. |
recentMax | 5 | Esto controla cuántos episodios Serious muestra en la página de recientes (y en la página de inicio). |
recentsExcerpts | 1 | Esto controla cuántos episodios de la lista reciente muestran su contenido. Los que no se muestran muestran una elipse (&helli;). Si desea que se muestre todo el contenido, configúrelo igual a (o superior a) recentMax . |
episodesExcerpts | 3 | Esto controla cuántos episodios de la lista de episodios muestran su contenido, similar a recentsExcerpts . |
debug | false | Esto activa las funciones de depuración, incluidos los registros de la consola y otras cosas. Generalmente no es necesario para la mayoría de los usuarios. Probablemente asegúrese de que sea falso antes de implementarlo. |
disqusShortname | "" | Puede configurar comentarios a través de Disqus. Se agregará un hilo de comentarios a cada episodio, pero no a las meta publicaciones, listas, etc. Simplemente agregue su nombre corto aquí, ¡no es necesaria ninguna configuración adicional! |
googleAnalytics | "" | Puede configurar Google Analytics para su historia seria. Simplemente cree una cuenta, ingrese la URL de su sitio y copie y pegue el ID de seguimiento aquí. |
cookieWarning | true | Agrega una advertencia de consentimiento de cookies generada por el Consentimiento de cookies a su proyecto. Si tiene su propia solución, o simplemente no le importa, puede configurarla como falsa. Serious en sí no utiliza cookies, sólo las requiere si utilizas Disqus y/o Google Analytics. |
nsfw | false | Si es verdadero, agrega un cuadro de diálogo de advertencia de pantalla completa que le pide al usuario que confirme su edad; el valor predeterminado es mayor de 18. Puede cambiar el valor a un número, por ejemplo, 13 o 21 para pedirle al usuario que confirme que tiene más de otras edades. desea comprobar. |
version | "latest" | La versión del motor de renderizado de Serious que se incluirá. Se recomienda "más reciente", pero si necesita utilizar una versión diferente, puede etiquetarla aquí. Consulte el registro de cambios a continuación para obtener una lista de versiones. |
Puedes escribir episodios usando GitHub Flavored Markdown. En la parte superior de cada episodio, debes tener el texto frontal de YAML para describir el episodio:
---
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.
| Parámetro | Descripción |
|---|---|
| título | El título del episodio. Requerido. |
| subtitular | El subtítulo del episodio. Opcional. |
| episodio | El número del episodio. Requerido. Ver más a continuación. |
| descripción | Una breve descripción del episodio (no un extracto). No es obligatorio pero sí recomendado. |
Al numerar sus episodios, comience en 1 (no comience en 0, causará un error) y asegúrese de no duplicar ningún número (también causará un error). Los episodios tampoco deberían ser nunca escasos. Si hay un episodio 1 y un episodio 3, debería haber un episodio 2; Esto no causará un error, pero probablemente dañará el sitio web generado.
Las publicaciones "meta" son publicaciones especiales que existen fuera de la estructura normal del episodio. Cosas como una página Acerca de, resúmenes, etc. Las meta publicaciones se agregan automáticamente a la barra lateral como enlaces; Al hacer clic en estos enlaces, se muestra la meta publicación. Para crear uno, asegúrese de que el parámetro episode en la portada sea meta en lugar de un número. También hay un parámetro link adicional que se puede utilizar para cambiar el texto del enlace de la barra lateral; Si no se proporciona un parámetro link , se utiliza el title en su lugar. Si establece el parámetro link en _ (un guión bajo único) para evitar que se cree un enlace de barra lateral.
---
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.
El parámetro label agrega un atributo de título (y "información sobre herramientas") al enlace generado en la barra lateral.
Por lo demás, los parámetros de una meta publicación son los mismos que los de un episodio normal. Tenga en cuenta que los títulos de las meta publicaciones deben ser únicos; Los episodios no tienen esta limitación (aunque es prudente).
Puede crear enlaces de rebajas a episodios específicos creando enlaces como este:
[Last week](./?ep=10) our heroes...
Lo anterior crearía un enlace al episodio 10. Para crear enlaces a meta publicaciones, necesita conocer el título, que está normalizado y simplificado (por ejemplo, recortado, en minúsculas y todos los valores que no son letras ni números se reemplazan con guiones). Por ejemplo, si el parámetro title es ' About de' se convierte en ./?meta=about , mientras que Where is This Going? se convertiría en ./?meta=where-is-this-going- .
Todo lo que está en la carpeta de salida ( publish de forma predeterminada) es necesario para implementar el sitio web. Copie todos los archivos a su solución de alojamiento para implementarlos.
Algunos temas CSS hechos por mí.
Puede crear un tema editando el archivo theme.css en el directorio de salida. Puede restaurar los valores predeterminados o comenzar de nuevo eliminando el archivo; la próxima vez que cree, se generará un nuevo archivo theme.css en blanco. Puede descargar e instalar temas sobrescribiendo el mismo archivo.
Actualmente, el proyecto tiene tres componentes principales: el paquete NPM, que es Serious CLI; el repositorio para el motor de renderizado, scripts y estilos que se entregan a la aplicación web generada a través de CDN; y un repositorio para los temas que he creado. A todos estos componentes les vendría bien un poco de orden, pero la esencia es que estas tres cosas se están desarrollando en conjunto, pero tienen poco que ver entre sí funcionalmente.
nsfw .
