TypechoJoeTheme

阿七博客

统计
登录
用户名
密码

阿七

网站页面
类目归类
标签搜索
闲杂乱码

Joe主题美化教程

阿七
2020-12-20
/
0 评论
/
423 阅读
/
正在检测是否收录...
12/20

一：添加互动读者及读者等级

一：添加互动读者及读者等级

这个框框呢就是评论用户的另一种形式吧

1. 我们先在function.php里面添加一个开关吧~

    $JactiveUsers = new Typecho_Widget_Helper_Form_Element_Radio(
  'JactiveUsers',
        array(
                1 => '开启',
                0 => '关闭',
        ),0,'是否开启互动读者','介绍：显示评论相关用户'

    );
    $JactiveUsers->setAttribute('class', 'j-setting-content j-setting-aside');
    $form->addInput($JactiveUsers);

2. 然后我们可以给侧栏加代码了

aside.php里面对应位置添加，位置和其他啥广告位的一级不多说

    <!--互动读者-->
    <?php if ($this->options->JactiveUsers and $this->is('index')): ?>
        <section class="aside aside-hunter-authors">
            <h3 class="aside-title"><i class="icon iconfont icon-wodeguanzhu"></i>
                <span><?php _e('互动读者'); ?></span></h3>
            <div class="hunter-cont">
                <ul class="hunter-authors">
                    
                        <?php
                        $period = time() - 2592000; // 单位: 秒, 时间范围: 30天
                        $counts = Typecho_Db::get()->fetchAll(Typecho_Db::get()
                            ->select('COUNT(author) AS cnt', 'author', 'max(authorId) authorId', 'max(mail) mail')
                            ->from('table.comments')
                            ->where('created > ?', $period)
                            ->where('status = ?', 'approved')
                            ->where('type = ?', 'comment')
                            ->group('author')

3. 我们在functions.php或者core.php添加一些辅助函数

/**
 * 显示用户等级，按邮箱
 */
function autvip($i){
    $db=Typecho_Db::get();
    $mail=$db->fetchAll($db->select(array('COUNT(cid)'=>'rbq'))->from('table.comments')->where('mail = ?', $i)/**->where('authorId = ?','0')**/);
    foreach ($mail as $sl){
        $rbq=$sl['rbq'];}
    if($rbq<1){
        echo '<span class="autlv aut-0">Lv.0</span>';
    }elseif ($rbq<10 && $rbq>0) {
        echo '<span class="autlv aut-1">Lv.1</span>';
    }elseif ($rbq<20 && $rbq>=10) {
        echo '<span class="autlv aut-2">Lv.2</span>';
    }elseif ($rbq<40 && $rbq>=20) {
        echo '<span class="autlv aut-3">Lv.3</span>';
    }elseif ($rbq<80 && $rbq>=40) {
        echo '<span class="autlv aut-4">Lv.4</span>';
    }elseif ($rbq<100 && $rbq>=80) {
        echo '<span class="autlv aut-5">Lv.5</span>';
    }elseif ($rbq>=100) {
        echo '<span class="autlv aut-6">Lv.6</span>';
    }
}

/**输出作者文章总数，可以指定*/
function allpostnum($id){
    $db = Typecho_Db::get();
    $postnum=$db->fetchRow($db->select(array('COUNT(authorId)'=>'allpostnum'))->from ('table.contents')->where ('table.contents.authorId=?',$id)->where('table.contents.type=?', 'post'));
    $postnum = $postnum['allpostnum'];
    if($postnum=='0')
    {
        return '暂无文章';
    }
    else{
        return '文章 '.$postnum.' 篇';
    }
}

4. 最后就是添加样式了

css样式如下，需要css的可以自己转一下，或者在我的网站用开发者工具扣也行 = =

.autlv {
    font-size: 10px;
    color: #fff;
    display: inline-block;
    vertical-align: text-top;
    font-weight: normal;
    border-radius: 2px;
    line-height: 1.4;
    padding: 0 4px;
    margin-left: 5px;
    letter-spacing: 0px;
}
.aut-0 {
    background: #d1d5dc;
}
.aut-1 {
    background: #448EF6;
}
.aut-2 {
    background: #f6b044;
}
.aut-3 {
    background: #c444f6;
}
.aut-4 {
    background: #f69644;
}
.aut-5 {
    background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
}
.aut-6 {
    background: #f64444;
}
.aside-hunter-authors{
        background: var(--background);
        .vs {
            border-radius: 100%;
        }
        
        ul{
            padding: 14px;
            list-style: none;
            line-height: 2.5;
        }
        .item{
            border-bottom: 1px dashed #eee;
            margin-bottom: 0px;
            position: relative;
            padding-bottom: 4px;
            .hunter-avatar{
                float: left;
                line-height: 55px;
                .vatar{
                    position: relative;
                    img{
                        width: 45px;
                        border-radius: 100%;
                    }
                    .va_v_honor{
                        position: absolute;
                        bottom: 3px;
                        right: 0px;
                        width: 18px;
                        height: 18px;
                    }
                }
            }
            .item-main{
                min-height: 60px;
                margin-left: 60px;
                color: #393939;
                h4{
                    font-size: 12px;
                    line-height: 1;
                    margin-bottom: 7px;
                    font-weight: normal;
                    color: #999;
                    i{
                        font-style: normal;
                        color: #aaa;
                        margin: 0 5px;
                    }
                }
            }
        }
    }

二：浏览文章时隐藏header并显示标题

浏览文章时隐藏header并显示标题

1.直接上代码

我们要在header.php中显示我们的标题，将header文件中网站logo和链接的代码块换成下面的：结构如下：

|<!-- post title -->

这里是显示标题的

|<div class="above-nav">

|------|<!-- 网站 logo -->

|------|<!-- 链接 -->|</div>

 <!-- post title -->
                <?php if ($this->is('post')): ?>
                    <div class="top-bar-title post_no" id="post_top_title"><?php $this->title(); ?></div>
                <?php endif; ?>
                <div class="above-nav">
                    <!-- 网站 logo -->
                    <h1 class="logo j-hover-music" title="<?php $this->options->title(); ?>">
                        <?php $this->options->title(); ?>
                        <a href="<?php $this->options->siteUrl(); ?>">
                            <?php if ($this->options->JLogo) : ?>
                                <img src="<?php $this->options->JLogo() ?>" />
                            <?php else : ?>
                                <img src="https://cdn.jsdelivr.net/npm/typecho_joe_theme@4.3.5/assets/img/logo.png" />
                            <?php endif; ?>
                        </a>
                    </h1>
                    <!-- 链接 -->
                    <nav class="nav j-nav">
                        <a class="link <?php if ($this->is('index')) : ?>active<?php endif; ?>" href="<?php $this->options->siteUrl(); ?>">首页</a>
                        <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>

                        <!-- 循环4个之前的 -->
                        <?php $i = 0; ?>
                        <?php while ($pages->next()) : ?>
                            <?php $i++; ?>
                            <?php if ($i <= $this->options->JNavMaxNum) : ?>
                                <a class="link <?php if ($this->is('page', $pages->slug)) : ?>active<?php endif; ?>" href="<?php $pages->permalink(); ?>"><?php $pages->title(); ?></a>
                            <?php endif; ?>
                        <?php endwhile; ?>

                        <!-- 超过4个则显示更多 -->
                        <?php if ($i > $this->options->JNavMaxNum) : ?>
                            <div class="link drops">
                                <div class="j-drop">
                                    <span>更多</span>
                                    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M825.728 390.144L521.056 702.336 217.152 390.144c-16.576-16.576-43.744-16.576-60.32 0s-16.576 43.744 0 60.32L483.36 778.496c10.56 9.056 23.392 19.616 36.96 17.344 13.568 3.008 27.904-6.784 38.464-17.344L886.08 450.464a42.816 42.816 0 0 0 0-60.32 42.784 42.784 0 0 0-60.352 0z"></path>
                                    </svg>
                                </div>
                                <nav class="j-dropdown">
                                    <?php $current = 0 ?>
                                    <?php while ($pages->next()) : ?>
                                        <?php $current++; ?>
                                        <?php if ($current > $this->options->JNavMaxNum) : ?>
                                            <a class="<?php if ($this->is('page', $pages->slug)) : ?>active<?php endif; ?>" href="<?php $pages->permalink(); ?>"><?php $pages->title(); ?></a>
                                        <?php endif; ?>
                                    <?php endwhile; ?>
                                </nav>
                            </div>
                        <?php endif; ?>
                    </nav>
                </div>

2. 添加js

/*顶部自动隐藏*/
$(document).ready(function() {
if(screen.width < 768) return
    let header = $("header.j-header")
    let above_nav = $(".row.above .above-nav")
    let below = $(".row.below")
    let post_title = $("#post_top_title")
    let navOffw = header.width();
    if (post_title.length > 0 && navOffw > 750) {
        $(window).scroll(function() {
            let scrollPos = $(window).scrollTop(); //得到滚动的距离
            if (scrollPos > 400 && scrollPos < 500) return // 防止nav出现触发再次scroll
            if (scrollPos >= 450) { //比较判断是否fixed
                below.slideUp()
                post_title.removeClass("post_no");
                above_nav.addClass("post_no")
            } else {
                below.slideDown()
                post_title.addClass("post_no");
                above_nav.removeClass("post_no")
            }
        })
    }
})

3.添加样式

.above-nav {
    display: flex;
    width: 100%;
}
.top-bar-title {
    font-size: 16px;
    line-height: 50px;
    font-weight: 600;
    animation: hideIndex 0.6s;
    -moz-animation: hideIndex 0.6s;
    -webkit-animation: hideIndex 0.6s;
    -o-animation: hideIndex 0.6s;
}
.post_no {
    display: none !important;
}

三： 添加author page

三： 添加author page

为每位作者添加一个独立的author page

废话不多说，直接

1.上代码

在joe主题同级目录下添加一个author.php,代码在下面

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>

<?php
if (empty($this->uid)) {
    $str = $_SERVER["REQUEST_URI"];
    if (preg_match('/\d+/', $str, $arr)) {
        $id = $arr[0];
        if ($this->user->hasLogin() && $this->user->uid == $id) {
            $lock = 0;
        } else {
            $lock = 1;
        }
        $info = userok($id);
        $this->user->uid = $id;
        $this->user->screenName = $info['screenName'];
        $this->user->mail = $info['mail'];
        $this->user->group = $info['group'];
    }
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <?php $this->need('public/head.php'); ?>
</head>

<body>
<?php $this->options->JCustomBodyStart() ?>

<section id="joe">

    <!-- 头部 -->
    <?php $this->need('public/header.php'); ?>
    <!-- 主体 -->
    <section class="container j-index j-author">
        <section class="j-adaption">
            <div class="col-md-12">
                <!--创作中心s-->
                <header class="page-header">
                    <div class="author-header-meta">
                        <?php $email = $this->user->mail;
                        $imgUrl = ParseAvatar($email, 1);
                        echo '<img src="' . $imgUrl . '" class="avatar avatar-120 photo" height="50" width="50">'; ?>
                        <div class="name"><?php $this->user->screenName(); ?></div>
                        <div class="desc"><?php autvip($this->user->mail); ?></div>
                        <div class="desc">
                            <svg t="1608204283958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3189" width="1em" height="1em"><path d="M826.46929 339.76682s19.698076 58.094327-94.090811 133.586954c0 0 55.19461-291.571526-302.170491-473.353774 0 0 99.090323 228.177717-108.089445 377.063177 0 0-78.792305-102.390001-226.677863-117.488526 0 0 61.394004 95.290694 56.394492 188.081633s-80.292159 196.880773-38.896201 328.567913c34.19666 108.789376 116.588614 214.879016 274.373206 247.775803-21.597891-54.894639-32.396836-112.589005 5.399472-261.774436 0 0 1.399863 123.587931 226.177913 255.275071 216.978811-57.494385 447.656284-264.574163 207.579728-677.733815z" p-id="3190" fill="#7a7b7c"></path></svg>
                            <?php echo allviewnum($this->user->uid); ?>
                        </div>
                    </div>
                </header>
            </div>

            <section class="main <?php $this->options->JListType() ?>">
                <div class="row author-page">
                    <div class="col-md-12">

                        <!--创作中心e-->
                        <section class="j-index-article article">
                            <!-- 列表 -->
                            <?php $this->need('component/index.list.php'); ?>
                        </section>
                    </div>
            </section>
        </section>
    </section>
    <!-- 尾部 -->
    <?php $this->need('public/footer.php'); ?>
</section>

<!-- 配置文件 -->
<?php $this->need('public/config.php'); ?>
</body>

</html>

2. 添加辅助函数

functions.php或者core.php

// 会员页判断是否会员id
function userok($id){
$db = Typecho_Db::get();
$userinfo=$db->fetchRow($db->select()->from ('table.users')->where ('table.users.uid=?',$id));
return $userinfo;
}
/**输出作者人气*/
function allviewnum($id){
    $db = Typecho_Db::get();
    $postnum=$db->fetchRow($db->select(array('Sum(views)'=>'allviewnum'))->from ('table.contents')->where ('table.contents.authorId=?',$id)->where('table.contents.type=?', 'post'));
    $postnum = $postnum['allviewnum'];
    if($postnum=='0')
    {
        return '暂无访问';
    }
    elseif ($postnum>=10000) {
        return ' 1万+访问';
    }
    elseif ($postnum<10000 && $postnum>5000) {
        return ' 5K+访问';
    }
    else{
        return ' '.$postnum.' °c 访问';
    }

}

3. 添加一点样式

.j-author{
    .author-header-meta{
        text-align: center;
        margin: 50px 0;

        .avatar { border-radius: 100%; margin-top: -10px; margin-bottom: 10px; position: relative; }

        .name { font-size: 18px; font-weight: 600; margin-bottom: 10px; }

        .desc { color: var(--routine); font-size: 14px; margin-bottom: 10px; }

    }
}

四： 移动样式下添加二级分类

四： 移动样式下添加二级分类

joe 主题在移动样式下，目录分类居然不支持多级，所有分类并排成一列，让人欲哭无泪（主要是分类太多了），于是决定做个小手术，支持一下二级分类。

1.代码

修改header.php相关j-sidebar-xs中的部分，主要是替换下面这一部分

<div class="card">
    <div class="title">类目归类</div>
    <ul class="category-nav">
        <?php while ($categorys->next()) : ?>
            <?php $children = $categorys->getAllChildren($categorys->mid); ?>
            <?php if ($categorys->levels === 0): ?>
                <?php if (empty($children)): ?>
                    <li class='<?php if ($this->is('category', $categorys->slug)) _e("active"); ?>'>
                        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path>
                        </svg>
                        <a href="<?php $categorys->permalink(); ?>"><?php $categorys->name(); ?></a>
                    </li>
                <?php else: ?>
                    <li class='<?php if ($this->is('category', $categorys->slug)) _e("active"); ?>'>
                        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path>
                        </svg>
                        <a href="<?php $categorys->permalink(); ?>"><?php $categorys->name(); ?>
                            <span><i class="icon iconfont icon-Chevronrighticon text-right"></i><i class="icon iconfont icon-Chevrondownicon text-down"></i></span>
                        </a>
                        <ul>
                            <?php foreach ($children as $mid):?>
                                <?php $child = $categorys->getCategory($mid); ?>
                                <li <?php if($this->is('category', $child['slug'])): ?> class="active"<?php endif; ?>>
                                    <a href="<?php echo $child['permalink'] ?>" title="<?php echo $child['name']; ?>"><?php echo $child['name']; ?></a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </li>
                <?php endif; ?>
            <?php endif; ?>
        <?php endwhile; ?>
    </ul>
</div>

2. 添加js控制

$('.j-sidebar-xs .item.category ul li a').unbind().bind('click',function (ev) {
                let c = $(this);
                c.parent().siblings(".active").toggleClass("active")
                if(c.next().is("ul") && c.parent().toggleClass("active") && ev.preventDefault()) return false;
            })

3. 添加css

以下为css样式

.item.category{
ul.category-nav li ul{
    display: none;
    padding-left: 2.5em;
    opacity: 0;
    height: 0;
    overflow: auto;
    -webkit-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
    li:last-child{
        border-bottom: none;
    }
}
ul.category-nav li a {
    span{
        float: right;
    }
    .text-down{
        display: none;
    }
}

ul.category-nav li.active {
    ul {
        display: block;
        opacity: 1;
        height: auto;
    }
    a .text-right{
        display: none;
    }
    a .text-down{
        display: block;
    }
}
}
.j-sidebar-xs .content .item .card ul li {
    display: block; <!--将原来的flex改为block-->
}

声明

本插件使用到的所有图片均来自互联网，版权归原作者所有。
经本人测试可以正常使用该插件，如果你在使用中发现问题，请在github里提交issue或者本文下直接留言，我看到后会第一时间回复。
作者：即刻学长
原文链接：https://geekscholar.net/
版权声明：文章转载已注明来源，如有侵权请联系博主删除！

朗读
赞（2）
版权属于：

阿七博客

本文链接：

https://a7a7.net/70.html（转载时请注明本文出处及文章链接）

作品采用：

《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

评论 (0)
阿七
24 文章数
28 评论量

人生倒计时

今日已经过去小时
这周已经过去天
本月已经过去天
今年已经过去个月

热门文章

蜀ICP备18001283号 336ms
JOE RSS MAP