หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

htmlเทพธิดา

กรอบการทำงานที่เรียบง่ายสำหรับการสร้างเว็บไซต์เหมือนปี 1999

ความต้องการ

  • คอมพิวเตอร์ที่มีอินเทอร์เน็ต โปรแกรมแก้ไขข้อความ และเว็บเบราว์เซอร์
  • เวลา 22.00 น

เริ่มต้นใช้งาน

  1. เปิดเทอร์มินัล
  2. npm install -g @htmlgoddess/cli
    สิ่งนี้จะติดตั้งยูทิลิตี้บรรทัดคำสั่ง
  3. htmlgoddess create path/to/your/new/site
  4. ปฏิบัติตามคำแนะนำและคุณควรจะพร้อมใช้งานได้ทันที

สิ่งที่ต้องทำ

  • refactor: แยกการทดสอบ
  • เพิ่ม: คำสั่ง "โฮสต์"
  • เพิ่ม: คำสั่ง style select เพื่อให้ผู้ใช้สามารถเปลี่ยนธีมได้หลังจากการสร้าง
  • ความสำเร็จ: เครื่องตรวจตัวสะกด
  • feat: auto commitizen hook เพื่อทริกเกอร์เมื่อกระทำ
  • ความสำเร็จ: คำสั่งตรวจทาน
  • ความสำเร็จ: คำสั่ง "โดเมน"
  • ความสำเร็จ: ปฏิบัติการที่ดาวน์โหลดได้
  • การปรับโครงสร้างใหม่: สลับ CNAME สำหรับการกำหนดค่า yaml สำหรับการโฮสต์
  • งาน: ความคุ้มครอง
  • แปลง "เอกสาร" เป็นตัวแปรที่กำหนดค่าได้
  • งาน: ตรวจสอบให้แน่ใจว่าผู้เฝ้าดูไม่ทำให้หน่วยความจำรั่วไหล
  • จุดบกพร่อง: cli.action ยังคงส่งออกไปยังคอนโซลระหว่างการทดสอบ
  • ความสำเร็จ: GUI

ฉันไม่รู้ HTML ใด ๆ

นั่นก็โอเค. ลองชมวิดีโอนี้เพื่อเริ่มต้น

เมนูบรรทัดคำสั่ง

เมื่อคุณรัน npm start และมันจะให้ตัวเลือกต่อไปนี้แก่คุณ

มันทำงานอย่างไร

  • ไฟล์ในโฟลเดอร์ "src" จะถูกคอมไพล์ (พิมพ์) เป็นไฟล์ HTML แบบคงที่ในโฟลเดอร์ "docs"
  • โฟลเดอร์ src/templates มีเทมเพลตต่างๆ สิ่งเหล่านี้ถูกคอมไพล์ด้วยโฟลเดอร์เนื้อหาเพื่อสร้างหน้า HTML แบบคงที่ของคุณ
  • โฟลเดอร์ src/content มีเนื้อหาไซต์ของคุณ ซึ่งจัดเก็บไว้ในไฟล์ html ที่เป็นส่วนประกอบของโค้ด HTML
  • เมื่อคุณเรียกใช้ npm run print (หรือเลือกพิมพ์จากเมนูเทอร์มินัล) ระบบจะรวบรวมเนื้อหาและเทมเพลตของคุณเป็นไฟล์ HTML แบบคงที่ และสร้างโฟลเดอร์เอกสารขึ้นใหม่ (หมายเหตุ: ทุกอย่างในเอกสารจะถูกเขียนทับ ดังนั้นให้บันทึกเฉพาะเนื้อหาในไดเร็กทอรี src ของคุณเท่านั้น!)
  • คุณสามารถทดสอบไซต์ของคุณในเครื่องได้โดยใช้คำสั่ง "serve" จากเมนู
  • เมื่อคุณพร้อมที่จะปรับใช้ไซต์ของคุณ เพียงทำ npm run save && npm run publish
  • จากนั้นคุณสามารถชี้เว็บเซิร์ฟเวอร์ของคุณไปที่ "เอกสาร" ไม่ว่าจะเป็น apache, หน้า git, nginx หรืออะไรก็ได้
  • คุณสามารถเพิ่มสไตล์ชีตใด ๆ ที่กำหนดเป้าหมายองค์ประกอบ HTML ธรรมดาและควรใช้งานได้ :)

เทมเพลต

  • แท็กในเทมเพลตที่ปิดตัวเอง เช่น <head /> หรือ <main /> จะค้นหาไฟล์เทมเพลตที่ตรงกับชื่อเดียวกันนั้น ไดเร็กทอรีที่มีดัชนี html เช่น main/index.html หรือเพียงแค่ไฟล์ main.html
    • แท็กไม่จำเป็นต้องเป็น HTML มาตรฐาน หากคุณสร้างเทมเพลต foo.html ในโฟลเดอร์เทมเพลต คุณสามารถรวมแท็ก <foo /> และแท็กจะแทนที่เนื้อหาของ foo
    • การคอมไพล์เทมเพลตเป็นแบบเรียกซ้ำ ดังนั้นคุณสามารถใช้เทมเพลตภายในเทมเพลตได้ อย่างไรก็ตาม เทมเพลตที่ซ้อนกันจะต้องเป็นไฟล์ที่อยู่ภายในหรือติดกับเทมเพลตหลัก มิฉะนั้นก็จะถูกละเลย
  • แท็ก <content/> เป็นแท็กพิเศษ และจะดึงเทมเพลตที่มีชื่อเดียวกันกับไฟล์ (พร้อม dir) หรือเทมเพลตหลัก ('templates/index.html) เข้ามา
  • เมื่อคุณสร้างเพจที่คุณต้องการใน dir เนื้อหา ไดเรกทอรีที่เกี่ยวข้องกับที่นั่นจะแสดงในเว็บไซต์ของคุณด้วยเส้นทางเดียวกัน โครงสร้างนี้ช่วยให้สามารถจัดระเบียบโฟลเดอร์และ URL ได้ด้วยตนเอง

ข้อจำกัด

  • ไม่มีเจส
  • ไม่มีแอตทริบิวต์ยกเว้น href พื้นฐาน ฯลฯ
  • ไม่มีชั้นเรียน นี่คือสิ่งที่ช่วยให้คุณเพิ่มสไตล์ชีตที่กำหนดเป้าหมายไปที่ vanilla css
  • ไม่มี SASS/SCSS/LESS สิ่งนี้ไม่จำเป็นสำหรับองค์ประกอบ HTML แบบง่าย
  • ไม่มีปฏิกิริยาเชิงมุมหรือสิ่งอื่นใด
  • หรือไม่คุณสามารถแฮ็กอะไรก็ได้ที่คุณต้องการ

ปรัชญา

HTML ได้รับการออกแบบมาให้เรียบง่าย และสำหรับคนทั่วไปในการสร้างและบริโภคสิ่งต่าง ๆ บนอินเทอร์เน็ต วันนี้เว็บค่อนข้างยอดเยี่ยม แต่ก็มีความซับซ้อนเช่นกัน และทำให้ผู้คนจำนวนมากล้าหลัง CMS นี้กลับไปสู่พื้นฐานเพื่อให้ผู้คนมีวิธีแสดงออกได้อย่างอิสระและง่ายดาย

  • กรอบการทำงานจะพยายามใช้ประโยชน์จากเทคโนโลยีและมาตรฐานที่มีอยู่ให้มากที่สุดเท่าที่จะเป็นไปได้
  • HTML ใช้สำหรับทุกสิ่ง (ตามที่เทพธิดา HTML สั่ง) แทนที่จะเป็นแท็กเทมเพลตที่เป็นกรรมสิทธิ์และไวยากรณ์พิเศษอื่น ๆ ระบบการสร้างเทมเพลตจะค้นหาแท็ก HTML ที่ปิดเองและแทนที่ด้วยเทมเพลตหรือเนื้อหาที่เกี่ยวข้อง
  • ระบบไฟล์ถูกใช้ประโยชน์จากทั้งการค้นหา/ตั้งชื่อเทมเพลตและการกำหนดเส้นทาง URL
  • Git ทำหน้าที่เป็นฐานข้อมูลจริงสำหรับ CMS พร้อมกับไฟล์ HTML ในเนื้อหาและเทมเพลต
  • ไซต์ "พิมพ์" ' ไปยังโฟลเดอร์ "docs" ' จากนั้นคุณ "เผยแพร่" ไปยัง git ซึ่งคุณสามารถตั้งค่าหน้า GitHub ได้ เว็บเซิร์ฟเวอร์ไม่เชื่อเรื่องพระเจ้า ดังนั้นคุณจึงสามารถนำไฟล์ในโฟลเดอร์เอกสารและส่งไปทุกที่ที่คุณต้องการและชี้เว็บเซิร์ฟเวอร์ไปที่ไฟล์เหล่านั้น
  • แท็กมีจุดมุ่งหมายเพื่อให้ไม่ต้องการคลาสหรือคุณลักษณะ ซึ่งช่วยให้สามารถใส่ธีมใหม่ ๆ ได้อย่างราบรื่น คุณอาจคิดว่า vanilla HTML เป็นอินเทอร์เฟซสำหรับการใช้สไตล์
  • ไม่แนะนำให้ใช้ JavaScript เนื่องจากไม่จำเป็น แม้ว่าจะไม่มีอะไรในเฟรมเวิร์กที่ขัดขวางไม่ให้คุณใช้งานก็ตาม
  • คุณสามารถเพิกเฉยต่อทุกสิ่งที่ฉันเพิ่งเขียนและทำทุกอย่างที่คุณต้องการ มันคืออินเทอร์เน็ต!

ปัญหาที่พบบ่อย

  • การพึ่งพาทำตัวแปลก ๆ :
    Lerna ทำบางสิ่งภายใต้ประทุนเพื่อเชื่อมโยงการพึ่งพา หากคุณติดตั้งโมดูลใหม่และสิ่งต่างๆ หยุดทำงาน ให้ลองใช้ lerna bootstrap จากรูท
  • ทดสอบไดเร็กทอรีไม่ล้างข้อมูล หากการทดสอบล้มเหลว อาจทำให้ไดเร็กทอรีทดสอบไม่สามารถล้างข้อมูลได้ ในกรณีนั้นให้รัน npm run clean-test-dir ซึ่งจะลบออกด้วยตนเอง

มีส่วนร่วม

  1. รันการทดสอบในแพ็คเกจ/cli เพื่อให้แน่ใจว่าทุกอย่างเป็นไปตาม npm run test
  2. คอมมิตการเปลี่ยนแปลง npm run commit และปฏิบัติตามคำแนะนำ
  3. lerna publish --force-publish สิ่งนี้จะเผยแพร่ไปยัง NPM รวมถึงส่งแท็กไปที่ git
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด