serious
v1.2.2
Serious は、Web 用のエピソード (または連載) フィクションを構築するためのフレームワークです。マークダウン形式で記述された多数のソース ファイルを取得し、これらのファイルを Web ホストにデプロイできるように、シンプルで構造化された単一ページの Web アプリにコンパイルします。
MITライセンス。
NPM 経由でインストールします: npm install -g serious-fiction
Serious をインストールすると、ストーリーを構築するためのシンプルな CLI にアクセスできるようになります。私は CLI を書くのが初めてなので、皆さんが期待しているほど完全な機能を備えたエクスペリエンスではないかもしれません。
理想的には、空のディレクトリにストーリーを作成する必要があります。開始するには、ディレクトリ内でserious initを実行します。
ストーリーを再構築するにはserious buildを実行し、ローカルで表示するにはserious serve実行します。これら 2 つのコマンド (例: serious build serveまたはserious serve build ) を組み合わせて、ストーリーをすばやく構築して表示できます。また、 serious buildを実行してブラウザのタブを更新すると (場合によってはハード更新が必要になる場合があります。これはCtrl + F5です)、Web サイトを再度提供することなく更新を確認することもできます。
Serious は AJAX を使用するため、localhost 経由で提供する必要がありますindex.htmlファイルを開くだけでは済みません。
serious initを実行すると、 config.jsonファイルがディレクトリに追加されます。将来的には、これを CLI の一部にしたいと考えていますが、現時点では手動で編集する必要があります。デフォルトでは次のようになります。
{
"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 "
}| オプション | デフォルト | 説明 |
|---|---|---|
title | "The Title of Your Story" | これがあなたの物語の名前です。最近のエピソード ページ、エピソード リスト ページ、およびブラウザ タブに表示されます。 Disqus のコメントはタイトルに関連付けられているため、おそらく変更したくないでしょう。 |
displayTitle | "" | 引用符の間に何かを入れると、Disqus のコメントを除いて、ストーリー内のすべてのタイトルが置き換えられます。 |
subtitle | "" | 一部のページでは本編タイトルの下に表示されます。署名欄、サブタイトル、または非常に短い説明として使用できます。 |
description | "A description of your website (for web searches) goes here. | ここに入力した内容はどのページにも表示されませんが、代わりに検索エンジンやソーシャル メディア サイトなどの一部の Web サイトにストーリーへのリンクとともにリストされます。 |
copyright | "© [year] [your name]. All rights reserved." | 著作権表示は、各ページの一番下、 "Powered by Serious."メッセージは。著作権情報には必ずしもこれを使用する必要はありません。 © © (著作権記号) の HTML コードです。 |
posts | "episodes" | このオプションを使用すると、エピソードの投稿を参照するために使用される単語を変更できるため、ニーズに応じてこれを"chapters"や"verses"などの別の単語に変更できます。 |
input | "./src" | これにより、 Serious にconfig.jsonを基準にして投稿を探す場所が指示されます。これにフォルダーを渡すと、投稿に変換するマークダウン ファイル (拡張子.mdを持つ) が再帰的に検索されます。通常、これを変更する必要はありません。すべての投稿をsrcフォルダーに配置するだけです。 |
output | "./publish" | 上記と同様に、これにより、構築されたWeb ページをどこに配置するか、どこから実行するかを Serious に指示します。繰り返しますが、通常はこれを変更する必要はありません。 |
links | ... | このオプションを使用して、サイドバー メニューにリンクを追加できます。各リンクは次のようになります: { "text": "Click here", "url": "www.somesite.com", "label": "this is a tooltip!" } . textプロパティはリンクの表示テキストを制御し、 urlクリックされたときにリンクが移動する場所です。ユーザーがリンク上にマウスを置くと、 labelプロパティがツールチップとして表示されます ( title HTML 属性を使用)。これを使用して、個人のブログ、メイン Web サイト、Patreon などへのリンクを作成できます。 |
recentMax | 5 | これは、Serious が最近のページ (およびランディング ページ) に表示するエピソードの数を制御します。 |
recentsExcerpts | 1 | これは、最近のリストにコンテンツが表示されるエピソードの数を制御します。表示されていないものは、代わりに楕円 (&helli;) を表示します。すべてのコンテンツを表示したい場合は、これをrecentMaxと同じ (またはそれ以上) に設定します。 |
episodesExcerpts | 3 | これは、 recentsExcerptsと同様に、エピソード リストにコンテンツが表示されるエピソードの数を制御します。 |
debug | false | これにより、コンソール ログやその他のものを含むデバッグ機能が有効になります。通常、ほとんどのユーザーにとっては必要ありません。おそらく、デプロイする前に false であることを確認してください。 |
disqusShortname | "" | Disqus を通じてコメントを設定できます。コメント スレッドはすべてのエピソードに追加されますが、メタ投稿やリストなどには追加されません。ここにショートネームを追加するだけで、それ以上の設定は必要ありません。 |
googleAnalytics | "" | 深刻なストーリー用に Google Analytics を設定できます。アカウントを作成し、サイトの URL を入力し、ここにトラッキング ID をコピーして貼り付けるだけです。 |
cookieWarning | true | Cookie Consent によって生成された Cookie 同意警告をプロジェクトに追加します。独自の解決策がある場合、または単に気にしない場合は、これを false に設定できます。 Serious 自体は Cookie を使用せず、Disqus や Google Analytics を使用する場合にのみ Cookie を必要とします。 |
nsfw | false | true の場合、ユーザーに年齢の確認を求める全画面警告ダイアログが追加されます。デフォルトは 18 歳以上です。値を数値 (例: 13または21に変更して、ユーザーが他の年齢を超えているかどうかを確認するように求めることができます。確認したい。 |
version | "latest" | 含める Serious のレンダリング エンジンのバージョン。 「最新」を推奨しますが、別のバージョンを使用する必要がある場合は、ここでタグ付けできます。バージョンのリストについては、以下の変更ログを参照してください。 |
GitHub Flavored Markdown を使用してエピソードを作成できます。各エピソードの先頭には、エピソードを説明する YAML 前付が必要です。
---
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.
| パラメータ | 説明 |
|---|---|
| タイトル | エピソードのタイトル。必須。 |
| 字幕 | エピソードのサブタイトル。オプション。 |
| エピソード | エピソードの番号。必須。詳細は以下を参照してください。 |
| 説明 | エピソードの簡単な説明 (抜粋ではありません)。必須ではありませんが、お勧めします。 |
エピソードに番号を付けるときは、 1 から始めて(0 から始めないでください。エラーが発生します)、番号が 2 倍にならないようにしてください (これもエラーが発生します)。エピソードも決してまばらであってはなりません。エピソード 1 とエピソード 3 がある場合は、エピソード 2 もあるはずです。これによってエラーは発生しませんが、生成された Web サイトが壊れる可能性があります。
「メタ」投稿は、通常のエピソード構造の外側に存在する特別な投稿です。 About ページや要約など。メタ投稿はサイドバーにリンクとして自動的に追加されます。これらのリンクをクリックすると、メタ投稿がレンダリングされます。作成するには、前付のepisodeパラメータが数値ではなくmetaあることを確認してください。サイドバーのリンク テキストを変更するために使用できる追加のlinkパラメーターもあります。 linkパラメータが指定されていない場合は、代わりにtitleが使用されます。 linkパラメータを_ (単一のアンダースコア) に設定すると、サイドバーのリンクがまったく作成されなくなります。
---
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.
labelパラメーターは、サイドバーに生成されたリンクにタイトル属性 (および「ツールヒント」) を追加します。
それ以外の場合、メタ投稿のパラメーターは通常のエピソードと同じです。メタ投稿のタイトルは一意である必要があることに注意してください。エピソードにはこの制限がありません (賢明ではありますが)。
次のようなリンクを作成することで、特定のエピソードへのマークダウン リンクを作成できます。
[Last week](./?ep=10) our heroes...
上記はエピソード 10 へのリンクを作成します。メタ投稿へのリンクを作成するには、正規化されスラッグ化されたタイトルを知る必要があります (例: トリミングされ、小文字になり、文字と数字以外の値はすべて次のように置き換えられます)。ダッシュ)。たとえば、 titleパラメータが「 About 」の場合、 ./?meta=aboutになりますが、 Where is This Going? ./?meta=where-is-this-going-になります。
Web サイトを展開するには、出力フォルダー (デフォルトではpublish ) 内のすべてが必要です。すべてのファイルをホスティング ソリューションにコピーして展開します。
私が作成したいくつかの CSS テーマ。
出力ディレクトリ内のtheme.cssファイルを編集してテーマを作成できます。デフォルトに戻すか、ファイルを削除して最初からやり直すことができます。次回ビルドするときに、新しい空のtheme.cssファイルが生成されます。同じファイルを上書きすることで、テーマをダウンロードしてインストールできます。
現在、このプロジェクトには 3 つの主要なコンポーネントがあります。1 つは NPM パッケージで、これは Serious CLI です。 CDN 経由で生成された Web アプリに提供されるレンダリング エンジン、スクリプト、スタイルのリポジトリ。そして私が作成したテーマのリポジトリ。これらのコンポーネントはすべて、ある程度整理する必要がありますが、要点は、これら 3 つが並行して開発されているものの、機能的には相互にほとんど関係がないということです。
nsfw config 設定を追加しました。
