gohud

UI ของเกม ขับเคลื่อนด้วยรีซอร์สเพียงชิ้นเดียว

gohud คือชุด HUD และ UI สำหรับ Godot 4.6 ขึ้นไป หน้าต่างลอย บอททอมชีต ไดอะล็อก ฟอร์ม สแน็กบาร์ โค้ชมาร์ก แถบ HUD ควิกสล็อต และจอยสติ๊กเสมือน ทั้งหมดทำงานจากธีมชุดเดียวและ ชุดไอคอนชุดเดียวที่สลับได้ พร้อมจัดการเซฟแอเรีย คีย์บอร์ดเสมือน RTL และขนาดพื้นที่กดสัมผัสให้เสร็จสรรพ พรีเซ็ต 6 แบบ — ค่าเริ่มต้น ไซไฟ และยุคกลาง อย่างละโหมดมืดและโหมดสว่าง — เปลี่ยนสีและรูปทรงได้ในบรรทัดเดียว

Godot 4.6+ v1.0.1 GDScript ล้วน ไม่ต้องใช้ autoload MIT 6 พรีเซ็ต 21 ภาษา แถมไอคอน 100 แบบ

หน้าตาเมื่ออยู่ในเกมจริง

พรีเซ็ตยุคกลางและไซไฟ — แผ่นข้อมูลตัวละคร กระเป๋าของ และเควสต์ ฟอร์ม กริด และพรอมต์การ์ด พาเนลมุมเหลี่ยมและปุ่มควบคุมแบบสัมผัส การสลับพรีเซ็ตใช้โค้ดบรรทัดเดียว

ธีมยุคกลางของ gohud — แผ่นข้อมูลตัวละครพร้อมแถบพลังชีวิต มานา และสตามินา ย่ามใส่ควิกสล็อต และสมุดบันทึกเควสต์ในกรอบทองตีขึ้นรูป
ยุคกลาง — ตัวละคร กระเป๋าของ และเควสต์
ธีมยุคกลางของ gohud — พาเนลกรอกข้อมูลที่มีช่องชื่อ สวิตช์เปิดปิด เช็กบ็อกซ์ และสไลเดอร์ปรับเสียง กริดของไทล์ และพรอมต์การ์ดชวนเข้าปาร์ตี้ที่มีปุ่มรับและปฏิเสธ
ยุคกลาง — ฟอร์ม กริด และพรอมต์การ์ด
ธีมไซไฟของ gohud — พาเนลปุ่มควบคุมแบบสัมผัสมุมตัดเฉียง พร้อมจอยสติ๊กหกเหลี่ยม สวิตช์เลือกโหมด Fixed / Follow / Relative และปุ่มแอ็กชันทรงกลม
ไซไฟ — พาเนลมุมเหลี่ยมและปุ่มควบคุมแบบสัมผัส

พรีเซ็ตทั้ง 6 แบบและวิธีสลับ →

สิ่งที่ gohud รับไปทำแทนคุณ

สิ่งที่กินเวลามากที่สุดใน UI ของเกมไม่ใช่รูปทรงของปุ่ม แต่เป็นทุกอย่างที่เพี้ยนไปคนละทาง เมื่อเปลี่ยนเครื่อง gohud จัดการความเพี้ยนนั้นไว้ในที่เดียว

ทุกค่าขนาดคือโทเคน

ระยะห่าง มุม และขนาดตัวอักษรถูกเรียกด้วยชื่อ ไม่ใช่เขียนเป็นตัวเลข สลับธีมแล้วทั้งหน้าจอขยับตามไปพร้อมกัน

ขนาดที่เห็น ≠ ขนาดที่กดได้

ปุ่มปิดดูเหมือนกว้าง 36dp แต่พื้นที่กดสัมผัสคือ 48dp เมื่อสล็อตที่อยู่ชิดกันมีพื้นที่ซ้อนทับ อันที่จุดกึ่งกลางใกล้กว่าจะได้รับการกดไป

รอยบากหน้าจอและคีย์บอร์ด

ชิ้นส่วน HUD อยู่ในเซฟแอเรียเสมอ และช่องกรอกข้อมูลจะยกตัวขึ้นเหนือคีย์บอร์ดเสมือนทันทีที่มันโผล่มา

ปุ่มย้อนกลับปิดทีละชั้น

Escape และปุ่มย้อนกลับของ Android ปิดเฉพาะเลเยอร์บนสุด หน้าต่างที่ซ้อนกันอยู่จะไม่หายวับไปพร้อมกันหมด

ข้อความแจ้งเตือนไม่แย่งอินพุต

กดทะลุสแน็กบาร์ลงไปแล้วปุ่มข้างใต้ยังรับการกดอยู่ และมันก็ไม่แย่งโฟกัสไปด้วย

ไอคอนถูกเรียกด้วยชื่อ

วิดเจ็ตรู้จักแค่ GoIconSet.CLOSE สลับชุดไอคอนแล้วภาพวาดทุกชิ้นเปลี่ยนตาม โดยไม่ต้องแตะโค้ดสักบรรทัด

หกลุค หนึ่งบรรทัด

GoUi.use_preset() สลับธีม สกิน และไอคอนพร้อมกัน — จะเป็นมุมมน มุมตัดเฉียงแบบไซไฟ หรือกรอบตีเหล็กแบบยุคกลางก็ได้

อ่านออกโดยวัดผลจริง

ทุกธีมถูกตรวจกับ WCAG รวมถึงสถานะต่าง ๆ ของปุ่ม และพาเนล HUD กึ่งโปร่งใสที่วางทับพื้นขาวล้วนและดำล้วน

ทุกอย่างทำงานได้โดยไม่ต้องเปิดใช้ปลั๊กอิน การเปิดใช้จะเพิ่ม autoload ชื่อ GoRuntime ที่คอยติดตาม ขนาดหน้าต่าง อัตราส่วน dp และความสูงของคีย์บอร์ด พร้อมกับตั้งค่าโปรเจกต์สำหรับรีซอร์สคอนฟิกและ พรีเซ็ต — เป็นความสะดวก ไม่ใช่ข้อบังคับ

ติดตั้ง gohud

มีสองทาง ให้เอเจนต์ AI ทำให้ หรือวางโฟลเดอร์ลงในโปรเจกต์ของคุณ — ไม่มีอะไรต้องตั้งค่าเพิ่ม

ติดตั้ง

เริ่มใช้งาน

ห้าบรรทัดก็ได้หน้าจอที่ใส่ธีมแล้ว ขั้นตอนทั้งหมดอยู่ในหน้าติดตั้ง

เริ่มใช้งาน

เปลี่ยนลุค — ทั้งสีและรูปทรง

Theme ปรับสไตล์ได้แค่สิ่งที่เอนจินวาดเท่านั้น มุมมนคือมุมชนิดเดียวที่ StyleBoxFlat มีให้ ส่วนจอยสติ๊ก ควิกสล็อต และโค้ชมาร์กนั้นถูกวาดด้วยโค้ด — ธีมเพียงอย่างเดียวจึงไม่มีทาง เปลี่ยนรูปทรงของมันได้ gohud จึงมาพร้อม พรีเซ็ต: ธีม สกิน และชุดไอคอนที่เลือกมาเป็นชุดเดียวกัน

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # ธีม สกิน และไอคอน พร้อมกันทีเดียว
พรีเซ็ตลุค
default_darkgohud ดั้งเดิม — มุมมน สีเน้นฟ้านวล
default_lightรูปทรงเดิมบนจานสีโทนสว่าง
scifi_darkมุมตัดเฉียง ขอบนีออนสีฟ้าไซแอนพร้อมแสงเรือง จอยสติ๊กหกเหลี่ยม วงเล็บเล็งเป้า
scifi_lightรูปทรงเหลี่ยมแบบเดียวกันบนจานสีพิมพ์เขียวสว่าง
medieval_darkเหล็กดำและหนัง กรอบทองโบราณ หมุดย้ำ ไอคอนสลัก หัวข้อฟอนต์ Cinzel
medieval_lightกระดาษหนัง หมึก และทองสัมฤทธิ์ บนกรอบตีขึ้นรูปแบบเดียวกัน
แกลเลอรีของ gohud ในพรีเซ็ต default_dark — มุมมน สีเน้นฟ้า
default_dark — มุมมน สีเน้นฟ้านวล
พรีเซ็ต default_light — รูปทรงเดิมบนจานสีโทนสว่าง
default_light — รูปทรงเดิม จานสีสว่าง
พรีเซ็ต scifi_dark — มุมตัดเฉียงและนีออนสีฟ้าไซแอน
scifi_dark — มุมตัดเฉียง นีออนไซแอน
พรีเซ็ต scifi_light — รูปทรงเหลี่ยมแบบเดียวกันบนจานสีพิมพ์เขียว
scifi_light — รูปทรงเหลี่ยมเดิม จานสีพิมพ์เขียว

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

คอลเลกชันยุคกลาง

medieval_dark จับคู่เหล็กและหนังเข้ากับทองโบราณ ส่วน medieval_light ใช้กระดาษหนัง และหมึก กรอบเมนูมีหมุดย้ำและลวดลายมุมเล็ก ๆ ขณะที่ HUD ซึ่งมองเห็นตลอดเวลายังคงเรียบสงบ ไอคอนสลัก 16 ชิ้นวาดชื่อไอเทมใหม่ และมีแต่หัวข้อกับหัวข้อรองเท่านั้นที่ใช้ฟอนต์ Cinzel ที่แถมมา

medieval_dark — แผ่นข้อมูลตัวละคร ย่ามใส่ควิกสล็อต และสมุดบันทึกเควสต์
medieval_dark — เหล็กและหนัง
medieval_light — หน้าตัวละคร ย่าม และเควสต์ชุดเดียวกันบนกระดาษหนัง
medieval_light — กระดาษหนังและหมึก

ทั้งสองภาพคือ examples/medieval/medieval.tscn ที่ประกอบขึ้นจากวิดเจ็ตมาตรฐาน คู่มือยุคกลางและวิธีสร้างอาณาจักรของคุณเอง →

หน้าจอเดียวกัน บนมือถือและบนเดสก์ท็อป

ภาพแกลเลอรีข้างบนคือมือถือแนวตั้ง ส่วนด้านล่างคือโค้ดชุดเดียวกันที่ 1280×800 — เนื้อหาหยุดที่ ความกว้างที่อ่านสบาย (480dp) แล้วจัดกึ่งกลาง ขณะที่ HUD ยังอยู่ตามมุม ฟอร์มจะเดินอ้อมชิ้นส่วน HUD ที่ลอยอยู่ แต่จะไม่ขยับถ้ามันพ้นกันอยู่แล้ว: ถ้าดันทุรังเลื่อนต่อไป เนื้อหาจะหลุดจากกึ่งกลางบนจอกว้าง

default_dark ที่ 1280x800 — เนื้อหาจัดกึ่งกลาง HUD อยู่ตามมุม
default_dark · 1280×800
scifi_dark ที่ 1280x800 — เลย์เอาต์เดียวกันกับพาเนลมุมตัดเฉียงและนีออน
scifi_dark · 1280×800

ชีตเดียวกัน คนละลุค

บอททอมชีตในพรีเซ็ต default_dark
ค่าเริ่มต้น — การ์ดมุมมน แถวค้นหาและแถบท้ายติดหนึบ
บอททอมชีตในพรีเซ็ต scifi_dark — ขอบบนเน้นสีนีออน
ไซไฟ — ขอบบนเน้นสี มุมตัด แสงเรือง

เลือกได้จาก Project Settings → gohud → Theme → Preset หรือกำหนดที่ GoConfig.preset ถ้าระบุ theme, skin หรือ icons ไว้ตรง ๆ ค่านั้นจะชนะพรีเซ็ต คุณจึงหยิบพรีเซ็ตมาแล้วเขียนทับเฉพาะบางชิ้นได้

ธีมใหม่หนึ่งธีมคือไฟล์ JSON หนึ่งไฟล์ new_theme.py kingdom --from medieval_dark จะเขียน จานสีที่ระบุค่าที่สืบทอดมาทุกค่าไว้ครบถ้วน แล้ว make_theme.py kingdom จะสร้างตัวธีม ภาพของคอนโทรล และค่าปรับของสกิน จากนั้นพรีเซ็ตจะโผล่ในตัวเลือกเอง ทุกการตั้งค่าและทุกค่าปรับ →

สกิน — ที่ที่ Theme เอื้อมไม่ถึง

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

class_name MySkin extends GoSkin

func slot_box(accent: Color, lit: bool) -> StyleBox:
    var box := GoStyleBoxCut.new()
    box.bg_color = accent
    box.cut = 6.0
    box.edge_color = accent
    return box
คลาสรูปทรงที่สร้างได้
GoStyleBoxCutมุมตัดเฉียง (chamfer) ขอบเน้นสีที่หนาขึ้นหนึ่งด้าน และแสงเรืองรอบนอก
GoStyleBoxBracketเครื่องหมายมุมอย่างเดียว โดยไม่ล้อมกรอบเนื้อหา
GoStyleBoxMedievalกรอบตีขึ้นรูปพร้อมหมุดย้ำ ลายสลักที่มุม แสงไฮไลต์ตามขอบลาด และลายเนื้อวัสดุ

ทั้งสามคลาสสามารถซีเรียลไลซ์ลงในรีซอร์ส Theme ได้ — นี่เองคือสิ่งที่ทำให้ธีมเปลี่ยนรูปทรงได้ ไม่ใช่แค่สี GoSkinSciFi และ GoSkinMedieval คือซับคลาสที่แถมมาให้

GoStyle.box() คืนค่าเป็น StyleBoxFlat เสมอ เพราะโค้ดที่เรียกใช้จะรับมันไป แล้วปรับ bg_color หรือ corner_radius ต่อ ถ้าต้องการให้รูปทรงที่กำหนดเองอยู่รอด ให้ใช้ GoStyle.surface() แทน

วิดเจ็ต

ชิ้นส่วนทั้งหมดในตารางเดียว ดูรายละเอียดทีละชิ้น →

คลาสสืบทอดจากทำอะไร
GoSurfaceControlเปลือกการ์ดลอย — วางกึ่งกลาง ชิดล่าง หรือยึดกับคอนโทรล พร้อมหัวและท้ายติดหนึบ เนื้อหาเลื่อนได้ และลากปรับขนาดได้
GoSheetCanvasLayerหน้าที่ยกขึ้นมาจากด้านล่าง อยู่บนเลเยอร์ของตัวเองจึงลอยเหนือ HUD เสมอ
GoDialogsNodeกล่องยืนยันและกล่องแจ้งเตือนที่ await ได้ พร้อม destructive สำหรับการกระทำที่ย้อนกลับไม่ได้
GoFormMarginContainerฟอร์มที่จำกัดความกว้าง หลบคีย์บอร์ดเสมือน และหลบ HUD ได้ด้วย avoid_hud
GoScrollScrollContainerการเลื่อนด้วยนิ้ว แถบเลื่อนซ่อนตัวเข้าไปในระยะขอบของการ์ด
GoNoticePanelContainerสแน็กบาร์ที่ไม่แย่งทั้งอินพุตและโฟกัส
GoPromptCardPanelContainerคำถามที่ไม่หยุดเกม
GoCoachMarkControlทัวร์แนะนำที่ชี้ไปยังคอนโทรลจริง กดที่เป้าหมายแล้วเดินหน้าต่อ
GoHudAnchorControlตรึงชิ้นส่วน HUD ไว้ที่ตำแหน่งใดตำแหน่งหนึ่งใน 9 จุดของเซฟแอเรีย
GoBarControlแถบพลังชีวิต มานา และค่าประสบการณ์ ที่เปลี่ยนค่าอย่างนุ่มนวล
GoSlotButtonควิกสล็อตหนึ่งช่อง — ไอคอน จำนวน คูลดาวน์ และปุ่มลัด อยู่บนหน้าเดียวกัน
GoJoystickControlจอยสติ๊กเสมือน โหมดอยู่กับที่ ตามนิ้ว หรือสัมพัทธ์
GoIconButtonButtonดูเล็ก แต่กดง่าย
GoStylestaticปุ่ม แถวรายการ ช่องกรอก ชิป ตาราง แท็บ และอื่น ๆ ที่สร้างขึ้นด้วยวิธีเดียวกันทั้งหมด

การรอ การบอก การนับ

คลาสสืบทอดจากทำอะไร
GoSnackbarNodeข้อความที่จัดที่ให้ตัวเอง
GoSpinnerControlการรอที่ยังมองไม่เห็นปลายทาง
GoBadgePanelContainerจุดที่ยังไม่ได้อ่าน ป้าย "ใหม่" และเลข 99+

ฟอร์มและรายการ

คลาสสืบทอดจากทำอะไร
GoFieldVBoxContainerแถวที่ผิดพลาดได้
GoInputGroupHBoxContainerช่องกรอกที่เชื่อมติดกับปุ่มของมัน
GoComboboxButtonตัวเลือกที่ค้นหาได้
GoCodeInputVBoxContainerโค้ดคูปองและโค้ดของขวัญ
GoTableVBoxContainerหัวตารางที่เรียงลำดับได้ แถวที่เลือกได้
GoPaginationHBoxContainerแบ่งเป็นหน้า หรือแถว "ดูเพิ่ม"

รูปทรงที่เกมใช้จริง

คลาสสืบทอดจากทำอะไร
GoRewardCalendarVBoxContainerการเช็กชื่อรายวัน
GoRadar · GoDonutControlค่าสถานะที่เห็นได้ในพริบตา
GoCarouselVBoxContainerแบนเนอร์และหน้าเลือกตัวละคร
GoKbdHBoxContainerคำใบ้ปุ่มที่ไม่โกหก

ทับอยู่บนหน้าจอ

คลาสสืบทอดจากทำอะไร
GoDrawerCanvasLayerพาเนลด้านข้าง
GoPopoverRefCountedการ์ดที่ตรึงไว้กับที่
GoContextMenuRefCountedกดค้างและคลิกขวา
GoConsoleCanvasLayerคอนโซลสำหรับนักพัฒนา

AI SKILL

gohud มี AI skill มาให้ — API ทั้งหมด เทมเพลตที่รันได้ทันที และตัวเปิดพรีวิว วางบล็อกเดียวด้านล่างให้เอเจนต์เขียนโค้ดของคุณ แล้วมันจะติดตั้ง gohud และรู้วิธีใช้

AI SKILL

ความอ่านง่ายเป็นเรื่องที่วัด ไม่ใช่กะเอาด้วยตา

"สวย" เป็นเรื่องรสนิยม แต่ "อ่านออก" วัดได้ ตัวอักษรสีเทาจาง ๆ ดูดีบนจอมอนิเตอร์ดี ๆ แล้วหายไปเลยบนมือถือกลางแดด — เลือกด้วยตาเปล่าเมื่อไร ก็รับประกันว่าเจอปัญหานี้เข้าสักวัน

python3 addons/gohud/tools/check_contrast.py

ทุกคู่สี และป้ายข้อความของปุ่มในทุกสถานะเทียบกับพาเนลที่มันวางอยู่ ถูกวัดกับ WCAG ครบทั้ง 6 ธีม สีกึ่งโปร่งใสจะถูกนำไปซ้อนบนพื้นหลังจริงก่อนวัด — เพราะถ้าวัดตรง ๆ จะได้ค่าอัตราส่วนที่ดีเกินกว่าที่ปรากฏบนหน้าจอจริง

สีตัวอักษรจึงเป็นค่าที่ คำนวณมา ไม่ใช่เลือกเอง: ตัวสร้างธีมหยิบค่าจากจานสีมาเป็นจุดตั้งต้น แล้วดันค่าความสว่างขึ้นลงจนกว่าจะผ่านเกณฑ์บนทุกพื้นผิวที่มันอาจไปวางอยู่ เปลี่ยนจานสีแล้วคอนทราสต์ จะตามไปเอง กฎเกณฑ์และกับดักเบื้องหลัง →

การตรวจสอบ การออกรีลีส และเว็บไซต์นี้

จุดเข้าเดียวรันการตรวจสอบทั้งหมด แต่ละส่วนเห็นสิ่งที่ส่วนอื่นมองไม่เห็น

bash addons/gohud/tools/check_all.sh
การตรวจสอบจับอะไรได้
run_tests.sh ที่ขนาดหน้าจอ 4 แบบพฤติกรรมและเลย์เอาต์ของวิดเจ็ต ตำแหน่งแบบ RTL โฟกัสจากคีย์บอร์ด คอนทราสต์ของสกินขณะรัน และพรีเซ็ตทุกอัน
new_project_check.shการพึ่งพาโปรเจกต์แม่แบบซ่อนเร้น ใส่ --zip เพื่อตรวจไฟล์รีลีสอย่างที่ส่งมอบจริง ใส่ --export เพื่อตรวจบิลด์ Web
check_contrast.pyคอนทราสต์ตาม WCAG ของไฟล์ธีมทุกไฟล์ รวมสถานะของปุ่มและพาเนลกึ่งโปร่งใส
check_generated.py · check_scaffold.shธีมที่สร้างขึ้นตรงกับจานสีของมัน และธีมชั่วคราวหนึ่งธีมสร้างได้และผ่านการวัดคอนทราสต์
check_package.pyเวอร์ชันที่อ่านจาก package.json การย้ายบันทึกการเปลี่ยนแปลง และเนื้อในไฟล์ ZIP ทดสอบบนสำเนาชั่วคราว
check_site.pyลิงก์ จุดยึด ภาษาของหน้า อภิธานศัพท์ และตารางค่าปรับของเว็บไซต์นี้
ผลการรันครั้งล่าสุดที่บันทึกไว้ — 2026-09-13, Godot 4.7.2, macOS, เรนเดอเรอร์ Compatibility ผ่าน 438 จาก 438 รายการ ที่ 390×844, 844×390, 768×1024 และ 1280×800 ในโปรเจกต์เปล่า ผ่าน 438 จาก 438 อีกครั้งเมื่อเปิด autoload GoRuntime มีการ export เป็น Web ด้วย และไม่มีรายการคอนทราสต์ตกสักรายการใน 6 ธีม การรันครั้งนี้ยังไม่รวม Godot 4.6 และเครื่อง Android หรือ iOS จริง

การออกเวอร์ชัน

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

เวอร์ชันคือค่าที่เขียนไว้ใน package.json การแพ็กเกจจะไม่เพิ่มเลขให้เองเด็ดขาด ถ้าจะออกเวอร์ชันใหม่ให้แก้เลขนั้นก่อน การรันที่สำเร็จจะตั้ง plugin.cfg และ GoUi.VERSION ให้ตรงกับค่านั้น และเฉพาะครั้งแรกที่แพ็กเกจเวอร์ชันนั้นจะย้ายบันทึกในหัวข้อ Unreleased ของ CHANGELOG.md ไปเป็นรายการที่มีวันที่กำกับ ถ้าแพ็กเกจเวอร์ชันเดิมซ้ำจะสร้างไฟล์ ZIP ใหม่มาแทนที่ไฟล์เดิม ถ้ารันแล้วล้มเหลวจะไม่มีอะไรเปลี่ยน ไฟล์ ZIP ไม่รวมเว็บไซต์นี้ เทสต์ เครื่องมือต่าง ๆ และ package.json

เว็บไซต์นี้

python3 addons/gohud/tools/make_site.py            # อภิธานศัพท์และตารางค่าปรับของสกิน สร้างจากซอร์สโดยตรง
python3 addons/gohud/tools/check_site.py           # ลิงก์ จุดยึด ภาษา อภิธานศัพท์ ตารางที่สร้างขึ้น
bash addons/gohud/tools/site_shots.sh /tmp/shots   # ภาพหน้าจอเดสก์ท็อปและมือถือของทุกหน้า

หน้าเว็บทั้งหมดเป็น HTML ธรรมดาใน www/ — ภาษาอังกฤษอยู่ที่ราก ภาษาเกาหลีอยู่ใน ko/ เวิร์กโฟลว์ของ GitHub Actions จะเผยแพร่โฟลเดอร์นั้นเป็นรากของเว็บไซต์