N

Nokfa Docs

framework-next.js
project
style
tool-git

Current: project

สารบัญ

ไม่มีชื่อบทความ

ออกแบบ docs.nokfa.com

🧭 ส่วน Navbar (ทุกหน้า)

+-------------------------------------------------------------+
| docs.nokfa.com        | HOME | บทความ ▼                    |
|                                           |    (Search bar)   |
+-------------------------------------------------------------+

  • HOME: ปุ่มลิงก์ไปหน้าแรก

  • บทความ (มี drop-down):

🏠 หน้า HOME

โครงสร้างเรียบง่าย (เหมือน landing page ของ knowledge base หรือเอกสาร)

[ โลโก้ / คำอธิบายสั้นเกี่ยวกับ Nokfa Docs ]

[ หมวดหมู่บทความย่อยเด่น ]
-----------------------------------
| git-trick       | การใช้ vim     |
| ทำระบบลงเวลา | แนวคิดธุรกิจ |
-----------------------------------

[ บทความล่าสุด ]
- คู่มือ Testing และ Debugging ระบบ Time Clock
- การสร้าง Shared Packages (auth-lib, pdf-writer, ui-kit)
- การตั้งค่า Firebase Console สำหรับ Next.js + Firestore (พร้อมภาพ)

📚 หน้า “บทความ” (หมวดหลัก)

+-------------------------------------------------------------+
| docs.nokfa.com        | HOME | บทความ ▼                    |
+-------------------------------------------------------------+

+-------------------------------------------------------------+
| [Side bar หมวดหมู่หลัก]      |  [บทความหลัก]     | [หัวข้อในบทความ]  |
| ---------------------------- |  ----------------- | ----------------- |
| ▼ เว็บไซต์                   |  [Title]            | • หัวข้อที่ 1     |
|    - Next.js                |  [Date & Tag]       | • หัวข้อที่ 2     |
|    - Firebase              |  [เนื้อหา…]         | • หัวข้อที่ 3     |
| ▼ การตลาด                   |                     |                   |
|    - SEO เบื้องต้น         |                     |                   |
|    - การยิงแอด Facebook     |                     |                   |
| ▼ การเขียนโปรแกรม           |                     |                   |
|    - Git Trick             |                     |                   |
|    - ทำระบบลงเวลา          |                     |                   |
+-------------------------------------------------------------+

รายละเอียด:

  • Side bar (ซ้าย):

    • แสดงหมวดหมู่หลัก และสามารถขยายเพื่อดู “หมวดหมู่ย่อย” ด้านใน
    • แต่ละหมวดย่อยสามารถคลิกเพื่อกรองบทความที่อยู่ภายในได้

  • คอลัมน์บทความ (กลาง):

    • แสดงบทความล่าสุดในหมวดหรือหมวดย่อยที่เลือก
    • มี Title, วันที่, Tag และเนื้อหา

  • คอลัมน์ขวาสุด (สารบัญ):

    • เป็น anchor links ไปยังแต่ละหัวข้อในบทความ
    • Auto-gen จาก <h2> หรือ <h3> ของเนื้อหา

📝 เพิ่มเติม (Option):

  • Responsive Design: หน้า mobile ดึง side bar และสารบัญไปเป็น toggle menu
  • Search Function: ช่องค้นหาบทความที่ navbar ด้านขวา
  • Pagination หรือ Infinite Scroll ในหน้าบทความ