打造simple, seo friendly的lifetype模板(1)

    "lifetype模板"不多，对搜索引擎也不算很友好，没有办法之下，只好自己来定制一个了.
   
lifetype模板设计思路：
   
    1.  分上中下三栏
   
    2.  中栏左边是主体，显示文章，右边显示目录等其他内容
   
    为什么要这样设计？
    从搜索引擎来说，是从左向右读的，重要内容应该放在左边。当然，通过布局，视觉上导航目录放在左边，但可以搜索引擎先读取右边内容。
    从人的阅读来说，导航目录变化较小，放在右边比较合理。
   
    也有很多人把中栏分成左中右三列。 http://www.chinese-blog.org 决定采用两列，很多采用三列的网站感觉比较乱。
   
    我们这里借鉴 Movable Type的模板设计，　不愧是商业公司，　movable type的模板设计大方，简洁，对搜索引擎友好。
   
    把lifetype文件包里的templates/standard/目录复制到 http://www.chinese-blog.org 网站的本地目录，重命名为SEOGreen
   
    打开一个movable type主页，　把源代码保存到Dreamweaver里。奇怪的是右键方式得到页面源代码，文章标题跑到页面的最上部去了。于是在写了一个程序，用httpget的方式得到页面源代码就正常了。
   

movable type页面结构

    movable type页面结构很清晰，body节点内全部套以div。id=alpha的div就是中栏左边，beta就是中栏右边
    container, container-inner, header
                                      , header-inner,
                                      , header-content
                                content
                                       , content-inner
                                                      , alpha
                                                              , alpha-inner
                                                                            , entry-1
                                                                                    , asset-header
                                                                                    , asset-content
                                                                                    , asset-footer
                                                                            , entry-2 ...
                                                                            , content-nav
                                                      , beta
                                                            , beta-inner
                                                                        , widget-search
                                                                        , wiget-about-this-page
                                footer
                                      , footer-inner
                                                    ,footer-content
                                                   

lifetype页面结构

    下面以lifetype默认模板为例来看一下lifetype的页面结构:
   
    Container
            Title,
            Subtitle,
            Subcontainer
                        , Content
                                 , h2 first article title
                                 , div first article content,
                                 , footer
                           
　　　　　　　　　　　　, Menu
                                , h2 选单
                                ，div Sections
                                , h2 站内搜索
                                , div Search
                                , h2 近期文章
                                , div Recently
                                ...
            Bottommenu
            Bottom
   
    可见
    "lifetype"的Title,Subtitle == "movable type"的header
    "lifetype"的Subcontainer == "movable type"的content
    "lifetype"的Content == "movable type"的alpha
    "lifetype"的Menu == "movable type"的beta
    "lifetype"的Bottommenu和bottom == "movable type"的footer
   
    而movable type的页面结构更加清晰
   
"lifetype" header.template的修改

    lifetype　header模板结束于"Content"头, 相当于"Movable　type"的"alpha-inner"头。
    把"movable type"页面中从body节点到id="alpha-inner"的代码复制到"lifetype"的header.template
    原header模板html的title是blog标题跟文章标题，正确的应该是把文章标题放到最前面
    由<title>{$pageTitle|escape:"html"}</title>
    改为：
    <title>{if !empty($post)} {$post->getTopic()} {elseif !empty($category)} {$category->getName()} {else} {$pageTitle|escape:"html"}　{/if}</title>
   
   
"lifetype" main.template模板的修改

    lifetype 默认模板的内容是Content的节点的innerHTML, 相当于"movable type"的alpha-inner的innerHTML.

    分两种情况，一是“目录”的页面，二是首页。
   
    在目录页面，我们把页面顶部目录名改到前面，把加上em以示区别
    default: {if $category}<h2>{$locale->tr("category")}: {$category->getName()}</h2>{/if}
    改成：{if $category}<h1 id="page-title" class="archive-title"><em>{$category->getName()}</em> {$locale->tr("category")}</h2>{/if}
   
    如果是首页，文章列表的内容要到post.template里修改。
   
"lifetype" post.template的修改

    post.template是单篇文章的模板。模板结束处是/id="footer"
   
    使文章标题可点击，方便直接阅读全文。
    把文章网址显示在文章前面，方便复制网址。
    把作者，发表日期等非重要信息移到文章后面。
   
"lifetype" footer.template的修改   

    foot模板包括了侧边栏和底框
    对"lifetype 模板"来说，是Content节点的结束。对movable type来说，是alpha-inner, alpha节点的结束。
   
    还有其余的html节点全部在这里。
   
    去掉月历，这个东西除了浪费空间，没有一点用处。
   
    值得注意，w3c的标准来说，搜索的form里不能直接套input,　会通不过校验。暂时的解决办法就是不去校验
   
    这只是初步"lifetype模板"的修改，效果可以看这里：
    http://lifetype.chinese-blog.org/
   
    接下来我们要进一步修改完善这个简洁，搜索引擎友好的"lifetype模板".
   
"lifetype模板"参考资料

    http://wiki.lifetype.net/index.php/Template_Development
    http://163.17.156.130/moodle/mod/book/view.php?id=1818&chapterid=520
    http://wiki.lifetype.org.tw/index.php?title=Edit_Templates
    Jan 29, 2008