前言：在看 DIYGOD（後文稱 D 姐）的文章時，發現 D 姐的橫幅隨著瀏覽器寬度調整也不會動，就跟著 D 姐的樣式代碼裝修一下自己 Xlog
零、分析 D 姐樣式代碼#
1、精細化管理字體#
@import url("https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreenr.css");
.xlog-page-index,
.xlog-page-post {
font-family: "LXGW WenKai Screen R", sans-serif;
}
@font-face {
font-family: SFCompactRounded;
font-weight: 300;
src:url(https://ipfs.4everland.xyz/ipfs/bafybeidme3gx5cgofwznbtccc7vnfi2acecdzaiy7yfcjyq4e3qgzqwzem);
}
@font-face {
font-family: SFCompactRounded;
font-weight: 400;
src:url(https://ipfs.4everland.xyz/ipfs/bafybeif5baqci7hr4s6ax2a4osvhaayuuipffbww6oydibxx6qgueklc2a);
}
@font-face {
font-family: SFCompactRounded;
font-weight: 500;
src:url(https://ipfs.4everland.xyz/ipfs/bafybeihidx5w2sagmed5zwtlmkceht6ni3akqxvvbnob4uz63sfdpwh5wu);
}
@font-face {
font-family: SFCompactRounded;
font-weight: 600;
src:url(https://ipfs.4everland.xyz/ipfs/bafybeihe3bpdk7yojbcghhiufqe62smr7y2fcm5gagm2nq2l6cgynpauou);
}
D 姐很細，根據不同字體 weight 定義了不同的字體，這段代碼這次裝修沒用上
2、區分白天 / 黑夜模式的主題色，與鼠標樣式#
:root {
--theme-color: #ff9800;
--font-fans: SFCompactRounded, PingFang SC, Microsoft YaHei, Lato, sans-serif;
--header-height: max(50vh, 400px);
cursor: url(https://ipfs.4everland.xyz/ipfs/bafkreihm4v5gpjkv5lboaqhdfmou4mlpvfjkgbn24ywrfivdk7tolgzkke), default;
--tw-backdrop-blur: n
}
3、定義字體變量#
@font-face {
font-family: 'Candyshop';
src: url(https://ipfs.4everland.xyz/ipfs/bafkreiaztv4ex5zlllmz5jqkrc3uouggdwfy6rrenemtdf3erlbd6bmfwm);
font-display: swap;
}
4、整體橫幅（banner）#
1）橫幅圖片樣式
.xlog-banner img {
max-width: 100%;
width: 300px;
}
2）信息框
.xlog-site-info {
border: 1px solid #fff;
transition: .3s ease;
z-index: 1;
}
3）用戶名
.xlog-site-name {
color: var(--theme-color);
font-family: Candyshop;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -1.414px 0 0 #fff, 1.414px 0 0 #fff, 0 -1.414px 0 #fff, 0 1.414px 0 #fff;
font-size: 35px;
}
4）黑夜模式信息框
.dark .xlog-site-info {
border: 1px solid var(--border-color);;
}
5）頭像框
.xlog-site-icon {
width: 110px;
height: 110px;
}
6）文章列表
.xlog-post {
transition: .3s ease;
}
5、底部（footer）#
footer {
position: relative;
margin-top: 210px;
}
/* 在底部元素前插入圖像 */
footer:before {
content: ' ';
background: url(https://ipfs.4everland.xyz/ipfs/bafkreigq3m2bj76jl7abz6i5rlzegutcrfc2j2nqkcypksbeyu67fsymoy) no-repeat center;
height: 368px;
width: 100%;
display: block;
position: absolute;
top: -295px;
left: 0;
pointer-events: none;
}
6、幾個媒體查詢#
@media (max-width: 640px) {
.xlog-site-info {
padding: 1rem;
}
}
@media (min-width: 640px) {
.xlog-post:hover {
transform: scale(1.02);
box-shadow: rgb(0 0 0 / 10%) 0 10px 50px;
background-color: #fff;
z-index: 9;
}
.dark .xlog-post:hover {
background-color: var(--hover-color);
}
.xlog-site-info:hover {
transform: scale(1.03);
-webkit-font-smoothing: antialiased;
}
}
一、開始裝修#
1、學習如何使用 4EVERYLAND#
4EVERYLAND
連接錢包後，去 Storage->Bucket->New Bucket->Upload 你的字體、圖片等資源-> 拷貝 CID
比如我美美的呆毛的 CID 是
bafybeifliw6wwf2kw3vfzhch3nyv2hgdrkb74qarmzsr53jxxmqwb3ggai
將其與以下鏈接拼接：
https://ipfs.4everland.xyz/ipfs/[CID]
即為：
https://ipfs.4everland.xyz/ipfs/bafybeifliw6wwf2kw3vfzhch3nyv2hgdrkb74qarmzsr53jxxmqwb3ggai
可以嘗試訪問，就能訪問到美美的呆毛啦
2、找喜歡的字體#
我去的是谷歌字體庫
下載後將 ttf/otf 文件上傳至 4EVERYLAND
3、更改 D 姐的樣式#
@font-face {
font-family: 'Candyshop';
src: url(https://ipfs.4everland.xyz/ipfs/[CID]);
font-display: swap;
}
4、以上拋磚引玉#
把 D 姐的樣式代碼看懂後，實質上就是上傳自己的資源去 4EVERYLAND 上，去供 Xlog 的 CSS 代碼塊訪問到，對我來說難的是找 色圖 喜歡的圖
二、代碼展示#
/* 設置字體 */
@font-face {
font-family: 'YawnFont';
src: url(https://ipfs.4everland.xyz/ipfs/bafybeigcxr7fhpf4e3p2a6mrxfbqoxzeckcvtusnszirz57f3rmjtfgbym);
font-display: swap;
}
/* 設置主題色、鼠標樣式等 */
:root {
--theme-color: #ff9800;
--font-fans: sans-serif;
--header-height: max(50vh, 400px);
cursor: url(https://ipfs.4everland.xyz/ipfs/bafkreieeqamkk3p65nj4quf4vrpkzqfl2yonns2av7wctbpf4gko4gpkia), default;
}
/* 將遮蓋呆毛的樣式取消掉 */
@media (min-width: 640px) {
.sm\:backdrop-blur-sm {
--tw-backdrop-blur: none !important; /* 覆蓋為不需要的值 */
-webkit-backdrop-filter: none !important; /* 覆蓋為不需要的值 */
backdrop-filter: none !important; /* 覆蓋為不需要的值 */
}
}
/* 將遮蓋呆毛的樣式取消掉 */
.backdrop-blur-sm {
--tw-backdrop-blur: none !important; /* 覆蓋為不需要的值 */
-webkit-backdrop-filter: none !important; /* 覆蓋為不需要的值 */
backdrop-filter: none !important; /* 覆蓋為不需要的值 */
}
/* header overall */
/* 個人信息框 */
.xlog-site-info {
border: 1px solid #fff;
transition: .3s ease;
z-index: 1;
}
/* 橫幅圖片樣式 */
.xlog-banner img {
width: auto !important;
margin: auto !important;
}
/* 用戶名 */
.xlog-site-name {
color: var(--theme-color);
font-family: YawnFont;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -1.414px 0 0 #fff, 1.414px 0 0 #fff, 0 -1.414px 0 #fff, 0 1.414px 0 #fff;
font-size: 35px;
}
/* 黑暗模式下信息框 */
.dark .xlog-site-info {
border: 1px solid var(--border-color);;
}
.dark .xlog-banner {
background: #1e2024 !important;
}
.xlog-banner {
background: #f6f6f6 !important;
}
/* 頭像框 */
.xlog-site-icon {
width: 110px;
height: 110px;
}
/* 媒體查詢 */
@media (max-width: 640px) {
.xlog-site-info {
padding: 1rem;
}
}
/* post list */
/* 文章列表：調整動畫時間 */
.xlog-post {
transition: .3s ease;
}
/* 媒體查詢（當頁面寬度小於 640px 時）：1、光標移入文章列表，變大、有陰影、背景色；2、黑暗模式下光標移入更改背景；3、移入信息框變大，字體平滑 */
@media (min-width: 640px) {
.xlog-post:hover {
transform: scale(1.02);
box-shadow: rgb(0 0 0 / 10%) 0 10px 50px;
background-color: #fff;
z-index: 9;
}
.dark .xlog-post:hover {
background-color: var(--hover-color);
}
.xlog-site-info:hover {
transform: scale(1.03);
-webkit-font-smoothing: antialiased;
}
}
/* footer */
/* 底部樣式 */
footer {
position: relative;
margin-top: 444px;
}
/* 在底部元素前插入圖像 */
footer:before {
content: ' ';
background: url(https://ipfs.4everland.xyz/ipfs/bafybeih3rgmdz4cvoj2web2yc7fgf7gplo6ds5qabokvzhocfqnm6m66iq) no-repeat center;
height: 554px;
width: 100%;
display: block;
position: absolute;
/* top: -350px; */
left: 0;
pointer-events: none;
}
三、總結#
我始終認為前端終能拯救世界，加油吧
ps：我記得老 IE 是能在 css 中訪問 js 代碼的，格式也是 url (...)，印象不是很深了，如果是真的，對伺服器威脅是巨大的。手動 @D 姐