Argon 主题修改记录

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

文章过时信息显示

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

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

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

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

以下为 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 行。

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() 功能函数。此函数可写入子主题。

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

CSS 样式修改

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

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

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

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

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

顶部导航栏毛玻璃效果

方法一:在不启用 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});
}();

自建归档时间轴页面

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

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

效果预览

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

方法一:修改 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

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>
小提示:您可以通过 RSS 订阅本站文章更新,订阅地址:https://咕咕三原.wang/feed。什么是 RSS ?
暂无评论

发送评论 编辑评论


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