จริงๆแล้วคอนเซ็ปต์หลักๆของผมอย่างหนึ่งในการออกแบบ GCMS ก็คือการออกแบบ Template ที่ง่ายๆ แต่ในความเป็นจริงแล้ว ไอ้ที่ว่าง่ายของผม ดูเหมือนมันจะง่ายสำหรับคนที่คุ้นเคยกับ XHTML และ CSS แต่มันก็เป็นสิ่งจำเป็นครับ เนื่องจากผมต้องการให้มันผ่านการตรวจสอบเว็บไซต์ตามมาตรฐาน [google]W3C[/google] แต่ไม่ว่าอย่างไรก็ตามผมมองว่า Template ที่ผมใช้นั้นก็ดูง่ายสุดแล้วในกระบวนการทำ Template ทั้งหมด

หลักในการทำ Template ของผม สิ่งสำคัญก็คือ id ของ Element ต่างๆ บน Template ครับ ที่เป็นสิ่งจำเป็น เนื่องจากเว็บไซต์เป็น Ajax ดังนั้น id ต่างๆ ค่อนข้างจำเป็นอย่างมากเพราะมันจะถูกใช้โดย Javascript id บางตัว ถ้าไม่มีอาจทำให้เว็บไซต์ทำงานผิดพลาดได้ครับ

ข้อความต่างๆภายใน Template ที่อยู่ภายใต้วงเล็บปีกกา {...} จะถูกแทนที่ด้วยข้อความที่เราต้องการจะแสดงในส่วนนั้นๆครับ ดังนั้น หากเราไม่ได้ใส่ปีกกาส่วนนั้นๆไว้ ส่วนนั้นๆก็จะไม่แสดงผลครับ แต่มันจะยังทำงานอยู่นะครับ เนื่องจากการทำงานจะทำงานตามลำดับภายในโค้ดโดยไม่สนใจว่าจะแสดงผลหรือไม่ ผมยกตัวอย่าง ถ้าเราเอา {LOGIN} ออกการตรวจสอบการ login ก็จะยังมีอยู่ เพียงแต่มันไม่แสดงผลเท่านั้นครับ

{LNG_XXX} ข้อความในส่วนนี้จะถูกแทนที่ด้วยตัวแปรภาษา ตามที่กำหนดไว้ในส่วนภาษาครับ จากตัวอย่างมันจะถูกแทนที่ด้วยข้อความตามที่กำหนดไว้ในตัวแปร $lng[LNG_XXX] ครับโดยที่แต่ละโมดูลจะมีข้อความภาษาแตกต่างกันตามแต่ละโมดูลครับ

{WIDGET_XXX} ข้อความในส่วนนี้ก็เช่นกันครับ จะถูกแทนที่ด้วย Widget ต่างๆตามที่กำหนดไว้

โครงสร้าง Template ของ GCMS

ก็เหมือนกับโครงสร้างเว็บไซต์โดยทั่วๆไปแหละครับที่ประกอบด้วย Header, Menu, Content, Sidebar และ Footer โครงสร้างนี้จะถูกกำหนดไว้ในไฟล์ index.html ภายในโฟลเดอร์ skin/ ครับ

สำหรับการปรับแต่งหน้าตาของเว็บไซต์โดยทั่วๆไปก็สามารถแก้ไขไฟล์ Skin และ CSS รวมถึงการย้าย {...} ไปยังตำแหน่งที่ต้องการเพื่อให้แสดงผล ณ. จุดนั้นๆ โดยในการย้ายตำแหน่ง เราอาจต้องย้าย Element ที่ห่อหุ้มส่วนนั้นๆไปด้วยครับ เนื่องจากมันอาจมีความเกี่ยวพันกันกับการทำงานของ Javascript

ยกตัวอย่างเช่น หากต้องการย้ายเมนูหลักไปไว้ยัง Sidebar เราก็อาจต้องทำการย้าย ทั้ง Element ซึ่งได้แก่ <ul id="topmenu">{MAINMENU}</ul> ไปไว้ตรง Template ในส่วนของ Sidebar เป็นต้น
[code]<div id="sidebar">
<div id="login-div">{LOGIN}</div>
<ul id="topmenu">{MAINMENU}</ul>
<div class="calendar-box">{WIDGET_CALENDAR}</div>
<div class="gallery-box">{WIDGET_GALLERY}</div>
<div class="counter-box">{WIDGET_COUNTER}</div>
</div>[/code]
สำหรับ Template ของโมดูลต่างๆ ส่วนใหญ่ก็จะเป็นโครงสร้างที่จะถูกแสดงในส่วน CONTENT ของเว็บหลัก และ ลิสต์รายการข้อมูลทั่วไปของโมดูล (ชื่อไฟล์ที่มีคำว่า item ประกอบ) การแก้ไข ย้าย ปรับเปลี่ยนการแสดงผลก็สามารถทำได้เช่นกันครับด้วยเทคนิคแบบเดียวกัน

ยกตัวอย่างไฟล์ menuitem.html ซึ่งก็คือ Template ในส่วนของเมนูแต่ละรายการ ที่ในตอนแสดงเมนู จะอ่านรายการนี้และนำไปแทนที่ในส่วน MAINMENU บน Template หลัก
[code]<li><a rel="{MODULE}" href="{URL}" title="{TOOLTIP}">{MENU}</a></li>[/code]
ในส่วนของลิสต์รายการต่างๆอาจมีบางรายการที่มีความพิเศษนิดนึง ตรงที่สามารถกำหนดความยาวของข้อมูลได้ครับ ซี่งโดยทั่วไป มักเป็นส่วนรายการ TOPIC หรือ DETAIL ซึ่งสามารถสังเกตุได้ว่ารายการนั้นๆจะมีตัวเลขประกอบอยู่ เช่น {TOPIC-20} หมายถึง แสดงรายการ topic ยาว 20 ตัวอักษร