Argon 主题修改记录

学习笔记 1150 字 33 阅

基础用法请先阅读:Argon-Theme文档

文章过时信息显示

作者已更新此功能,可跳过。

计算发布日期,显示修改日期。如果间隔天数为 0 显示为今天,为 1 显示为昨天。

在模板函数(function.php)1409行左右开始改为:

文章过时信息显示

//文章过时信息显示
function argon_get_post_outdated_info(){
if (get_option("argon_outdated_info_tip_type") == "toast"){
$before = "";
}else{
$before = ""; $after = "";
}
$content = get_option('argon_outdated_info_tip_content') == '' ? '本文最后更新于 %date_delta% 天前,其中的信息可能已经有所发展或是发生改变。' : get_option('argon_outdated_info_tip_content');
$delta = get_option('argon_outdated_info_days') == '' ? (-1) : get_option('argon_outdated_info_days');
if ($delta == -1){
$delta = 2147483647;
}
//if (get_option("argon_outdated_info_time_type") == "createdtime"){
$post_delta_fabu = floor((time() - get_the_time("U")) / (60 * 60 * 24));
//}else{
$post_delta_xiugai = floor((time() - get_the_modified_time("U")) / (60 * 60 * 24));
//}
if ($post_delta_fabu <= $delta){
return "";
}
if ($post_delta_xiugai <= 0){$content = str_replace(" %date_delta% 天前", "今天", $content);}
elseif ($post_delta_xiugai == 1){$content = str_replace(" %date_delta% 天前", "昨天", $content);}
else {$content = str_replace("%date_delta%", $post_delta_xiugai, $content);}
return $before . $content . $after;
}

页脚文字增加版权、备案号

以下为PHP代码方式,也可以直接用主题自带的页脚HTML,可跳过。

主题页脚(footer.php)第 5 行改为:

<div><?php echo '© '.date('Y').' <a href="'.get_bloginfo('url').'">'.get_bloginfo('name').'</a>';if(get_option('zh_cn_l10n_icp_num')) {echo ' · '.'<a href="http://beian.miit.gov.cn" rel="external nofollow"  target="_blank">'.get_option('zh_cn_l10n_icp_num').'</a>'.' · ';}?>Theme <a href="https://github.com/solstice23/argon-theme">Argon</a><?php if (get_option('argon_hide_footer_author') != 'true') {echo " By solstice23"; }?></div>
HTML+JavaScript 方式:

<p class="my-footer">© <a id="this-year"><a> <a href="/">咕咕三原小窝</a></p>
<p class="my-footer"><a href="http://beian.miit.gov.cn">萌ICP备 202052077</a></p>
 
<style>
#footer, .my-footer{
line-height: 0.8;
font-weight: normal;
}</style>
 
<script>
var my_data = new Date();
var my_year = document.getElementById("this-year");
my_year.innerHTML=my_data.getFullYear();
</script>

说说页面标题修改

PHP方式:修改说说页面模板(shuoshuo.php)12、19、20 行。[/tab-pane]
JavaScript方式:页尾脚本添加以下代码。(推荐,一劳永逸)

<!--以下内容每次跳转新页面都执行,pjax额外处理--><script>
window.pjaxLoaded = function(){
    //说说标题替换为碎碎念
    if($("#content > div.page-information-card-container > div > div").length > 0){
        var temp_str=document.querySelector("#content > div.page-information-card-container > div > div").innerHTML.replace(/说说/g,"碎碎念");
        document.querySelector("#content > div.page-information-card-container > div > div").innerHTML=temp_str;
        $("#content > div.page-information-card-container > div > div > p > i").removeClass("fa fa-quote-left");
        $("#content > div.page-information-card-container > div > div > p > i").addClass("fa fa-lightbulb-o");
    }
}
window.pjaxLoaded();
</script>

公告栏名称修改

边栏(sidebar.php)第 6 行。

<div class="leftbar-announcement-title text-white">一言</div>

如果需要文本居中:style="text-align:center"

调用一言 API

作者已更新此功能,可跳过。

第一步:在模板函数(functions.php)添加Hitokoto()功能函数。此函数可写入子主题。

一言API

//一言API
function Hitokoto(){
    $url = 'https://v1.hitokoto.cn/?encode=json'; // 不限定内容类型
    // $url = https://v1.hitokoto.cn/?encode=json&c=d'; // 限定内容类型
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2); // 从证书中检查SSL加密算法是否存在
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_TIMEOUT, 6);
    $response = curl_exec($ch);
    if($error=curl_error($ch)){return '欢迎来到咕咕三原小窝';} // 如果6s内,一言API调用失败则输出这个默认句子
    curl_close($ch);
    $array_data = json_decode($response,true);
    $lxtx_content = $array_data['hitokoto'].'——'.$array_data['from']; // 输出格式:语句——出处
    return $lxtx_content;
}

第二步:在需要显示的地方调用<?php echo Hitokoto(); ?>,比如边栏(sidebar.php)中的公告栏。

调用一言

<?php /*if (get_option('argon_sidebar_announcement') != '')*/ { ?>
            <div id="leftbar_announcement" class="card bg-white shadow-sm border-0">
                <div class="leftbar-announcement-body">
                    <div class="leftbar-announcement-title text-white">一言</div>
                    <div class="leftbar-announcement-content text-white"><?php echo get_option('argon_sidebar_announcement'); ?><?php echo Hitokoto(); ?></div>
                </div>
            </div>
        <?php } ?>

CSS 样式修改

修改内容见注释,其中文章背景卡片毛玻璃效果引起较明显卡顿,已弃用。

主题 - 自定义 - 额外 CSS,添加以下内容:

额外CSS

/*白天卡片背景透明*/
.card{
    background-color:rgba(255, 255, 255, 0.8) !important;
    /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
    -webkit-backdrop-filter:blur(6px);
}
 
/*小工具栏背景完全透明*/
/*小工具栏是card的子元素,如果用同一个透明度会叠加变色,故改为完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
    background-color:#ffffff00 !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.emotion-keyboard,#fabtn_blog_settings_popup{
    background-color:rgba(255, 255, 255, 0.95) !important;
}
 
/*左侧栏层级置于上层*/
#leftbar_part1 {
    z-index: 1;
}
 
/*分类卡片透明*/
.bg-gradient-secondary{
    background:rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
 
/*夜间透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
    background:rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup{
    background:rgba(66, 66, 66, 0.95) !important;
}
 
/*标签背景
.post-meta-detail-tag {
    background:rgba(255, 255, 255, 0.5)!important;
}*/
 
/*分类卡片文本居中*/
#content > div.page-information-card-container > div > div{
    text-align:center;
}
 
/*子菜单对齐及样式调整*/
.dropdown-menu .dropdown-item>i{
    width: 10px;
}
.dropdown-menu>a {
    color:var(--themecolor);
}
.dropdown-menu{
    min-width:max-content;
}
.dropdown-menu .dropdown-item {
    padding: .5rem 1.5rem 0.5rem 1rem;
}
.leftbar-menu-subitem{
    min-width:max-content;
}
.leftbar-menu-subitem .leftbar-menu-item>a{
    padding: 0rem 1.5rem 0rem 1rem;
}
 
/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
    background-color: #f9f9f980;
}
 
/*站点概览分隔线颜色修改*/
.site-state-item{
    border-left: 1px solid #aaa;
}
.site-friend-links-title {
    border-top: 1px dotted #aaa;
}
#leftbar_tab_tools ul li {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom:none;
}
html.darkmode #leftbar_tab_tools ul li {
    border-bottom:none;
}
 
/*左侧栏边距修改*/
.tab-content{
    padding:10px 0px 0px 0px !important;
}
.site-author-links{
    padding:0px 0px 0px 10px ;
}
/*目录位置偏移修改*/
#leftbar_catalog{
    margin-left: 0px;
}
/*目录条目边距修改*/
#leftbar_catalog .index-link{
    padding: 4px 4px 4px 4px;
}
/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools{
    font-size: 14px;
}
 
/*正文图片边距修改*/
article figure {margin:0;}
/*正文表格样式修改*/
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th{
    padding: 8px 10px;
    border: 1px solid;
}
/*表格居中样式*/
.wp-block-table.aligncenter{margin:10px auto;}
 
/*特色图片文章标题*/
.post-header.post-header-with-thumbnail .post-header-text-container .post-title {
    font-weight:bold;
    color:var(--themecolor) !important;
}
 
/*鼠标样式修改*/
body{cursor: url(https://xn--ehqz9kbvaa.wang/wp-content/uploads/2020/10/joy.ico),auto;}
 
.my-hide{
    display:none !important;
}
.zero-margin-bottom{
    margin-bottom:0 !important;
}
 
/*首页说说左上角图标修改*/
.shuoshuo-preview-container:before{
    background-size: 50%;
    background-position: 50% 45%;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMTIwIDU3NnEwIDEzLTkuNSAyMi41dC0yMi41IDkuNS0yMi41LTkuNS05LjUtMjIuNXEwLTQ2LTU0LTcxdC0xMDYtMjVxLTEzIDAtMjIuNS05LjV0LTkuNS0yMi41IDkuNS0yMi41IDIyLjUtOS41cTUwIDAgOTkuNSAxNnQ4NyA1NCAzNy41IDkwem0xNjAgMHEwLTcyLTM0LjUtMTM0dC05MC0xMDEuNS0xMjMtNjItMTM2LjUtMjIuNS0xMzYuNSAyMi41LTEyMyA2Mi05MCAxMDEuNS0zNC41IDEzNHEwIDEwMSA2OCAxODAgMTAgMTEgMzAuNSAzM3QzMC41IDMzcTEyOCAxNTMgMTQxIDI5OGgyMjhxMTMtMTQ1IDE0MS0yOTggMTAtMTEgMzAuNS0zM3QzMC41LTMzcTY4LTc5IDY4LTE4MHptMTI4IDBxMCAxNTUtMTAzIDI2OC00NSA0OS03NC41IDg3dC01OS41IDk1LjUtMzQgMTA3LjVxNDcgMjggNDcgODIgMCAzNy0yNSA2NCAyNSAyNyAyNSA2NCAwIDUyLTQ1IDgxIDEzIDIzIDEzIDQ3IDAgNDYtMzEuNSA3MXQtNzcuNSAyNXEtMjAgNDQtNjAgNzB0LTg3IDI2LTg3LTI2LTYwLTcwcS00NiAwLTc3LjUtMjV0LTMxLjUtNzFxMC0yNCAxMy00Ny00NS0yOS00NS04MSAwLTM3IDI1LTY0LTI1LTI3LTI1LTY0IDAtNTQgNDctODItNC01MC0zNC0xMDcuNXQtNTkuNS05NS41LTc0LjUtODdxLTEwMy0xMTMtMTAzLTI2OCAwLTk5IDQ0LjUtMTg0LjV0MTE3LTE0MiAxNjQtODkgMTg2LjUtMzIuNSAxODYuNSAzMi41IDE2NCA4OSAxMTcgMTQyIDQ0LjUgMTg0LjV6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}
.shuoshuo-preview-container:hover:before {
    background-position: 50% 50%;
    background-size: 60%;
}
 
/*回顶图标放大*/
button#fabtn_back_to_top, button#fabtn_go_to_comment, button#fabtn_toggle_blog_settings_popup, button#fabtn_toggle_sides, button#fabtn_open_sidebar{
    font-size: 1.2rem;
}
 
/*顶栏菜单放大*/
.navbar-nav .nav-link {
    font-size: 1rem;
}
.navbar-brand {
    font-family: 'Noto Serif SC',serif;
    font-size: 1.25rem;
    margin-right: 2rem;
    padding-bottom: .2rem;
}
.navbar-nav .nav-item {
    margin-right:0;
}
.mr-lg-5, .mx-lg-5 {
    margin-right:1rem !important;
}
.navbar-toggler-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.9rem;
    padding-left: 1rem;
}

其中鼠标样式貌似只支持格式为.ico 的图片。

关于毛玻璃效果再说一下,背景卡片的毛玻璃效果虽然很好看,但对比之下真的有肉眼可见的卡顿,但是只弄一个导航栏毛玻璃效果的话速度还是可以的。主要可能是由于文章背景卡片在页面滑动过程中对模糊效果的实时计算量比较大,而这个计算是由客户端浏览器完成的,用户体验就比较卡……

虽然最终代码就这么点,但是为了找出这些 CSS 可谓是殚精竭虑……

顶部导航栏毛玻璃效果

方法一:在不启用 jsdellvr 的 CDN 的前提下,修改 argontheme.js,大约 24 行。[/tab-pane]
方法二:依然启用 CDN,在页头或页尾脚本中重定义函数。因为 JavaScript 允许重复定义函数,后定义的同名函数覆盖之前的。(推荐)

主要用到backdrop-filter:blur(10px);属性。

/*根据滚动高度改变顶栏透明度*/
!function(){
    let toolbar = document.getElementById("navbar-main");
    let $bannerContainer = $("#banner_container");
    let $content = $("#content");
 
    let startTransitionHeight;
    let endTransitionHeight;
 
    startTransitionHeight = $bannerContainer.offset().top - 75;
    endTransitionHeight = $content.offset().top - 75;
 
    $(window).resize(function(){
        startTransitionHeight = $bannerContainer.offset().top - 75;
        endTransitionHeight = $content.offset().top - 75;
    });
 
    function changeToolbarTransparency(){
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop < startTransitionHeight){
            toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0)', 'important');
            toolbar.style.setProperty('box-shadow', 'none');
            toolbar.style.setProperty('-webkit-box-shadow', 'none');
            toolbar.style.setProperty('backdrop-filter', '');
            toolbar.style.setProperty('-webkit-backdrop-filter', '');
            toolbar.classList.add("navbar-ontop");
            return;
        }
        if (scrollTop > endTransitionHeight){
            toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0.6)', 'important');
            toolbar.style.setProperty('box-shadow', '0 0.3125rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.117)');
            toolbar.style.setProperty('-webkit-box-shadow', '0 0.3125rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.117)');
            toolbar.style.setProperty('backdrop-filter', 'blur(20px)');
            toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(20px)');
            toolbar.classList.remove("navbar-ontop");
            return;
        }
        let transparency = (scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) * 0.85;
        toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + transparency, 'important');
        toolbar.style.setProperty('box-shadow', '');
        toolbar.classList.remove("navbar-ontop");
    }
    changeToolbarTransparency();
    document.addEventListener("scroll", changeToolbarTransparency, {passive: true});
}();

自建归档时间轴页面

作者已更新此功能,可跳过。

主题目录下新建timeline.php。此页面可写入子主题。

归档时间轴

<?php
/*
Template Name: 归档时间轴
*/
get_header(); ?>
<?php get_sidebar(); ?>
        
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <article class="post post-full card bg-white shadow-sm border-0" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <a class="post-title text-center" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            <div class="post-content" id="post_content">
                <?php
                $previous_year = $year = 0;
                $previous_month = $month = 0;
                $ul_open = false;
                $myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');
                foreach ($myposts as $post) :
                    setup_postdata($post);
                    $year = mysql2date('Y', $post->post_date);
                    $month = mysql2date('n', $post->post_date);
                    $day = mysql2date('j', $post->post_date);
                    if ($year != $previous_year) :
                        if ($ul_open) echo '</div>';
                        echo '<h3>' . get_the_time('Y') . '</h3>';
                        echo "<div class='argon-timeline'>";
                        $ul_open = true;
                    endif;
                    $previous_year = $year;
                    $previous_month = $month;
                    ?>
                    <div class='argon-timeline-node'>
                        <div class='argon-timeline-time'><?php the_time('m-d'); ?></div>
                                    <div class='argon-timeline-card card bg-gradient-secondary shadow-sm'><div class='argon-timeline-title'><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div></div>
                    </div>
                <?php
                endforeach;
                echo '</div>';
                ?>
            </div>
        </article>
        
<style>
    .argon-timeline-card {
        margin-bottom: 4px;
        padding: 4px 20px;
        display: inline-block;
    }
    .argon-timeline-title {
        font-size: 17px;
        font-weight: bold;
        margin-bottom: 0px;
    }
    .post-content {
        line-height:1;
    }
    .argon-timeline-card:before {
        content: '';
        position: absolute;
        left: -18px;
        top: 8px;
        background: var(--themecolor);
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }
    .argon-timeline-time {
    position: absolute;
    left: -110px;
    margin-top: 0px;
    width: 85px;
    text-align: right;
    font-size: 15px;
    line-height: 26px;
    }
    .argon-timeline {
    margin-left: 110px;
    border-left: 3px solid rgba(var(--themecolor-rgbstr),0.2);
    padding-left: 10px;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    }
</style>
<?php
while ( have_posts() ) :
    the_post();        
    if (get_option("argon_show_sharebtn") != 'false') {
        get_template_part( 'template-parts/share' );
    }
    if (comments_open() || get_comments_number()) {
        comments_template();
    }
endwhile;
?>
<?php get_footer(); ?>
        
    </main>
</div>

左侧栏 - 站点概览 - 点击文章跳转到时间轴

方法一:修改 PHP,边栏 (sidebar.php) 大约 128 行。
原始代码:

<a style="cursor: default;"> //保持光标不变,鼠标碰到超链接不会变成小手

改为:

<a href="https://xn--ehqz9kbvaa.wang/archives">

方法二:JavaScript 方式,页尾脚本添加以下代码。(推荐,一劳永逸)

<!--站点概览点击文章跳转到时间轴--><script>
window.pjaxLoaded = function(){
    document.querySelector("#leftbar_tab_overview > nav > div.site-state-item.site-state-posts > a").removeAttribute("style");
    document.querySelector("#leftbar_tab_overview > nav > div.site-state-item.site-state-posts > a").setAttribute("href","/archives");
}
window.pjaxLoaded();
</script>

小窗口模式下左上角按钮打开左侧栏

方法一:主题页眉 (header.php) 225 行左右改为:

<button id="fabtn_open_sidebar" class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">

方法二:JavaScript方式,页尾脚本添加以下代码。(推荐,一劳永逸)

<script>
//小窗口模式下左上角按钮打开左侧栏
document.querySelector("#navbar-main > div > button").removeAttribute("data-target");
document.querySelector("#navbar-main > div > button").setAttribute("id","fabtn_open_sidebar");
</script>

回到顶部图标修改

PHP 方式:主题页眉(header.php)457 行左右fa fa-angle-up改为fa fa-arrow-up。[/tab-pane]

JavaScript 方式:

<!--回顶图标修改--><script>
$("#fabtn_back_to_top > span > i").removeClass("fa fa-angle-up");
$("#fabtn_back_to_top > span > i").addClass("fa fa-arrow-up");
</script>

- THE END -
0 分享
评论 ( 0 )
OωO
    • 二十四小令 - 啊啦啦 / 温润 / 白青 / 钰潇Jannifer / 蔓笙YUM / 小白鸽 / 雨霖仙
    • 空も飞べるはず - 栗コーダーカルテット
    • ひとつのハートで - 诺莺Nox