static timeline generator

เครื่องกำเนิดไทม์ไลน์แบบคงที่

สร้างหน้าเว็บไทม์ไลน์แบบคงที่เช่นไทม์ไลน์ Wikimedia ของฉันได้อย่างง่ายดาย ดูตัวอย่างไซต์ตัวอย่างนี้ที่ใช้งานกับ GitHub Pages: https://molly.github.io/static-timeline-generator/

สารบัญ

• ติดตั้ง
• ปรับแต่ง
  • เนื้อหาหลัก
  • เมตา
• การปรับแต่งเพิ่มเติม
• ปรับใช้
  • หน้า GitHub
  • บริการอื่นๆ
• การตอบสนอง
• ความเข้ากันได้ของเบราว์เซอร์
• ภายใต้ประทุน

ติดตั้ง

โคลนที่เก็บนี้ จากนั้นรัน npm install จากไดเร็กทอรี

npm run-script serve จะสร้างโปรเจ็กต์และให้บริการไฟล์คงที่ในเครื่องที่ http://localhost:8080 npm run-script build เพียงแค่รันขั้นตอนการ build โดยไม่ต้องเริ่มเซิร์ฟเวอร์การพัฒนา

ปรับแต่ง

เนื้อหาเกือบทั้งหมดที่คุณต้องเปลี่ยนอยู่ใน src/_data/content.js

เนื้อหาหลัก

• header (HTML, ตัวเลือก): เนื้อหาที่จะแสดงในส่วนหัวที่ด้านบนของหน้า
• footer (HTML ไม่บังคับ): เนื้อหาที่จะแสดงในส่วนท้ายที่ด้านล่างของหน้า
• entries (อาร์เรย์ของวัตถุ จำเป็น ): รายการรายการที่จะแสดงบนไทม์ไลน์ ตามลำดับที่ควรแสดง
  • id (สตริง, จำเป็น ): ID เฉพาะสำหรับรายการไทม์ไลน์นี้
  • categories (อาร์เรย์ของสตริง ไม่บังคับ): รายการหมวดหมู่ที่ใช้กับรายการนี้ สิ่งเหล่านี้จะแสดงเป็นช่องทำเครื่องหมายที่ด้านบนของหน้า และช่วยให้ผู้อ่านกรองไทม์ไลน์ได้ อาจไม่มีเครื่องหมายจุลภาค พวกเขาสามารถคั่นด้วยยติภังค์หรือช่องว่าง ( sample category หรือ sample-category จะแสดงบนหน้าเป็น Sample category ) รายการที่ไม่มีหมวดหมู่ใด ๆ จะถูกแสดงเสมอ
  • color (สตริง ไม่บังคับ): สีของวงกลมที่แสดงบนไทม์ไลน์ ตัวเลือกที่กำหนดไว้แล้วคือ green red และ grey คุณสามารถกำหนดสีเพิ่มเติมได้ใน css/custom.css (ดูด้านล่าง)
  • faicon (สตริง ไม่บังคับ): ชื่อของไอคอน Font Awesome ที่จะใช้ในวงกลมบนไทม์ไลน์ สำรวจตัวเลือกต่างๆ นี่เป็นเพียงชื่อไอคอน (ไม่มีส่วนนำ fa- ) ตัวอย่างเช่น: anchor .
  • datetime (ต้องมีสตริง datetime หรือ date ): ตัวระบุวันที่และเวลาสำหรับรายการ ซึ่งอาจอยู่ในรูปแบบใดก็ได้ที่ moment.js รู้จัก ปกติฉันจะใช้ "ปปปป-ดด-วว HH-SS" หากไม่มีเวลา มีเพียงวันที่ ให้ใช้พารามิเตอร์ date แทน datetime
  • date (ต้องมีสตริง datetime หรือ date ): ตัวระบุวันที่สำหรับรายการ "ปปปป-ดด-วว"
  • title (HTML, required ): ชื่อเรื่องของรายการไทม์ไลน์
  • image (ไม่บังคับ): รูปภาพที่จะแสดงในรายการ
    • src (จำเป็นต้องมีสตริง): URL โดยตรงไปยังไฟล์รูปภาพที่จะฝังบนเพจ หรือลิงก์ที่เกี่ยวข้องไปยังรูปภาพในไดเร็กทอรีนี้ (เช่น img/filename.png )
    • link (สตริง ไม่บังคับ): ไฮเปอร์ลิงก์ไปยังหน้าที่มีรูปภาพ หากคุณต้องการให้ผู้อื่นสามารถคลิกเพื่อดูเวอร์ชันที่ใหญ่ขึ้นได้ เป็นต้น
    • alt (สตริง ไม่บังคับ): ข้อความแสดงแทนที่อธิบายรูปภาพ
    • caption (HTML, ตัวเลือก): คำบรรยายที่อธิบายรูปภาพ
  • body (HTML, required ): ข้อความของรายการไทม์ไลน์ หากคุณต้องการหลายย่อหน้า คุณต้องใส่แท็ก <p> ด้วยตัวเอง มิฉะนั้นจะถูกเพิ่มเข้าไป
  • links (อาร์เรย์ของออบเจ็กต์ ไม่จำเป็น): อาร์เรย์ของลิงก์ที่จะแสดงที่ด้านล่างของรายการ
    • href (สตริง, จำเป็น ): เป้าหมายของลิงก์
    • linkText (HTML, จำเป็น ): ข้อความลิงก์
    • extra (HTML, ตัวเลือก): HTML พิเศษที่จะแสดงที่ส่วนท้ายของลิงก์

เมตา

• pageTitle (string, required ): ข้อความที่จะไปในแท็ก <title> เพื่อตั้งชื่อหน้าในเบราว์เซอร์
• pageDescription (สตริง ไม่บังคับ): คำอธิบายเพจเพื่อเข้าสู่เมตาแท็ก
• pageAuthor (string, optinal): ผู้เขียนเพจเพื่อเข้าสู่เมตาแท็ก

การปรับแต่งเพิ่มเติม

หากคุณต้องการเพิ่มตัวเลือกสีให้กับวงกลมบนไทม์ไลน์ คุณสามารถแก้ไขไฟล์ src/css/custom.css เพื่อเพิ่มสีของคุณเองได้ คุณสามารถใช้เครื่องมือนี้เพื่อเลือกสีและรับรหัสสีฐานสิบหกได้ พวกมันถูกกำหนดไว้ดังนี้:

. timeline-icon . yourcolorhere {
  background-color : # hexcol or code;
}

จากนั้นคุณจะใช้ color: yourcolorhere ในไฟล์ content.js

แทนที่รูปภาพในโฟลเดอร์ src/img เพื่อปรับแต่ง favicon ของหน้าและรูปภาพ OpenGraph

ปรับใช้

เมื่อคุณเรียกใช้ npm run-script buld คุณจะเห็นไดเร็กทอรี _site ที่มีไฟล์ HTML/CSS/JS แบบคงที่พร้อมกับเนื้อหาไซต์ของคุณ ตอนนี้คุณสามารถใช้โฮสติ้งไซต์แบบคงที่เพื่อปรับใช้ไฟล์เหล่านี้ได้!

หน้า GitHub

หากต้องการปรับใช้ไซต์แบบคงที่บนหน้า GitHub (ฟรี) ให้สร้างสาขาที่มีไฟล์แบบคงที่ในไดเร็กทอรีรากโดยการรัน git subtree push --prefix _site origin gh-pages จากนั้น คุณสามารถไปที่การตั้งค่า > ตัวเลือกเพจของพื้นที่เก็บข้อมูลของคุณ และเลือก "ปรับใช้จากสาขา" จากนั้นเลือก gh-pages เป็นสาขา

บริการอื่นๆ

มีบทช่วยสอนดีๆ สำหรับการปรับใช้ไซต์แบบคงที่กับบริการฟรีอื่นๆ มากมาย บางส่วนอยู่ด้านล่าง

คุณยังสามารถมองหาบทช่วยสอนเกี่ยวกับวิธีการปรับใช้ไซต์ที่สร้างด้วยสิบเอ็ดสิบ เนื่องจากนั่นคือสิ่งที่ขับเคลื่อนโปรเจ็กต์นี้ บริการเว็บโฮสติ้งบางอย่างเช่น Vercel รองรับสิบเอ็ดสิบโดยเฉพาะในรูปแบบที่มีประโยชน์จริงๆ

• เน็ตลิฟาย
• เวอร์เซล
• เรนเดอร์
  • สร้างไซต์แบบคงที่ใหม่บน Render
  • ตั้งค่า "คำสั่ง build" เป็น npm run-script build
  • ตั้งค่า "เผยแพร่ไดเรกทอรี" เป็น _site

การตอบสนอง

ไทม์ไลน์จะแสดงผลได้ดีบนแท็บเล็ต:

หรืออุปกรณ์เคลื่อนที่:

ความเข้ากันได้ของเบราว์เซอร์

สิ่งนี้น่าจะทำงานได้ดีกับเบราว์เซอร์รุ่นใหม่ทั้งหมด ไม่รองรับ IE <9

หากไม่เปิดใช้งาน JavaScript หน้าจะลดลงอย่างสวยงาม อย่างไรก็ตาม โพสต์จะแสดงในไทม์ไลน์แบบคอลัมน์เดียวและตัวกรองจะไม่แสดง

ภายใต้ประทุน

โครงการนี้ใช้

• 11สิบ
• อีจส
• โมเมนต์.js
• แบบอักษรเยี่ยมมาก
• ทำให้เป็นมาตรฐาน.css
• classlist-polyfill

เผยแพร่ภายใต้ใบอนุญาต MIT