Docker系列 WordPress系列 特效

转自我的个人博客https://blognas.hwb0307.com。欢迎关注！

前言

如果你编辑了某主题的footer.php，最好将该主题设置为手动更新。不然自动更新会将以前的设置覆盖掉！切记，切记！

经过《Docker系列 WordPress系列 WordPress的菜单》、《Docker系列 WordPress系列 WordPress小工具》、《Docker系列 WordPress系列 WordPress页面》三章的相关设置，其实你的博客已经有模有样了。推崇简洁的朋友可以不用再看这一章了。不过，总有一些人想玩点花样（比如我）。

大家看我的博客有哪些特效吧：https://blognas.hwb0307.com

• 页面飘扬着雪花/樱花
• 鼠标左击特效（出现文字或者是爆炸特效）
• 页尾特效：看板娘（就是我博客左下角那些猫猫和动漫人物）、自动更新网站运营时间、显示耗时及占用内存等

这些特效其实没有什么用途，单纯就是好看。以后等自己新鲜劲过了，说不定都会关掉。目前还是有保留。

还是写一下吧，说不定有喜欢折腾的小伙伴需要！也给自己留个备份了！

虽然我是以argon主题来示范，但对于多数主题来说应该有通用性（除了《Argon主题点击概要也可以进入文章》这一小节）。

我这里用主题文件编辑器进行脚本的插入和修改。你在shell用vim也没问题。我以前就是用vim的。

此外，你也可以看一下鸦鸦大神的魔改教程，很多代码都非常有用呢！

运行时间、耗时及占用内存

我们可以在主题文件编辑器里编辑footer.php文件：

在之前插入以下代码。在var birthDay =NewDate("2022-04-28");这里，你修改成你自己的时间即可。应该没有强迫症纠结为什么不可以设置时分秒的吧！

差不多是这样，大家体会一下它的位置：

加完代码后，记得更新文件。这时去页面的下面看一下：

逼格拉满！

雪花/樱花特效

我这里提供的特效，在手机等设备是不生效的。因为手机的界面太小，特效会导致观看效果很差。

同样，也是编辑footer.php文件。还是刚刚那个界面。在末尾上方（这样可以最后加载特效，以免影响其他内容的访问速度），添加以下代码：

像这样：

更新文件后生效。

效果图如下：

鼠标文字特效

和雪花特效是一样的用法。在末尾上方加入。当然这个文字就自定义了！

看板娘

看板娘看上去很炫，但其实只有一段简单的代码。也是加在之前，类似于：

这个是我自己根据几位大佬的项目来改装的。你有心思和能力，就去折腾了！当时我折腾了3天，还是没有实现最佳效果。

你可看一下我托管在github上的代码：https://github.com/huangwb8/live2d_bensz。这个项目你可以作为一个参考。你要学习自定义看板娘，还是要在这些大佬的项目里仔细地查看文档：

• stevenjoezhang/live2d-widget
• fghrsh/live2d_api
• fghrsh/live2d_demo

默认情况下我已经放了很多看板娘进去了：

其中tororo是白猫，hijiki是黑猫。平时我一般也只是将tororo调用出来。这玩意看上去炫，其实你并不会特别地需要它的！

你想自定义的话，可以直接fork项目live2d_bensz，然后将other里的模型放到prefer，修改/back/model_list.json，并将每个model的*.model.json改名为index.json即可。CDN更新可能有点慢，可能要24小时。你可以去鸦鸦那里看教程，我也是学TA的：https://crowya.com/1092。

如果你没有相关的编程知识，不推荐去折腾这个。直接粘贴完整。

或者请个大佬来帮你折腾吧！

其实看板娘也可以托管在自己的WordPress里，而不像我这样通过Github的CDN服务。不过我觉得这样做，以后别人可以直接copy我的代码用。说不定，也有不少爱猫人士呢！

Argon主题点击概要也可以进入文章

在默认情况下，我们的文章只能通过点击标题（绿色框）进入。按这个设置后，你点击概要（红色框）也可以进入文章！

主要参考：https://wangwangyz.site/archives/835。

这里我简单地贴一下大佬的教程吧，以防他的链接失效：

这一串代码是：

onclick="window.location.href=''" style="cursor: pointer"

自定义css

这里我主要是参考鸦鸦的Argon 主题修改记录。我去除了一些自己不想要的css样式。完整版大家可以去看TA的博客。我觉得这个背景板透明等特效还是不错的！整个主题好看很多。

从后台左侧栏的外观——自定义，找到额外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;}
 

/*回顶图标放大*/
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;
}

  
  
  
  

小结

特效我暂时接触就是这些了。已经是很花里胡哨了！

更多特效（比如音乐播放器、设置网页源码无法观看等）你自己检索吧！我自己就没有这些需求了。如果你只是搬运别人的特效，无非就是粘贴一些js脚本在footer.php里。如果你要自定义特效，这我也没太多经验，看板娘还懂一些。

我自己在一个全新的博客里测试过这些代码，均可以成功使用。如果你有问题，评论区留言吧！

博客版面和美化的相关设置，我觉得说到这里就差不多了。我觉得Argon主题的设置并不是很复杂。如果你有更加深入或细化的要求，就要靠你自己摸索了！反正我是不想在上面花太多心思了。正儿八经更新博文才是正路，哈哈！

之后我准备说一些和博客长期运营有关的一些重要的插件，比如Wordfence。

敬请期待！

本文使用 文章同步助手 同步