Skip to main content
 首页 » zblog教程 » we media

We Media自媒体主题 - 关于我们/导航高亮

2016年07月08日2548

最近的确挺忙的,没空写教程。今天写下主题配置里的关于我们页面如何实现,与导航高亮的问题。

一、关于我们页面

1.jpg

1、首先我们到后台“页面管理”里新建一些页面,如关于我们,免责声明,联系我们等,为什么要到页面管理里建这些页面呢,有些用户采取新建个分类,然后在这个分类下新建关于我们等这些文章,虽然方法类似,但对于SEO来说前者更好些。

2、建这些页面时注意两点,伪静态下最好给个别名,如关于我们命名为about,然后模板选page(page页面是主题里带左侧导航的页面,其他页面无效,关于页面架构请看这里)。

4.jpg

5.jpg

3、建好这些页面后,可以看到这些页面的ID,记住这些要用到的ID

3.jpg

4、到主题配置里全局配置输入你要调用的ID,按要显示的顺序输入,排前的在上排后的在下,用英文逗号隔开,然后输入你要的任意分类名称

2.jpg

5、这样,整个关于我们的效果其实就算好了,但是导航条未必显示。看看自己主题配置里“导航栏”选的是网站分类还是导航栏。下面以导航栏为例来进行说明,也涉及到导航条高亮问题。

二、导航条高亮

1、选的是导航栏,到模块管理里改模块,这里改导航栏模块。

6.jpg

2、如下图,点进去后进行编辑代码。我们将禁止系统更新模块内容开关打开,因为ZBLOG当你新增分类或导航这里内容会恢复到系统的默认规则,所以建议手动编辑更好,后期增加了分类或想加个导航再来这里改。

7.jpg

3、编辑规则如下,系统默认首页对应id="nvabar-item-index"分类对应id="navbar-category-id"页面对应id="navbar-page-id",所以编写内容如下:

<li id="nvabar-item-index"><a href="https://www.gridsmedia.com/">首页</a></li>
<li id="navbar-category-3"><a href="https://www.gridsmedia.com/theme/">zblog主题</a></li>
<li id="navbar-category-2"><a href="https://www.gridsmedia.com/coure/">zblog教程</a></li>
<li id="navbar-page-0"><a href="https://www.gridsmedia.com/about.html" rel="nofollow">网格传媒</a>
  <ul>
    <li id="navbar-page-173"><a href="https://www.gridsmedia.com/about.html" rel="nofollow">关于我们</a></li>
    <li id="navbar-page-174"><a href="https://www.gridsmedia.com/copyright.html" rel="nofollow">免责声明</a></li>
  </ul>
</li>

首页固定对应id为nvabar-item-index,所以写id="nvabar-item-index",zblog主题对应分类id为3,所以写id="navbar-category-3",zblog教程对应分类id为2,所以写id="navbar-category-2"。而作为关于我们的分类名称“网格传媒”要显示高亮必须对应id="navbar-page-0",底下二级子页面写对应页面的id,如关于我们页面id是173,就写id="navbar-page-173",以此类推。另外导航高亮实现了,还得要让网格传媒点击后到哪里,所以就写上连接,譬如点开后要先显示关于我们,就连到about.html,加rel="nofollow"是为了不分散首页的权重,对SEO有利。

4、附上网站分类的代码,只是举个例子,可根据自己情况任意发挥:

<li class="li-cate" id="navbar-category-1"><a href="https://www.gridsmedia.com/theme/">zblog主题</a>
  <ul class="ul-subcates">
    <li class="li-subcate" id="navbar-category-2"><a href="https://www.gridsmedia.com/zbatheme/">zblog asp主题</a></li>
    <li class="li-subcate" id="navbar-category-3"><a href="https://www.gridsmedia.com/zbptheme/">zblog php主题</a></li>
  </ul>
</li>
<li class="li-cate" id="navbar-category-4"><a href="https://www.gridsmedia.com/course/">zblog教程</a>
  <ul class="ul-subcates">
    <li class="li-subcate" id="navbar-category-5"><a href="https://www.gridsmedia.com/zbacourse/">zblog asp教程</a></li>
    <li class="li-subcate" id="navbar-category-6"><a href="https://www.gridsmedia.com/zbpcourse/">zblog php教程</a>
      <ul class="ul-subcates">
        <li class="li-subcate" id="navbar-category-7"><a href="https://www.gridsmedia.com/wemedia/">we media</a></li>
      </ul>
    </li>
  </ul>
</li>
<li class="li-cate" id="navbar-category-8"><a href="https://www.gridsmedia.com/resource/">资源导航</a></li>
<li id="navbar-page-0"><a href="https://www.gridsmedia.com/about.html" rel="nofollow">网格传媒</a>
  <ul>
    <li id="navbar-page-173"><a href="https://www.gridsmedia.com/about.html" rel="nofollow">关于我们</a></li>
    <li id="navbar-page-174"><a href="https://www.gridsmedia.com/copyright.html" rel="nofollow">免责声明</a></li>
  </ul>
</li>

网站分类无需写首页,模板自带了。以上例子zblog主题下有两个子分类,zblog教程下有两个子分类,第二个子分类zblog php教程下还有1个子分类,本主题支持无限级别的分类,只要按上面规则写好即可。注意点是网站分类模块样式要选UL嵌套型。

微信