7b2主题美化 – 网址导航美化

css代码

/*网址导航美化开始*/
.link-img{
    background:unset!important;
}
.post-type-archive-links.archive .site-main{
    margin-left:-30px;
    margin-right: -30px;
}
.link-title {
    padding-bottom: 28px;
}
 
.link-box .cat-box {
    font-size: 24px;
    padding-left: 18px;
    font-weight: 500;
}
 
.link-title h2::before {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    left: 0;
    top: 10px;
    border-color: var(--b2color);
    border-radius: 8px;
    border: 1px solid var(--b2color);
    background: none;
}
 
 
.link-in {
    overflow: hidden;
    border-radius:18px;
}
 
.link-title .link-more .cat-box {
    font-size: 16px;
}
 
 
.link-in h2 {
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    transition: all .3s ease-in-out;
}
 
.link-desc {
    color: #95989e;
    margin: 12px 0 0;
    height: 36px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    transition: all .3s ease-in-out;
}
 
.link-in {
    padding: 20px;
}
 
.link-in::before {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    z-index: 1;
    height: 100%;
    top: 0;
    background-color: var(--b2color);
    /*background: url(images/links-bg.png);*/
    background-size: 100%;
    transition: all .3s ease-in-out;
}
 
.link-list li:hover .link-in::before {
    left: 0;
}
 
.link-list li:hover .link-in {
    border-color: var(--b2color);
 
}
 
.link-list li:hover .link-in h2,
.link-list li:hover .link-desc{
    color: #fff;
}
 
.link-in * {
    position: relative;
    z-index: 2;
}
 
.link-list:hover li a .link-in h2 {
    color: #000;
}
 
.link-lis:hovert li a .link-desc {
    color: rgba(0, 0, 0, .6);
}
 
 
/*Links Home*/
.links.links-home {
    padding: 0 30px;
}
 
.links.links-home .inner-wrapper-sticky {
    padding: 20px;
    min-height: 480px;
    background: #fff;
    border-radius: 4px;
}
 
.b2-tab-links {
    background: none;
    border-radius: 4px;
    margin-right: 16px;
}
 
.b2-tab-links .toc-list {
    text-align: left;
}
 
.links.links-home .link-box {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
 
.links.links-home .link-title {
    font-size: 21px;
    padding-bottom: 24px;
}
 
.links.links-home .link-box .cat-box {
    padding-left: 0;
}
 
.links.links-home .link-title h2::before {
    display: none;
}
 
 
.links.links-home .link-desc {
    font-size: 12px;
}
 
 
.links.links-home .b2-tab-links .toc-list {
    margin-right: 0;
}
 
 
.links.links-home .b2-tab-links .toc-list-item {
    margin: 0;
}
 
 
.links.links-home .b2-tab-links a.toc-link {
    height: 42px;
    width: 100%;
    padding: 0 24px;
    background: none;
    line-height: 42px;
}
 
.links.links-home .b2-tab-links a.toc-link:hover {
    background: #fff;
    color: var(--b2color);
    font-weight: 500;
}
 
 
.links.links-home .b2-tab-links .is-active-li a.toc-link {
    font-weight: 500;
}
 
.links.links-home .b2-tab-links .is-active-li a.toc-link {
    background-color: var(--b2color);
    color: #fff;
    border-radius:18px;
}
 
  
 
.links-home h1 {
    padding-top: 0;
    text-align: center;
    margin-bottom: 18px;
    margin-right:0px!important;
    font-size:22px!important;
}
 
.header-linkspage {
    background-position: center center;
    background-size: cover;
    margin-top: 0;
    border-radius: 4px;
    background-repeat: no-repeat;
    /*Links-page-search-background*/
    background-image: url(https://www.macfk.com/wp-content/uploads/2023/11/beijing.jpg);
    margin-bottom: 30px;
}
 
 
 
.links.links-home .link-join a {
    display: block;
    height: 40px;
    text-align: left;
    width: calc(100% - 2px);
    padding: 0 24px;
    font-size: 16px;
    line-height: 40px;
    border-radius: 18px;
}
 
.links.links-home .b2-tab-links a.toc-link {
    font-family: "b2font" !important;
    font-size: 16px;
    margin-right: 4px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}
 
 
 
.links-home .link-join {
    margin-right: 0;
}
 
.links-home .link-join i {
    margin-right: 6px;
    font-size: 16px;
}
 
.links.links-home .b2-tab-links a.toc-link:before {
    margin-right: 6px;
    vertical-align: middle;
}
 
/*菜单ICON设置*/
.links.links-home .b2-tab-links li:nth-child(1) a.toc-link:before {
    content: "\e86e";
}
 
.links.links-home .b2-tab-links li:nth-child(2) a.toc-link:before {
    content: "\e609";
}
 
.links.links-home .b2-tab-links li:nth-child(3) a.toc-link:before {
    content: "\e881";
}
 
 
.links.links-home .b2-tab-links li:nth-child(4) a.toc-link:before {
    content: "\e6d1";
}
 
 
.links.links-home .b2-tab-links li:nth-child(5) a.toc-link:before {
    content: "\e852";
}
 
 
.links.links-home .b2-tab-links li:nth-child(6) a.toc-link:before {
    content: "\e76c";
}
 
 
.links.links-home .b2-tab-links li:nth-child(7) a.toc-link:before {
    content: "\e8ea";
}
 
 
.links.links-home .b2-tab-links li:nth-child(8) a.toc-link:before {
    content: "\e609";
}
 
 
.links.links-home .search-module-form input,
.links.links-home .search-module-form {
    border-radius: 4px;
}
 
.links.links-home .search-module-desc {
    margin: 24px auto;
}
 
.links.links-home .search-module-key {
    display: flex;
    justify-content: center;
}
 
.links.links-home .search-key a {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 2px 4px;
    transform: all .3s;
    border-radius: 4px;
}
 
 
 
.links.links-home .search-module-title {
    font-size: 36px;
    font-family: "search-font";
}
 
.links.links-home .links-title {
    margin: 0 0 20px;
    font-size: 22px;
    /*font-family: "search-font";*/
}
 
.links.links-home .search-key a:hover {
    background: rgba(255, 255, 255, .65);
    color: var(--b2color) !important;
}
 
@media screen and (max-width: 768px) {
    .link-desc {
        margin: 6px 0;
        font-size: 12px;
        height: 40px;
    }
}
/*网址导航美化结束*/

核心代码

根目录archive-links.php文件代码

<?php
 
use B2\Modules\Templates\Modules\Links;
use B2\Modules\Common\Links as LinksFn;
 
$open = b2_get_option('links_main','link_open');
if(!$open){
    wp_safe_redirect(B2_HOME_URI.'/404');
    exit;
}
/**
 * 网址导航
 */
get_header();
 
$opts = get_option('b2_links_main');
 
$data = [];
 
if(!empty($opts['link_cats'])){
 
    foreach ($opts['link_cats'] as $k => $v) {
        $_opts = $opts;
        $_opts['link_cat'] = $v;
        $_opts['title'] = '';
        unset($_opts['link_cats']);
        $data[] = $_opts;
    }
 
    // var_dump($data);
 
    $title = b2_get_option('links_main','link_title');
    $total = LinksFn::link_total();
}
 
?>
 
<div class="b2-single-content wrapper">
    <div id="links" class="content-area links wrapper links-home">
        <main id="main" class="site-main">
            <div id="primary-home" class="content-area">
     
                <?php if((isset($total['link_count']) && $total['link_count'] == 0) || count($data) == 0){ ?>
                    <div class="box" style="width:100%"><?php echo B2_EMPTY; ?></div>
                <?php }else{ 
                    echo '<div class="home-links-content"><div class="b2-tab-links">
                    '.($title ? '<h1>'.$title.'</h1>' : '').'
                    
                    <div class="b2-tab-link-in"></div><div class="link-join"><a href="'.b2_get_custom_page_url('link-register').'" class="button empty" target="_blank">'.b2_get_icon('b2-user-location-line').'申请入驻</a></div>
                    </div><div class="home-links-right"><div class="header-linkspage">
  <div class="">
    <div data-i="5" id="search-module-5" class="search-module search-5">
      <div class="search-module-title" style="color: rgb(255, 255, 255);">全站搜索</div>
      <div class="search-module-desc" style="color: rgb(255, 255, 255);"></div>
      <div class="search-module-box">
        <form method="get" action="'.site_url().'" autocomplete="off" class="search-module-form">
          <div>
            <input type="text" name="s" placeholder="" class="search-module-input">
            <input type="hidden" name="type" value="post"></div>
          <button class="search-button-action">
            <i class="b2font b2-search-line "></i>
          </button>
        </form>
      </div>
      <div class="search-module-key">
        <ul>
          <li style="color: rgb(255, 255, 255);">热门搜索：</li>
          <li class="search-key">
            <a href="'.site_url('/?s=AI').'" target="_blank" style="color: rgb(255, 255, 255);">AI</a></li>
          <li class="search-key">
            <a href="'.site_url('/?s=Chatgtp').'" target="_blank" style="color: rgb(255, 255, 255);">Chatgtp</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>';
                    foreach ($data as $key => $value) {
                        $html = new Links();
                        echo $html->init($value,$key);
                    }
                    echo '</div></div>';
                    } ?>
             
            </div>
        </main>
    </div>
</div>
<?php
get_footer();

/Modules/Templates/Module/links.php代码

<?php namespace B2\Modules\Templates\Modules;
 
use B2\Modules\Common\Links as cLinks;
 
class Links{
    public function init($data,$i,$return = false){
        // var_dump($data);
 
        $data['link_count'] = $data['link_count'] ? (int)$data['link_count'] : 5;
 
        // var_dump($data);
 
        if(!isset($data['link_cat']) || $data['link_cat'] == ''){
            return;
        }
 
        $data['link_meta'] = isset($data['link_meta']) ? (array)$data['link_meta'] : [];
 
        $children_list = '';
        if(in_array('children',$data['link_meta'])){
            $childrens = cLinks::get_children_cat($data['link_cat'],3);
 
            if(!empty($childrens)){
                $children_list .= '<div class="child-link-cat">';
                foreach ($childrens as $key => $value) {
                    if(!isset($value->slug)) continue;
                    $children_list .= '<a target="_blank" class="cat-box b2-radius" href="'.cLinks::get_links_cat_url($value->slug).'">'.$value->name.'</a>';              
                }
                $children_list .= '</div>';
            }
        }
 
        $link_list = cLinks::get_links_data($data);
 
        if(empty($link_list)) return '';
 
        $more = '';
        if(in_array('more',$data['link_meta'])){
 
            $more_url = isset($data['module_more_url']) && $data['module_more_url'] ? $data['module_more_url'] : '';
            if( !$more_url ) $more_url = cLinks::get_links_cat_url($data['link_cat']);
            $more = '<div class="link-more"><a href="'.$more_url.'" target="_blank" class="cat-box b2-radius"><span>'.__('更多','b2').'</span>'.b2_get_icon('b2-arrow-right-s-line').'</a></div>';
        }
 
        $title = '';
        if(in_array('title',$data['link_meta'])){
            $title = '<div class="link-title"><div class="link-title-left"><h2 id="link-'.$data['link_cat'].'" class="cat-box b2-radius">'.($data['title'] ? $data['title'] : $link_list[0]['cat_name']).'</h2>'.$children_list.'</div>'.$more.'</div>';
        }
 
        if(is_single()){
            $title = '<div class="link-title"><div class="link-title-left"><h2 id="link-'.$data['link_cat'].'" class="cat-box b2-radius">'.__('相似站点','b2').'</h2></div>'.$more.'</div>';
        }
 
        $loadmore = '';
        if(in_array('loadmore',$data['link_meta'])){
            $paged = get_query_var('paged') ? get_query_var('paged') : 1;
            $loadmore = is_tax('link_cat') ? '<div class="link-more-button">'.b2_pagenav(array('pages'=>$link_list[0]['pages'],'paged'=>$paged)).'</div>' : '';
        }
 
        $icon = in_array('icon',$data['link_meta']);
        $desc = in_array('desc',$data['link_meta']);
        $user = in_array('user',$data['link_meta']);
        $like = in_array('like',$data['link_meta']);
         
 
        $html = '';
        foreach ($link_list as $k => $v) {
            $icon =  $icon ? '<img class="link-img b2-radius" src="'.$v['img'].'" />' : '';
            $desc = $desc ? '<p class="link-desc">'.$v['desc'].'</p>' : '';
 
            $user = $user ? '<span class="link-author fs12">'.($v['user']['link'] ? '<a target="_blank" href="'.$v['user']['link'].'">'.$v['user']['name'].'</a>' : '未名').'</span>' : '';
 
            $like = $like ? '<button class="link-up text" @click.stop="addRating(\''.$v['id'].'\')">'.b2_get_icon('b2-thumb-up-line').'<b>'.$v['link_rating'].'</b></button>' : '';
 
            $html .= '
                <li>              
                    <div class="link-in box b2-radius">
                        <a href="'.$v['url'].'" target="_blank" class="link-block" ref="nofollow">
                       <div class="b2flex">
                        '.$icon.'
                        
                                    <h2>'.$v['name'].'</h2>
                                
                            
                            
                            </div>
                             '.$desc.'
                         </a>
                    </div>
                </li>
            ';
        };
 
        return '
        <style>
        .link-box-'.$i.' .link-list li{
            width:'.(100/$data['link_count']).'%;
        }
        </style>
            <div class="link-box mg-b link-box-'.$i.' box b2-radius">
                '.$title.'
                <div class="link-list">
                    <ul>'.$html.'</ul>
                </div>
                '.$loadmore.'
            </div>
        ';
        
    }
 
     
}