serious
v1.2.2
Sério é uma estrutura para a construção de ficção episódica (ou serializada) para a web. É necessário vários arquivos de origem, escritos no formato de Markdown, e compila esses arquivos em um aplicativo da Web simples e sructuno de uma página única para você implantar no seu WebHost.
MIT Licença.
Instale via npm: npm install -g serious-fiction
A instalação séria oferece acesso a uma CLI simples para construir suas histórias. Eu sou novo em escrever clis, por isso pode não ser uma experiência tão totalmente feita quanto você poderia esperar.
Idealmente, você deve criar sua história em um diretório vazio. Execute serious init no diretório para começar.
Faça serious build para reconstruir sua história e serious serve para vê -la localmente. Você pode combinar esses dois comandos (por exemplo serious build serve ou serious serve build ) para construir rapidamente e ver a história. Você também pode executar a guia serious build e atualizar o navegador (às vezes pode precisar atualizar difíceis, que é Ctrl + F5 ) para ver as atualizações sem precisar servir o site novamente.
Sério, usa o Ajax, então você precisa servir via localhost, você não pode simplesmente abrir o arquivo index.html .
Quando você executa serious init , um arquivo config.json será adicionado ao seu diretório. No futuro, espero fazer essa parte da CLI, mas, por enquanto, você precisará editá -lo manualmente. Parece isso por padrão:
{
"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 "
}| Opção | Padrão | Descrição |
|---|---|---|
title | "The Title of Your Story" | Este é o nome da sua história. Aparece na página de episódios recentes e na página da lista de episódios e na guia Browser. Os comentários do DISQUS são digitados para o título, então você provavelmente não vai querer alterá -lo. |
displayTitle | "" | Se você colocar algo aqui entre as cotações, ele substituirá seu título em todos os lugares da sua história, para os comentários do Disqus. |
subtitle | "" | Isso aparece abaixo do título principal da história em algumas páginas. Você pode usá -lo como uma assinatura, uma legenda ou uma descrição realmente curta. |
description | "A description of your website (for web searches) goes here. | O que você coloca aqui não aparece em nenhuma página, mas é listado em alguns sites, como mecanismos de pesquisa ou sites de mídia social, juntamente com links para a história. |
copyright | "© [year] [your name]. All rights reserved." | Um aviso de direitos autorais pode ser exibido na parte inferior de todas as páginas, logo acima de onde "Powered by Serious." a mensagem é. Você não precisa necessariamente usar isso para informações de direitos autorais. © é o código HTML para © (o símbolo de direitos autorais). |
posts | "episodes" | Essa opção pode ser usada para alterar a palavra usada para se referir às suas postagens de episódio, para que você possa alterar isso para outra coisa, como "chapters" ou "verses" , com base nas suas necessidades. |
input | "./src" | Isso diz a sério onde procurar suas postagens, em relação ao config.json . Passe uma pasta e ela o pesquisará recursivamente por arquivos de marcação (que têm a extensão .md ) para se transformar em postagens. Geralmente, você não precisa alterar isso, basta colocar todas as suas postagens na pasta src . |
output | "./publish" | Semelhante ao acima, isso diz a sério onde colocar sua página da web construída e de onde executá -la. Novamente, você geralmente não precisa mudar isso. |
links | ... | Você pode adicionar links ao menu da barra lateral usando esta opção. Cada link deve ser assim: { "text": "Click here", "url": "www.somesite.com", "label": "this is a tooltip!" } . A propriedade text controla o texto de exibição do link e o url é onde o link vai quando clicado. A propriedade label aparece como uma dica de ferramenta quando um usuário paira o mouse sobre o link (usando o atributo HTML title ). Você pode usar isso para criar links para seu blog pessoal, site principal, patreon, etc. |
recentMax | 5 | Isso controla quantos episódios são programas sérios na página de recentes (e na página de destino). |
recentsExcerpts | 1 | Isso controla quantos episódios na lista de recentes têm seu conteúdo mostrado. Aqueles que não são mostrados mostram uma elipse (& helli;). Se você deseja que todo o conteúdo seja mostrado, defina isso igual a (ou superior) recentMax . |
episodesExcerpts | 3 | Isso controla quantos episódios na lista de episódios têm seu conteúdo mostrado, semelhante ao recentsExcerpts . |
debug | false | Isso ativa os recursos de depuração, incluindo registros de console e outras coisas. Geralmente não é necessário para a maioria dos usuários. Provavelmente verifique se é falso antes de implantar. |
disqusShortname | "" | Você pode configurar comentários através do Disqus. Um tópico de comentário será adicionado a todos os episódios, mas não a meta postagens, listas, etc. Basta adicionar seu shortname aqui, nenhuma configuração adicional é necessária! |
googleAnalytics | "" | Você pode configurar o Google Analytics para sua história séria. Basta criar uma conta, inserir o URL do seu site e copiar e colar o ID de rastreamento aqui. |
cookieWarning | true | Adiciona um aviso de consentimento de cookies gerado por consentimento de biscoitos para você. Se você tiver sua própria solução, ou simplesmente não se importa, pode definir isso como falso. O próprio sério não usa cookies, só requer se você usar o Disqus e/ou o Google Analytics. |
nsfw | false | Se verdadeiro, adiciona uma caixa de diálogo de aviso de tela cheia solicitando ao usuário que confirme sua idade, padrão para mais de 18 anos. Você pode alterar o valor para um número, por exemplo, 13 ou 21 para pedir ao usuário para confirmar que eles estão em outras idades que você pode Deseja verificar. |
version | "latest" | A versão do mecanismo de renderização do Sério para incluir. "mais recente" é recomendado, mas se você precisar usar uma versão diferente, poderá marcar aqui. Veja o Changelog abaixo para obter uma lista de versões. |
Você pode escrever episódios usando o Markdown com sabor do Github. No topo de cada episódio, você deve ter o assunto da frente para descrever o episódio:
---
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 | Descrição |
|---|---|
| título | O título do episódio. Obrigatório. |
| Legenda | A legenda do episódio. Opcional. |
| episódio | O número do episódio. Obrigatório. Veja mais abaixo. |
| descrição | Uma breve descrição do episódio (não um trecho). Não é necessário, mas recomendado. |
Ao numerar seus episódios, comece em 1 (não comece em 0, isso causará um erro) e não duplique em nenhum número (também causará um erro). Os episódios também nunca devem ser escassos. Se houver um episódio 1 e um episódio 3, deve haver um episódio 2; Isso não causará um erro, mas provavelmente quebrará o site gerado.
Postagens "Meta" são postagens especiais que existem fora da estrutura normal do episódio. Coisas como uma página, recapitulações, etc. As meta -postagens são adicionadas automaticamente à barra lateral como links; Clicar nesses links renderiza o meta -post. Para criar um, verifique se o parâmetro episode no assunto da frente é meta e não um número. Há também um parâmetro link adicional que pode ser usado para alterar o texto do link da barra lateral; Se um parâmetro link não for fornecido, o title será usado. Se você definir o parâmetro link como _ (um único sublinhado) para impedir que um link da barra lateral seja criado.
---
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.
O parâmetro label adiciona um atributo de título (e "ToolTip") ao link gerado na barra lateral.
Os parâmetros de um meta post são os mesmos que um episódio normal. Observe que os títulos de meta posts devem ser únicos; Os episódios não têm essa limitação (embora seja sábia).
Você pode criar links de marcação para episódios específicos, criando links que se parecem com o seguinte:
[Last week](./?ep=10) our heroes...
O exposto acima criaria um link para o episódio 10. Para criar links para meta posts, você precisa saber o título, que é normalizado e lisado (por exemplo, aparado, de baixa cálculo e todos os valores que não-letra e não-número são substituídos por traços). Por exemplo, se o parâmetro title estiver ' About ', ele se torna ./?meta=about , enquanto Where is This Going? tornaria-se ./?meta=where-is-this-going- .
Tudo na pasta de saída ( publish por padrão) é necessária para implantar o site. Copie todos os arquivos para a sua solução de hospedagem para implantar.
Alguns temas do CSS por mim.
Você pode criar um tema editando o arquivo theme.css no diretório de saída. Você pode restaurar os padrões ou iniciar a exclusão do arquivo-um novo arquivo em branco theme.css será gerado na próxima vez que você for construído. Você pode baixar e instalar temas substituindo o mesmo arquivo.
Atualmente, existem três componentes principais no projeto: o pacote NPM, que é a CLI grave; o repositório para o mecanismo de renderização, scripts e estilos que são servidos ao aplicativo da web gerado via CDN; e um repositório para os temas que fiz. Todos esses componentes poderiam fazer com algumas arrumações, mas a essência é que essas três coisas estão sendo desenvolvidas em conjunto, mas têm pouco a ver um com o outro funcionalmente.
nsfw .
