جاد هو إطار لبناء خيال عرضي (أو متسلسل) للويب. يتطلب الأمر عددًا من الملفات المصدر ، المكتوبة بتنسيق Markdown ، وتجمع هذه الملفات في تطبيق ويب واحد بسيط ومنظم لك لن تنشره على Webhost.
رخصة معهد ماساتشوستس للتكنولوجيا.
التثبيت عبر NPM: npm install -g serious-fiction
يمنحك تثبيت جدي الوصول إلى CLI بسيط لبناء قصصك. أنا جديد في كتابة Clis ، لذلك قد لا تكون تجربة كاملة كما قد تتوقع.
يجب عليك إنشاء قصتك بشكل مثالي في دليل فارغ. تشغيل serious init
في الدليل للبدء.
قم بتشغيل serious build
لإعادة بناء قصتك ، serious serve
في مشاهدتها محليًا. يمكنك الجمع بين هذين الأمرين (مثل serious build serve
أو serious serve build
) لبناء القصة وعرضها بسرعة. يمكنك أيضًا تشغيل علامة تبويب serious build
وتحديثها (قد تحتاج إلى تحديث صعب في بعض الأحيان ، وهو Ctrl + F5
) لمشاهدة التحديثات دون الحاجة إلى خدمة موقع الويب مرة أخرى.
يستخدم جاد 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. | لا يظهر ما تضعه هنا في أي صفحات ، ولكنه مدرج بدلاً من ذلك على بعض مواقع الويب ، مثل محركات البحث أو مواقع التواصل الاجتماعي ، إلى جانب روابط للقصة. |
copyright | "© [year] [your name]. All rights reserved." | يمكن عرض إشعار حقوق الطبع والنشر في الجزء السفلي من كل صفحة ، فوق المكان الذي "Powered by Serious." الرسالة. ليس عليك بالضرورة استخدام هذا لمعلومات حقوق الطبع والنشر. © هو رمز HTML لـ © (رمز حقوق الطبع والنشر). |
posts | "episodes" | يمكن استخدام هذا الخيار لتغيير الكلمة المستخدمة للإشارة إلى منشورات الحلقة الخاصة بك ، بحيث يمكنك تغيير هذا إلى شيء آخر ، مثل "chapters" أو "verses" ، بناءً على احتياجاتك. |
input | "./src" | هذا يخبر جاد أين تبحث عن مشاركاتك ، نسبة إلى config.json . تمرير مجلد وسيقوم بالبحث بشكل متكرر عن ملفات Markdown (التي لديها امتداد .md ) لتحويل إلى منشورات. بشكل عام ، يجب ألا تحتاج إلى تغيير هذا ، فقط ضع جميع مشاركاتك في مجلد src . |
output | "./publish" | على غرار ما سبق ، هذا يخبر جديًا مكان وضع صفحة الويب الخاصة بك المدمج ، ومن أين تديرها. مرة أخرى ، لا تحتاج عمومًا إلى تغيير هذا. |
links | ... | يمكنك إضافة روابط إلى قائمة الشريط الجانبي باستخدام هذا الخيار. يجب أن يبدو كل رابط مثل هذا: { "text": "Click here", "url": "www.somesite.com", "label": "this is a tooltip!" } . تتحكم خاصية text في نص عرض الرابط ، وعنوان url هو المكان الذي يذهب فيه الرابط عند النقر عليه. يظهر propery label كملالية أدوات عندما يحوم المستخدم الماوس على الرابط (باستخدام سمة HTML title ). يمكنك استخدام هذا لإنشاء روابط لك المدونة الشخصية ، موقع الويب الرئيسي ، Patreon ، إلخ. |
recentMax | 5 | يتحكم هذا في عدد الحلقات الخطيرة على صفحة Recents (والصفحة المقصودة). |
recentsExcerpts | 1 | يتحكم هذا في عدد الحلقات في قائمة Recents التي تظهر محتواها. أولئك الذين لم يظهروا يظهرون القطع الناقص بدلاً من ذلك (& helli ؛). إذا كنت تريد عرض جميع المحتوى ، فقم بتعيين هذا مساوٍ لـ (أو أعلى من) recentMax . |
episodesExcerpts | 3 | يتحكم هذا في عدد الحلقات الموجودة في قائمة الحلقة التي تم عرض محتواها ، على غرار recentsExcerpts . |
debug | false | هذا يدير ميزات التصحيح ، بما في ذلك سجلات وحدة التحكم والأشياء الأخرى. عمومًا غير مطلوبة لمعظم المستخدمين. ربما تأكد من أنها خاطئة قبل النشر. |
disqusShortname | "" | يمكنك إعداد تعليقات من خلال Disqus. سيتم إضافة مؤشر ترابط التعليق إلى كل حلقة ، ولكن ليس لمشاركات التعريف ، والقوائم ، وما إلى ذلك. |
googleAnalytics | "" | يمكنك إعداد Google Analytics لقصتك الخطيرة. ما عليك سوى إنشاء حساب ، وأدخل عنوان URL لموقعك ، ونسخ معرف التتبع هنا. |
cookieWarning | true | يضيف تحذيرًا من موافقة ملفات تعريف الارتباط التي تم إنشاؤها على ملف تعريف الارتباط. إذا كان لديك الحل الخاص بك ، أو لا تهتم فقط ، فيمكنك ضبط هذا على خطأ. لا تستخدم خطيرة نفسها ملفات تعريف الارتباط ، فهذا يتطلب منها فقط إذا كنت تستخدم Disqus و/أو Google Analytics. |
nsfw | false | إذا كان هذا صحيحًا ، يضيف مربع حوار تحذير 21 الشاشة يطلب من المستخدم تأكيد عمره 13 وأكثر من 18 ترغب في التحقق. |
version | "latest" | نسخة من محرك تقديم جاد ليشمل. يوصى بـ "الأحدث" ، ولكن إذا كنت بحاجة إلى استخدام إصدار مختلف ، فيمكنك وضع علامة عليه هنا. انظر changelog أدناه للحصول على قائمة الإصدارات. |
يمكنك كتابة الحلقات باستخدام 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 ، وسوف يسبب خطأً) ، وتأكد من عدم الضعف على أي أرقام (سيتسبب أيضًا في حدوث خطأ). يجب أن تكون الحلقات أيضًا متفرقًا أبدًا . إذا كانت هناك حلقة 1 وحلقة 3 ، فيجب أن يكون هناك حلقة 2 ؛ لن يتسبب هذا في حدوث خطأ ، ولكن من المحتمل أن يكسر موقع الويب الذي تم إنشاؤه.
منشورات "Meta" هي منشورات خاصة موجودة خارج بنية الحلقة العادية. تتم إضافة أشياء مثل صفحة عن حول حول ، إلخ. تتم إضافة منشورات التعريف تلقائيًا إلى الشريط الجانبي كروابط ؛ النقر فوق هذه الروابط يجعل منشور التعريف. لإنشاء واحدة ، تأكد من أن معلمة 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
سمة العنوان (و "Tooltip") إلى الرابط الذي تم إنشاؤه في الشريط الجانبي.
معلمات منشور meta هي نفسها مثل الحلقة العادية. لاحظ أن عناوين منشورات التعريف يجب أن تكون فريدة من نوعها ؛ الحلقات ليس لديها هذا القيد (على الرغم من أنه من الحكمة).
يمكنك إنشاء روابط Markdown إلى حلقات محددة من خلال إنشاء روابط تبدو مثل هذا:
[Last week](./?ep=10) our heroes...
ستنشئ ما سبق رابطًا إلى الحلقة 10. لإنشاء روابط إلى منشورات التعريف ، تحتاج إلى معرفة العنوان ، الذي يتم تطبيعه وتبحيفه (على سبيل المثال ، يتم استبدال قيم جميع القيم غير المرتبطة بالرقم (على سبيل المثال) شرطات). على سبيل المثال ، إذا كانت معلمة title
" About
" ، فإنها تصبح ./?meta=about
، في حين Where is This Going?
./?meta=where-is-this-going-
.
مطلوب كل شيء في مجلد الإخراج ( publish
افتراضيًا) لنشر الموقع. انسخ جميع الملفات إلى حل الاستضافة الخاص بك للنشر.
بعض موضوعات CSS قبلي.
يمكنك إنشاء سمة عن طريق تحرير ملف theme.css
في دليل الإخراج. يمكنك استعادة الإعدادات الافتراضية أو البدء من جديد عن طريق حذف الملف-سيتم إنشاء ملف NEW ، FLANCH theme.css
في المرة القادمة التي تقوم فيها بإنشاء. يمكنك تنزيل وتثبيت السمات عن طريق الكتابة فوق الملف نفسه.
يوجد حاليًا ثلاثة مكونات رئيسية للمشروع: حزمة NPM ، وهي CLI الخطيرة ؛ مستودع محرك التقديم والبرامج النصية والأنماط التي يتم تقديمها في تطبيق الويب الذي تم إنشاؤه عبر CDN ؛ ومستودع للمواضيع التي صنعتها. يمكن أن تفعل كل هذه المكونات مع بعض الترتيب ، ولكن جوهرها هو أن هذه الأشياء الثلاثة يتم تطويرها جنبًا إلى جنب ، ولكن ليس لها علاقة مع بعضها البعض وظيفيًا.
nsfw
.