个人主页头像修改 发表于 2023-06-04 更新于 2024-10-11
字数总计: 2.9k 阅读时长: 15分钟 阅读量:
这里记录一下个人主页面修改的过程,后续如果魔改又出问题也可以重新整改页面,当然也分享给你们进行页面修改,这里我还准备了html
静态文件,后续需要的可以自己使用静态方式布置。
个人头像展示 代码 这里使用的是安知鱼的about.pug
,路径位置blog\themes\anzhiyu\layout\includes\page\about.pug
下,你只要把下面的更改复制粘贴即可。
这里我存放的js
和图标
用的不是链接形式,需要放在需要存放的文件夹下,这里文件夹名你可以自行更改,需要更改的路径我又注释,你只需要修改即可。
pug 这里说明一下不是用anzhiyu
主题而是用butterfly
主题的,请看折叠框内容。
butterfly主题修改 找到blog\themes\anzhiyu\layout\includes
路径下的page.pug
文件,在这其中放入以下代码(放入位置自行选择):
1 2 when 'about' include includes/page/about.pug
在blog\themes\anzhiyu\layout\includes\page
下创建about.pug
文件进行编辑。
图标存储路径可以自行修改,如果不需要的可以使用我的存储路径.我的图标存储路径为blog\themes\anzhiyu\source\img\icon
,下面附上图标下载。
下载地址: 图标下载
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 #about-page .box01_content .head_div.cycle_item - let { title_01_name, title_02_name , title_03_name , title_h2} = item.cycle_item - let { link_01 , link_02 ,link_03 } = item.cycle_item - let { icon_01 , icon_02 ,icon_03 } = item.cycle_item a#title_01_a.title_01_a(href= link_01, target='_self') span.title_01_icon(style=`background: url(${icon_01}) center center / 100% no-repeat;`) span.title_01_text p.item_name= title_01_name a#title_02_a.title_02_a(href= link_02 , target='_self') span.title_02_icon(style=`background: url(${icon_02}) center center / 100% no-repeat;`) span.title_02_text p.item_name= title_02_name a#title_03_a.title_03_a(href= link_03 , target='_blank') span.title_03_icon(style=`background: url(${icon_03}) center center / 100% no-repeat`) span.title_03_text p.item_name= title_03_name .green_cycle //- 图标存储位置,自行修改 img.green_cycle_img(src='/img//icon/green_cycle.svg') .yellow_cycle img.yellow_cycle_img(src='/img//icon/yellow_cycle.svg') .blue_cycle img.blue_cycle_img(src='/img//icon/blue_cycle.svg') .head_img_div img.head_img(src=url_for(avatarImg) onerror=`this.onerror=null;this.src='/'` + url_for(theme.error_img.flink) + `'` alt="avatar") h1.aboutName= subtitle h2.title_h2= title_h2 #box01_text.box01_text - let { message } = item.box01_text each i in message p.box01_p(style='text-align:center;')= `${i}`
yml文件 这里我们编辑 blog\source\_data
下的 about.yml
文件,如果没有的进行创建
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 - class_name: 关于 cycle_item: title_01_name: QQ link_01: tencent://Message/?Uin=1580777927&websiteName=local.edu.com:8888=&Menu=yes icon_01: /img/icon/qq.png title_02_name: 博客 link_02: / icon_02: img/about.webp title_03_name: Github link_03: https://github.com/icemyst icon_03: /img/icon/github.png subtitle: 冰梦 title_h2: 与自己促膝长谈,与孤独握手言欢。 box01_text: message: - 不久前还只是一个失业农民工. - 现在还只是一只喜欢动漫和文学的上班族. - 不久以后将是又一个人生迷茫的旅行者.
HTML 当然你不喜欢那样的方式,这里你可以用以下方式进行修改。
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 <script type ="text/javascript" src ="/js/custom/wrapBox.js" > </script > <div class ="box" > <img class ="box_bg" src ="imag/upload/pic_1.jpg" > <div class ="box01_content" > <div class ="head_div" > <div class ="cycle_item" > <a href ="#" class ="title_01_a" id ="title_01_a" target ="_blank" > <span class ="title_01_icon" > </span > <span class ="title_01_text" > <p class ="item_name" > qq</p > </span > </a > <a href ="#" class ="title_02_a" id ="title_02_a" target ="_blank" > <span class ="title_02_icon" > </span > <span class ="title_02_text" > <p class ="item_name" > 博客</p > </span > </a > <a href ="#" class ="title_03_a" id ="title_03_a" target ="_blank" > <span class ="title_03_icon" > </span > <span class ="title_03_text" > <p class ="item_name" > GitHub</p > </span > </a > <div class ="green_cycle" > <img class ="green_cycle_img" src ="img/icon/green_cycle.svg" > <div class ="yellow_cycle" > <img class ="yellow_cycle_img" src ="img/icon/yellow_cycle.svg" > <div class ="blue_cycle" > <img class ="blue_cycle_img" src ="img/icon/blue_cycle.svg" > <div class ="head_img_div" > <img class ="head_img" src ="img/upload/avatar.jpg" > </div > </div > </div > </div > </div > </div > <h1 class ="title" > 冰梦</h1 > <h2 class ="title_h2" > 千里之行,始于足下</h2 > <div id ="box01_text" > <p class ="box01_p" > 与自己促膝长谈,与孤独握手言欢。</p > <p class ="box01_p" > 现在还只是一只喜欢动漫和文学的上班族.</p > <p class ="box01_p" > 不久以后将是又一个人生迷茫的旅行者.</p > </div > </div >
css文件 这里是css
文件,自行进行微改适配,让自己的个人主页更花里胡哨
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 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 .box { overflow : hidden; position : relative; width : 100% ; height : 100% ; } .box01_content { position : absolute; z-index : 3 ; top : 13% ; left : 10% ; width : 80% ; } .head_div { width : 80% ; margin : 0 auto; height : 50% ; } .cycle_item { background : url ('/img/icon/cycle.svg' ) no-repeat; width : 400px ; height : 400px ; margin-left : auto; margin-right : auto; position : relative; } .green_cycle { width : 260px ; height : 260px ; margin : 0 auto; padding-top : 70px ; } .yellow_cycle { display : inline-block; width : 240px ; height : 240px ; margin : 10px ; } .blue_cycle { width : 220px ; height : 220px ; text-align : center; margin : 10px auto 10px auto; } .green_cycle_img ,.yellow_cycle_img ,.blue_cycle_img { position : absolute; } @-webkit-keyframes headneon { from { box-shadow : 0 0 1px #fff , 0 0 2px #fff , 0 0 3px #fff , 0 0 4px #fff ; } to { box-shadow : 0 0 5px #fff , 0 0 10px #fff , 0 0 15px #fff , 0 0 20px #fff ; } } @-moz-keyframes headneon { from { box-shadow : 0 0 1px #fff , 0 0 2px #fff , 0 0 3px #fff , 0 0 4px #fff ; } to { box-shadow : 0 0 5px #fff , 0 0 10px #fff , 0 0 15px #fff , 0 0 20px #fff ; } } .green_cycle_img { animation-name : clockwise; animation-duration : 3s ; animation-timing-function : linear; animation-iteration-count : infinite; animation-direction : normal; -webkit-animation-name : clockwise; -webkit-animation-duration : 3s ; -webkit-animation-timing-function : linear; -webkit-animation-iteration-count : infinite; -webkit-animation-direction : normal; } .yellow_cycle_img { animation-name : anticlockwise; animation-duration : 3s ; animation-timing-function : linear; animation-iteration-count : infinite; animation-direction : normal; -webkit-animation-name : anticlockwise; -webkit-animation-duration : 3s ; -webkit-animation-timing-function : linear; -webkit-animation-iteration-count : infinite; -webkit-animation-direction : normal; } .blue_cycle_img { animation-name : clockwise; animation-duration : 3s ; animation-timing-function : linear; animation-iteration-count : infinite; animation-direction : normal; -webkit-animation-name : clockwise; -webkit-animation-duration : 3s ; -webkit-animation-timing-function : linear; -webkit-animation-iteration-count : infinite; -webkit-animation-direction : normal; } @keyframes clockwise { from { -webkit-transform : rotate (0deg ); -moz-transform : rotate (0deg ); -ms-transform : rotate (0deg ); -o-transform : rotate (0deg ); } to { -webkit-transform : rotate (360deg ); -moz-transform : rotate (360deg ); -ms-transform : rotate (360deg ); -o-transform : rotate (360deg ); } } @-webkit-keyframes clockwise { from { -webkit-transform : rotate (0deg ); } to { -webkit-transform : rotate (360deg ); } } @keyframes anticlockwise { from { -webkit-transform : rotate (0deg ); -moz-transform : rotate (0deg ); -ms-transform : rotate (0deg ); -o-transform : rotate (0deg ); } to { -webkit-transform : rotate (-360deg ); -moz-transform : rotate (-360deg ); -ms-transform : rotate (-360deg ); -o-transform : rotate (-360deg ); } } @-webkit-keyframes anticlockwise { from { -webkit-transform : rotate (0deg ); } to { -webkit-transform : rotate (-360deg ); } } .cycle_item a { position : absolute; display : block; border-radius : 25px ; width : 120px ; height : 50px ; left : -50px ; top : 180px ; } .title_01_text ,.title_02_text ,.title_03_text { width : 50px ; height : 50px ; margin-top : 0 ; line-height : 50px ; left : 50px ; text-align : right; padding : 0 5px ; position : absolute; top : 0 ; } .item_name { font-size : 16px ; line-height : 20px ; text-align : center; color : #fff ; white-space : nowrap; } .title_01_a { background-color : #EAC251 ; } .title_01_a .title_01_icon { border-radius : 25px ; display : block; width : 40px ; height : 40px ; position : relative; background-size : cover; -moz-background-size : cover; left : 5px ; top : 5px ; } .title_02_a { background-color : #6DB3D9 ; } .title_02_a .title_02_icon { display : block; width : 40px ; height : 40px ; position : relative; background-size : cover; -moz-background-size : cover; left : 5px ; top : 5px ; border-radius : 50% ; } .title_03_a { background-color : #42c9a3 ; } .title_03_icon { border-radius : 25px ; display : block; width : 50px ; height : 50px ; position : relative; background-size : cover; -moz-background-size : cover; left : 1px ; bottom : 2px ; } .box01_content h1 ,.box01_content h2 ,.box01_content p { color : #ffffff ; font-weight : lighter; text-align : center; } .box01_content .aboutName { font-size : 40px ; margin-top : 10px ; } .box01_content .title_h2 { font-size : 30px ; margin-top : 10px ; margin-bottom : 20px ; } #box01_text { width : 100% ; overflow : hidden; position : relative; } .box01_content .box01_p { font-size : 20px ; font-weight : lighter; line-height : 38px ; -webkit-transition : all ease 0.3s ; -moz-transition : all ease 0.3s ; -ms-transition : all ease 0.3s ; transition : all ease 0.3s ; filter : alpha (opacity=0 ); -moz-opacity : 0 ; -khtml-opacity : 0 ; opacity : 0 ; cursor : pointer; } .box01_content .box01_p :hover { font-size : 22px ; } .box_bg { position : relative; } .head_img_div { position : relative; z-index : 2 ; display : inline; width : 200px ; height : 200px ; margin-top : 7px ; } .head_img { display : inline-block; width : 200px ; height : 200px ; border-radius : 50% ; border : 3px solid #0072ff ; margin : 7px ; -webkit-animation : headneon 1.5s ease-in-out infinite alternate; -moz-animation : headneon 1.5s ease-in-out infinite alternate; animation : headneon 1.5s ease-in-out infinite alternate; } @media screen and (max-width : 700px ) { .head { height : 3rem ; } .box01_content { top : 0 ; } .head_div { width : 100% ; } .cycle_item { width : 100% ; height : auto; margin : 0 auto; background : none; } .cycle_item a { display : none; } .green_cycle { padding-top : 3.2em ; } .box01_content .title { font-size : 1em ; } .box01_content .title_h2 { font-size : 1rem ; margin-top : 0.5rem ; margin-bottom : 0.5rem ; } .box01_content .box01_p { font-size : 0.8rem ; line-height : 1.6rem ; } .box02_content { top : 5rem ; width : 100% ; height : auto; } .logo_img { width : 2.5rem ; height : 2.5rem ; margin-bottom : 0.1rem ; } #bar_container .bar { margin : 0.5rem 0 ; } .bar { height : 2rem ; font-size : 0.8rem ; } #bar_container .bar :before { position : absolute; padding : 0.5rem ; height : 2rem ; } #bar_container .bar :after { position : absolute; padding : 0.5rem ; height : 2rem ; right : -3rem ; } .box03_content { width : 90% ; left : 5% ; top : 3.2rem ; height : auto; } .box03_content .right_div , .box03_content .left_div { display : none; } .box04_content { top : 3.2rem ; padding : 0 ; height : auto; } .box04_title { margin-top : 1.5rem ; font-variant : small-caps; margin-top : 1rem ; line-height : 2rem ; } .head_img { width : 60% ; height : 60% ; border : 3px solid #0072ff ; margin-top : auto; } .green_cycle_img { margin-left : 30px ; margin-top : 15px ; } .box01_content .aboutName { margin-top : -35px ; } .blue_cycle .blue_cycle_img { margin-right : 30px ; } .green_cycle_img , .yellow_cycle_img , .blue_cycle_img { display : none; } }
JS文件配置 创建并自定义JS
文件名,让自己的图标动起来,放入以下代码:
引入JS
方式两种方式:
js代码
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 (function ( ){ var h = window .innerHeight ; var w = window .innerWidth ; var bg = document .getElementsByClassName ("box_bg" ); if ((w/h) >= (1920 /1080 )){ for (var i = 0 ;i < bg.length ; i++){ bg[i].style .width = w + 'px' ; bg[i].style .height = w * (1080 /1920 ) + 'px' ; bg[i].style .top = -(w * (1080 /1920 ) - h)/2 + 'px' ; bg[i].style .left = '0' ; } } else { for (var i = 0 ; i < bg.length ; i++){ bg[i].style .height = h + 'px' ; bg[i].style .width = h*(1920 /1080 ) + 'px' ; bg[i].style .left = -(h*(1920 /1080 ) - w)/2 + 'px' ; bg[i].style .top = '0' ; } } var box01_index = 0 ; var box01_p = document .getElementById ('box01_text' ).children ; function boxOne ( ) { if (box01_index >=0 && box01_index <= 2 ){ box01_p[box01_index].style .opacity = '1' ; box01_index ++; } else { clearInterval (boxOneTimer); } } var x_arr = new Array (); var y_arr = new Array (); var x = y = m =0 ; for (var i = 0 ; i < 800 ; i++){ if (i >= 400 ){ x = m; y = 200 + Math .sqrt (40000 - Math .pow (x-200 ,2 )); m--; } else { x = m; y = 200 - Math .sqrt (40000 - Math .pow (x-200 ,2 )); m++; } x_arr[i] = x - 60 ; y_arr[i] = parseInt (y) - 25 ; } var Move _01 = document .getElementById ('title_01_a' ); var Move _02 = document .getElementById ('title_02_a' ) var Move _03 = document .getElementById ('title_03_a' ) var g_num = 0 ; var w_num = 0 ; var b_num = 0 ; function movegit ( ){ if (g_num <= 750 ){ Move _01.style .left = x_arr[g_num] + 'px' ; Move _01.style .top = y_arr[g_num] + 'px' ; g_num += 3 ; } else { clearInterval (gitTimer); } } function moveweibo ( ){ if (w_num <= 400 ){ Move _02.style .left = x_arr[w_num] + 'px' ; Move _02.style .top = y_arr[w_num] + 'px' ; w_num += 3 ; } else { clearInterval (weiTimer); } } function moveblog ( ){ if (b_num <= 90 ){ Move _03.style .left = x_arr[b_num] + 'px' ; Move _03.style .top = y_arr[b_num] + 'px' ; b_num += 3 ; } else { clearInterval (blogTimer); } } movegit (); var gitTimer=setInterval (movegit,1 ); moveweibo (); var weiTimer=setInterval (moveweibo,1 ); moveblog (); var blogTimer=setInterval (moveblog,1 ); var boxOneTimer = setInterval (boxOne,800 ); })();
后面hexo cl && hexo g && hexo s
三连看效果。