整体代码

页尾脚本（2023年7月27日更新）

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

<!--卡片3D效果脚本--><script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper/vanilla3D/vanilla-tilt.min.js"></script>
<!--判断是否为Safari浏览器--><script>var isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);</script>

<!--以下内容每次跳转新页面都执行，pjax额外处理--><script>
window.pjaxLoaded = function () {
    //站点概览点击头像或作者名跳转到关于页
    $("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
    $("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');
    //说说标题替换为脑电波
    if (window.location.pathname == "/idea") {
        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").append('<br>由<a href="https://t.me/yaquews" target="_blank">鸦雀无声</a>频道自动同步');
            $("#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-bolt");
        }
    }
    //卡片3D效果
    if (screen.width >= 768 && !isSafari) {
        VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full), .shuoshuo-preview-container"), {
            reverse: true,  // reverse the tilt direction
            max: 8,     // max tilt rotation (degrees)
            startX: 0,      // the starting tilt on the X axis, in degrees.
            startY: 0,      // the starting tilt on the Y axis, in degrees.
            perspective: 1000,   // Transform perspective, the lower the more extreme the tilt gets.
            scale: 1.02,      // 2 = 200%, 1.5 = 150%, etc..
            speed: 600,    // Speed of the enter/exit transition
            transition: false,   // Set a transition on enter/exit.
            axis: "y",    // What axis should be banned. Can be "x", "y", or null
            reset: true,   // If the tilt effect has to be reset on exit.
            easing: "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
            glare: false,  // if it should have a "glare" effect
            "max-glare": 0.8,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
            "glare-prerender": false,  // false = VanillaTilt creates the glare elements for you, otherwise
            // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
            "mouse-event-element": null,   // css-selector or link to HTML-element what will be listen mouse events
            gyroscope: true,   // Boolean to enable/disable device orientation detection,
            gyroscopeMinAngleX: -45,    // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element;
            gyroscopeMaxAngleX: 45,     // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;
            gyroscopeMinAngleY: -45,    // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;
            gyroscopeMaxAngleY: 45,     // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;
        })
    }
}
window.pjaxLoaded();
</script>

<!--根据滚动高度改变顶栏透明度--><script>
!function () {
    let toolbar = document.getElementById("navbar-main");
    let $bannerContainer = $("#banner_container");
    let $content = $("#content");

    let startTransitionHeight;
    let endTransitionHeight;
    let maxOpacity = 0.65;

    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');
            if (argonConfig.toolbar_blur) {
                toolbar.style.setProperty('backdrop-filter', 'blur(0px)');
                toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(0px)');
            }
            toolbar.classList.add("navbar-ontop");
            return;
        }
        if (scrollTop > endTransitionHeight) {
            toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + maxOpacity + ')', 'important');
            toolbar.style.setProperty('box-shadow', '');
            toolbar.style.setProperty('-webkit-box-shadow', '');
            if (argonConfig.toolbar_blur) {
                toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
                toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
            }
            toolbar.classList.remove("navbar-ontop");
            return;
        }
        let transparency = (scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) * maxOpacity;
        toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + transparency, 'important');
        toolbar.style.setProperty('box-shadow', '');
        if (argonConfig.toolbar_blur) {
            toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
            toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
        }
        toolbar.classList.remove("navbar-ontop");
    }
    changeToolbarTransparency();
    document.addEventListener("scroll", changeToolbarTransparency, { passive: true });
}();
</script>

<!--宠物播放器-->
<script>const live2d_path = "https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/";</script>
<meting-js server="tencent" type="playlist" id="8559460487" theme="#339981" fixed="true" preload="none" autoplay="false" loop="all" order="random" volume="0.3"></meting-js>
<script>
//封装异步加载资源的方法
function loadExternalResource(url, type) {
	return new Promise((resolve, reject) => {
		let tag;
		if (type === "css") {
			tag = document.createElement("link");
			tag.rel = "stylesheet";
			tag.href = url;
		}
		else if (type === "js") {
			tag = document.createElement("script");
			tag.src = url;
		}
		if (tag) {
			tag.onload = () => resolve(url);
			tag.onerror = () => reject(url);
			document.head.appendChild(tag);
		}
	});
}

if (screen.width >= 768) {
	Promise.all([
		loadExternalResource("https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/waifu.min.css", "css"),
		loadExternalResource("https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/live2d.min.js", "js"),
		loadExternalResource("https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/waifu-tips.min.js", "js"),
		loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css", "css"),
		loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js", "js"),
	]).then(() => {
		loadExternalResource("https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js", "js");
	});
	ap = null;
	Object.defineProperty(document.querySelector('meting-js'), "aplayer", {
		set: function(aplayer) {
        		ap = aplayer;
        		ap_init();
        		initWidget();
		}
	});
}
</script>

CSS 样式（2023年7月27日更新）

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

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

主题-自定义-额外CSS，添加以下内容：

/*白天卡片背景透明*/
.card {
	background-color: rgba(255, 255, 255, 0.8) !important;
	/*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
	-webkit-backdrop-filter: blur(6px);
}

/*夜间透明*/
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;
}

/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,
.darkmode .card .widget,
#post_content>div>div>div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title,
#custom_html-2 {
	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;
}

/*分类卡片透明*/
.bg-gradient-secondary {
	background: rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/*分类卡片文本居中*/
#content>div.page-information-card-container>div>div {
	text-align: center;
}

/*提示条背景透明*/
.admonition,.collapse-block{
	background-color: transparent !important;
	backdrop-filter: contrast(130%);
}

/*左侧菜单栏突出颜色修改*/
.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-top:0;
	margin-bottom: 1rem;
}
.wp-block-columns {
	margin-bottom: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: #ffffff !important;
	text-shadow: 0px 0px 5px #000000 !important;
}

/*鼠标样式修改*/
body {
	cursor: url(https://img.crowya.com/wp-content/uploads/2023/05/mouse32.ico), auto;
}

/*首页说说左上角图标修改*/
.shuoshuo-preview-container:before {
	background-size: 50%;
	background-position: 50% 45%;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjg0MjM2MjAwNjA0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1MjMiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNzYxLjY2ODMzMiAzMjMuNDM3NzEycTEwLjMxMzE0MyAxMS40MTAyODYgNC4wMjI4NTcgMjUuMTYxMTQzbC0zMDguNTg5NzEyIDY2MS4xMzgyODFxLTcuNDYwNTcxIDE0LjI2Mjg1Ny0yMy45OTA4NTcgMTQuMjYyODU3LTIuMjY3NDI5IDAtNy45NzI1NzEtMS4xNzAyODYtOS43MjgtMi44NTI1NzEtMTQuNTU1NDI4LTEwLjgyNTE0M3QtMi41Ni0xNy4xMTU0MjhsMTEyLjU2Njg1Ni00NjEuNjc3NzExLTIzMi4wMDkxNDEgNTcuNzA5NzE0cS0yLjI2NzQyOSAwLjU4NTE0My02Ljg3NTQyOSAwLjU4NTE0My0xMC4zMTMxNDMgMC0xNy43MDA1NzEtNi4yOTAyODYtMTAuMzEzMTQzLTguNTU3NzE0LTcuNDYwNTcxLTIyLjMwODU3MWwxMTQuODM0Mjg1LTQ3MS40MDU3MTFxMi4yNjc0MjktNy45NzI1NzEgOS4xNDI4NTctMTMuMTY1NzE0dDE2LjAxODI4Ni01LjEybDE4Ny40NjUxNDIgMHExMC44MjUxNDMgMCAxOC4yODU3MTQgNy4xNjh0Ny40NjA1NzEgMTYuODIyODU3cTAgNC41MzQ4NTctMi44NTI1NzEgMTAuMzEzMTQzbC05Ny43MTg4NTYgMjY0LjU1NzcxMiAyMjYuMzAzOTk4LTU2LjAyNzQyOHE0LjUzNDg1Ny0xLjE3MDI4NiA2Ljg3NTQyOS0xLjE3MDI4NiAxMC44MjUxNDMgMCAxOS40NTYgOC41NTc3MTR6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSIyNTI0Ij48L3BhdGg+PC9zdmc+);
}

.shuoshuo-preview-container:hover:before {
	background-position: 50% 50%;
	background-size: 60%;
}

/*回顶图标放大*/
#fabtn_back_to_top,
#fabtn_go_to_comment,
#fabtn_toggle_blog_settings_popup,
#fabtn_toggle_sides,
#fabtn_open_sidebar,
#fabtn_toggle_darkmode {
	font-size: 1.2rem;
}

/*隐藏左移按钮*/
#fabtn_toggle_sides{display:none;}

/*顶栏菜单放大*/
.navbar-nav .nav-link {
	font-size: 1rem;
}

.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;
}

/*字体*/
@font-face {
	font-family: myFont;
	src:url(https://img.crowya.com/font/FZFWZZAY.woff2) format('woff2');
	font-display: swap;
}

body,
.nav-link-inner--text {
	font-family: myFont;
}

.navbar-brand {
	font-size: 1.25rem;
	font-weight: 100;
	margin-right: 2rem;
	padding-bottom: .1rem;
}

/*左侧栏头像自动缩放*/
#leftbar_overview_author_image:hover{
	transform: scale(1.2);
	filter: brightness(150%);
}

/*隐藏左侧栏搜索框*/
.leftbar-menu {display: none;}
.leftbar-search-button {display: none;}
#leftbar_part2_inner:before {display: none;}
@media screen and (min-width: 900px){
	.leftbar-banner {
	border-radius: var(--card-radius);
	}
}

/*折叠说说颜色修改*/
.shuoshuo-content.shuoshuo-folded:after {
	border-radius: 10px;
	background: linear-gradient(180deg, transparent 0%, var(--mycolor) 100%);
}
:root {--mycolor: #e6ddd3;}
html.darkmode {--mycolor: #424242;}

/*滚动条修改*/
::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track{
	background-color:#272010;
}
::-webkit-scrollbar-thumb{
	background-color:#6f6558;
	border:none;
}
html.darkmode ::-webkit-scrollbar-track{
	background-color:#282828;
}

虽然最终代码就这么点，但是为了找出这些CSS可谓是殚精竭虑……
具体历程参见《不要再傻乎乎地通过主题编辑器style.css修改主题样式了》。

局部细节

回到顶部图标修改

PHP方式：主题页眉 (header.php) 457行左右 fa fa-angle-up 改为 fa fa-arrow-up。

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>

说说页面标题修改

PHP方式：修改说说页面模板 (shuoshuo.php) 12、19、20行。

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"

点击头像或作者名跳转到关于页

这里只介绍JavaScript方式，和前面类似，页尾脚本添加以下代码。

$("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
$("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');

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

以下为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备20005259号</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>

顶部导航栏毛玻璃效果

方法一：在不启用jsdellvr的CDN的前提下，修改argontheme.js，大约24行。

方法二：依然启用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});
}();

博客宠物及其功能修改

上古代码

以下是主题作者已采纳并更新的内容，不需要自己修改了。

点击展开折叠内容

调用一言API

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

//一言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 } ?>

效果：

自建时间轴页面

主题目录下新建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>

文章过时信息显示

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

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

//文章过时信息显示
function argon_get_post_outdated_info(){
	if (get_option("argon_outdated_info_tip_type") == "toast"){
		$before = "<div id='post_outdate_toast' style='display:none;' data-text='";
		$after = "'></div>";
	}else{
		$before = "<div class='post-outdated-info'><i class='fa fa-info-circle' aria-hidden='true'></i>";
		$after = "</div>";
	}
	$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，边栏(sidebar.php)大约128行。

原始代码：

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

改为：

<a href="https://crowya.com/time">

方法二：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","/time");
}
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>

参考资料

zzaolv
Windows Chrome
广东省东莞市移动
3 天前
2024-11-17 8:07:52
博主你好，请问banner背景是怎么全屏，并且不会变呢
wuwuwu
Windows Chrome
福建省福州市电信
3 月前
2024-8-26 13:45:10
博主时间轴怎么做的呢
- 鸦鸦
  博主
  wuwuwu
  Android Chrome
  上海市电信
  3 月前
  2024-8-26 15:53:30
  如果是argon主题，只需要新建一个页面（注意是页面不是文章），模板选择时间轴就好啦。其他主题不一定有这个模板，可能需要自建。
离别
Windows Edge
四川省绵阳市电信/西南科技大学
6 月前
2024-6-02 3:53:08
博主好强！！
otavia28
Macintosh Chrome
河南省焦作市电信
10 月前
2024-2-04 17:11:48
请问博主，怎么调整滚动条滚动速度呢？我的博客滚一下就过去好多太快了

种草

近期评论

统计

整体代码

页尾脚本（2023年7月27日更新）

CSS 样式（2023年7月27日更新）

局部细节

回到顶部图标修改

说说页面标题修改

公告栏名称修改

点击头像或作者名跳转到关于页

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

顶部导航栏毛玻璃效果

博客宠物及其功能修改

上古代码

调用一言API

自建时间轴页面

文章过时信息显示

点击文章跳转到时间轴

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

参考资料

评论

发送评论编辑评论

整体代码

页尾脚本（2023年7月27日更新）

CSS 样式（2023年7月27日更新）

局部细节

回到顶部图标修改

说说页面标题修改

公告栏名称修改

点击头像或作者名跳转到关于页

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

顶部导航栏毛玻璃效果

博客宠物及其功能修改

上古代码

调用一言API

自建时间轴页面

文章过时信息显示

点击文章跳转到时间轴

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

参考资料

评论

发送评论 编辑评论

发送评论编辑评论