WordPress 配置
|
杂谈
|
36

763 字
|
16 分钟
本文最后更新于130 天前，其中的信息可能已经过时，如有错误请发送邮件到[email protected]

主题、插件

我使用的是Argon Theme，到官网下载后到wordpress主题中导入。

这里是官方文档：https://argon-docs.solstice23.top

主题配置

安装后到主题设置中导入下面的配置。

{"argon_theme_color":"#6d626d","argon_theme_color_hex_preview":"#6d626d","argon_show_customize_theme_color_picker":true,"argon_enable_immersion_color":"true","argon_darkmode_autoswitch":"time","argon_enable_amoled_dark":"false","argon_card_radius":"15","argon_card_shadow":"default","argon_page_layout":"double","argon_article_list_waterflow":"1","argon_article_list_layout":"1","argon_font":"serif","argon_assets_path":"jsdelivr_fastly","argon_custom_assets_path":"","argon_wp_path":"/","argon_dateformat":"YMD","argon_enable_headroom":"true","argon_toolbar_title":"--hidden--","argon_toolbar_icon":"","argon_toolbar_icon_link":" ","argon_toolbar_blur":"true","argon_banner_title":"EasT‘s blog","argon_banner_subtitle":"微尘积处成山岳，细水长流汇海涛。","argon_banner_size":"fullscreen","argon_page_background_banner_style":"transparent","argon_show_toolbar_mask":true,"argon_banner_background_url":"--bing--","argon_banner_background_color_type":"shape-primary","argon_banner_background_hide_shapes":true,"argon_enable_banner_title_typing_effect":"true","argon_banner_typing_effect_interval":"100","argon_page_background_url":"https://blog.easitch.com/wp-content/uploads/2024/09/day_waifu2x_2x_2n_jpg.png","argon_page_background_dark_url":"https://blog.easitch.com/wp-content/uploads/2024/09/night_waifu2x_2x_2n_png.png","argon_page_background_opacity":"1","argon_sidebar_banner_title":"EasT‘s blog","argon_sidebar_banner_subtitle":"--hitokoto--","argon_sidebar_auther_name":"EasT","argon_sidebar_auther_image":"https://blog.easitch.com/wp-content/uploads/2024/09/my.jpg","argon_sidebar_author_description":"","argon_sidebar_announcement":"欢迎来到我的 <a href=\"https://openai.easitch.com\" target=\"_blank\" >ChatGPT 中转站</a>，极具性价比，为付费不方便的朋友提供便利，有需求的可以添加下方 QQ 二维码，另外，邀请新用户能获取余额哦！最后说一句，那啥：请自觉遵守《生成式人工智能服务管理暂行办法》。\n<img src=\"https://east-pic-go.oss-cn-hangzhou.aliyuncs.com/notebook/202405291930059.webp\" style=\"width:100%;\">","argon_fab_show_settings_button":"false","argon_fab_show_darkmode_button":"true","argon_fab_show_gotocomment_button":"false","argon_seo_description":"网站描述 (Description Meta 标签)","argon_seo_keywords":"搜索引擎关键词（Keywords Meta 标签）","argon_article_meta":"time|categories|views","argon_show_readingtime":"true","argon_reading_speed":"580","argon_reading_speed_en":"80","argon_reading_speed_code":"10","argon_show_thumbnail_in_banner_in_content_page":"false","argon_first_image_as_thumbnail_by_default":"true","argon_reference_list_title":"参考","argon_show_sharebtn":"true","argon_show_headindex_number":"false","argon_donate_qrcode_url":"","argon_additional_content_after_post":"欢迎来到我的 <a href=\"https://openai.easitch.com  target=\"_blank\" >ChatGPT 中转站</a>，极具性价比，为付费不方便的朋友提供便利，有需求的可以添加左侧 QQ 二维码，另外，邀请新用户能获取余额哦！最后说一句，那啥：请自觉遵守《生成式人工智能服务管理暂行办法》。","argon_related_post":"category,tag","argon_related_post_sort_orderby":"meta_value_num","argon_related_post_sort_order":"DESC","argon_related_post_limit":"10","argon_article_header_style":"article-header-style-2","argon_outdated_info_time_type":"createdtime","argon_outdated_info_days":"1","argon_outdated_info_tip_type":"inpost","argon_outdated_info_tip_content":"本文最后更新于%modify_date_delta% 天前，其中的信息可能已经过时，如有错误请发送邮件到[email protected]","argon_archives_timeline_show_month":"true","argon_archives_timeline_url":"","argon_footer_html":"<div class=\"\"><span class=\"my-face\">Copyright ©2024 版权所有 EasT ୧(๑•̀⌄•́๑)૭</span></div>","argon_enable_code_highlight":"true","argon_code_theme":"vs2015","argon_code_highlight_hide_linenumber":"true","argon_code_highlight_break_line":"false","argon_code_highlight_transparent_linenumber":"false","argon_math_render":"katex","argon_mathjax_cdn_url":"//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js","argon_mathjax_v2_cdn_url":"//cdn.jsdelivr.net/npm/[email protected]/MathJax.js?config=TeX-AMS_HTML","argon_katex_cdn_url":"//cdn.jsdelivr.net/npm/[email protected]/dist/","argon_enable_lazyload":"true","argon_lazyload_threshold":"800","argon_lazyload_effect":"fadeIn","argon_lazyload_loading_style":"1","argon_enable_fancybox":"true","argon_enable_zoomify":"false","argon_zoomify_duration":"200","argon_zoomify_easing":"cubic-bezier(0.4,0,0,1)","argon_zoomify_scale":"0.9","argon_enable_pangu":"article","argon_custom_html_head":"","argon_custom_html_foot":"<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css\">\n<script src=\"https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js\"></script>\n \n<meting-js \n    server=\"netease\" \n    type=\"playlist\" \n    id=\"7373135320\"\n    fixed=\"true\" \n    mini=\"true\"\n    order=\"list\"\n    loop=\"all\"\n    preload=\"auto\"\n    list-folded=\"true\"\n    lrc-type=\"0\"\n>\n</meting-js>\n","argon_enable_smoothscroll_type":"1_pulse","argon_enable_into_article_animation":"false","argon_disable_pjax_animation":"false","argon_comment_pagination_type":"page","argon_comment_emotion_keyboard":"true","argon_hide_name_email_site_input":"false","argon_comment_need_captcha":"false","argon_get_captcha_by_ajax":"false","argon_comment_allow_markdown":"true","argon_comment_allow_editing":"true","argon_comment_allow_privatemode":"true","argon_comment_allow_mailnotice":"true","argon_comment_mailnotice_checkbox_checked":true,"argon_comment_enable_qq_avatar":"true","argon_comment_avatar_vcenter":"false","argon_who_can_visit_comment_edit_history":"commentsender","argon_enable_comment_pinning":"true","argon_enable_comment_upvote":"true","argon_comment_ua":"platform,browser","argon_show_comment_parent_info":"true","argon_fold_long_comments":"true","argon_gravatar_cdn":"dn-qiniu-avatar.qbox.me/avatar/","argon_text_gravatar":"true","argon_enable_search_filters":"true","argon_search_filters_type":"*post,*page,shuoshuo","argon_pjax_disabled":"false","argon_hide_categories":"","argon_enable_login_css":"true","argon_home_show_shuoshuo":"false","argon_fold_long_shuoshuo":"true","argon_enable_timezone_fix":"false","argon_hide_shortcode_in_preview":"true","argon_trim_words_count":"0","argon_enable_mobile_scale":"false","argon_disable_googlefont":"false","argon_disable_codeblock_style":"false","argon_update_source":"github","argon_hide_footer_author":"true"}

系统配置

这里的就比较复杂了，如果只需要进行记录博客，就到此为止了

找到footer.php文件，一定得是argon主题下的哦，然后开始编辑。

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

在</footer>之前插入以下代码

<!--耗时及占用内存开始-->
<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">
function NewDate(str) {
str = str.split('-');
var date = new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function momxc() {
<!--这里要改成自己博客的诞生时间-->
var birthDay =NewDate("2018-10-28");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("momk").innerHTML = "本站已安全运行："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒<br>";
setTimeout(momxc, 1000);
}momxc();
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>
<?php printf(' | 耗时 %.3f 秒 | 查询 %d 次 | 内存 %.2f MB |',timer_stop( 0, 3 ),get_num_queries(),memory_get_peak_usage() / 1024 / 1024);?><br>
<!--耗时及占用内存结束-->

文字颤抖

效果大致如下：

源代码来自希卡米 | HiKami，我只是大佬代码的搬运工。大致的原理是定义一个.my-face class，然后直接在html中调用类的函数。首先，我们在footer.php中添加css脚本：

<!--文字抖动特效-->
<link href="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/css/myface.css" rel="stylesheet">

然后，在页脚内容中添加类似命令：

<div class=""><span class="my-face">Copyright ©2024 版权所有 EasT ୧(๑•̀⌄•́๑)૭</span></div>

雪花/樱花/烟花特效

我这里提供的特效，在手机等设备是不生效的。因为手机的界面太小，特效会导致观看效果很差。设备判断主要利用mobile-detect项目提供的JS脚本（随机图API的php脚本也是类似的）。

用法也是编辑footer.php文件。还是刚刚那个界面。在末尾</body>上方（这样可以最后加载特效，以免影响其他内容的访问速度），添加以下代码（要用某个特效，记得将代码前面的注释符//去除）：

<!--全页特效开始-->
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mobile-detect.js"></script>
<script type="text/javascript">
    // 设备检测
    var md = new MobileDetect(window.navigator.userAgent);

    // PC生效，手机/平板不生效
    // md.mobile(); md.phone(); 
    if(!md.phone()){
        if(!md.tablet()){
            // 雪花
            $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/xiaxue.js");
            // 樱花
            // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/yinghua.js");

            //
            // 小烟花特效
            // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mouse-click.js");

            // 大烟花特效
            $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/mouse-click-02/mouse-canvas.js");
            document.write('<style>#mouse-canvas {z-index:217483647; pointer-events: none;  box-sizing: border-box !important; display: block !important; position: fixed !important; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100vh;}</style>')
        }   
    }
</script>
<!--全页特效结束-->

卡片3D特效

来自中秋明月的个人博客。源项目地址：vanilla-tilt.js

卡片的3D特效如下图：

<!--鼠标悬停3D效果start-->
<!--1.定义对象属性（似乎没生效）-->
<div class="article.post:not(.post-full)" data-tilt></div>
<div class=".shuoshuo-preview-container" data-tilt></div>
<!--2.JS脚本-->
<!--script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mobile-detect.js"></script--> <!--如果你没有引用过mobile-detect.js，请去除这里的注释以使其生效-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/vanilla3D/vanilla-tilt.js"></script>
<!--3.动作-->
<script type="text/javascript">
    // 设备检测。依赖前述mobile-detect项目。
    var md = new MobileDetect(window.navigator.userAgent);

    // PC生效，手机/平板不生效
    // md.mobile(); md.phone(); 
    if(!md.phone() && !md.tablet()){
        window.pjaxLoaded = function(){
            // 正文卡片
            VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full)"),{
                reverse:false,  // 是否反转倾斜方向
                max:2,     // 最大的倾斜角度(度)
                startX:0,      // X轴上的起始倾斜，单位为度。
                startY:0,      // Y轴上的起始倾斜，单位为度。
                perspective:1000,   // 转换角度，越低倾斜越极端
                scale:1.02,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
                speed:300,    // 进入/退出 过渡的速度
                transition:true,   // 是否在进入/退出的时候设置过渡效果
                axis:"y",   // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
                reset:true,   // 设置在退出时清除倾斜效果
                easing:"cubic-bezier(.03,.98,.52,.99)",    // 设置进入退出时过渡的贝塞尔曲线
                glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
                "max-glare":0.7,      // 设置最大的透明效果,1=100%,0.5=50%
                "glare-prerender":false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
                "mouse-event-element":null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
                "full-page-listening":false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
                gyroscope:false,   // 是否开启陀螺仪的方向检测
                gyroscopeMinAngleX: 0,  //陀螺仪最小角度X
                gyroscopeMaxAngleX: 0,  //陀螺仪最大角度X
                gyroscopeMinAngleY: 0,  //陀螺仪最小角度
                gyroscopeMaxAngleY: 0,  //陀螺仪最大角度
                gyroscopeSamples: 10  //陀螺仪样品
            })

            // 说说卡片
            VanillaTilt.init(document.querySelectorAll(".shuoshuo-preview-container"),{
                reverse:false,  // 是否反转倾斜方向
                max:2,     // 最大的倾斜角度(度)
                startX:0,      // X轴上的起始倾斜，单位为度。
                startY:0,      // Y轴上的起始倾斜，单位为度。
                perspective:1000,   // 转换角度，越低倾斜越极端
                scale:1.02,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
                speed:300,    // 进入/退出 过渡的速度
                transition:true,   // 是否在进入/退出的时候设置过渡效果
                axis:"y",   // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
                reset:true,   // 设置在退出时清除倾斜效果
                easing:"cubic-bezier(.03,.98,.52,.99)",    // 设置进入退出时过渡的贝塞尔曲线
                glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
                "max-glare":0.7,      // 设置最大的透明效果,1=100%,0.5=50%
                "glare-prerender":false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
                "mouse-event-element":null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
                "full-page-listening":false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
                gyroscope:false,   // 是否开启陀螺仪的方向检测
                gyroscopeMinAngleX: 0,  //陀螺仪最小角度X
                gyroscopeMaxAngleX: 0,  //陀螺仪最大角度X
                gyroscopeMinAngleY: 0,  //陀螺仪最小角度
                gyroscopeMaxAngleY: 0,  //陀螺仪最大角度
                gyroscopeSamples: 10  //陀螺仪样品
            })
        }
        $(window.pjaxLoaded);
        $(document).on('pjax:end', window.pjaxLoaded); 
    }
</script>
<!--鼠标悬停3D效果end-->

据鸦鸦说，卡片3D效果的两个选择器可以合并起来写，用逗号分隔：document.querySelectorAll("article.post:not(.post-full), .shuoshuo-preview-container")。感兴趣的小伙伴自己试试看喽！

对于Argon主题的使用者，这样就可以了！在Argon主题中，window.pjaxLoaded函数内的命令会避免使用Pjax并在切换页面时强制刷新，这个必须要用才可以保证特效的完美运行。如果是其它主题的话，你改一下控制对象的名字即可，具体情况具体分析。你也可以自己改动一下参数，看看效果如何。蛮有趣的一个特效！

欢迎来到我的 ChatGPT 中转站，极具性价比，为付费不方便的朋友提供便利，有需求的可以添加左侧 QQ 二维码，另外，邀请新用户能获取余额哦！最后说一句，那啥：请自觉遵守《生成式人工智能服务管理暂行办法》。
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

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

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇