joe主题优化记录（更新中）
标签搜索
侧边栏壁纸
博主昵称
Blank

  • 累计撰写 19 篇文章
  • 累计收到 7 条评论
最新文章

joe主题优化记录（更新中）

Blank
Blank
2024-03-23 / 0 评论 / 212 阅读 / 正在检测是否收录...
一. 评论打卡/夸夸

在主题的 themes/Joe/public/comment.php 中找到 <div class="owo joe_owo__contain"></div> 这行代码，在其下面添加下面的代码

html 代码:


<div class="comment-clockIn" onclick="javascript:clockIn()">打卡</div>

然后在你的css中添加下列样式

css 代码:

/*评论打卡*/
.joe_comment__respond-form .foot {
    justify-content: flex-start!important
}
.comment-clockIn {
    text-align: center;
    color: #606266;
    height: 26px;
    line-height: 26px;
    background: rgba(255,255,255,0.7);
    opacity: .85;
    border-radius: 13px;
    width: 70px;
    margin-left: 5px;
    cursor: pointer
}

最后在把下列代码加入js中，即可完成

js 代码:

/*评论打卡*/
function clockIn() {
    let time = (new Date).toLocaleTimeString();
    let clockInCon = '滴！贵宾卡！打卡时间：' + time + '，请上车的乘客系好安全带~';
    $(".joe_owo__target").val(clockInCon);
}
/*评论夸夸*/
function clockIn() {
const compliments = [
    "你的才华真是无与伦比！",
    "这篇文章写得非常精彩，让人印象深刻。",
    "你总是能用最简单的方式表达复杂的思想。",
    "你的视角独特，给我带来了新的启发。",
    "你的工作总是如此高效，令人佩服。",
    "这段文字充满了智慧和深度。",
    "你对细节的关注让作品更加完美。",
    "你的创意真是令人惊叹，太有才了！",
    "谢谢你分享如此宝贵的知识。",
    "你的努力和坚持令人感动。",
    "这篇文章让我对这个话题有了全新的理解。",
    "你的思维方式深具启发性，让我大开眼界。",
    "你在写作中展现出的热情感染了我。",
    "每次阅读你的作品，我都能学到新东西。",
    "你的表达能力非常出色，令人钦佩。",
    "这段论述逻辑严谨，分析透彻。",
    "你的人生经历丰富多彩，非常令人向往。",
    "你的幽默感真是让人开心！",
    "每一句话都展现了你深厚的知识储备。",
    "你总能把复杂的事情讲得如此简单易懂。",
    "这篇文章的结构设计得很巧妙，流畅自然。",
    "你的想法非常前卫，值得深入探讨。",
    "这段文字的情感表达非常真诚。",
    "你在文中提出的观点非常有洞察力。",
    "你的表现超出了我的预期，太棒了！",
    "你对主题的理解让人叹服。",
    "这篇文章的每个细节都体现了你的用心。",
    "你的作品总能引发我深入思考。",
    "这段论述让我对未来充满希望。",
    "你的写作风格独具魅力，令人陶醉。",
    "你用生动的语言描绘了一个美好的画面。",
    "你的激情和热忱令人鼓舞。",
    "这篇文章让人感觉温暖而亲切。",
    "你的批判性思维真是令人敬佩。",
    "这段文字让我感受到深厚的人文关怀。",
    "你总是能够触及事物的本质。",
    "这篇文章的主题选择非常契合时宜。",
    "你的见解让我重新思考自己的观点。",
    "每一次阅读都像是一次新的发现。",
    "你的文字散发着智慧的光芒。",
    "这段话让我对生活有了新的思考。",
    "你的写作总能让我感受到强烈的情感。",
    "这篇文章的内容让我感到振奋。",
    "你在文中使用的比喻非常生动形象。",
    "这段论述层次分明，让人易于理解。",
    "你的观察力真让人佩服！",
    "这篇文章是一场思维的盛宴。",
    "你将个人经验与理论结合得很好。",
    "这段文字的情感流露非常自然。",
    "你的文字总能触动我的内心。",
    "这篇文章的内容丰富且耐人寻味。",
    "你对话题的深刻理解让我感到敬佩。",
    "这段话的感染力非常强，令人印象深刻。",
    "你的写作技巧真是让人赞叹不已。",
    "这篇文章的主题非常贴近生活，真实感人。",
    "你的思维方式让我大开眼界，充满启发。",
    "这段话让我感受到深刻的哲理。",
    "你的文章总是那么引人入胜，令人期待。",
    "这篇文章的结论非常有力，令人信服。",
    "你的表达能力让人印象深刻，真是优秀！",
    "这段文字的情感流露非常自然。",
    "你的作品总是能让我感受到温暖和希望。",
    "这篇文章的例证恰到好处，增强了说服力。",
    "你在写作中展现出的深厚的文化底蕴真让人佩服。",
    "这段文字激励了我，让我充满动力。",
    "你对事物的敏锐观察让我敬佩。",
    "这篇文章是对我思维的极大挑战，感谢！",
    "你的作品总能引导我思考人生的意义。",
    "这段话的逻辑性和条理性令人赞赏。",
    "你的写作总是如此真诚，打动人心。",
    "这篇文章的内容让我倍感温暖。",
    "你的写作风格让人感受到一种亲切感。",
    "这段文字以生动的方式传达了复杂的情感。",
    "你的努力和坚持真是令人钦佩，继续加油！",
    "这篇文章的每个部分都展现了你的才华与智慧。"
];
        const randomIndex = Math.floor(Math.random() * compliments.length);
        const randomCompliment = compliments[randomIndex];
        $(".joe_owo__target").val(randomCompliment);
    $(".joe_owo__target").val(clockInCon);
}
二. 首页导航栏美化

找了网上好多教程，好少关于joe导航栏美化的知识，今天自己琢磨了一下，参考了网上一些教程 表情

效果图：

lu5o2zjg.png

首先我们需要打开网站阿里云的icon资源站 https://www.iconfont.cn ，将自己的资源导入到joe后台的自定义head中

lu5oa39s.png

然后找到joe根目录的Joe/public/header.php文件，大概83-99行的位置，将以下文件放入至红色框框中即可，注意，需要将里面的icon换成自己的，还有页面$iconClassMap中的对应页面设置好，这个就是你后台 - 独立页面 - 缩略名

修改前

lu5okldq.png

修改后

lu5p37sj.png

<a class="item <?php echo $this->is('index') ? 'active' : '' ?>" href="<?php $this->options->siteUrl(); ?>" title="首页">
                <svg class="joeicon" aria-hidden="true">
                        <use xlink:href="#icon-EC_wendang-tiyuyule"></use>
                </svg> 首页
            </a>
                <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
                <?php if (count($pages->stack) <= $this->options->JNavMaxNum) : ?>
                <?php foreach (array_slice($pages->stack, 0, $this->options->JNavMaxNum) as $item) : ?>
            <?php
            $iconClassMap = [
                'start-page' => 'icon-zhongduan',
                '3' => 'icon-liuyanmoban',
                '4' => 'icon-MBEfenggeduosetubiao-fasong',
                //你的页面名和对应的图标
            ];
            $iconClass = isset($iconClassMap[$item['slug']]) ? $iconClassMap[$item['slug']] : '';
            ?>
            <a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>">
                <?php if ($iconClass !== '') : ?>
                    <svg class="joeicon" aria-hidden="true">
                        <use xlink:href="#<?php echo $iconClass ?>"></use>
                    </svg>
                <?php endif; ?>
                <?php echo $item['title'] ?>
            </a>
        <?php endforeach; ?>
        <?php else : ?>
          <?php foreach (array_slice($pages->stack, 0, $this->options->JNavMaxNum) as $item) : ?>
            <?php
            $iconClassMap = [
                'start-page' => 'icon-zhongduan',
                '3' => 'icon-liuyanmoban',
                '4' => 'icon-MBEfenggeduosetubiao-fasong',
                //你的页面名和对应的图标
            ];
            $iconClass = isset($iconClassMap[$item['slug']]) ? $iconClassMap[$item['slug']] : '';
            ?>
            <a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>">
                <?php if ($iconClass !== '') : ?>
                    <svg class="joeicon" aria-hidden="true">
                        <use xlink:href="#<?php echo $iconClass ?>"></use>
                    </svg>
                <?php endif; ?>
                <?php echo $item['title'] ?>
            </a>
          <?php endforeach; ?>
          <div class="joe_dropdown" trigger="hover" placement="60px" style="margin-right: 15px;">
            <div class="joe_dropdown__link">
            <svg class="joeicon" aria-hidden="true">
                <use xlink:href="#icon-dianzan"></use>
            </svg>
              <a href="#" rel="nofollow">更多</a>
              <svg class="joe_dropdown__link-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
                <path d="M561.873 725.165c-11.262 11.262-26.545 21.72-41.025 18.502-14.479 2.413-28.154-8.849-39.415-18.502L133.129 375.252c-17.697-17.696-17.697-46.655 0-64.352s46.655-17.696 64.351 0l324.173 333.021 324.977-333.02c17.696-17.697 46.655-17.697 64.351 0s17.697 46.655 0 64.351L561.873 725.165z" p-id="3535" fill="var(--main)"></path>
              </svg>
            </div>

最后还需要将css代码放入joe后台的自定义css中，可以根据需要修改

.joeicon {
    width: 20px;
    height: 20px;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
}

lu5opwds.png

三. CSS美化

在后台Joe/assets/css/joe.global.min.css中

1. 顶部导航栏固定
将joe_header.active{top:-60px}删除或者设置为0即可

lu730t6g.png

2. 顶部导航栏高斯模糊

效果图：

lu73dsqm.png

首先需要将背景颜色取消，然后在后台自定义css中加入一下css代码

@media screen and (min-width: 759px) {
    /* 在屏幕宽度大于760像素时应用以下样式 */
   .joe_header{backdrop-filter: saturate(5) blur(20px);}
}

lu73d6e2.png

四.添加侧边目录

转载的网络上的，自己修改了一点

编辑joe/public/aside.php文件，这个文件包含了所有侧边栏组件，在博主栏和人生倒计时中间插入下面这段代码

m24zry91.png

  <?php if (($this->is('post') || $this->is('page'))) : ?>
    <section class="joe_aside__item catalogue">
        <div class="joe_aside__item-title">
            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2084" width="18" height="18"><path d="M640 192H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM960 544H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h736c17.7 0 32 14.3 32 32s-14.3 32-32 32zM640 896H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 192H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 544H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 896H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32z" p-id="2085"></path></svg>
            <span class="text">导航目录</span>
        </div>
        <div class="joe_aside__item-contain">
            <ul class="catalogue-items">
            </ul>
        </div>
    </section>
    <?php endif; ?>

接下来修改joe\assets\js\joe.post_page.min.js文件，在文件开头的第一个大括号后面添加下面这段代码

function get_catalogs(article_content) {
    let titles = [];
    let diffLevel = 0;
    const titleTag = ["H1", "H2", "H3", "H4", "H5", "H6"];
    // Filter out non-element nodes
    const elements = Array.from(article_content.children);
    elements.forEach((e, index) => {
        const nodeName = e.nodeName;
        if (titleTag.includes(nodeName)) {
            const level = parseInt(nodeName.substring(1, 2), 10) - diffLevel;
            titles.push({
                id: "header-" + index,
                text: e.textContent,
                level: level
            });
            e.id = "header-" + index;
        }
    });
    return titles;
}
    
    
    article_content = document.querySelector('.joe_detail__article');
    if (article_content) {
        var catalog = get_catalogs(article_content);
        if (catalog.length == 0) {
            $('.catalogue').hide()
        } else {
            let asideArr = ['timelife', 'today', 'hot', 'newreply', 'weather', 'tags', 'flatterer'];
            asideArr.forEach(item => $('.joe_aside__item.' + item).remove());
            let catalogue = '';
            for (let i = 0; i < catalog.length; i++) {
                let node = '<li class="catalogue-item">' +
                    '<a id="to-' + catalog[i].id + '" title="' + catalog[i].text + '" href="#' + catalog[i].id + '">' +
                        '<span class="dir_name">' + catalog[i].text + '</span>' +
                    '</a>' +
                '</li>';
                if (i == catalog.length - 1) {
                    catalogue += node + '</li>'
                } else {
                    if (catalog[i + 1].level == catalog[i].level) {
                        catalogue += node + '</li>'
                    } else if (catalog[i + 1].level > catalog[i].level) {
                        catalogue += (catalog[i + 1].level > 1) ? node + '<ul class="level-' + catalog[i + 1].level + '">' : node + '</li>'
                    } else {
                        if (catalog[i + 1].level - catalog[i].level == -2) {
                            catalogue += i > 1 ? node + '</li></ul></li></ul></li>' : node + '</li></ul></li>'
                        } else {
                            catalogue += i > 1 ? node + '</li></ul></li>' : node + '</li>'
                        }
                    }
                }
            }
            document.querySelector('.catalogue-items').innerHTML = catalogue;
            $('.catalogue-item > a').on('mouseenter', function() {
                $(this).parent().addClass('_active')
            });
            $('.catalogue-item > a').on('mouseleave', function() {
                $(this).parent().removeClass('_active')
            });
            $('.catalogue-item > a').on('click', function() {
                document.removeEventListener("scroll", autoActive);
                $('.catalogue-item').removeClass('active');
                $(this).parent().addClass('active');
                let aim = document.querySelector('#' + $(this).attr('to'));
                let aim_top = aim.offsetTop;
                let aim_h = aim.clientHeight;
                let above_h = document.querySelector('.joe_header__above').clientHeight;
                let below_h = document.querySelector('.joe_header__below').clientHeight;
                let offset = 0;
                let case1 = !document.querySelector('.joe_header__above').className.includes('active');
                let case2 = document.getElementsByTagName("html")[0].scrollTop + above_h > aim_top;
                if (case1 && case2) {
                    offset = above_h
                }
                window.scrollTo({
                    top: aim_top - offset - below_h - 10,
                    behavior: 'smooth'
                });
                setTimeout(() => {
                    document.addEventListener("scroll", autoActive)
                }, 500)
            });
            if (catalog.length) $('.catalogue-item').eq(0).addClass('active');
            let autoActive = function() {
                let html_top = document.getElementsByTagName("html")[0].scrollTop;
                let contain = $(".joe_aside__item.catalogue .joe_aside__item-contain");
                for (let i = 0; i < catalog.length; i++) {
                    let offset = 0;
                    let h_id = '#' + catalog[i].id;
                    let h_offset = document.querySelector(h_id).offsetTop;
                    let above_h = document.querySelector('.joe_header__above').clientHeight;
                    let below_h = document.querySelector('.joe_header__below').clientHeight;
                    if (!document.querySelector('.joe_header').className.includes('active')) offset = above_h;
                    if (h_offset + below_h + offset + 10 >= html_top) {
                        $('.catalogue-item').removeClass('active');
                        if (i > 0 && i < catalog.length - 1 && document.querySelector('#' + catalog[i].id).offsetTop > html_top + window.innerHeight * 0.2) {
                            i--
                        }
                        $('#to-' + catalog[i].id).parent().addClass('active');
                        break
                    }
                }
            };
            document.addEventListener("scroll", autoActive)
        }
    } else {
        $('.catalogue').hide()
}

后面就是样式问题了，接下来修改joe\assets\css\joe.post.min.css在文件末尾添加下面这段CSS


.joe_aside__item.catalogue{margin-bottom:15px;transition:top 0.35s;background:var(--background)}
.joe_aside__item.catalogue .joe_aside__item-contain{padding:0;margin:0;margin-left:10px;max-height:500px;overflow-y:auto}
.joe_aside__item.catalogue .joe_aside__item-contain::-webkit-scrollbar{width:3px}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items{border-left:2px solid var(--classC);padding:10px 15px}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item{margin:0;padding:0;line-height:26px;font-size:15px}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a{position:relative;display:block;line-height:26px;color:var(--main);transition:color 0.5s}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a:hover{color:var(--theme)}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active>a,.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active>a{color:var(--theme)}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active>a::before,.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active>a::before{content:"";position:absolute;left:-17px;top:0;width:2px;height:26px;background-color:var(--theme);transition:height 0.35s}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2>.catalogue-item,.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item{font-size:14px}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item._active>a::before,.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item.active>a::before,.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item._active>a::before,.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item.active>a::before{left:-34px}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item,.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item{font-size:14px}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item._active>a::before,.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item.active>a::before,.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item._active>a::before,.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item.active>a::before{left:-51px}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3>.catalogue-item{font-size:14px}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item ul{padding-left:17px}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items ul{display:block;list-style-type:disc}
.joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a span.dir_name{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
五.侧边栏滑动位置

这个的位置觉得太靠上可以改以下，滑动的时候

m250nfz9.png

位置 usr/themes/Joe/assets/js/joe.global.min.js ，-60的哪个表示往下滑的时候侧边栏与顶部距离，+15的表示上滑时侧边栏与顶部距离

m250mzeq.png

六.代码展示优化

有时候代码太长反而影响用户阅读，所以我们可以将这个进行缩小，加个滚顶条即可，找到joe\assets\css\joe.global.min.css，搜索 .joe_detail__article pre[class*='language-'] ，然后把这个overflow:hidden改为 overflow-y: auto;后面加个max-height: 500px;自定义一下高度就可以了

m2fr5ewq.png

1
joe
版权属于： Blank
本文链接： https://uurr.cn/index.php/archives/138/
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
相关推荐
给网站加个LIVE2D
给网站加个LIVE2D

评论 (0)

夸夸
取消