serious
v1.2.2
Serious เป็นเฟรมเวิร์กสำหรับการสร้างนิยายแบบเป็นตอน (หรือต่อเนื่องกัน) สำหรับเว็บ ต้องใช้ไฟล์ต้นฉบับจำนวนหนึ่งซึ่งเขียนในรูปแบบมาร์กดาวน์ และรวบรวมไฟล์เหล่านี้ให้เป็นเว็บแอปหน้าเดียวที่มีโครงสร้างเรียบง่ายเพื่อให้คุณปรับใช้กับเว็บโฮสต์ของคุณได้
ใบอนุญาตเอ็มไอที
ติดตั้งผ่าน NPM: npm install -g serious-fiction
การติดตั้ง Serious ช่วยให้คุณเข้าถึง CLI ง่ายๆ เพื่อสร้างเรื่องราวของคุณด้วย ฉันเพิ่งหัดเขียน CLI ดังนั้นจึงอาจไม่ได้มีคุณสมบัติครบถ้วนเท่าที่คุณคาดหวัง
คุณควรสร้างเรื่องราวของคุณในไดเรกทอรีว่าง รัน 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" | นี่คือชื่อเรื่องราวของคุณ โดยจะปรากฏบนหน้าตอนล่าสุดและหน้ารายการตอน และในแท็บเบราว์เซอร์ ความคิดเห็นที่ขัดแย้งกันนั้นมีความสำคัญอยู่ที่ชื่อเรื่อง ดังนั้นคุณจึงคงไม่ต้องการเปลี่ยนแปลงมัน |
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" | สิ่งนี้จะบอก Serious ว่าจะค้นหาโพสต์ของคุณจากที่ไหน สัมพันธ์กับ config.json ส่งโฟลเดอร์เข้าไปแล้วมันจะค้นหาไฟล์มาร์กดาวน์ซ้ำๆ (ซึ่งมีนามสกุล .md ) เพื่อเปลี่ยนเป็นโพสต์ โดยทั่วไป คุณไม่จำเป็นต้องเปลี่ยนแปลงสิ่งนี้ เพียงแค่วางโพสต์ทั้งหมดของคุณไว้ในโฟลเดอร์ src |
output | "./publish" | เช่นเดียวกับที่กล่าวมาข้างต้น สิ่งนี้จะบอก Serious ว่าคุณจะวางหน้าเว็บที่คุณ สร้างขึ้น ไว้ที่ไหน และจะเรียกใช้จากที่ไหน โดยทั่วไปคุณไม่จำเป็นต้องเปลี่ยนแปลงสิ่งนี้ |
links | ... | คุณสามารถเพิ่มลิงก์ไปยังเมนูแถบด้านข้างได้โดยใช้ตัวเลือกนี้ แต่ละลิงก์ควรมีลักษณะดังนี้: { "text": "Click here", "url": "www.somesite.com", "label": "this is a tooltip!" } . คุณสมบัติ text ควบคุมข้อความที่แสดงของลิงก์ และ url คือตำแหน่งที่ลิงก์ไปเมื่อคลิก คุณสมบัติ label จะปรากฏเป็นคำแนะนำเครื่องมือเมื่อผู้ใช้วางเมาส์เหนือลิงก์ (โดยใช้แอตทริบิวต์ title html) คุณสามารถใช้สิ่งนี้เพื่อสร้างลิงก์ไปยังบล็อกส่วนตัว เว็บไซต์หลัก Patreon ฯลฯ |
recentMax | 5 | วิธีนี้จะควบคุมจำนวนตอนที่แสดงอย่างจริงจังในหน้าล่าสุด (และหน้า Landing Page) |
recentsExcerpts | 1 | วิธีนี้จะควบคุมจำนวนตอนในรายการล่าสุดที่แสดงเนื้อหา ส่วนที่ไม่แสดงจะแสดงวงรีแทน (&helli;) หากคุณต้องการให้เนื้อหาทั้งหมดแสดง ให้ตั้งค่านี้เท่ากับ (หรือสูงกว่า) recentMax |
episodesExcerpts | 3 | วิธีนี้จะควบคุมจำนวนตอนในรายการตอนที่มีเนื้อหาแสดง คล้ายกับ recentsExcerpts |
debug | false | การดำเนินการนี้จะเปิดฟีเจอร์การแก้ไขข้อบกพร่อง รวมถึงบันทึกของคอนโซลและสิ่งอื่นๆ โดยทั่วไปแล้วไม่จำเป็นสำหรับผู้ใช้ส่วนใหญ่ อาจตรวจสอบให้แน่ใจว่าเป็นเท็จก่อนที่จะปรับใช้ |
disqusShortname | "" | คุณสามารถตั้งค่าความคิดเห็นผ่าน Disqus กระทู้ความคิดเห็นจะถูกเพิ่มในทุกตอน แต่จะไม่รวมในเมตาโพสต์ รายการ ฯลฯ เพียงเพิ่มชื่อย่อของคุณที่นี่ ไม่จำเป็นต้องกำหนดค่าเพิ่มเติม! |
googleAnalytics | "" | คุณสามารถตั้งค่า Google Analytics สำหรับเรื่องราวที่จริงจังของคุณได้ เพียงสร้างบัญชี ป้อน URL ของไซต์ของคุณ จากนั้นคัดลอกและวางรหัสติดตามที่นี่ |
cookieWarning | true | เพิ่มคำเตือนการยินยอมคุกกี้ที่สร้างโดยความยินยอมของคุกกี้ให้กับโครงการของคุณ หากคุณมีวิธีแก้ปัญหาของตัวเองหรือไม่สนใจ คุณสามารถตั้งค่านี้เป็นเท็จได้ Serious เองไม่ได้ใช้คุกกี้ แต่ต้องใช้คุกกี้หากคุณใช้ Disqus และ/หรือ Google Analytics เท่านั้น |
nsfw | false | หากเป็นจริง จะเพิ่มกล่องโต้ตอบคำเตือนแบบเต็มหน้าจอเพื่อขอให้ผู้ใช้ยืนยันอายุ โดยค่าเริ่มต้นคืออายุมากกว่า 18 ปี คุณสามารถเปลี่ยนค่าเป็นตัวเลขได้ เช่น 13 หรือ 21 เพื่อขอให้ผู้ใช้ยืนยันว่ามีอายุเกินอายุอื่นที่คุณอาจ ต้องการตรวจสอบ |
version | "latest" | เวอร์ชันของเอ็นจิ้นการเรนเดอร์ของ Serious ที่จะรวมไว้ด้วย แนะนำให้ใช้ "ล่าสุด" แต่ถ้าคุณต้องการใช้เวอร์ชันอื่น คุณสามารถแท็กได้ที่นี่ ดูบันทึกการเปลี่ยนแปลงด้านล่างเพื่อดูรายการเวอร์ชัน |
คุณสามารถเขียนตอนต่างๆ ได้โดยใช้ GitHub Flavoured 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 จะเพิ่มแอตทริบิวต์ชื่อ (และ "คำแนะนำเครื่องมือ") ให้กับลิงก์ที่สร้างขึ้นในแถบด้านข้าง
พารามิเตอร์ของโพสต์เมตาจะเหมือนกับตอนปกติ โปรดทราบว่าชื่อของโพสต์เมตาไม่ควรซ้ำกัน ตอนไม่มีข้อจำกัดนี้ (แม้ว่าจะฉลาดก็ตาม)
คุณสามารถสร้างลิงก์มาร์กดาวน์ไปยังตอนที่ต้องการได้โดยสร้างลิงก์ที่มีลักษณะดังนี้:
[Last week](./?ep=10) our heroes...
ข้อความข้างต้นจะสร้างลิงก์ไปยังตอนที่ 10 หากต้องการสร้างลิงก์ไปยังโพสต์เมตา คุณต้องทราบชื่อเรื่องซึ่งมีการทำให้เป็นมาตรฐานและถูกทำให้เป็นมาตรฐาน (เช่น ตัดขอบ ตัวพิมพ์เล็ก และค่าที่ไม่ใช่ตัวอักษรและตัวเลขทั้งหมดจะถูกแทนที่ด้วย ขีดกลาง) ตัวอย่างเช่น หากพารามิเตอร์ title เป็น ' About ' จะกลายเป็น ./?meta=about ในขณะที่ Where is This Going? ./?meta=where-is-this-going- จะกลายเป็น
ทุกอย่างในโฟลเดอร์เอาท์พุต ( publish ตามค่าเริ่มต้น) จำเป็นต้องปรับใช้เว็บไซต์ คัดลอกไฟล์ทั้งหมดไปยังโซลูชันโฮสติ้งของคุณเพื่อปรับใช้
ธีม CSS บางส่วนโดยฉัน
คุณสามารถสร้างธีมได้โดยแก้ไขไฟล์ theme.css ในไดเร็กทอรีเอาต์พุต คุณสามารถคืนค่าเริ่มต้นหรือเริ่มต้นใหม่โดยการลบไฟล์ ไฟล์ theme.css เปล่าใหม่จะถูกสร้างขึ้นในครั้งถัดไปที่คุณสร้าง คุณสามารถดาวน์โหลดและติดตั้งธีมได้โดยการเขียนทับไฟล์เดียวกัน
ขณะนี้มีองค์ประกอบหลักสามประการในโครงการ: แพ็คเกจ NPM ซึ่งก็คือ Serious CLI; พื้นที่เก็บข้อมูลสำหรับกลไกการเรนเดอร์ สคริปต์ และสไตล์ที่ให้บริการไปยังเว็บแอปที่สร้างขึ้นผ่าน CDN และที่เก็บธีมที่ฉันสร้างขึ้น ส่วนประกอบทั้งหมดเหล่านี้อาจต้องทำให้เป็นระเบียบเรียบร้อยบ้าง แต่สิ่งสำคัญคือทั้งสามสิ่งนี้ได้รับการพัฒนาควบคู่กัน แต่มีส่วนเกี่ยวข้องกันเพียงเล็กน้อยในด้านการใช้งาน
nsfw
