วิธีปรับแต่งหน้าพอร์ทัล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. <div class="t_nav">
   
2. <a href="forum.php?mod=viewthread&tid=6&extra=page%3D1">โครงการสร้างฝายชะลอน้ำอนุรักษ์พลับพลึงธาร </a><span class="pipe">|</span>
   
3. <a href="forum.php?mod=viewthread&tid=4&extra=page%3D1">พลับพลึงธารพืชหนึ่งเดียวในโลก</a><span
   
4. class="pipe">|</span>
   
5. <a href="forum.php?mod=viewthread&tid=11&extra=page%3D1">สารคดีเกี่ยวกับพลับพลึงธาร</a><span
   
6. class="pipe">|</span>
   
7. <a href="forum.php?mod=viewthread&tid=8&extra=page%3D1">นักอนุรักษ์พลับพลึงธาร</a>
   
8. </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

1. <a     href="http://localhost/dz5"{target}><img     src="{avatar}" width="48" height="48"     alt="{title}"

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

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.คลิกที่บันทึก

file:///C:/Users/BCB7~1/AppData/Local/Temp/msohtml1/01/clip_image108.jpg

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)

ต้อมสกล

ขอบคุณสำหรับสิ่งดีๆ ที่นำมาแบ่งปันครับ

jaeinkgo

ขอบคุณครับ เด่วลองศึกษาดูครับ