Argon 主题修改记录

动手前建议阅读WordPress 主题修改经验

整体代码

页尾脚本(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});
}();

博客宠物及其功能修改

  1. 养一只博客宠物
  2. Live2D 宠物功能修改|音乐播放器+右键秘密通道

上古代码

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

参考资料

  1. WordPress 主题修改经验
  2. WordPress 子主题能干什么以及不能干什么
  3. 不要再傻乎乎地通过主题编辑器 style.css 修改主题样式了
  4. 浏览器开发者工具轻度使用指南

小提示:您也可以通过点击 广告 支持作者。您还可以点击下方 [ 标签 ] 阅读相关文章。您可以通过 RSS 订阅本站文章更新,订阅地址:https://crowya.com/feed

评论

  1. george
    Windows Edge
    江苏省苏州市 联通
    1周前
    2023-9-21 21:07:37

    感谢博主

  2. tyq
    Windows Edge
    中国
    1月前
    2023-8-23 21:48:24

    博主老师你好!想问一下右侧的浮动折叠栏怎么设置成只有“返回顶部”“评论”“夜间模式”“阅读进度”四个模块的呀?不知道是不是版本问题,现在的argon只有“设置”一块,里面有很多繁琐的内容,想删了。找了半天没找到方法,求指导,感谢!

    • 博主
      tyq
      Windows Edge
      上海市 电信
      已编辑
      4周前
      2023-9-05 9:59:50

      抱歉回复晚啦,argon 主题在后台还有设置项的哈,如果需要隐藏左移按钮的话需要改 CSS,例如 #fabtn_toggle_sides {display:none;}

  3. Android Chrome
    广东省佛山市 广电宽带
    8月前
    2023-1-26 15:26:02

    我在折叠区块中添加了代码,代码就放在上面的code那,可它依就被解析了
    [collapse title="折叠的代码" showleftborder="true"]
    <pre class=”wp-block-code”>code
    [/collapse]

    • space520
      Android Chrome
      广东省佛山市 广电宽带
      8月前
      2023-1-26 15:35:23

      问题已解决。打扰了。

  4. 熊猫
    Windows Chrome
    北京市 联通
    9月前
    2023-1-15 17:42:01

    博主大佬问一下,左侧栏的文章目录前面的序号是怎么加上的呀?

  5. Windows Chrome
    河南省 移动
    12月前
    2022-10-14 18:50:39

    鸦鸦 点击头像或作者名跳转到关于页这个 我把代码复制粘贴放到页尾脚本里了 为什么不起作用丫

    • 博主
      江南诗诗
      Windows Edge
      上海市闵行区 电信
      12月前
      2022-10-14 19:42:37

      要写在这个函数里面哦~

      window.pjaxLoaded = function(){
          $("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
          $("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');
      }
      window.pjaxLoaded();
      • 鸦鸦
        Windows Chrome
        河南省 移动
        12月前
        2022-10-15 6:04:12

        OK

    • qqqqq
      Windows Chrome
      河南省 移动
      已编辑
      1年前
      2022-4-26 20:35:13

      想问一下大佬这个主题代码是咋修改的呀,先本地修改然后再将主题上传到wordpress吗,我在wordpress里没找到修改代码的哇⌇●﹏●⌇

      • 博主
        qqqqq
        Windows Edge
        上海市静安区 电信
        1年前
        2022-4-26 20:48:02

        PHP的话是在后台主题编辑器修改的,JS的话是在argon主题设置的一个“页尾脚本”框里填写的。

        • qqqqq
          鸦鸦
          Windows Chrome
          河南省 移动
          1年前
          2022-4-27 15:53:47

          谢谢大佬,昨天没仔细看,就是还有一个问题想请教您一下,就是为啥我按照您的方法将网易云歌单添加到了博客里,每次切换界面这个歌曲都会暂停哇,按理说pjax不是可以实现中间无间断的吗,我这个每次点开其他文章就会暂停

          • 博主
            qqqqq
            Windows Edge
            上海市静安区 电信
            1年前
            2022-4-27 16:11:48

            具体细节我也记不太清了,我把我目前的页尾脚本里疑似有关联的内容分享给你看一下,不知道是否有帮助~

            function removelrc(){
                $(".aplayer.aplayer-fixed .aplayer-body").addClass("my-hide");
                //document.querySelector('meting-js').aplayer.lrc.hide();
                $(".aplayer.aplayer-fixed .aplayer-icon-lrc").addClass("aplayer-icon-lrc-inactivity");
                $(".aplayer.aplayer-fixed .aplayer-lrc").addClass("aplayer-lrc-hide");
                document.querySelector('meting-js').aplayer.on('play', function () {
                        document.querySelector('meting-js').aplayer.lrc.show();
                        $(".aplayer.aplayer-fixed .aplayer-icon-lrc").removeClass("aplayer-icon-lrc-inactivity");
                });
                document.querySelector('meting-js').aplayer.on('pause', function () {
                        document.querySelector('meting-js').aplayer.lrc.hide();
                        $(".aplayer.aplayer-fixed .aplayer-icon-lrc").addClass("aplayer-icon-lrc-inactivity");
                });
            }
            document.querySelector('meting-js').addEventListener("DOMNodeInserted",removelrc);
            setTimeout(function() {
                document.querySelector('meting-js').removeEventListener("DOMNodeInserted",removelrc);
                //移除左侧栏切换时的监听事件防止页面刷新
                if($("#leftbar_tab_catalog_btn").length > 0){
                    var el = document.getElementById('leftbar_tab_catalog_btn'),elClone = el.cloneNode(true);
                    el.parentNode.replaceChild(elClone, el);
                }
                var el = document.getElementById('leftbar_tab_overview_btn'),elClone = el.cloneNode(true);
                el.parentNode.replaceChild(elClone, el);
                var el = document.getElementById('leftbar_tab_tools_btn'),elClone = el.cloneNode(true);
                el.parentNode.replaceChild(elClone, el);
            }, 5000);
            • 博主
              鸦鸦
              Windows Edge
              上海市静安区 电信
              1年前
              2022-4-27 16:15:21

              前后记得加上script标签

            • qqqqq
              鸦鸦
              Windows Chrome
              河南省 移动
              1年前
              2022-4-27 21:01:49

              还是不行,不过谢谢大佬了,我自己再百度百度,寻找一下原因,感谢!!!

    • 干饭睡觉真君
      Windows Firefox
      中国 移动
      1年前
      2022-4-24 20:19:23

      请问一下大佬,你是怎么做到在折叠区块中添加代码的

      • 博主
        干饭睡觉真君
        iPhone Safari
        上海市静安区 电信
        已编辑
        1年前
        2022-4-25 10:41:34

        argon主题有短代码功能,格式为

        [collapse title="折叠的代码" showleftborder="true"]
        你的代码区块
        [/collapse]
        • 干饭睡觉真君
          鸦鸦
          Windows Firefox
          陕西省西安市 联通
          1年前
          2022-4-25 12:23:41

          明白了,没想到使用短代码命令的方式可以获得这么高的自由度。当时我用的是Gutenberg 编辑器区块的模式来添加折叠区块,所以不能在折叠区块里面添加代码区块,自由度没有这么高。谢谢大佬了!

      • 别抢我小鱼干
        Windows Chrome
        上海市嘉定区 电信
        1年前
        2022-4-05 11:11:59

        博主,你网站开源吗?

        • 博主
          别抢我小鱼干
          iPhone Safari
          上海市静安区 电信
          1年前
          2022-4-05 11:19:52

          WordPress好像本来就是开源的呀,argon主题也是开源的,我开不开无所谓呀,其实右键查看网页源代码基本上就一览无遗了

          • 别抢我小鱼干
            鸦鸦
            Android Chrome
            上海市 电信
            1年前
            2022-4-05 12:13:47

            我的argon有的功能好像没有展示出来,在小工具里面也找不到

      发送评论 编辑评论

      |´・ω・)ノ
      ヾ(≧∇≦*)ゝ
      (☆ω☆)
      (╯‵□′)╯︵┴─┴
       ̄﹃ ̄
      (/ω\)
      ∠( ᐛ 」∠)_
      (๑•̀ㅁ•́ฅ)
      →_→
      ୧(๑•̀⌄•́๑)૭
      ٩(ˊᗜˋ*)و
      (ノ°ο°)ノ
      (´இ皿இ`)
      ⌇●﹏●⌇
      (ฅ´ω`ฅ)
      (╯°A°)╯︵○○○
      φ( ̄∇ ̄o)
      ヾ(´・ ・`。)ノ"
      ( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
      (ó﹏ò。)
      Σ(っ °Д °;)っ
      ( ,,´・ω・)ノ"(´っω・`。)
      ╮(╯▽╰)╭
      o(*////▽////*)q
      >﹏<
      ( ๑´•ω•) "(ㆆᴗㆆ)
      😂
      😀
      😅
      😊
      🙂
      🙃
      😌
      😍
      😘
      😜
      😝
      😏
      😒
      🙄
      😳
      😡
      😔
      😫
      😱
      😭
      💩
      👻
      🙌
      🖕
      👍
      👫
      👬
      👭
      🌚
      🌝
      🙈
      💊
      😶
      🙏
      🍦
      🍉
      😣
      Source: github.com/k4yt3x/flowerhd
      颜文字
      Emoji
      小恐龙
      花!
      上一篇
      下一篇