主流CMS系统网页代码和标签优化实例4

2018-09-19 18:47 更新

顶踩功能如下图所示。相关模板代码如下:

顶踩功能

  <div class="newdigg" id="newdigg">

   <div class="diggbox digg_good" onmousemove="this.style.backgroundPosition

='left bottom';" onmouseout="this.style.backgroundPosition='left

top';" onclick= "javascript:postDigg('good',{dede:field.id/})">

    <div class="digg_act">顶一下</div>

    <div class="digg_num">({dede:field.goodpost/})</div>

    <div class="digg_percent">

     <div class="digg_percent_bar"><span

         style="width:{dede:field.goodper/} %"></span></div>

     <div class="digg_percent_num">{dede:field.goodper/}%</div>

    </div>

   </div>

   <div class="diggbox digg_bad" onmousemove="this.style.backgroundPosition

='right bottom';" onmouseout="this.style.backgroundPosition='right

            top';" onclick="javascript:postDigg('bad',{dede:field.id/})">

    <div class="digg_act">踩一下</div>

    <div class="digg_num">({dede:field.badpost/})</div>

    <div class="digg_percent">

     <div class="digg_percent_bar"><span

         style="width:{dede:field.badper/} %"></span></div>

     <div class="digg_percent_num">{dede:field.badper/}%</div>

    </div>

   </div>

  </div>

  <script language="javascript"

         type="text/javascript">getDigg({dede:field. id/});</script>


收藏、挑错、推荐、打印功能模板代码如下:

<div class="actbox">

<ul>

  <li id="act-fav"><a href="{dede:field name='phpurl'/}/

      stow.php?aid={dede: field.id/}" target="_blank">收藏</a></li>

  <li id="act-err"><a href="{dede:field name='phpurl'/}/

      erraddsave.php?aid= {dede:field.id/}&title={dede:field.title/}"

      target="_blank">挑错</a></li>

  <li id="act-pus"><a href="{dede:field name='phpurl'/}/

      recommend.php?aid= {dede:field.id/}" target="_blank">推荐</a></li>

  <li id="act-pnt"><a href="#" onClick="window.print();">打印</a></li>

 </ul>

</div>

页面中收藏、挑错、推荐、打印功能位置如下图所示。

收藏、挑错、推荐、打印功能位置

内容页底部的评论功能如下图所示。

页面底部的评论功能

评论功能涉及的AJAX代码如下:

<!-- //AJAX评论区 -->

 {dede:include file='ajaxfeedback.htm' /} </div>

另外,内容页右侧有发布者的相关信息,这部分信息通常对站长发布、不接受投稿的中小型网站来说是没有意义的。内容页右侧与发布者信息相对应的模板文件代码如下:

<div class="pright"> {dede:memberinfos}

 <div class="infos_userinfo">

  <dl class="tbox light">

   <dt class='light'><strong>发布者资料</strong></dt>

   <dd class='light'> <a href="[field:spaceurl /]" class="userface">

       <img src="[field:face/]" width="52" height="52" /> </a>

       <a href='[field:spaceurl /]' class="username">[field:uname/]</a>

       <span class="useract"> <a href="[field: spaceurl /]"

              class="useract-vi">查看详细资料</a>

       <a href="[field:spaceurl /]&action=guestbook"

              class="useract-pm">发送留言</a>

       <a href="[field:spaceurl /]&action=newfriend"

              class="useract-af">加为好友</a> </span> 

       <span class="userinfo-sp"><small>用户等级:</small>

              [field:rankname /]</span> 

       <span class="userinfo-sp"><small>注册时间:</small>

              [field:jointime function="MyDate ('Y-m-d H:m',@me)"/]</span>

       <span class="userinfo-sp"><small>最后登录:</small>

              [field:logintime function="MyDate('Y-m-d H:m',@me)"/]</span> </dd>

  </dl>

 </div>

 {/dede:memberinfos}

上面的各种交互性功能,对倾向于交互的站点来说可以有选择性地保留,如果确定对自己的网站没有帮助,可以删除——如果拿不准是否需要取消这些交互性功能,则可以参看本书后续章节,后面会有专门的章节详细介绍这些交互性功能的存在意义和取舍方法。

       内容页<title>标签优化

在默认情况下,内容页<title>标签只显示当前文章的标题和站名,源代码如下:

<title>{dede:field.title/}_{dede:global.cfg_webname/}</title>

这种标签显示出来的效果如下图所示。

默认的内容页title标签

从上图可以看出,默认的内容页标题标签过于简洁,虽然强调了文章标题和站名,但是明显缺少了当前栏目名。要在这个标签中加入当前的栏目名,将上述代码修改成下面的代码即可:

<title>{dede:field.title/}_{dede:field 

name='typename'/}_{dede:global.cfg_ webname/}</title>

修改后的<title>标签中将加入当前文章所述的大栏目名称,如下图所示。

带栏目名的title标签

考虑到标题长度限制的问题,这里没有加入小栏目名称,如果需要,优化者可以自己添加。

       内容页<keywords、description>标签优化

内容页的关键词标签、描述标签优化和上述各种页面的标签优化有所不同:内容页非常多,搜索引擎优化者是否有时间和精力去针对每篇文章设计关键词和描述?如果这个问题答案是肯定的,网站优化者在更新文章时,就可以通过后台功能详细定义每篇文章的关键词和描述,如下图所示。

关键词和描述定义

如果搜索引擎优化者不能为每篇文章定义自己的关键词,希望通过织梦系统提供的“自动获取关键词”功能生成关键词,这是不现实的。因为到目前为止,国内的主流CMS还没有任何一个可以很好地提供关键词自动提取功能,自动提取出来的关键词几乎都不靠谱,如下图所示。

自动提取关键词功能

在这种情况下,建议优化者干脆删除内容页模板中的关键词标签,代码如下:

<meta name="keywords" content="{dede:field.keywords/}" />

值得一提的是内容页的<description>,也就是描述标签,当前有很多人习惯采用文章的前一二百个字作为当前内容页的描述标签,很多CMS默认也提供这个功能。这种做法看起来很方便,但是效果却不好说,因为并不是每篇文章的开头部分都可以很好地概括这篇文章的主要内容——如果不能很好地概括当前文章的主要内容,生成的描述标签既不能提高用户体验,也不利于优化,并不可取。

当内容页中不能确保大多数文章的前几百个字可以归纳整篇文章的主要内容时,同样可以删除内容页中的<description>标签,代码如下:

<meta name="description" content="{dede:field.description

     function= 'html2text(@me)'/}" />

最后强调一下,上述的关键词标签和描述标签的优化需要根据实际情况来灵活判断,如果优化者在撰写文章时可以做到精细地定义关键词和描述,那么放置这两个标签是有利于用户体验和搜索引擎优化的;相反,如果都是自动生成的关键词标签和描述标签,那么不要也罢。

内容页<h>标签优化

针对任何一篇文章而言,内容页的<h>标签最好的优化方式就是根据当前文章的内容结构进行优化和标识。

<h1>标签是每个页面中最重要的内容引导标签,应该将它的内容赋予成当前内容页的主题,也就是文章标题,如下图所示。

标题的h1属性

与之相对应的代码也很简单,直接在内容页模板文件中修改即可:

<h1 style="font-size:24px">{dede:field.title/}</h1>

在上述代码中,style="font-size:24px"可以灵活地定义标题的大小,可以根据需求自由调整。

除了<h1>标签以外,<h2>和<h3>标签的布局需要和文章内容相结合,通常的做法是:为当前文章的一级标题赋予<h2>标签,为一级标题下面的小标题赋予<h3>标签,如下图所示,

h2和h3标签的布置

当然,如果文章更新者时间不够,或者文章内容并不长,也可以采用“加粗”的方式来定义一级标题,不必采用<h2>、<h3>标签等方式进行定义,如下图所示。

加粗功能

总体而言,除了上述标签以外,主流的CMS系统还存在一些访问者可能会使用到的页面,比如搜索页、tag列表页等,这些页面的优化比较简单,这里不再详细介绍。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号