igniteui docfx

Ignite UI DOCFX BUILDER

โครงการนี้ใช้ Node.js และ Gulp เป็นเครื่องมือสร้างเพื่อเร่งการพัฒนาไซต์ตัวอย่าง Ignite UI DOCFX สำหรับ Ignite UI สำหรับ Angular

ข้อกำหนดเบื้องต้น

1. DOCFX
2. node.js
3. สุทธิ SDK 6.0 หรือสูงกว่า

เริ่มต้น

การติดตั้ง DOCFX

ในการติดตั้ง DOCFX ให้กู้คืนเป็นเครื่องมือ DOTNET - ติดตั้งเครื่องมือท้องถิ่น. NET ที่อยู่ในขอบเขตสำหรับไดเรกทอรีปัจจุบัน:

dotnet tool restore

หมายเหตุ : การดำเนินการ npm install ยังคืนค่าการพึ่งพาเครื่องมือ Dotnet เป็นขั้นตอน postinstall

การติดตั้งการพึ่งพา node.js:

หากคุณใช้ NPM ให้เรียกใช้:

npm install

หากคุณใช้เส้นด้ายให้เรียกใช้:

yarn install

เริ่มต้นเซิร์ฟเวอร์การพัฒนา

กระบวนการสร้างขึ้นอยู่กับตัวแปรสภาพแวดล้อม NODE_ENV เพื่อให้สามารถตั้งค่า URL ที่ถูกต้องสำหรับตัวอย่างเชิงมุม กำหนดทั้ง development staging หรือ production ให้กับ NODE_ENV

คุณสามารถสร้างไฟล์ .env ภายใต้รูทของโครงการและตั้งค่า NODE_ENV เช่นโดยการกำหนดสภาพแวดล้อม

 NODE_ENV=development

ในการเริ่มต้นเซิร์ฟเวอร์ให้เรียกใช้:

สำหรับภาษาอังกฤษ:

npm start -- --lang en

สำหรับญี่ปุ่น:

npm start -- --lang jp

สำหรับเกาหลี:

npm start -- --lang kr

คำสั่งใช้อาร์กิวเมนต์ adittional -lang [en | JP | KR] เพื่อให้บริการเวอร์ชันภาษาอังกฤษญี่ปุ่นหรือเกาหลี

การสร้างไซต์คงที่

สำหรับภาษาอังกฤษ:

npm run build -- --lang en

สำหรับภาษาญี่ปุ่น:

npm run build -- --lang jp

สำหรับเกาหลี:

npm run build -- --lang kr

บิลด์สคริปต์สร้างโฟลเดอร์ที่เรียกว่า _site ที่รูทของโครงการที่เกี่ยวข้อง ตัวอย่างเช่นสำหรับภาษาอังกฤษเว็บไซต์คงที่อาศัยอยู่ภายใต้ en/_site ;

อาคารสำหรับการแสดงละครและการผลิต

คำสั่ง build นั้นคล้ายกับขั้นตอนดังกล่าวมาก ในการสร้างเว็บไซต์สำหรับการจัดเตรียมรัน:

npm run build-staging --lang en

คำสั่ง build สำหรับการแสดงละครคือ:

npm run build-production --lang jp

การใช้ตัวแก้ไขที่ชัดเจนสำหรับตัวอย่างการแก้ไขสด

แอตทริบิวต์ Explicit-Editor สำหรับองค์ประกอบมุมมองโค้ดช่วยให้สามารถตั้งค่าตัวแก้ไขสดอย่างชัดเจนสำหรับตัวอย่างที่ระบุและรองรับ "CSB" และ "Stackblitz" เป็นค่า

 < code-view explicit-editor =" csb " ... > </ code-view > 

 < code-view explicit-editor =" stackblitz " ... > </ code-view > 

รวมฉลากหัวข้อ TOC

เปิด '[en | JP | kr] Components toc.yml 'ไฟล์สำหรับเวอร์ชันภาษาที่เฉพาะเจาะจง หัวข้อ TOC แต่ละหัวข้อมีพารามิเตอร์สำหรับชื่อและ HREF พร้อมกับพารามิเตอร์ฉลากเสริม เริ่มต้นจากเวอร์ชัน 3.5.1 ของ Igniteui-DOCFX-Template ป้ายกำกับที่รองรับรวมถึง 'ใหม่' 'อัปเดต' 'ดูตัวอย่าง' และ 'เบต้า' ในการเพิ่มป้ายกำกับที่ต้องการเพียงระบุชื่อและตั้งค่าเป็น TRUE

ตัวอย่าง:

 - name: Update guide
  href: general/update-guide.md
  updated: true

ตัวอย่างรหัสที่ยุบได้

ในการสร้างและแสดงตัวอย่างโค้ดที่ยุบได้บนเว็บไซต์เอกสารให้ทำตามขั้นตอนเหล่านี้:

1. สร้างส่วน <div> ด้วยคลาส "แฟนซี-รายละเอียด"

2. เพิ่มองค์ประกอบ <summary> ในส่วน <div> ที่สร้างขึ้น

3. เพิ่มข้อความสรุปที่แสดงส่วนหัวข้อมูลโค้ดลงในองค์ประกอบ <summary>

4. เพิ่มองค์ประกอบ <code> ในส่วน <div> ที่สร้างขึ้น

5. เพิ่มข้อมูลโค้ดลงในองค์ประกอบ <code>

6. ตัวอย่าง:

 < div class =" fancy-details " >
    < summary > Example of a successful response body: </ summary >
    < code >
        {
            "id": "{123456}_repo",
            "modified": "2023-02-03T14:07:34.0000000",
            "created": "2023-02-03T14:07:34.0000000",
            "name": "Marketing",
            "user": {
                "id": "{123456}_u ",
                "name": "Teddy Mitkova"
            },
            "dashboardSections": [
                {
                    "id": "{123456}_f",
                    "name": "May"
                }
            ]
        }
    </ code >
</ div >