技术知识分享

DUX-for-typecho 打造与WordPress正版相同的面包屑导航

不知道什么时候开始WordPress版的DUX主题已经开发了面包屑导航这个玩意。虽然小白看了下没啥鸟用。但是为了追求外观与WordPress相同。小白也顺带皮尺部了一下。有需要的童鞋可以跟着做。达到99%与正版一致的效果。土豪请直接去购买大前端正版主题。

简单教程:

  • 打开主题文件夹下的css文件夹;
  • 打开main.css
  • 在最下面添加以下代码:
    .breadcrumbs{padding: 15px 0;font-size: 12px;line-height: 1;text-align: left;background-color: #fff;margin-bottom: 15px;margin-top: -15px;border-bottom: 1px solid #EBEBEB;    box-shadow: 0 1px 3px rgba(0,0,0,.04);color: #999;}
    .breadcrumbs small{font-size: 12px;font-family: serif;color: #bbb;margin: 0 2px;font-weight: bold;}
    .breadcrumbs a{color: #999;}
    .breadcrumbs a:hover{color: #666;}
    @media (max-width:640px){
    .breadcrumbs{margin-top: 1px;margin-bottom: 0;padding: 10px 15px;border-bottom: none;margin-bottom: 1px;}
    }
    @media (max-width:480px){
    }
  • 打开主题文件夹下的post.php
  • 在第三行插入以下代码,网站名称记得改成自己的:
    <div class="breadcrumbs">
    <section class="container">
    当前位置:<a href="<?php $this->options->siteUrl(); ?>">pc6a学习分享</a> ></li>
    <?php if ($this->is('index')): ?><!-- 页面为首页时 -->
        首页
    <?php elseif ($this->is('post')): ?><!-- 页面为文章单页时 -->
        <?php $this->category(); ?> > 正文
    <?php else: ?><!-- 页面为其他页时 -->
        <?php $this->archiveTitle(' » ','',''); ?>
    <?php endif; ?>
    </div>

打造完毕,让我们看看效果吧。是不是跟WP版的一模一样。哈哈!

dux

未经允许不得转载:pc6a学习分享 » DUX-for-typecho 打造与WordPress正版相同的面包屑导航
vultr 云服务器VPS送50美金

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    插入代码可以发一下??

    钧言1周前 (05-12)回复
    • 已经更新好了。其他文章有问题的也可以回复哟!

      小白1周前 (05-12)回复