前言
這是我第一次在 WordPress 上搭建自己的部落格。在這個令人興奮的旅程中，我遇到了一些挑戰，但也獲得了寶貴的經驗和技能。
首先，我要談談我所選擇的主題。我花了很多時間在各種主題中尋找合適的那一個，直到我找到了 Argon。這個主題的設計簡潔而現代，完美地呈現了我希望傳達給讀者的個人風格和理念。
不過，僅僅使用主題預設的外觀還不足以滿足我的需求。爲了讓我的部落格更具個性和吸引力，我投入了大量時間和精力來美化它。通過新增自定義CSS樣式和優化程式碼，我成功地為主題增添了一些特殊效果和細節。這些微小的改變讓我的部落格與衆不同，並展現了我的獨特風格。
—By ChatGPT
使用 Argon 主題
字體全局使用 源泉圓體
美化參考
注意！使用 動態背景 或卡片滑鼠動態效果 要搭配以下代碼使用 (如過兩個都套用就放到最上面)
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mobile-detect.js"></script>
動態壁紙
-
- 粘貼到 Argon主題選項 的 頁尾脚本 即可
- 請自行更改影片
代碼：
<video src="請加入你的白天動態背景影片" class="bg-video bg-video-day" autoplay loop muted></video>
<video src="請加入你的黑夜動態背景影片" class="bg-video bg-video-night" autoplay loop muted></video>
<style>
video.bg-video {
position: fixed;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
pointer-events: none;
}
html.darkmode video.bg-video.bg-video-day {
opacity: 0;
}
html.darkmode video.bg-video.bg-video-night {
opacity: 1;
}
video.bg-video.bg-video-day {
opacity: 1;
}
video.bg-video.bg-video-night {
opacity: 0;
}
// 裝置檢測。依賴前述mobile-detect專案
var md = new MobileDetect(window.navigator.userAgent);
if (!md.phone()) {
#banner,
#banner .shape {
background: transparent !important;
}
}
</style>
<script src="https://api.gcxstudio.cn/odometer/odometer.min.js" integrity="sha256-65R1G5irU1VT+k8L4coqgd3saSvO/Wufson/w+v2Idw=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<div id="aplayer"></div>
卡片滑鼠動態效果
-
- 粘貼到 Argon主題選項 的 頁首脚本
代碼： -
<!--滑鼠懸停3D效果start-->
<!--1.定義對像屬性（似乎沒生效）-->
<div class="article.post:not(.post-full)" data-tilt></div>
<div class=".shuoshuo-preview-container" data-tilt></div>
<!--2.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-->
- 粘貼到 Argon主題選項 的 頁首脚本
圓角設置
30px
踩一踩