-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
629 lines (608 loc) · 33.3 KB
/
index.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
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
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
<!DOCTYPE html>
<html lang="en" data-random-animation="false" data-animation="11">
<head><!--Meta Tags-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="keywords" content="vcard, resume, personal, portfolio, cv, card, responsive"/>
<meta name="description" content="vCard / Resume / Personal / Portfolio Template"/>
<meta name="author" content="cosmos-themes"/>
<!--Page Title-->
<title>DorinXL的基地</title>
<!--Plugins Css-->
<link rel="stylesheet" href="css/plugins.css">
<!--Main Styles Css-->
<link rel="stylesheet" href="css/style-dark.css">
<!--Color Css-->
<link rel="stylesheet" href="css/blue-color.css">
<!--Modernizr Js-->
<script src="js/modernizr.js"></script>
<!-- Favicons-->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<!--Preloader Start-->
<div class="preloader">
<div class="loader">
<!--Your Name-->
<h4>少女祈祷中</h4>
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
<!--Preloader End-->
<div id="page">
<!--Header Start-->
<header>
<div class="header-content">
<!--Mobile Header-->
<div class="header-mobile">
<a class="header-toggle">
<i class="fas fa-bars"></i>
</a>
<h2>赵乐祺</h2>
</div>
<!--Main Header-->
<div class="header-main" data-simplebar>
<div class="image-container">
<h2 class="header-name">赵乐祺</h2>
<img src="img/profile.png" alt="profile-pic">
</div>
<!--Nav Menus-->
<nav class="nav-menu">
<ul>
<li>
<a href="#home" class="pt-link active">
<span class="nav-menu-icon"><i class="lnr lnr-home"></i></span>Home
</a>
</li>
<li>
<a href="#about" class="pt-link">
<span class="nav-menu-icon"><i class="lnr lnr-user"></i></span>About Me
</a>
</li>
<li>
<a href="#resume" class="pt-link">
<span class="nav-menu-icon"><i class="lnr lnr-license"></i></span>Resume
</a>
</li>
<li>
<a href="#portfolio" class="pt-link">
<span class="nav-menu-icon"><i class="lnr lnr-briefcase"></i></span>Portfolio
</a>
</li>
<li>
<a href="#blog" class="pt-link">
<span class="nav-menu-icon"><i class="lnr lnr-book"></i></span>Blog
</a>
</li>
<li>
<a href="#blog-content" class="pt-link" style="display: none">
<span class="nav-menu-icon"><i class="lnr lnr-book"></i></span>Blog-Content
</a>
</li>
<li>
<a href="https://www.cnblogs.com/DorinXL/p/16716636.html" target="_blank" class="pt-link">
<span class="nav-menu-icon"><i class="lnr lnr-bookmark"></i></span>Board
</a>
</li>
</ul>
</nav>
<!--Nav Footer-->
<div class="nav-footer">
<!--Social Links-->
<ul class="social">
<li><a href="https://github.com/DorinXL" target="_blank"><i class="fab fa-github"></i></a></li>
<li><a href="https://www.cnblogs.com/DorinXL/" target="_blank"><i class="fab fa-blogger"></i></a></li>
</ul>
<!--访问量-->
<span id="busuanzi_container_site_pv" style="color: rgb(170, 170, 170); display: inline; font-size: 12px;" >
总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<!--Copyright Text-->
<div class="copy">
<p>2022 ©Cosmos-Themes.<br>All Right Reserved.</p>
</div>
</div>
</div>
</div>
</header>
<!--Header End-->
<!--Main Start-->
<div id="main" class="site-main">
<!--Banner Section Start-->
<section id="home" class="banner-section pt-page" style="background-image: url('img/background/home-bg.jpg')">
<!--Particle Container-->
<div id="particles-js"></div>
<div class="banner-content">
<!--Banner Text-->
<h1 class="mb-20">我是 <span>DorinXL</span></h1>
<!--Animated Text-->
<p class="cd-headline clip is-full-width">
<span></span>
<span class="cd-words-wrapper">
<b class="is-visible"></b><b>很高兴认识你</b><b></b>
</span>
</p></div>
</section>
<!--Banner Section End-->
<!--About Section Start-->
<section id="about" class="about-section pt-page">
<div class="section-container">
<!--Page Heading-->
<div class="page-heading"><span class="icon"><i class="lnr lnr-user"></i></span>
<h2>About Me.</h2></div>
<!-- About Info Row Start-->
<div class="row about mb-70">
<div class="col-lg-8">
<!--Personal Intro-->
<h3 class="mb-20">简单介绍</h3>
<p>
🆙 你好,我是DorinXL,取自「荡影」的谐音。<br>
网安->计科,理工宅男,欢迎你的到来。<br>
</p>
<h3 class="mb-20"> </h3>
<p>
🕹️ 游戏开发学徒,目前研0打工中。<br>
2021年正式开始学习Unity,找回学计算机的初心。<br>
什么都摸过一点,cocos/roblox/unity/ue4,摸得最多的还是unity<br>
</p>
<h3 class="mb-20"> </h3>
<p>
💭 缄默慎独,事在人为,不破不立,疑行无成。<br>
从闭门造车到与人组队走进游戏圈,一路陪伴我的除了梦想还有热爱。<br>
在以后的时间里,希望能慢慢搭建出自己的世界。<br>
</p>
<!--Signature Image-->
<!-- <div class="signature mt-20"><img src="img/signature-white.png" alt=""></div>-->
</div><!--Personal Info-->
<div class="col-lg-4">
<div class="about-info"><h3 class="mb-20">Personal Information</h3>
<ul>
<li><span class="title">姓名</span><span class="value">赵乐祺</span></li>
<li><span class="title">年龄</span><span class="value">21</span></li>
<li><span class="title">地区</span><span class="value">中国,成都</span></li>
<li><span class="title">微信</span><span class="value">DorinXL</span></li>
<li><span class="title">邮箱</span><span class="value">[email protected]</span></li>
</ul>
<div class="resume-button mt-30"><a class="btn-main" href="https://www.cnblogs.com/DorinXL/">My Blog</a></div>
</div>
</div>
</div>
<!-- About Info Row End-->
<!--Services Row Start-->
<div class="row services mb-30">
<div class="col-md-12">
<div class="subheading"><h3>一些技能</h3></div>
</div>
<!--Service Item-->
<div class="col-lg-4 col-sm-6">
<div class="service-item">
<div class="icon"><i class="lnr lnr-laptop-phone"></i></div>
<h4>Unity</h4>
<p>
熟练Unity,有项目经验<br>
在逐步完善自己的代码库,包括通用的对话系统和人物控制器<br>
</p>
</div>
</div>
<!--Service Item-->
<div class="col-lg-4 col-sm-6">
<div class="service-item">
<div class="icon"><i class="lnr lnr-code"></i></div>
<h4>Coding</h4>
<p>
有Git/Plastic SCM/SVN等协作工具经验<br>
熟练C++,C#,html,js<br>
会简单的Pr剪辑<br>
</p>
</div>
</div>
<!--Service Item-->
<div class="col-lg-4 col-sm-6">
<div class="service-item">
<div class="icon"><i class="lnr lnr-star"></i></div>
<h4>Learning</h4>
<p>
11408上岸,但是要学的东西越来越多<br>
从深度学习到开发板电路,好像离游戏越来越远了(<br>
</p>
</div>
</div>
</div>
<!--Services Row End-->
</div>
</section>
<!--About Section Start-->
<!--Resume Section Start-->
<section id="resume" class="resume-section pt-page">
<div class="section-container">
<div class="page-heading"><span class="icon"><i class="lnr lnr-license"></i></span>
<h2>My Resume.</h2>
</div>
<!--Education & Experience Row Start-->
<div class="row mb-20">
<!--Experience Column Start-->
<div class="col-lg-12">
<div class="subheading">
<h3>个人经历</h3>
</div>
<ul class="experience">
<!--Experience Item-->
<li><span class="line-left"></span>
<div class="content" style="display: inline-flex;">
<div style="padding-left: 10px;">
<h4>回到未白镇</h4>
<h5>这里是未白镇,未能被任何颜色染上的城镇!</h5>
<p class="info">研0打工仔,之后的生活会怎样呢,我想是时候重新启航了,这一次我有更多的时间来做自己想做的事情。</p>
</div>
</div>
<span class="year">
<!-- <span class="to">2023.</span>-->
<span class="from">2023.4</span>
</span>
</li>
<!--Experience Item-->
<li><span class="line-left"></span>
<div class="content" style="display: inline-flex;">
<div style="padding-left: 10px;margin-top: 20px;margin-bottom: 20px;">
<h4>2023年全国硕士研究生招生考试</h4>
<h5>11408</h5>
<p class="info">保研失败,人还阳了,将近一年没碰开发。万幸的是解封了,还有学上,不会毕业即失业了,还有时间去造梦。</p>
</div>
</div>
<div class="content" style="display: inline-flex;">
<a href="https://dorinxl.itch.io/refound" target="_blank" style="margin: auto">
<img style="width: 100px;height: 100px;margin: auto" src="img/testimonials/2022refound.png" alt="">
</a>
<div style="padding-left: 10px;margin-top: 20px;margin-bottom: 20px;">
<h4>ReFound</h4>
<h5>一周年纪念</h5>
<p class="info">个人作品,一人兼职策划程序,暑假花了几天时间急速制作,一个人的gamejam。</p>
</div>
</div>
<span class="year">
<span class="to">2022.12</span>
<span class="from">2022.5</span>
</span>
</li>
<!--Experience Item-->
<li><span class="line-left"></span>
<div class="content" style="display: inline-flex;">
<a href="https://www.gmhub.com/jams/ggj2022" target="_blank" style="margin: auto">
<img style="width: 250px;height: 100px;margin: auto" src="img/testimonials/2022ggj.jpg" alt="">
</a>
<div style="padding-left: 10px;">
<h4>2022 Global Game Jam</h4>
<h5>48小时极限游戏开发</h5>
<p class="info">本次开发主题:”duality“,作品为类似I wanna的横板过关游戏,存在一定的难度,测试的时候把自己坑到了。</p>
</div>
</div>
<span class="year">
<span class="to">2022.1</span>
<span class="from">2022.1</span>
</span>
</li>
<!--Experience Item-->
<li><span class="line-left"></span>
<div class="content" style="display: inline-flex;">
<a href="https://gameinstitute.qq.com/open-courses/2021" target="_blank" style="margin: auto">
<img style="width: 250px;height: 100px;margin: auto" src="img/testimonials/2021腾讯公开课.jpg" alt="">
</a>
<div style="padding-left: 10px;margin-top: 20px;margin-bottom: 20px;">
<h4>2021腾讯游戏高校公开课</h4>
<h5>客户端开发</h5>
<p class="info">系统性课程设计,涵盖基础、系统、语言等各模块,快速熟悉并提升UE4开发技能。结业作品为在官方fpsDemo的基础上增加所学到的功能,并提交开发文档。结业后颁发证书。 </p>
</div>
</div>
<div class="content" style="display: inline-flex;">
<a href="https://game.academy.163.com/event/mg?page=works¤tStep=40¤tTrack=0&query=&order=2&pageNum=1" target="_blank" style="margin: auto">
<img style="width: 250px;height: 100px;margin: auto" src="img/testimonials/2021minigame.png" alt="">
</a>
<div style="padding-left: 10px;margin-top: 20px;margin-bottom: 20px;">
<h4>2021网易MINI-GAME挑战赛</h4>
<h5>小游戏大梦想</h5>
<p class="info">初赛主题为“戏”,作品为横版探索叙事游戏,游戏美术风格为2D与3D结合,内含故事探索、演绎玩法等。拿到了初赛人气奖第四。</p>
</div>
</div>
<span class="year">
<span class="to">2021.12</span>
<span class="from">2021.9</span>
</span>
</li>
<!--Experience Item-->
<li><span class="line-left"></span>
<div>
<div class="content " style="display: inline-flex;">
<img style="width: 170px;height: 100px;margin: auto" src="img/testimonials/2021roblox.jpg" src="">
<div style="padding-left: 10px;margin-top: 20px;margin-bottom: 20px;">
<h4>Roblox实习</h4>
<h5>罗布乐思(深圳)数码科技有限公司</h5>
<p class="info">两人小组,使用Roblox官方编辑器与Lua完成一款类大逃杀小游戏的开发和维护工作,负责该游戏的代码逻辑实现。
(由于版号问题国内暂时无法下载罗布乐思app)</p>
</div>
</div>
<div class="content " style="display: inline-flex;">
<a href="https://www.cnblogs.com/DorinXL/p/15068492.html" target="_blank" style="margin: auto">
<img style="width: 170px;height: 100px;margin: auto" src="img/testimonials/2021ugdap.jpg"></a>
<div style="padding-left: 10px;margin-top: 20px;margin-bottom: 20px;">
<h4>UGDAP</h4>
<h5>中国大学生游戏开发联盟</h5>
<p class="info">为期7日的游戏开发实训,坐标上交大。破冰分组、项目开发,最后制作出一个动作游戏。点击图片查看开发记录。</p>
</div>
</div>
<div class="content " style="display: inline-flex;">
<a href="https://site.gcores.com/game_rally/booom/" target="_blank" style="margin: auto">
<img style="width: 170px;height: 100px;margin: auto" src="img/testimonials/2021booom.jpg">
</a>
<div style="padding-left: 10px;margin-top: 20px;margin-bottom: 20px;">
<h4>第二届BOOOM</h4>
<h5>机核网游戏创作活动</h5>
<p class="info">由机核网举办的限时、限主题游戏创作活动,这一期的主题是“TIME IS AN ILLUSION 时间是幻觉”,作品为横板2d战斗游戏,附一些解谜内容。</p>
</div>
</div>
</div>
<span class="year"><span class="to">2021.9</span><span class="from">2021.7</span></span>
</li>
<!--Experience Item-->
<li><span class="line-left"></span>
<div class="content" style="display: inline-flex;">
<div style="padding-left: 10px;">
<h4>galgame脚本解释器</h4>
<h5>旅程开始的地方</h5>
<p class="info">开始自学unity,目标是做出一个能通用到各种游戏中,灵活编写容易配置过场剧情的剧情对话器。</p>
</div>
</div>
<span class="year"><span class="to">2021.3</span><span class="from">2021.1</span></span>
</li>
</ul>
</div>
</div>
<!--Education & Experience Row End-->
<!--Skills Row End-->
</div>
</section>
<!--Resume Section End-->
<!--Porfolio Section Start-->
<section id="portfolio" class="portfolio-section pt-page">
<div class="section-container"><!--Page Heading-->
<div class="page-heading"><span class="icon"><i class="lnr lnr-briefcase"></i></span>
<h2>Portfolio.</h2></div>
<div class="row"><!--Portfolio Filter-->
<div class="col-md-12 portfolio-filter text-center">
<ul>
<li class="active" data-filter="*">全部</li>
<li data-filter=".team">团队作品</li>
<li data-filter=".personal">个人作品</li>
</ul>
</div>
</div><!--Portfolio Items-->
<div class="row portfolio-items mb-50"><!--Portfolio Item-->
<!--网页跳转-->
<div class="item col-lg-4 col-sm-6 team graphic">
<a href="https://www.gcores.com/games/67514" target="_blank">
<figure><img src="img/portfolio/GANDER.png" alt="">
<figcaption>
<h4>GANDER COMPANY</h4>
<p>在试玩关卡中,玩家将以一名员工的视角为出发,控制该员工进行冒险,并发现檀木(TIME)科技公司在医院内隐藏的秘密,
最后与在时间迷宫中异化的同事展开战斗,阻止对方的疯狂行径,并一同寻找逃出处于时间循环中的医院的方法。</p>
</figcaption>
</figure>
</a>
</div>
<!--网页跳转-->
<div class="item col-lg-4 col-sm-6 team graphic">
<a href="https://game.academy.163.com/event/mg?page=works&id=2443" target="_blank">
<figure><img src="img/portfolio/戏幕未落.jpg" alt="">
<figcaption>
<h4>戏幕未落</h4>
<p>“戏如人生,人生如戏。我们虽不是戏中人,亦非演员,却能通过看他人的一生,反哺自己的人生。”</p>
</figcaption>
</figure>
</a>
</div>
<!--图片-->
<div class="item col-lg-4 col-sm-6 personal graphic">
<a class="image-link" href="img/portfolio/2021MG.png">
<figure><img src="img/testimonials/2021minigame.png" alt="">
<figcaption>
<h4>2021网易游戏开发大赛</h4>
<p>Mini-Game</p>
</figcaption>
</figure>
</a>
</div>
<!--图片-->
<div class="item col-lg-4 col-sm-6 personal graphic">
<a class="image-link" href="img/portfolio/2021TX.png">
<figure><img src="img/testimonials/2021腾讯公开课.jpg" alt="">
<figcaption>
<h4>2021腾讯游戏高校公开课</h4>
<p>客户端方向</p>
</figcaption>
</figure>
</a>
</div>
<!--网页跳转-->
<div class="item col-lg-4 col-sm-6 team graphic">
<a href="https://www.gmhub.com/game/569" target="_blank">
<figure><img src="img/portfolio/永夜之下.png" alt="">
<figcaption>
<h4>永夜之下</h4>
<p>“永夜城之前并不是一个完全没有光的地方。”</p>
</figcaption>
</figure>
</a>
</div>
<!--网页跳转-->
<div class="item col-lg-4 col-sm-6 personal graphic">
<a href="https://dorinxl.itch.io/refound" target="_blank">
<figure><img src="img/portfolio/ReFound.png" alt="">
<figcaption>
<h4>ReFound</h4>
<p>一天构思铺两天地图改三夜bug,短期作品,一周年纪念</p>
<p>“从一开始就最喜欢你了。”</p>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
</section>
<!--Porfolio Section End-->
<!--Blog Section Start-->
<section id="blog" class="blog-section pt-page">
<div class="section-container">
<!--Page Heading-->
<div class="page-heading">
<span class="icon">
<i class="lnr lnr-book"></i>
</span>
<h2>My Blogs.</h2></div>
<div id="blog-posts" class="row blogs-masonry">
<!-- 这里将会通过 JavaScript 动态添加博客文章 -->
</div>
<div class="pagination">
<button id="prevPage">Previous</button>
<button id="nextPage">Next</button>
</div>
</div>
</section>
<!--Blog Section End-->
<!--Blog Section Start-->
<section id="blog-content" class="blog-content-section pt-page">
<style>
#iframeContainer {
width: 100%;
height: 500px; /* 初始高度 */
overflow: hidden; /* 隐藏滚动条 */
position: relative;
}
#iframeContainer iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
<div class="section-container">
<div class="blog-page">
<div class="blog-image">
<img src="img/blog/blog-page-img.jpg" alt="" />
</div>
<div class="blog-container">
<div class="row" >
<!--Blog Heading Start-->
<div class="blog-heading col-md-8 offset-md-2">
<span class="cat" id="blogCategory"></span>
<h1 id="blogTitle"></h1>
<span class="blog-date" id="blogDate"></span>
</div>
<!--Blog Heading Start-->
<!--Blog Content Start-->
<div class="blog-content">
<div id="note">
<!-- 这里将会加载note文件中的内容 -->
</div>
<blockquote>
如遇到排版问题,可能是由于页面加载未完成,请尝试手动刷新页面以确保内容显示正常。
您可以使用浏览器的刷新按钮或者按下 F5 键来进行刷新。如果问题仍然存在,请联系我~
</blockquote>
<div id="iframeContainer">
<iframe id="markdownPage" src="" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!--Main End-->
</div>
<!--Ajax Portfolio Container Start-->
<div class="ajax-portfolio-popup">
<span class="ajax-loader"></span>
<div class="navigation-wrap">
<span class="popup-close"><i class="fas fa-times-circle"></i></span>
</div>
<div class="content-wrap">
<div class="popup-content"></div>
</div>
</div>
<!--Ajax Portfolio Container End-->
<!--Jquery JS-->
<script src="js/jquery.min.js"></script>
<!--Plugins JS-->
<script src="js/plugins.min.js"></script>
<!--Site Main JS-->
<script src="js/main.js"></script>
<!--访问量统计-->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script>
//Particles
particlesJS.load('particles-js', 'js/particles1.json', function () {
console.log('callback - particles.js config loaded')
});</script>
<script src="js/blog.js"></script>
<script>
function loadBlogContent(noteSrc) {
if (noteSrc === null || noteSrc === undefined) return;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(this.responseText, "text/html");
var htmlContent = xmlDoc.documentElement.innerHTML;
// 将另一个 HTML 文件的内容插入到当前页面中的指定位置
document.getElementById("note").innerHTML = htmlContent;
}
};
xhttp.open("GET", "noteSrc", true);
xhttp.send();
}
function adjustIframeSize() {
var iframeContainer = document.getElementById('iframeContainer');
var markdownPage = document.getElementById('markdownPage');
// 获取内部页面的宽度和高度
var contentWidth = markdownPage.contentWindow.document.body.scrollWidth;
var contentHeight = markdownPage.contentWindow.document.body.offsetHeight;
console.log(contentHeight)
// 设置 iframe 的宽度和高度
iframeContainer.style.height = contentHeight*1.008 + 'px';
iframeContainer.style.width = contentWidth + 'px';
// 让内部页面居中显示
markdownPage.style.position = 'absolute';
markdownPage.style.left = '50%';
markdownPage.style.top = '50%';
markdownPage.style.transform = 'translate(-50%, -50%)';
}
// 加载note
loadBlogContent();
// 调整 iframe 大小(可以根据需要触发调整大小的事件来调用此函数)
adjustIframeSize();
// 当 iframe 内部页面加载完毕时再次调整大小
document.getElementById('markdownPage').onload = function() {
adjustIframeSize();
};
function qiehuan(contentSrc,noteSrc,imageSrc,category,title,date)
{
// console.log("切换咯"+contentSrc);
// 获取 iframe 元素
const iframe = document.getElementById('markdownPage');
// 获取当前的属性值
const currentSrc = iframe.src;
const catElement = document.getElementById('blogCategory');
const titleElement = document.getElementById('blogTitle');
const dateElement = document.getElementById('blogDate');
// 修改 属性值
iframe.src = contentSrc; // 替换 'new_source.html' 为你想要的新链接
catElement.textContent = category;
titleElement.textContent = title;
dateElement.textContent = date;
// 加载note
loadBlogContent(noteSrc);
// 调整 iframe 大小(可以根据需要触发调整大小的事件来调用此函数)
adjustIframeSize();
}
</script>
</body>
</html>