Structure Theme Template របស់ Blogspot.com

Structure Theme Template របស់ Blogspot.com

Theme template នៅក្នុង Blogspot (Blogger) ប្រើ XML-based structure ហើយរួមមានផ្នែកសំខាន់ៗដូចខាងក្រោម៖


📁 រចនាសម្ព័ន្ធ (Structure) សំខាន់

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 
      xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:b='http://www.google.com/2005/gml/b'
      xmlns:data='http://www.google.com/2005/gml/data'
      xmlns:expr='http://www.google.com/2005/gml/expr'>

  <!-- 1. HEAD SECTION -->
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title>...</title>
    <b:skin><![CDATA[ /* CSS Goes Here */ ]]></b:skin>
  </head>

  <!-- 2. BODY SECTION -->
  <body>
    <!-- 3. WRAPPER / LAYOUT -->
    <div id='outer-wrapper'>

      <!-- 4. HEADER SECTION -->
      <b:section id='header' class='header' maxwidgets='1'>
        <b:widget type='Header' id='Header1'/>
      </b:section>

      <!-- 5. MAIN CONTENT AREA -->
      <div id='content-wrapper'>
        
        <!-- 6. BLOG POSTS SECTION -->
        <b:section id='main' class='main' showaddelement='yes'>
          <b:widget type='Blog' id='Blog1'>
            <b:includable id='main'>
              <b:loop values='data:posts' var='post'>
                <!-- Post Loop -->
              </b:loop>
            </b:includable>
          </b:widget>
        </b:section>

        <!-- 7. SIDEBAR SECTION -->
        <b:section id='sidebar' class='sidebar' maxwidgets='6'>
          <b:widget type='Profile' id='Profile1'/>
          <b:widget type='BlogArchive' id='BlogArchive1'/>
        </b:section>

      </div>

      <!-- 8. FOOTER SECTION -->
      <b:section id='footer' class='footer'>
        <b:widget type='Attribution' id='Attribution1'/>
      </b:section>

    </div>
  </body>
</html>

🔑 ផ្នែកដែលត្រូវយល់ច្បាស់

ផ្នែក Tags មុខងារ
Skin/CSS <b:skin><![CDATA[...]]></b:skin> រចនារូបរាង
Section <b:section id='...'> តំបន់ Layout
Widget <b:widget type='...'> ប្លុកមុខងារ
Includable <b:includable id='main'> Template logic
Loop <b:loop values='data:posts'> វិលជុំ Posts
Data Tags data:post.title, data:post.url ទាញទិន្នន័យ

💡 Tags ដែលប្រើញឹកញាប់

<!-- បង្ហាញ Title -->
<data:post.title/>

<!-- Link ទៅ Post -->
<a expr:href='data:post.url'><data:post.title/></a>

<!-- បង្ហាញ Content -->
<data:post.body/>

<!-- Date -->
<data:post.timestamp/>

<!-- Author -->
<data:post.author/>

<!-- If/Else Logic -->
<b:if cond='data:post.hasJumpLink'>
  <a expr:href='data:post.url + &quot;#more&quot;'>Read More</a>
</b:if>

📌 Summary

គួរសិក្សាក្នុង លំដាប់ នេះ៖

  1. XML + HTML structure មូលដ្ឋាន
  2. b:section & b:widget — Layout system
  3. b:includable & b:loop — Logic & Loops
  4. data: variables — Dynamic content
  5. CSS ក្នុង b:skin — Styling
  6. expr: attributes — Dynamic attributes
Previous Post Next Post
📑
100%
A+
A−