วิธีปรับแต่งหน้าพอร์ทัลdiscuzX3.2

suttasilo

วิธีปรับแต่งหน้าพอร์ทัลdiscuzX3.2

          discuz X3.2 จะมีแม่แบบพอร์ทัลมากับระบบอยู่ 2 แบบ
          1.portal_index.xml
          2.portal_topic มี 4 สี
                    portal_topic_blue.xml    (แม่แบบสีน้ำเงิน)
                    portal_topic_green.xml  (แม่แบบสีเขียว)
                    portal_topic_grey.xml    (แม่แบบสีเทา)
                    portal_topic_red.xml      (แม่แบบสีแดง)
          ในที่นี้จะแสดงวิธีการปรับแต่งแม่แบบ   portal_topic_blue.xml  มาให้ดูเป็นตัวอย่างดังนี้
1.คลิกที่เมนูพอร์ทัล  คลิกที่ DIY คลิกเลือกขั้นสูง  (หากเมนูพอร์ทัลยังไม่ถูกเปิดใช้งานให้ดูวิธีเปิดที่กระทู้ การตั้งค่าเมนูหลักและเมนูต่างๆ)

2.คลิกที่บันทึก คลิกนำเข้า

3.คลิกที่เลือกไฟล์

4.คลิกที่ template/default/portal/dyxml/เลือก portal_topic_blue.xml แล้วคลิก open

5.คลิกที่นำเข้า

6.คลิกที่ตกลง

7.คลิกที่แก้ไข/ แก้ไข

8.ทำการแก้ไขเมนูชื่อไฟล์ภาษาจีนและใส่ลิงค์  จากนั้นคลิกที่ยืนยัน
ตัวอย่างโค้ดที่แก้ไข

1.    
   
2.             [url=forum.php?mod=viewthread&tid=6&extra=page%3D1]โครงการสร้างฝายชะลอน้ำอนุรักษ์พลับพลึงธาร[/url]|
   
3.             [url=forum.php?mod=viewthread&tid=4&extra=page%3D1]พลับพลึงธารพืชหนึ่งเดียวในโลก[/url]<span
   
4. 
   
5.     class="pipe">|
   
6.             [url=forum.php?mod=viewthread&tid=11&extra=page%3D1]สารคดีเกี่ยวกับพลับพลึงธาร[/url]<span
   
7. 
   
8.     class="pipe">|
   
9.             [url=forum.php?mod=viewthread&tid=8&extra=page%3D1]นักอนุรักษ์พลับพลึงธาร[/url]
   
10.     </span
    
11. </span
    
12. 
    

คัดลอกไปที่คลิปบอร์ด

9.ผลลัพธ์ที่ได้

10.คลิกที่แก้ไข/ คลิกที่ชื่อ

11.คลิกแก้ไขชื่อเฟรมภาษาจีนเป็น กระทู้ล่าสุด  แล้วคลิกที่ ตกลง

12.ผลลัพธ์ที่ได้

13.คลิกที่แก้ไข/ แก้ไข

14.คลิกปรับแต่งค่าตามต้องการ   แล้วคลิกที่ยืนยัน

15.คลิกที่แก้ไข/ แก้ไข

16.แก้ไขชื่อเฟรมภาษาจีนเป็น น่าสนใจ แล้วคลิกที่ ตกลง

17.ผลลัพธ์ที่ได้

18.คลิกที่แก้ไข/ แก้ไข

19.คลิกที่เทมเพลทโมดูล

20.แก้โค้ดรูปภาพไม่ขึ้นและใส่ลิงค์  แล้วคลิกที่อัปเดท
ตัวอย่างโค้ดที่แก้ไข
[code][url=]

21.ผลลัพธ์ที่ได้

22.คลิกที่แก้ไข/ แก้ไข

23.คลิกปรับแต่งค่าตามต้องการ   แล้วคลิกที่ยืนยัน

24.คลิกที่แก้ไข/ คลิกที่ชื่อ

25.คลิกแก้ไขชื่อเฟรมภาษาจีนเป็น ยอดนิยม  แล้วคลิกที่ ตกลง

26.ผลลัพธ์ที่ได้

27.คลิกที่แก้ไข/ แก้ไข

28.ปรับแต่งค่าตามต้องการ   แล้วคลิกที่ยืนยัน

29.คลิกที่แก้ไข/ คลิกที่ชื่อ

30.แก้ไขชื่อเฟรมภาษาจีนเป็น เพิ่มเติม แล้วใส่ลิงค์ , แก้ไขชื่อเฟรมภาษาจีนเป็น ชมรมรักพลับพลึงธารคุะบุรีฯ  แล้วคลิกที่ ตกลง

31.ผลลัพธ์ที่ได้

32.คลิกที่แก้ไข/ แก้ไข

33.ปรับแต่งค่าตามต้องการ   แล้วคลิกที่ยืนยัน

34.คลิกที่แก้ไข/ คลิกที่ชื่อ

35.แก้ไขชื่อเฟรมภาษาจีนเป็น เพิ่มเติม แล้วใส่ลิงค์ , แก้ไขชื่อเฟรมภาษาจีนเป็น เรียนรู้ทำเว็บdiscuz แล้วคลิกที่ ตกลง

36.ผลลัพธ์ที่ได้

37.คลิกที่แก้ไข/ แก้ไข

38.ปรับแต่งค่าตามต้องการ   แล้วคลิกที่ยืนยัน

39.คลิกที่แก้ไข/ คลิกที่ชื่อ

40.แก้ไขชื่อเฟรมภาษาจีนเป็น เพิ่มเติม แล้วใส่ลิงค์ , แก้ไขชื่อเฟรมภาษาจีนเป็น ชมรมรักภาพถ่ายรักธรรมชาติคุระบุรี  แล้วคลิกที่ ตกลง

41.ผลลัพธ์ที่ได้

42.คลิกที่แก้ไข/ แก้ไข

43.ปรับแต่งค่าตามต้องการ   แล้วคลิกที่ยืนยัน

44.คลิกที่แก้ไข/ คลิกที่ชื่อ

45.แก้ไขชื่อเฟรมภาษาจีนเป็นเพิ่มเติม แล้วใส่ลิงค์ (https://www.youtube.com/user/suttasilo) , แก้ไขชื่อเฟรมภาษาจีนเป็น วีดีโอ แล้วคลิกที่ ตกลง

46.คลิกที่แก้ไข/ แก้ไข

47.ช่องที่อยู่ URL วิดีโอ ใส่ลิงค์วีดีโอที่เราต้องการแสดง (https://www.youtube.com/watch?v=AVpFPLCbT5g)  แล้วคลิกที่ยืนยัน

48.คลิกที่แก้ไข/ คลิกที่ชื่อ

49.แก้ไขชื่อเฟรมภาษาจีนเป็น บล็อกและบทความ  แล้วคลิกที่ ตกลง

50.คลิกที่แก้ไข/ แก้ไข

51.ปรับแต่งค่าตามต้องการ   แล้วคลิกที่ยืนยัน

52.คลิกที่แก้ไข/ แก้ไข

53.คลิกปรับเปลี่ยนเป็นบทความ  แล้วคลิกที่ยืนยัน

54.คลิกที่บันทึก

55.ผลลัพธ์ที่ได้

56.เปลี่ยนรูปภาพโลโก้ โดยสร้างไฟล์ภาพด้วย photoshop save ไฟล์ ชื่อ banner.jpg แล้วอัพไปทับไฟล์เดิมที่โฟลเดอร์ static/topic/images/blue/ทับไฟล์เดิม banner.jpg   ผลลัพธ์ที่ได้

57.ต้องการลบหน้าพอร์ทัล  ไปคลิกที่เมนูพอร์ทัล  คลิกที่ DIY คลิกเลือก ล้างทั้งหมด

58.แล้วคลิกที่ตกลง

59.คลิกที่บันทึก

60.ผลลัพธ์ที่ได้

61.การปรับแต่งหน้าพอร์ทัลก็เสร็จสิ้นเพียงเท่านี้  ท่านสามารถนำไปปรับประยุกต์ใช้เพิ่มเติม ปรับแต่งแม่แบบ portal_index.xml ที่มามาในระบบได้เอง นอกจากตัวอย่างที่ยกมาดังกล่าวแล้ว

ศึกษารายละเอียดวิธีการทำได้ที่วีดีโอด้านล่าง

เพิ่มเติมกรณีที่มีการติดตั้งแม่แบบอื่น และมี DIY หน้าพอร์ทัลด้วย  วิธีนำเข้า
คลิกที่หน้าพอร์ทัล ไปคลิกที่ DIY เลือกขั้นสูง ทำตามขั้นตอนเหมือนข้อ 1-6

ที่มาจาก : บทบันทึกการสอน "โครงการคอมพิวเตอร์สมองกลเสริมเยาวชนยุคIT" ชมรมรักพลับพลึงธารคุระบุรีศรีพังงา (pptflower.com)[/url]

viwatchai

ขอบคุณครับ

tnc

ขอบคุณครับ เริ่มจะทำเป็นแล้ว