对不住大家了,偶最近比较忙,请大家原谅!

X-Space教程——详解模板源代码

上一篇 / 下一篇  2006-09-09 15:33:11 / 天气: 晴朗 / 心情: 高兴 / 个人分类:BLOG相关分享

查看( 599 ) / 评论( 6 )

模板初始代码:

<DIV class=wrap>
#M;R5d+z d9[0<DIV id=header>
8M0_:t[P:]ON0<DIV id=poweredby></DIV>
#]S0zxr4LkF0<DIV id=menu>{{menu}} </DIV>爱好者博墅z3j9q2f/A | aMb
<DIV id=spacename>{{spacename}} </DIV></DIV>
$Cs~l4x,R$YH0<DIV id=content>
*W{`\dd}0<DIV id=sidearea>爱好者博墅0`z3l_md?l
<DIV class=sideblock id=useravatar>{{photo}} </DIV>
{&T j ]7e??:UW0C"o0<DIV class=sideblock id=useraction>爱好者博墅Y$MW&W7g[c T#a
<H3>用户菜单</H3>{{action}} 爱好者博墅 N$E"}}ah}#RGOc
<DIV class=hackbox></DIV></DIV>
1m[joE6BC0<DIV class=sideblock id=calendar>爱好者博墅O VD sJk
<H3>日历</H3>{{calendar}} </DIV>爱好者博墅5DJ pm,tAd9l,n
<DIV class=sideblock id=archive>爱好者博墅&Bl8V4V:tl
<H3>存档</H3>{{archive}} </DIV>爱好者博墅#y"} S{C7{X
<DIV class=sideblock id=search>
Gyw m3GF$kCT0<H3>搜索标题</H3>{{search}} </DIV>爱好者博墅&HkOu-A9Q
<DIV class=sideblock id=infomation>爱好者博墅I9y M!} yE.e n
<H3>统计信息</H3>{{information}} </DIV>
pv?R#^h$?V U0<DIV class=sideblock id=newreplay>爱好者博墅,j#jG0U.u;GD$z7J:k
<H3>最新评论</H3>{{newcomment}} </DIV>爱好者博墅3|(h R/J+t U(wO
<DIV class=sideblock id=favorite>爱好者博墅4QL{i*W_
<H3>我的收藏</H3>{{favorite}} </DIV>爱好者博墅PQ'^,b6K*u]
<DIV class=sideblock id=myfriend>爱好者博墅$?ND2^$s `
<H3>我的好友</H3>{{friend}} </DIV>爱好者博墅$zSX"Jf{z2u3@
<DIV class=sideblock id=userlink>爱好者博墅 GVv%yX4QI+M(Ju(|
<H3>友情链接</H3>{{userlink}} </DIV>爱好者博墅yc3N#]-J%{f8n
<DIV class=sideblock id=guestbook>
%O6{#@-Lt0<H3>最新留言</H3>{{newguestbook}} </DIV><!--{if music}-->爱好者博墅3`4m[|E,wx?R
<DIV class=sideblock id=music>{{music}} </DIV><!--{/if}-->
:H$y5el-RuD`\v0<DIV class=sideblock id=sideicons>爱好者博墅k7Eiq.y*HO:?
<H3>RSS订阅</H3>{{xml}} </DIV></DIV>
`|Q3p]oxa0w0<DIV id=mainarea>爱好者博墅O6\t"m2| Y-s)Y&O
<DIV id=guide>{{guide}}</DIV><!--{if announcement}-->爱好者博墅)r-R V6FC+n J+CM
<DIV id=announcement>{{announcement}} </DIV><!--{/if}--><!--{if blog}-->
.BEUY"T0<DIV id=blog>
zL&t4]X|V9Vo0<H3>我的日志</H3>{{newblog}} </DIV><!--{/if}--><!--{if mybbs}-->爱好者博墅uOS%^j'vhY
<DIV id=formmessage>
X&e$C;Kk0j_0<H3>论坛文集</H3>{{bbsthread}} </DIV><!--{/if}--><!--{if image}-->
7E3Oe RW2Dm0<DIV id=imagelist>爱好者博墅!Btp0m-w
<H3>我的图片</H3>{{newimage}} </DIV><!--{/if}--><!--{if file}-->
yu)TI;EmC f0<DIV id=file>
?] V2L3f%r?9DQ[ T0<H3>我的下载</H3>{{newfile}} </DIV><!--{/if}--><!--{if goods}-->
-L0f4j2m+n.N(s0kmR d0<DIV id=goods>
mt4u.Q0rl yb!o0<H3>我的商品</H3>{{newgoods}} </DIV><!--{/if}--><!--{if link}-->
j-Kqe*tw;G$P2k7Y0<DIV id=link>爱好者博墅cB#s ZxQ
<H3>我的书签</H3>{{newlink}} </DIV><!--{/if}--></DIV>
4[h9D3_0[~:qT+S0<DIV class=hackbox></DIV></DIV></DIV>

 

上面是一个未修改的模板的源代码,也许看着比较杂乱,我们可以将其从新规整一下

 

模板规整后的代码

<DIV class=wrap>
Oz C'bE0   
<DIV id=header>
xMM P'F{s*V3K&?0       
<DIV id=poweredby></DIV>爱好者博墅,i+^ j.?o |5Jb7L
        <DIV id=menu>{{menu}} </DIV>爱好者博墅v.[%m%us2g3t
        <DIV id=spacename>{{spacename}} </DIV>

    </DIV>爱好者博墅q#{tmT
    <DIV id=content>爱好者博墅4H+p$Y+PL,f(T ?
       
<DIV id=sidearea>爱好者博墅rh)c+{L
           
<DIV class=sideblock id=useravatar>{{photo}} </DIV>
E7k?o'u.g0            <DIV class=sideblock id=useraction>
_)G C B`l~:q0                <H3>用户菜单</H3>{{action}}
NE2Ivh'e/f!C0                <DIV class=hackbox></DIV>

            </DIV>
K2? pN&f0UeP0            <DIV class=sideblock id=calendar><H3>日历</H3>{{calendar}} </DIV>爱好者博墅&LH @?5|#B gF[+bz
            <DIV class=sideblock id=archive><H3>存档</H3>{{archive}} </DIV>
(L XdN6ot0            <DIV class=sideblock id=search><H3>搜索标题</H3>{{search}} </DIV>
kT#pR ?.ALa4aHy0            <DIV class=sideblock id=infomation><H3>统计信息</H3>{{information}} </DIV>
a:U4S*[j4[s D0            <DIV class=sideblock id=newreplay><H3>最新评论</H3>{{newcomment}} </DIV>
}tbN(x(yj l0f-Z0            <DIV class=sideblock id=favorite><H3>我的收藏</H3>{{favorite}} </DIV>爱好者博墅?_+]P%G0S u|x w
            <DIV class=sideblock id=myfriend><H3>我的好友</H3>{{friend}} </DIV>
QERI&NG1Y0            <DIV class=sideblock id=userlink><H3>友情链接</H3>{{userlink}} </DIV>爱好者博墅1W&[%h mi:Fzm&r
            <DIV class=sideblock id=guestbook><H3>最新留言</H3>{{newguestbook}} </DIV>

            <!--{if music}--><DIV class=sideblock id=music>{{music}} </DIV><!--{/if}-->
'm2?Mv;Q&n0            <DIV class=sideblock id=sideicons><H3>RSS订阅</H3>{{xml}} </DIV>

        </DIV>爱好者博墅FV*e h |l7Ic*J;r
       
<DIV id=mainarea>爱好者博墅"?&A#_~%^.e
            <DIV id=guide>{{guide}}</DIV>

            <!--{if announcement}--><DIV id=announcement>{{announcement}} </DIV><!--{/if}-->

            <!--{if blog}--><DIV id=blog><H3>我的日志</H3>{{newblog}} </DIV><!--{/if}-->

            <!--{if mybbs}--><DIV id=formmessage><H3>论坛文集</H3>{{bbsthread}} </DIV><!--{/if}-->

            <!--{if image}--><DIV id=imagelist><H3>我的图片</H3>{{newimage}} </DIV><!--{/if}-->

            <!--{if file}--><DIV id=file><H3>我的下载</H3>{{newfile}} </DIV><!--{/if}-->

            <!--{if goods}--><DIV id=goods><H3>我的商品</H3>{{newgoods}} </DIV><!--{/if}-->

            <!--{if link}--><DIV id=link><H3>我的书签</H3>{{newlink}} </DIV><!--{/if}-->

        </DIV>爱好者博墅/N"L8zh$~ \
       
<DIV class=hackbox></DIV>

    </DIV>

</DIV>

 

代码详解:

 

外围框架:

<DIV class=wrap></DIV>    整个页面的外围框架,如我的BLOG底部的版权信息,就是放在外围框架之外的

顶部框架:

<DIV id=header></DIV>     顶部框架,其中包含了

        <DIV id=poweredby></DIV>               
u9G [5[q6W/z0        <DIV id=menu>{{menu}} </DIV>              这两项随意怎么修改并不会引起任何变化-___-|
HA/\&S,o{ DK0        <DIV id=spacename>{{spacename}} </DIV>    显示你的BLOG名称以及复制网址、加入收藏夹按钮及BLOG地址

内容框架:

 <DIV id=content></DIV>    内容框架,其中包含了

        <DIV id=sidearea></DIV>        侧边栏框架,其下包含的元素均比较容易理解,我就不详细描述了,只提一下音乐播放器部分

            <!--{if music}--><DIV class=sideblock id=music>{{music}} </DIV><!--{/if}-->

            <!--{if music}--><!--{/if}-->用于辨别是否添加了音乐地址,如果“否”则不显示音乐播放器      

        <DIV id=mainarea></DIV>        主要部分框架,其下内容有中文标题,应该不难理解,我说说前两项:

            <DIV id=guide>{{guide}}</DIV>    用于显示“系统功能”菜单,什么是系统功能?请查看空间管理配置

            <!--{if announcement}--><DIV id=announcement>{{announcement}} </DIV><!--{/if}-->    用于显示“个人公告”,什么是个人公告?请查看空间管理配置

 

如果你想要于BLOG页面中插入一些元素,只需要通过上面的介绍,找准相应的位置,插入相关代码即可。

 

当然,你也可以通过对上面内容的了解,去掉、加入、修改或者从新布局那些功能模块。

 

如果你把模板代码修改的乱七八糟了,别担心,在空间管理-浏览模板中,删除你修改的模板,从新导入你选择的从头再来即可

 

 

 

最后再说几个写作中常用到的代码:

 

1、目录树

 

增加一个章节,左侧目录树中参照以下更改:

……爱好者博墅5m%Vc9ts!AQ9o2OU
<li><a href="http://www.edonkey2000.cn/blog/i2616">X-Space系列教程——详解模板源代码</a>
k5G f5n?s Z0  <ul>
O6@&K6DeR*j0    <li><a href="http://www.edonkey2000.cn/blog/i2616#2_1">模板初始代码</a></li>爱好者博墅_RL7qT6p%vvRm
    <li><a href="http://www.edonkey2000.cn/blog/i2616#2_2">模板规整后的代码</a></li>爱好者博墅Ydi CU8m
    <li><a href="http://www.edonkey2000.cn/blog/i2616#2_3">代码详解</a>爱好者博墅t"W-Z[?_/F@"n
      <ul>爱好者博墅pL:V%v? D|
        <li><a href="http://www.edonkey2000.cn/blog/i2616#2_3_1">外围框架</a></li>
lQ,}qG!? y h_0        <li><a href="http://www.edonkey2000.cn/blog/i2616#2_3_2">顶部框架</a></li>
-E+rl+c E0        <li><a href="http://www.edonkey2000.cn/blog/i2616#2_3_3">内容框架</a></li>爱好者博墅4}I&z Ut&s0M"P sg
      </ul>爱好者博墅MF s:l;qd k*s
    </li>
1R N#L]M0  </ul>
K2ag m:C!m&d4Dgp0</li>
6Y)pXv:~ Zi:AH`0……

效果:

……
  • X-Space系列教程——详解模板源代码   

    ……

    与目录树中的链接相对应,文档中应添加相应的锚点:

    <H4 id=2_1>模板初始代码:</H4>

    ……

    <H4 id=2_2>模板规整后的代码</H4>
    H o0aMaK S o0……
    b'IIG ?-ba9Sl0<H4 id=2_3>代码详解:</H4>爱好者博墅1Tp8LQ?
    ……爱好者博墅.a@+p;],`"p9U_-]
    <H5 id=2_3_1>外围框架:</H5>
    3h;~ZXT:mf'caF"L0……
    Y8u+g0R8\0<H5 id=2_3_2>顶部框架:</H5>
    '?[A4vm? m0……
    ;d(fh^t Q0<H5 id=2_3_3>内容框架:</H5>

    2、标题

     

    页面中的大标题用

     

    <h1>标题1</h1>

    <h5>标题5</h5>

    效果如下:

    标题1

    标题5

     

     

    3、列表

    • 有序列表用

    <ol>
    !] q3K|-Wuf0  <li>列表1</li>爱好者博墅Nz:WJzU$E)Z^
      <li>列表2</li>
    ,j"y`'b$}3T;q0</ol>

     

    显示效果为:

    1. 列表1
    2. 列表2
    • 无序列表用

    <ul>
    K/\"o_p1vyfV^0  <li>列表1</li>爱好者博墅$|k oAtcw
      <li>列表1</li>
    $n@/}$l-q0</ul>

     

    显示效果为:

    • 列表1
    • 列表2

     

    4、其它

     

    编写源代码

    • 文字段落请用<p></p>
    • 中文的标点请用全角
    • 删除不必要的空格
    • 英文可部分应适当大写

     

    这里我只介绍了“主页面”的代码,“索引页面”和“内容页面”基本是一致的


  • TAG: 情感 BLOG相关分享

    一天 akira 发布于2006-09-09 15:35:12
    不懂,略过
    ~Endless~ jack54gwt 发布于2006-09-09 15:37:39
    慢慢看还是很好理解的
    影 飘落 发布于2006-09-09 15:42:02
    框架网页。偶还是蛮喜欢的了现在。blog.cfan.com.cn        p;H'l9YTt,D
    以前觉得不爽。现在觉得框架网页真是好啊。
            j9[
    GJ3C*`
    还有嵌入式的也好。电脑爱好者|电脑爱好者论坛|电脑爱好者网站|软件使用|软件技巧|数码使用|数码技巧|硬件使用|硬件技巧%u,F?\ G
    不喜欢DIV
    ℡語無倫次ゞ's universe ℡語無倫次ゞ 发布于2006-09-09 15:44:04
    很麻烦
    (d?-K:GMMC ~$}电脑爱好者|电脑爱好者论坛|电脑爱好者网站|软件使用|软件技巧|数码使用|数码技巧|硬件使用|硬件技巧
    uq'zb*r-K;W4Cr电脑爱好者|电脑爱好者论坛|电脑爱好者网站|软件使用|软件技巧|数码使用|数码技巧|硬件使用|硬件技巧用别人的
    ~Endless~ jack54gwt 发布于2006-09-09 15:58:49
    原来有些没显示出来怪不得会看不懂,从BLOG导过来就是有些不方便啊,希望Discuz!能尽快改正~呵呵
    小蜗牛的壳 飞出黑洞的cpu 发布于2007-04-10 15:58:44
    看来我得好好研究研究了
    我来说两句

    (可选)

    日历

    « 2008-12-05  
     123456
    78910111213
    14151617181920
    21222324252627
    28293031   

    数据统计

    • 访问量: 229147
    • 日志数: 66
    • 图片数: 14
    • 建立时间: 2006-06-07
    • 更新时间: 2007-10-02

    RSS订阅

    Open Toolbar