Vicuna CMS结构

题目很大，要想把Vicuna CMS结构具体讲清楚相当的难。所以在这里仅仅以wp.Vicuna为例讲起庞大的Vicuna CMS。通过图片的方式把结构讲一讲，必要时通过我的网页简单举个例子，这样对WordPress的优秀模板wp.Vicuna有一个很好的认识。

1、对网页设计非常有用，通用性强，循环性强、可控性强，高度优化。
2、如此结构还有一个好处就是代码干净整洁。
3、这种强大的结构，根本不亚于商业模板，有过之而无不及。
4、这里只讲结构大框，不讲具体，也没法讲清楚，不然得写论文。
5、以图片说明为主，举例为辅，这样能达到一目了然的效果。
6、三个部分：总揽、XHTML 和 CSS。
7、只要稍稍理解一点，做一个WP Theme 简直绰绰有余。

总揽：

图一、首先我们看一下Vicuna CMS的总体结构。

在WordPress平台上，调用XHTML，再加载CSS的方式构成一个WP Theme，同样你会发现用CSS控制模板样式，而且其样式多样化。

XHTML：

图二、核心BODY的构成。

我这篇文章的大标题就是H1，首页罗列的各个文章标题就是H2，我这里没有启用Class，默认的wp.Viucna模板带description这个Class。

图三、DIV用法之一。

– 这里先讲讲我用的一个FORM，参考我的header部分的Search form，BODY ->DIV ->P ->Search Form这种形式，图二和图三结合起来看。

– 看完图请看下面代码，你会发现DIV,H3,UL是如何使用的，而这些使用远比图片丰富的多，还使用了H4，LI，SPAN。

这段代码就是我的首页Left Sidebar《休闲娱乐》展开以后的结果，当然class可以自行设定，从下段代码你会看出图三和图四是结合起来使用的（其他的原理都大同小异，仅仅以此说明）。

<div id="utilities" class="section">

<div class="section xxx yyy">
<h3>腾 信 家</h3>

 <div class="section ccc">
   <h4>休闲娱乐</h4>
     <ul class="lesson">
     <li><span class="subject">
<a href="/entertainment"/>娱乐无限</a></span>
      <ul>
         <li class="course">
<a href="/movie"/>经典影片</a></li>
         <li class="course">
<a href="/music"/>音乐欣赏</a></li>
         <li class="course lastChild">
<a href="/youtube"/>YouTube</a></li>
      </ul>
    </li>
    <li><span class="subject">
<a href="/joke"/>开心一刻</a></span></li>
    </ul>
 </div>

图四、DIV用法之二。

请注意：UL和LI是反复使用，反复嵌套的。

图五、DIV用法之三。

请看右边的Sidebar就是用的图五方式（图七更加具体），同样UL下还可以用LI，也可以像图四一样反复使用UL和LI。而且wp.Vicuna的Comment.php也大量使用了这种DL,DT,DD的方式。

这样写法的好处就是可以无限制的增加代码，并且反复使用UL和LI，定义CSS也非常方便，任何一个小细节都能具体定义。

图六、wp.Vicuna的整体布局。

图七、wp.Vicuna的默认Sidebar构成。提供的默认模板都采用这种方式，DD下面可以增加UL,LI的，和图五结合着看。

至此XHTML部分基本结束。循环性非常强。下面讲可控性强的CSS部分。

CSS:

图八、wp.Vicuna的CSS基本结构及其扩展性。

从上图中很容易看的出来，通过外部导入CSS来增加定义，再倒入Module的方式变换样式，达到模板多样化，独栏、两栏、三栏，以及各种 eyeCatch 都是这样变化的。

图九、从Moudule引申，利用Subskin 进一步扩展CSS。

图十、这么多CSS是如何起到定义作用的，如何相互影响的。（局部和广域的优先度）

图十一、导入的基本CSS是如何使其不冲突，并进一步具体定义。

图十二、CSS定义的、涉及到的各种效果是如何实现的。

不但有这种效果还有其他Table效果、Code效果等，可以参考我的网页收藏页面，也可以参考wp.Vicuna用法。

至此，Vicuna CMS的总体结构基本讲述完毕。