annotate

คำอธิบายประกอบ

ใส่คำอธิบายประกอบและเผยแพร่ข้อความบนเว็บ! โครงการนี้ถูกสร้างขึ้นสำหรับ "คำแนะนำ (แก้ไข) Latecomer's Guide to Crypto" แต่สามารถใช้เพื่อใส่หมายเหตุประกอบเอกสารข้อความใด ๆ

ดูการสาธิตสดที่ https://molly.github.io/annotate/

วิธีใช้

คัดลอกไฟล์ index.html , styles.css และ annotate.js ไปยังโครงการของคุณ คุณควรแก้ไขไฟล์ index.html เท่านั้นเว้นแต่คุณต้องการเปลี่ยนรูปแบบหรือพฤติกรรม JavaScript โครงการนี้ไม่ จำเป็นต้องใช้ JavaScript ดังนั้นหากคุณต้องการที่จะทิ้งไว้เพียงแค่ละเว้นไฟล์ annotate.js และลบ <script src="./annotate.js"></script> แท็กจากไฟล์ HTML โฟลเดอร์ screenshots มีภาพหน้าจอขนาดเต็มของหน้าดัชนีในทั้งเดสก์ท็อป ( index-desktop.png ) และมือถือ ( index-mobile.png ) เพื่อดูว่า HTML ผลิตอะไรได้บ้าง

แต่ละส่วนของเอกสารเป็นไปตามโครงสร้างพื้นฐานนี้:

 < section class =" group " >
  < div class =" content quote " >
    Text that's being < mark data-annotation-id =" 1 " aria-details =" unique-comment-id " > annotated </ mark > .
  </ div >
  < div class =" content note " >
    < div class =" annotation " role =" comment " data-annotation-id =" 1 " id =" unique-comment-id " >
      < div class =" commenter " > Commenter name </ div >
      Comment text.
    </ div >
  </ div >
</ section >

และผลิต:

รายละเอียด

แต่ละส่วนของข้อความจะถูกจับในแถวที่มีส่วนซ้ายและขวา องค์ประกอบ <section class="group"> แสดงแถวนี้ แต่ละด้านจะมี div ที่มีคลาส content และคลาสใบ quote หรือ note quote คือข้อความที่มีคำอธิบายประกอบ note มีไว้สำหรับคำอธิบายประกอบ

แต่ละส่วนของข้อความที่ไฮไลต์ในแหล่งต้นฉบับ (ด้านซ้ายมือ) ถูกทำเครื่องหมายด้วยแท็ก <mark> สิ่งเหล่านี้จะต้องมีแอตทริบิวต์ aria-details ที่ไม่ซ้ำกันซึ่งจะสอดคล้องกับ id ของคำอธิบายประกอบซึ่งจะเปิดใช้งานการโฟกัสแบบ Visual Focus เมื่อคลิก นอกจากนี้ยังสามารถเลือกให้มี data-annotation-id เพื่อกำหนดจำนวนคำอธิบายประกอบเพื่อช่วยแยกความแตกต่างของคำอธิบายประกอบเมื่อมีหลายส่วนในส่วน

สอดคล้องกับแท็ก <mark> จะเป็น DIV ที่มีทั้ง annotation หรือ annotation-group ทางด้านขวามือ (อดีตสำหรับคำอธิบายประกอบเดี่ยวหลังสำหรับคำอธิบายประกอบที่จัดกลุ่ม) สิ่งเหล่านี้จะต้องมี role="comment" และ id ที่ตรงกับค่า aria-details ที่ไม่ซ้ำกันของข้อความที่ไฮไลต์ซึ่งสอดคล้องกัน เช่นเดียวกับข้อความที่เน้นมันสามารถมี data-annotation-id เพื่อกำหนดจำนวนคำอธิบายประกอบ

คำอธิบายประกอบกลุ่ม

ภายในกลุ่มคำอธิบายประกอบจะมี DIV หนึ่งตัวขึ้นไปที่มีคลาส annotation สิ่งเหล่านี้สามารถมี DIV กับ commenter ในชั้นเรียนเพื่อระบุผู้เขียนหากมีผู้อธิบายหลายคนทำงานในเอกสาร สิ่งเหล่านี้ ไม่ จำเป็นต้องมี role="comment data-annotation-id หรือ id เนื่องจากพวกเขาซ้อนกันภายใน annotation-group ที่มีคุณลักษณะเหล่านั้น

ในกรณีของคำอธิบายประกอบหลายคำอธิบายภายในกลุ่มคำอธิบายประกอบพวกเขาสามารถปรากฏขึ้นซ้อนกันโดยตรงหรือเกลียว (การแสดงผลด้วยระดับการเยื้องที่เพิ่มขึ้นเพื่อระบุว่าพวกเขาตอบกลับกัน) ในการแสดงความคิดเห็นให้รวมคลาส thread ไว้ในความคิดเห็นที่สอง (การตอบกลับครั้งแรก) การตอบกลับที่ตามมาควรทำเครื่องหมายด้วยคลาส thread-x โดยที่ x คือระดับของการเยื้องตั้งแต่ 2–10: thread-2 , thread-3 , ... , thread-10 ละเว้นคลาส thread เพื่อแสดงความคิดเห็นหลายคำอธิบายในสแต็คโดยไม่ต้องเยื้อง

 < section class =" group " >
  < div class =" content quote " >
    Text that's being < mark data-annotation-id =" 1 " aria-details =" unique-comment-id " > annotated </ mark > .
  </ div >
  < div class =" content note " >
    < div class =" annotation-group " role =" comment " data-annotation-id =" 1 " id =" unique-comment-id " >
      < div class =" annotation " >
        A comment with indented responses.
      </ div >
      < div class =" annotation thread " > 
        A reply
      </ div >
      < div class =" annotation thread-2 " > 
        A second reply
      </ div >
    </ div >
  </ div >
</ section > 

รูปแบบแหล่งอื่น ๆ

โครงการคู่มือ Latecomer ดั้งเดิมถูกสร้างขึ้นโดยใช้ Pug และ Sass หากคุณต้องการทำงานกับสิ่งเหล่านั้นซอร์สโค้ดนั้นอาศัยอยู่กับแหล่งที่มาของเว็บไซต์ของฉัน:

• ไฟล์ปั๊ก
• ไฟล์เข็น

จอแสดงผลมือถือ

นี่คือวิธีที่คำอธิบายประกอบแสดงบนมือถือ: