前言：在看 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 姐