หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Zerotocode.org

Zero to Code เป็น หลักสูตรออนไลน์ฟรีตลอดเวลาเกี่ยวกับการทำสิ่งต่าง ๆ บนเว็บ โดยใช้เทคโนโลยีเว็บพื้นฐาน: HTML, CSS และ JavaScript ฉันต้องการให้ ZTC เป็นสถานที่ที่ดีที่สุดบนเว็บเพื่อเรียนรู้ที่จะทำสิ่งของด้วยรหัส Zero to Code ใช้ CodeFrame เป็นสภาพแวดล้อมการเรียนรู้สำหรับความสามารถในการแบ่งปันการตอบรับอย่างรวดเร็วและมุ่งเน้นไปที่พื้นฐาน

นี่คือแหล่งเก็บข้อมูลต้นฉบับที่มีไซต์ Hugo เป็นศูนย์ถึงรหัสรวมถึงหลักสูตรเปิดทั้งหมด คุณสามารถอ่านเพิ่มเติมเกี่ยวกับโครงการเองบนเว็บไซต์

การบริจาค: ยินดีต้อนรับผู้เริ่มต้น!

Zero to Code เป็นไซต์คงที่ที่สร้างขึ้นด้วย Hugo Hugo เป็นเครื่องกำเนิดไซต์แบบคงที่ซึ่งใช้เอกสาร Markdown และแม่แบบ HTML/CSS/JS และสร้างชุดของไฟล์ HTML/CSS/JS แบบคงที่ซึ่งเป็นไซต์คงที่ คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับวิธีใช้ Hugo ที่ gohugo.io ส่วนนี้ของ readme ครอบคลุมวิธีการทำงานกับ Hugo ในที่เก็บของ ZTC

สร้างเว็บไซต์

คุณสามารถสร้างไซต์คงที่เวอร์ชันใหม่จากเทมเพลตและหน้า Markdown หนึ่งครั้งโดยใช้ hugo 

$ hugo
...
[some info about the generated files]

หากคุณกำลังเขียนและต้องการดูผลลัพธ์ในขณะที่คุณกำลังเขียนหน้าหรือการแก้ไขเทมเพลตคุณสามารถเรียกใช้เซิร์ฟเวอร์การพัฒนาด้วย hugo server -D 

$ hugo server -D
... serving development server at localhost:1313

เมื่อคุณเริ่มต้นเซิร์ฟเวอร์ด้วยวิธีนี้คุณสามารถไปที่ localhost:1313 บนเบราว์เซอร์ของคุณเพื่อดูเวอร์ชันการโหลดสดของเว็บไซต์เมื่อคุณแก้ไข

การปรับแต่งของ ZTC

Zero to Code มีการปรับแต่งสองสามอย่างที่เราใช้อยู่ด้านบนของฟังก์ชั่นเปลือยเปล่าของ Hugo เพื่อให้การสอนมีประสิทธิภาพมากขึ้น

บล็อกโค้ดที่มีไวยากรณ์สูงพร้อมปุ่ม "ลองนี้"

การปรับแต่งที่สำคัญที่สุดที่ ZTC มีอยู่ด้านบนของ Hugo คือวิธีที่เราสร้างบล็อกโค้ดที่มีไวยากรณ์สูง แทนที่จะใช้ไวยากรณ์ Triple-Backtick ของ Markdown เราใช้ไวยากรณ์ที่กำหนดเองของ Hugo เพื่อกำหนดบล็อกรหัสที่เน้นไวยากรณ์เช่นนี้: 

 {{<highlight html>}}
<h1>this is a highlighted block</h1>
{{</highlight>}}

นอกจากนี้คุณยังสามารถกำหนด css หรือ javascript Code Block แทนที่จะเป็น html และเราสามารถบอก Hugo เพื่อเน้นบางบรรทัดด้วย "hl_lines=N1 N2 N3-N5" ไวยากรณ์ 

 {{<highlight javascript "hl_lines=1">}}
console.log('hi');
{{</highlight>}}

เมื่อเรากำหนดบล็อกโค้ดที่ไฮไลต์ด้วยวิธีนี้ในหน้า single.html (หน้าบทช่วยสอนเดี่ยว) เรายังมีสคริปต์ที่ผ่าน Alll .highlight ed code blocks บนหน้าและเพิ่มปุ่ม ลองนี้ -> ที่ด้านบนขวาของแต่ละบล็อกโค้ด

Embedded CodeFrame Editors

บางครั้งเราต้องการฝังอินสแตนซ์แบบอินเทอร์แอคทีฟของ CodeFrame Editor บนหน้า <iframe> วิธีที่ดีที่สุดในการทำเช่นนี้คือการสร้าง .fixed.button.liveEditorContainer 

 < div class =" liveEditorContainer fixed button " >
    < iframe src =" https://codeframe.co/new " frameborder =" 0 " class =" liveEditor " > </ iframe >
</ div >

สิ่งนี้จะฝังตัวแก้ไข CodeFrame ที่ระบุโดย URL ลงบนหน้าด้วยขนาดที่เหมาะสม

คลาส button และกล่องที่มีเงา

องค์ประกอบแบบโต้ตอบส่วนใหญ่และองค์ประกอบที่เน้นบางอย่าง (เช่นบล็อกรหัสและภาพที่ไฮไลต์) จะถูกยกขึ้นจากพื้นผิวของหน้าด้วยเงา คลาส .button ที่นำเข้าจากสไตล์ชีทของ CodeFrame รับผิดชอบการใช้งานนี้ เมื่อคุณต้องการสร้างองค์ประกอบบางอย่างด้วยเงากล่องเช่นปุ่มของ CodeFrame ให้ใช้คลาส .button

หากคุณต้องการให้องค์ประกอบไม่สามารถโต้ตอบได้คุณสามารถใช้คลาส .fixed.button กับองค์ประกอบซึ่งจะปิดการใช้งานโฮเวอร์และแอนิเมชั่นที่ใช้งานอยู่บนปุ่ม

สนับสนุนศูนย์ถึงรหัส

หากคุณชอบโครงการ Zero to Code ต้องการสนับสนุนสิ่งที่ฉันทำในอนาคตโปรดพิจารณาบริจาคเป็นศูนย์เพื่อรหัสผ่าน PayPal หรือ Venmo

อีกทางเลือกหนึ่งโปรดพิจารณาบริจาคให้กับองค์กรที่ไม่แสวงหากำไรที่ดีที่สุดบางแห่งที่ทำงานได้อย่างยอดเยี่ยมในพื้นที่การศึกษา CS, Khanacademy, Hack Club และ Stutech

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด