# Accordions Source: https://guide.smsu.in.th/it/guide/edit/components/accordions Dropdown แสดงเนื้อหาที่สามารถยุบ/ขยายได้ ใช้แสดงเนื้อหาที่สามารถยุบ/ขยายได้ เช่น FAQ (คำถามที่พบบ่อย) หรือเนื้อหาที่ต้องการให้ผู้ใช้งานสามารถเลือกอ่านตามความสนใจ ## เพิ่ม Accordion สามารถเพิ่มโดยเลือกจาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) ### Accordion Group สามารถเพิ่มโดยเลือก `Accordion Group` จาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) เพื่อสร้างกลุ่มของ Accordion ดังตัวอย่างด้านล่าง Content Content Content ### เพิ่ม Accordion ใน Group เอาเมาส์ hover แล้วกด เครื่องหมายบวกด้านซ้ายของ Accordion ล่างสุด เพื่อเพิ่ม Accordion ใหม่ในกลุ่ม ## แก้ไข Title, Description และ Icon เอาเมาส์ hover แล้วกด สามจุดมุมขวาบนของ Accordion เพื่อเปิดเมนูแก้ไข สามารถตั้งค่า Title, Description, Icon และตั้งให้ Default Open ได้ตามต้องการ จากนั้นกด "Save Changes" เพื่อบันทึกการเปลี่ยนแปลง Content ไอคอนที่ใช้ในนี้มาจาก Font Awesome สามารถค้นหาไอคอนจาก [เว็บไซต์ Font Awesome](https://fontawesome.com/icons) ได้โดยตรง (สามารถค้นหาได้ง่ายกว่า) แล้วกดที่ชื่อไอคอนเพื่อคัดลอกมาใส่ในช่องค้นหาของ Web Editor หมายเหตุ สามารถเลือกได้ทั้งไอคอนฟรี และไอคอนที่ติดแท็ก "Pro" ## แก้ไข Content กด Accordion เพื่อเปิด dropdown แล้วแก้ไขเนื้อหาภายในได้ตามต้องการ ## ลบ Accordion เอาเมาส์ hover แล้วกด สามจุดมุมขวาบนของ Accordion เพื่อเปิดเมนูแก้ไข จากนั้นกด ไอคอนถังขยะเพื่อลบ # Basic, Headers and Text Source: https://guide.smsu.in.th/it/guide/edit/components/basicblocks การใช้งาน Components การจัดรูปแบบข้อความ และการแทรกสมการ ## เริ่มใช้ Components พิมพ์ `/` เพื่อแสดงรายการ components สำเร็จรูปที่สามารถเพิ่มได้ สามารถพิมพ์ชื่อ component ต่อท้าย `/` เพื่อค้นหา component ที่ต้องการในรายการ หรือใช้ลูกศรเลื่อนขึ้น-ลง จากนั้นกด Enter เพื่อเพิ่ม component ที่เลือก เพิ่ม components สำเร็จรูป ## Headings หัวข้อ (Headings) แบ่งออกเป็น 3 ระดับ คือ Heading 1, Heading 2, และ Heading 3 ซึ่งมีขนาดตัวอักษรที่ลดลงตามลำดับ โดยปกติแล้ว **Heading 1** ใช้เป็นชื่อเรื่อง (Title) ที่แต่ละหน้ามีเพียงตำแหน่งเดียวเท่านั้น (ลูกศรเทา) ซึ่งในกรณีนี้ เราได้ตั้งค่าไปใน[จัดการหน้าเนื้อหา](/it/guide/edit/pages)เรียบร้อยแล้ว ให้ใช้ **Heading 2 เป็นหัวข้อหลัก** (ลูกศรชมพู) และ **Heading 3 เป็นหัวข้อย่อย** (ลูกศรม่วง) ของเนื้อหาเท่านั้น สามารถสร้าง Heading อย่างรวดเร็วเมื่อขึ้นบรรทัดใหม่ ด้วยการพิมพ์ `##` + เว้นวรรค สำหรับ Heading 2 หรือพิมพ์ `###` + เว้นวรรค สำหรับ Heading 3 ตัวอย่าง Heading 2 และ Heading 3 ## Text Formatting คลุมข้อความที่ต้องการเพื่อเปลี่ยนรูปแบบข้อความ | **Format** | **Shortcut** | **Result** | | ------------- | ---------------------- | ---------------------- | | Bold | `Ctrl/Cmd`+`B` | **bold** | | Italic | `Ctrl/Cmd`+`I` | *italic* | | Underline | `Ctrl/Cmd`+`U` | underline | | Strikethrough | `Ctrl/Cmd`+`Shift`+`S` | ~~strikethrough~~ | | Code | `Ctrl/Cmd`+`E` | `code` | | Link | `Ctrl/Cmd`+`K` | [link](#) | | Superscript | - | superscript | | Subscript | - | subscript | ## Linking คลุมข้อความที่ต้องการแล้วกดไอคอนลิงก์ จะขึ้นช่องให้ใส่ลิงก์ที่ต้องการ * ลิงก์กับหน้าภายใน guide ฉบับนี้ ให้พิมพ์ `/` แล้วเลือกหน้าที่ต้องการลิงก์ * ลิงก์กับ URL ภายนอก ให้วาง URL ลงไปได้เลย เช่น `https://google.com` ห้ามใส่ลิงก์ที่เป็น URL เต็มกับลิงก์ภายใน guide ฉบับนี้ เช่น `/sop/project/open` ห้ามใส่เป็น `https://guide.smsu.in.th/sop/project/open` เพราะจะทำให้กดลิงก์แล้วโหลดช้าลง ## Blockquotes มักใช้สำหรับข้อความคำพูด หรือยกตัวอย่างการเขียน > Example singleline blockquote > อาจารย์ ... คน > > เจ้าหน้าที่ ... คน > > นักศึกษาแพทย์ชั้นปีที่ 1 ... คน (ถ้าเป็นนศพ.ศิริราชให้เขียนแยกชั้นปี) ## LaTeX LaTeX เป็นเครื่องมือที่ใช้พิมพ์สมการทางคณิตศาสตร์ สามารถใช้งาน [LaTeX Math Editor](https://cortexjs.io/mathfield/demo/) แล้วคัดลอก LaTeX มาใช้ ### Inline Math สมการที่แทรกในข้อความ เช่น $(a^2 + b^2 = c^2)$ เป็นต้น ### Block Math สมการแบบเต็มบรรทัด $$ \exists \, x \notin [0,1] $$ # Callouts Source: https://guide.smsu.in.th/it/guide/edit/components/callouts แบนเนอร์ข้อความสำคัญที่ต้องการเน้น ใช้ Callouts แสดงข้อความสำคัญที่ต้องการเน้นให้เห็นได้ชัด เช่น ข้อความที่เป็นคำแนะนำ คำเตือน หรือข้อมูลที่สำคัญ สามารถเลือกได้จาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) ## Info This draws attention to important information ## Check This brings us a checked status ## Note This adds a note in the content ## Tip This suggests a helpful tip ## Warning This raises a warning to watch out for ## Danger This is a danger callout # Cards Source: https://guide.smsu.in.th/it/guide/edit/components/cards การ์ดลิงก์ การ์ดข้อความ และการ์ดรูปภาพ ใข้เป็นปุ่มลิงก์ไปยังหน้าเนื้อหาอื่น/เว็บไซต์ภายนอก หรือแสดงเนื้อหาสำคัญสั้น ๆ หรือแสดงรูปภาพพร้อมชื่อเรื่องและคำอธิบาย ## เพิ่ม Card สามารถเพิ่มโดยเลือกจาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) Description ### Card Group สามารถเพิ่มโดยเลือก `Card Group` จาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) เพื่อสร้างกลุ่มการ์ดดังตัวอย่างด้านล่าง This is the first card. This is the second card. ### เพิ่ม Card ใน Group เอาเมาส์ hover แล้วกด เครื่องหมายบวกด้านซ้ายของ Card ล่างสุด เพื่อเพิ่ม Card ใหม่ในกลุ่ม ## แก้ไขและตั้งค่า เอาเมาส์ hover แล้วกด สามจุดมุมขวาบนของ Card เพื่อเปิดเมนูแก้ไข ### Title แก้ไขที่ช่อง `Title` Content ### Link Card ตั้ง Link URL ที่ช่อง `URL` และสามารถตั้งคำอธิบาย action ได้ที่ช่อง `Call To Action` Basic Link Card Line Official Account: SI Finance Link Card with Call To Action เรทราคาแต่ละรายการที่คณะอนุมัติให้โครงการเบิก ### Horizontal card ตั้งค่าโดยเลื่อนเปิด `Horizontal` เพื่อแสดงการ์ดในแนวนอนเทียบกับไอคอนด้านซ้าย Here is an example of a horizontal card ### Image Card ตั้ง URL (สำหรับรูปภายนอก) หรือ path (สำหรับรูปที่อัพโหลดใน guide ฉบับนี้ในโฟลเดอร์ `/images`) ของรูปภาพที่ต้องการแสดงในช่อง `Image Path` ตัวอย่างการ์ดด้านล่างตั้งค่า `Image Path` เป็น `/images/smsulogo-banner-wide.webp` Here is an example of a card with an image ## ลบ Card เอาเมาส์ hover แล้วกด สามจุดมุมขวาบนของ Card เพื่อเปิดเมนูแก้ไข จากนั้นกด ไอคอนถังขยะเพื่อลบ # Diagram Source: https://guide.smsu.in.th/it/guide/edit/components/diagram แผนภาพ แผนผัง หรือ Flow Chart สามารถสร้างแผนภาพโดยใช้ [Mermaid](https://mermaid.js.org/) ซึ่งเป็นเครื่องมือที่ใช้ในการสร้างแผนภาพ แผนผัง หรือ Flow Chart ใช้ preview โค้ด Mermaid ได้แบบเรียลไทม์ ใช้สร้าง Mermaid Diagram โดยไม่ต้องเขียนโค้ด สามารถส่งภาพ Diagram ที่ต้องการสร้างมาให้ทีม IT ช่วยสร้างได้ หลังได้โค้ดจาก Editor แล้ว ให้นำมาใส่ในหน้าเนื้อหา Markdown Editor เริ่มด้วย ` ```mermaid` และจบด้วย ` ``` ` สามารถคัดลอกโค้ดด้านล่างไปวาง แล้วคัดลอกโค้ดจาก Editor แล้ววางแทนบรรทัดกลางได้เลย ````md theme={null} ```mermaid // Your mermaid code block here ``` ```` เมื่อ Publish แล้ว จะเห็นในหน้าเนื้อหาจริงเป็นแผนภาพตามโค้ดที่เขียนไว้ ไม่ต้องกังวลว่าจะแสดงเป็นโค้ด Mermaid Diagram Code ## ตัวอย่าง ```mermaid theme={null} flowchart TB subgraph pre[ตรวจโครงการ] sec(เลขาฯ ตรวจ format และภาษา) so(S&O ตรวจ objective) rd(R&D ตรวจตัวชี้วัด) end subgraph committee[พิจารณาโครงการ] check{ที่ประชุมพิจารณาโครงการ} reject([สพศ.และประธานโครงการ หาแนวทางแก้ไขร่วมกัน]) pass([ส่งงานกิจ]) end prereject(ถ้าต้องมีการปรับ objective หรือตัวชี้วัด S&O และ R&D จะมีการพูดคุยและหาแนวทาง แก้ไขร่วมกับประธานโครงการ) member@{ shape: comment, label: "นายก, อุปฯบริหาร, Finance, อุปฯอื่นที่เกี่ยวข้อง" } sec --> rd so --> rd rd --> check check -- ที่ประชุมไม่อนุมัติ --> reject check -- ที่ประชุมอนุมัติ --> pass pre -.-> prereject committee ~~~ member ``` โค้ดที่เพิ่มในหน้า Markdown Mode ````md theme={null} ```mermaid flowchart TB subgraph pre[ตรวจโครงการ] sec(เลขาฯ ตรวจ format และภาษา) so(S&O ตรวจ objective) rd(R&D ตรวจตัวชี้วัด) end subgraph committee[พิจารณาโครงการ] check{ที่ประชุมพิจารณาโครงการ} reject([สพศ.และประธานโครงการ หาแนวทางแก้ไขร่วมกัน]) pass([ส่งงานกิจ]) end prereject(ถ้าต้องมีการปรับ objective หรือตัวชี้วัด S&O และ R&D จะมีการพูดคุยและหาแนวทาง แก้ไขร่วมกับประธานโครงการ) member@{ shape: comment, label: "นายก, อุปฯบริหาร, Finance, อุปฯอื่นที่เกี่ยวข้อง" } sec --> rd so --> rd rd --> check check -- ที่ประชุมไม่อนุมัติ --> reject check -- ที่ประชุมอนุมัติ --> pass pre -.-> prereject committee ~~~ member ``` ```` ``` ``` # List and Tables Source: https://guide.smsu.in.th/it/guide/edit/components/listandtables ลำดับรายการแบบมี/ไม่มีเลข และตาราง ## Lists ### Unordered List ลำดับรายการแบบไม่มีเลข เริ่มโดยการถพิมพ์เครื่องหมายขีด (`-`) หรือเครื่องหมายดอกจัน (`*`) แล้วเว้นวรรค หรือเลือกจาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) ก็ได้ * First item * Second item * Third item * Fourth item ### Numbered List ลำดับรายการแบบมีเลข เริ่มโดยการพิมพ์ตัวเลขตามด้วยจุด (`1.`) แล้วเว้นวรรค หรือเลือกจาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) ก็ได้ 1. First item 2. Second item 3. Third item 4. Fourth item ### Nested List ลำดับรายการแบบมีชั้นย่อย สามารถสร้างชั้นย่อยโดยการกด `Tab` ที่ชั้นนั้น ๆ * First item * Second item * Additional item * Additional item * Third item 1. First item 2. Second item 1. Additional item 2. Additional item 3. Third item ## Tables กดเลือกจาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) เพื่อเพิ่มตาราง | Property | Description | | -------- | ------------------------------------- | | Name | Full name of user | | Age | Reported age | | Joined | Whether the user joined the community | กดสี่เหลี่ยมสีเทาที่ต้นแถว/หลัก เพื่อเพิ่มแถว/หลักใหม่ หรือลบแถว/หลักที่เลือก จัดการแถว/หลักของตาราง # Media Source: https://guide.smsu.in.th/it/guide/edit/components/media รูปภาพ วิดีโอ และการฝังสื่ออื่น ๆ ในหน้าเนื้อหา ## Image เลือก `Image` จาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) แล้วอัพโหลดไฟล์รูปภาพหรือเลือกจากไฟล์ที่มีอยู่แล้ว ตัวอย่างรูปภาพ ## Frames เลือก `Frame` จาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) เพื่อสร้างกรอบสำหรับเนื้อหาภายใน เช่น รูปภาพ วิดีโอ หรือข้อความ ใน Web Editor กด สามจุดด้านขวาของ `Frame` เพื่อใส่ caption หรือคำบรรยายของกรอบนั้น สามารถใช้ `Frame` เพื่อสร้างรูปภาพพร้อมคำบรรยายด้านล่างได้ ตัวอย่างรูปภาพพร้อมคำบรรยาย ## Embeds เลือก `Embed` จาก[รายการ components](/it/guide/edit/components/basicblocks#เริ่มใช้-components) แล้ววางโค้ดฝัง เช่น YouTube, Google Drive, หรือเว็บไซต์อื่น ๆ ### YouTube กด Share ใต้ YouTube Video เลือก Embed คัดลอกโค้ดฝัง YouTube Video หากเป็นไปได้ ให้ลบส่วน `width="XXX"` และ `height="XXX"` ออก แล้วเพิ่ม `className="w-full aspect-video rounded-xl"` แทน เพื่อให้แสดงผลเต็มความกว้างของหน้าและมีอัตราส่วน 16:9 ```html {2-4} theme={null} ``` ``` แทนที่ `FILE_ID` ด้วย ID ของไฟล์ที่ต้องการฝัง สามารถหา ID ของไฟล์จาก URL หลังกด Share แล้วคัดลอก โดยอยู่ระหว่าง `/d/` และ `/view` เช่น URL ด้านล่างมี ID คือ `1QtbUIFt6jiecFFEdnex-mGqR0VnJLvWY` ``` https://drive.google.com/file/d/1QtbUIFt6jiecFFEdnex-mGqR0VnJLvWY/view?usp=sharing ``` ห้ามวาง URL ที่คัดลอกมาจาก Google Drive หลังกด Share โดยตรง เพราะลงท้ายด้วย `/view` ซึ่งไม่สามารถแสดงผลได้ ให้แก้เป็น `/preview` แทน ``` ถ้าไม่ปรับแต่งโค้ดฝังที่คัดลอกมา เมื่อ Save Changes แล้ว หน้านั้นจะ error