碎碎念 关于页面,就相当于一个站点的门户,只有这里才能让访客了解站长,原本的关于页面丑的简直没法看,干巴巴的文字,一点动效都没有,上网查找了一些相关教程,但是都没有满意的,要么就是太复杂,要么就是太花哨,不是说不好看,而是不适合我的站点。而现在,虽然不能说精通,但是好歹也算学过一点点魔改知识了,那么我们就尝试着自己搞搞,看看能不能整一个心仪的出来吧!
样式预览 可以直接去我站点进行查看:
下面是效果预览图:
效果对比 虽然也说不上多么好看吧,但是至少是我喜欢的类型就可以啦,简单大气,并且按照我的想法加了一些动效。
教程 既然我写到这里了,就将我熬了一晚上写出来的玩意分享一下吧。
创建页面 在source
文件夹下创建目录about
,在目录about
下创建index.md
文件,写入以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 --- title: 关于我的一些公开的私密资料…… type: "about" comments: false aside: false ---<style > .author-img { position : relative; } .author-box { text-align : center; padding : 20px ; height : auto; border-bottom : 2px solid #ddd ; } .author-img img { border-radius : 50% ; width : 150px ; height : 150px ; margin-bottom : 10px ; } .green-dot { position : absolute; right : calc (50% - 67px ); bottom : 13px ; width : 20px ; height : 20px ; background-color : rgb (40 , 231 , 139 ); border-radius : 50% ; } .content h2 { margin-top : 0 ; margin-bottom : 0 ; } .content .column { margin-top : 4px ; margin-bottom : 4px ; width : 65% ; margin-left : 20px ; } .content .info-columns { margin : 10px 0 ; } .content .row { display : flex; justify-content : space-between; } .section { display : flex; padding : 10px ; align-items : center; justify-content : space-between; border-bottom : none; margin-top : 20px ; margin : 20px 10px 0 10px ; border-radius : 10px ; background-color : white; height : 250px ; box-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.1 ); } [data-theme=dark] .section { background-color : #2c2c2c ; box-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.5 ); } .section .right { flex-direction : row-reverse; } .section a { width : 45% ; height : 100% ; transition : transform 0.5s ease; } .section img { width : 100% ; height : 100% ; object-fit : cover; border-radius : 8px ; } .section :hover a { transform : scale (1.10 ); } @media (min-width : 870px ) { .section .right :hover .content { margin-left : 10px ; } .section :hover .content { width : 50% ; width : 50% ; } } .section .content { width : 55% ; margin : 20px 20px ; max-height : 100% ; overflow : hidden; text-overflow : ellipsis; transition : width 0.5s ease, margin-left 0.3s ease; } .wrapper { text-align : center; padding : 10px ; margin : 20px 10px 0 10px ; border-radius : 10px ; background-color : white; height : auto; box-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.1 ); } .wrapper .label { margin : 20px 20px ; } .wrapper .site-grid { margin-top : 10px ; border-radius : 8px ; display : grid; grid-template-columns : repeat (4 , 1 fr); gap : 10px ; width : 100% ; height : auto; } .wrapper .site-grid .site-item { z-index : 1 ; border-radius : 10px ; position : relative; width : 100% ; height : 200px ; background-size : cover; background-position : center; display : flex; justify-content : center; align-items : center; text-decoration : none; overflow : hidden; transition : transform 0.3s ease-in-out, z-index 0.3s ease-in-out; } @media (min-width : 870px ) { .wrapper .site-grid .site-item :hover { transform : scale (1.2 ); z-index : 2 ; } } .wrapper .site-overlay { position : absolute; inset: 0 ; border-radius : 10px ; background : rgba (255 , 255 , 255 , 0.5 ); transition : background 0.6s , color 0.6s ; display : flex; text-align : center; justify-content : center; align-items : center; font : bold 25px sans-serif; color : #000000 ; } .wrapper .site-item :hover .site-overlay { background : rgba (0 , 0 , 0 , 0.5 ); color : #ffffff ; } [data-theme=dark] .wrapper { background-color : #2c2c2c ; box-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.5 ); } [data-theme=dark] .wrapper .site-item :hover .site-overlay { background : rgba (255 , 255 , 255 , 0.5 ); color : #000000 ; } [data-theme=dark] .wrapper .site-overlay { background : rgba (0 , 0 , 0 , 0.5 ); color : #ffffff ; } @media (max-width : 870px ) { .section a { display : none; } .section .content { width : 100% ; } .section { height : auto; min-height : 250px ; } .wrapper .site-grid { grid-template-columns : repeat (2 , 1 fr); grid-auto-rows : 200px ; } } @media (max-width : 560px ) { .wrapper .site-grid { grid-template-columns : repeat (1 , 1 fr); grid-auto-rows : 200px ; } } </style > <div class ="author-box" > <div class ="author-img" > <img class ="no-lightbox" src ="https://blog.qyliu.top/info/avatar.ico" > <div class ="green-dot" > </div > </div > <div class ="image-dot" > </div > <p class ="p center logo large" > 关于我</p > <p class ="p center small" > 柳影曳曳,清酒孤灯,扬笔撒墨,心境如霜</p > </div > <div class ="section left" > <img src ="https://cdn.qyliu.top/i/2024/04/14/661ab011d7d88.png" > <div class ="content" > <div class ="info-columns" > <h2 > 个人信息</h2 > <ul > <div class ="row" > <div class ="column" > <li > 姓名: 柳清扬</li > <li > 住址: 陕西省</li > <li > 学校: 武汉理工大学</li > </div > <div class ="column" > <li > 性别: 妈宝男</li > <li > 年级: 二〇二一级</li > <li > 专业: 人工智能</li > </div > </div > <li > 邮箱: 2411457922@qq.com</li > </ul > </div > </div > </div > <div class ="section right" > <img src ="https://cdn.qyliu.top/i/2024/04/14/661ab051377ef.png" > <div class ="content" > <h2 > 教育背景</h2 > <ul > <li > 学校: 武汉理工大学</li > <li > 主要专业课程: 干饭.jpg(101.5)</li > </ul > </div > </div > <div class ="section left" > <img src ="https://cdn.qyliu.top/i/2024/04/14/661ab078b3033.png" > <div class ="content" > <h2 > 学生干部经历</h2 > <ul > <li > 武汉理工大学计算机协会事务部部长</li > <li > 人工智能2102班班长</li > <li > 易班学生工作站创意策划部通讯员、社会实践委员</li > </ul > </div > </div > <div class ="section right" > <img src ="https://cdn.qyliu.top/i/2024/04/14/661ab09243659.png" > <div class ="content" > <h2 > 主要项目</h2 > <ul > <li > 多尺度人头视觉特征的人数统计模型</li > <li > 基于PyTorch实现LSTM汉语分词模型及情感分析</li > <li > 钢铁缺陷检测深度研究</li > <li > 基于Java实现MySQL数据库双端图书管理系统</li > <li > 基于MFC的连连看程序</li > </ul > </div > </div > <div class ="section left" > <img src ="https://cdn.qyliu.top/i/2024/04/14/661ab0c2a778f.png" > <div class ="content" > <h2 > 技能</h2 > <ul > <li > 语言技能: 英语</li > <li > 专业技能: C++、Java、Python、Linux、HTML、CSS、JavaScript</li > <li > 通用技能: Office、Excel、PowerPoint</li > <li > 正在学习中</li > </ul > </div > </div > <div class ="section right" > <img src ="https://cdn.qyliu.top/i/2024/04/14/661ab0ee65c56.png" > <div class ="content" > <h2 > 荣誉和奖项</h2 > <ul > <li > 全国大学生数学竞赛“省级三等奖”(2023.12)</li > <li > 钢铁缺陷检测百度挑战赛“第三名”(2023.10)</li > <li > 天梯赛校内选拔赛,“校级三等奖”(2020.8)</li > <li > 武汉理工大学“三好学生”(2021.12)</li > <li > 待完善</li > </ul > </div > </div > <div class ="section left" > <img src ="https://cdn.qyliu.top/i/2024/04/14/661ab10f685ed.png" > <div class ="content" > <h2 > 自我评价</h2 > <ul > <li > 思想上乐观开朗,乐于助人,具有团队协作精神及创新意识。</li > <li > 工作上极富责任心与信念感,对待工作认真负责,有较强的组织管理及动手能力。</li > <li > 总结:人嘎嘎好!</li > </ul > </div > </div > <div class ="wrapper" > <div class ="label" > <h2 > 本人站点</h2 > </div > <div class ="site-grid" > <a href ="http://www.qyliu.top" target ="_blank" class ="site-item" style ="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab1495ff39.png')" > <div class ="site-overlay" > <span > 导航站点<br > (本站主站)</span > </div > </a > <a href ="https://memos.qyliu.top/" target ="_blank" class ="site-item" style ="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab179e85c2.png')" > <div class ="site-overlay" > <span > 盐焗小星球<br > (闲言碎语)</span > </div > </a > <a href ="https://listen.qyliu.top/" target ="_blank" class ="site-item" style ="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab19811d2c.png')" > <div class ="site-overlay" > <span > 清羽飞扬监控墙<br > (网站状态)</span > </div > </a > <a href ="https://visitor.qyliu.top/" target ="_blank" class ="site-item" style ="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab31673f3c.png')" > <div class ="site-overlay" > <span > 清羽飞扬访客统计<br > (统计人数)</span > </div > </a > <a href ="https://mindmap.qyliu.top/" target ="_blank" class ="site-item" style ="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab1e09dea0.png')" > <div class ="site-overlay" > <span > 清羽飞扬思维导图<br > (好用小工具)</span > </div > </a > <a href ="https://cdn.qyliu.top/" target ="_blank" class ="site-item" style ="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab1f51c57d.png')" > <div class ="site-overlay" > <span > 清羽飞扬图床<br > (自建的安稳)</span > </div > </a > <a href ="https://ittools.qyliu.top/" target ="_blank" class ="site-item" style ="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab3a11aa80.png')" > <div class ="site-overlay" > <span > 清羽飞扬IT工具箱<br > (好用小工具)</span > </div > </a > <a href ="https://drew.qyliu.top/" target ="_blank" class ="site-item" style ="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab22b067f1.png')" > <div class ="site-overlay" > <span > 清羽飞扬画板<br > (好用小工具)</span > </div > </a > <a href ="https://chat.qyliu.top/" target ="_blank" class ="site-item" style ="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab26310be8.png')" > <div class ="site-overlay" > <span > 清羽飞扬NextGPT<br > (AI对话工具)</span > </div > </a > <a href ="https://calcium.qyliu.top/" target ="_blank" class ="site-item" style ="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab27ab2abc.png')" > <div class ="site-overlay" > <span > 清羽飞扬在线计算器<br > (在线计算器)</span > </div > </a > <a href ="https://bingai.qyliu.top/" target ="_blank" class ="site-item" style ="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab37220873.png')" > <div class ="site-overlay" > <span > 清羽飞扬的BingAI<br > (其实没啥用)</span > </div > </a > </div > </div >
替换其中的图片,文字,主题等部分,注意,需要替换图片,因为本站图片开了防盗链,您的站点可能无法正常显示,然后执行hexo
三件套,应该就可以看见大致的效果了,不过可能不太理想。下面我们将进行微调,以达到更加理想的效果。
HTML特殊配置 我们从主干部分说起,讲一些主要需要注意的地方,头像没什么说的,改个路径就行,那就第一部分,个人信息部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <div class ="section left" > <img src ="https://cdn.qyliu.top/i/2024/04/14/661ab011d7d88.png" > <div class ="content" > <div class ="info-columns" > <h2 > 个人信息</h2 > <ul > <div class ="row" > <div class ="column" > <li > 姓名: 柳清扬</li > <li > 住址: 陕西省</li > <li > 学校: 武汉理工大学</li > </div > <div class ="column" > <li > 性别: 妈宝男</li > <li > 年级: 二〇二一级</li > <li > 专业: 人工智能</li > </div > </div > <li > 邮箱: 2411457922@qq.com</li > </ul > </div > </div > </div >
这里我们使用了一个表格进行更多信息的显示,防止大片的空白,可以对照着我的网站查看相关效果进行替换,在css部分,我们针对于表格进行了一定的适配:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .content .column { margin-top : 4px ; margin-bottom : 4px ; width : 65% ; margin-left : 20px ; } .content .info-columns { margin : 10px 0 ; }.content .row { display : flex; justify-content : space-between; }
没有什么需要具体修改的地方,唯一需要注意的就是,不要超出框格的高度,这个高度可以在section
的样式中进行修改,我采用的是,当宽屏时,所有节高度一致,这样能保证更好的视觉效果,窄屏时,宽度自行变化,因为窄屏显示不佳,所以我选择了注意内容的紧凑性。
1 2 3 4 5 6 7 8 9 10 11 12 .section { height : 250px ; }@media (max-width : 870px ) { .section { height : auto; min-height : 250px ; } }
下面就是正常的每一节了,在每一节中,我分成了两个类:right
和left
,分别对应图片在右和图片在左。这个在你想添加时可以自行使用,对于节的定义上面已经修改过了,这里就不说了。
然后就是下方站点,这里我使用了表格布局,按照顺序往下添加即可。
CSS特殊配置 下面我们对于css
中需要修改的部分进行解析,css
我大致分成了四个部分:白天模式,黑夜模式,动效适配,窄屏适配。
白天模式 section
高度:这个需要看你的内容量进行动态调整,主要需要修改的就是height
。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 .section { display : flex; padding : 10px ; align-items : center; justify-content : space-between; border-bottom : none; margin-top : 20px ; margin : 20px 10px 0 10px ; border-radius : 10px ; background-color : white; height : 250px ; box-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.1 ); }
site-item
站点块:最下方表格布局中,每个站点的部分,按照备注进行自定义修改:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .wrapper .site-grid .site-item { z-index : 1 ; border-radius : 10px ; position : relative; width : 100% ; height : 200px ; background-size : cover; background-position : center; display : flex; justify-content : center; align-items : center; text-decoration : none; overflow : hidden; transition : transform 0.3s ease-in-out, z-index 0.3s ease-in-out; }
site-overlay
站点块前置遮罩:字体及那白色半透明遮罩:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 .wrapper .site-overlay { position : absolute; inset: 0 ; border-radius : 10px ; background : rgba (255 , 255 , 255 , 0.5 ); transition : background 0.6s , color 0.6s ; display : flex; text-align : center; justify-content : center; align-items : center; font : bold 25px sans-serif; color : #000000 ; }
白天模式进行了大部分变量的定义,尽量修改你看的懂的元素,如果有问题可以发到评论区。 黑夜模式 该部分内容就比上面的少很多了,主要是在深色下的颜色的一些变换,如下: section
每一节的黑夜适配:
1 2 3 4 5 [data-theme=dark] .section { background-color : #2c2c2c ; box-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.5 ); }
wrapper
下方站点表格的黑夜适配,我让他和白天模式的颜色,背景,字体都是反着来的,具体看我的站点效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 [data-theme=dark] .wrapper { background-color : #2c2c2c ; box-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.5 ); } [data-theme=dark] .wrapper .site-item :hover .site-overlay { background : rgba (255 , 255 , 255 , 0.5 ); color : #000000 ; } [data-theme=dark] .wrapper .site-overlay { background : rgba (0 , 0 , 0 , 0.5 ); color : #ffffff ; }
动效适配 该部分主要有上面的节和下面的链接卡片两点,注意对应元素的相关部分需要添加transition
属性,第一个为添加transition
举例说明,后面不再重复:
section
节图片放大:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 .section a { width : 45% ; height : 100% ; transition : transform 0.5s ease; }.section img { width : 100% ; height : 100% ; object-fit : cover; border-radius : 8px ; } .section :hover a { transform : scale (1.10 ); } @media (min-width : 870px ) { .section .right :hover .content { margin-left : 10px ; } .section :hover .content { width : 50% ; width : 50% ; } } .section .content { width : 55% ; margin : 20px 20px ; max-height : 100% ; overflow : hidden; text-overflow : ellipsis; transition : width 0.5s ease, margin-left 0.3s ease;
注意其中最后一行的transition
,变换的什么,就需要添加对应的属性,这里我们主要变动两点,鼠标移入时,图片变大,宽度变宽,对应文字宽度变低,如果文字在左边,为了同步动效,左边框减小,所以这里我们使用到的有width
和margin-left
。
site-grid
移入放大及变色动效:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 @media (min-width : 870px ) { .wrapper .site-grid .site-item :hover { transform : scale (1.2 ); z-index : 2 ; } }.wrapper .site-item :hover .site-overlay { background : rgba (0 , 0 , 0 , 0.5 ); color : #ffffff ; }[data-theme=dark] .wrapper .site-item :hover .site-overlay { background : rgba (255 , 255 , 255 , 0.5 ); color : #000000 ; }
鼠标移入,背景变为反色,字体变为反色,图片放大,为了防止被其他块遮挡,设置z-index
。
窄屏(手机)适配 手机的配置一般比较低,为了防止动画过多导致加载慢,我们在手机上禁止了绝大部分的效果,检查是否是手机,其实就是适配宽度,下面是本次修改对于宽度的适配。
section
窄屏不修改文字宽度,因为后面媒体检测屏幕宽度部分我们会删除图片并修改文字宽度为100%
,也就是占满整个页面,这里不添加防止覆盖:
1 2 3 4 5 6 7 8 9 10 11 12 @media (min-width : 870px ) { .section .right :hover .content { margin-left : 10px ; } .section :hover .content { width : 50% ; width : 50% ; } }
site-grid
窄屏不显示放大动效,因为屏幕变窄后,由于设备差异,放大可能会超出屏幕,变色动效仍然显示(其实点击一瞬间也看不见)。
1 2 3 4 5 6 7 @media (min-width : 870px ) { .wrapper .site-grid .site-item :hover { transform : scale (1.2 ); z-index : 2 ; } }
窄屏统一适配,不显示图片,修改宽度,修改表格列数,根据宽度不同从四列变为两列再变为一列:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 @media (max-width : 870px ) { .section a { display : none; } .section .content { width : 100% ; } .section { height : auto; min-height : 250px ; } .wrapper .site-grid { grid-template-columns : repeat (2 , 1 fr); grid-auto-rows : 200px ; } } @media (max-width : 560px ) { .wrapper .site-grid { grid-template-columns : repeat (1 , 1 fr); grid-auto-rows : 200px ; } }
上面就是我们的CSS修改的部分了,下面是在魔改过程中出现的大问题的记录:
问题记录 格式错乱 内容大范围错乱,并出现长竖条代码块问题:
原因:
markdown
,html部分存在空格:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div class="section right"> <img src="https://cdn.qyliu.top/i/2024/04/14/661ab09243659.png"> <div class="content"> <h2>主要项目</h2> <ul> <li>多尺度人头视觉特征的人数统计模型</li>- <li>基于PyTorch实现LSTM汉语分词模型及情感分析</li> <li>钢铁缺陷检测深度研究</li> <li>基于Java实现MySQL数据库双端图书管理系统</li> <li>基于MFC的连连看程序</li> </ul> </div> </div>
解决方法:
去掉其中的多余空格,最好不要有空格,经过测试,只有div
之间可以存在空格,div
内尽量不要空格。
其他问题正在记录中,欢迎反馈!
每日一图
——柳影曳曳,清酒孤灯,扬笔撒墨,心境如霜