Skip to content

Commit 29c49a7

Browse files
XzonnXzonn
committed
2023-01-23
1 parent b277a3a commit 29c49a7

10 files changed

Lines changed: 1936 additions & 37 deletions

File tree

‎.prettierrc.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"arrowParens": "always",
3+
"bracketSpacing": true,
4+
"endOfLine": "lf",
5+
"htmlWhitespaceSensitivity": "css",
6+
"insertPragma": false,
7+
"singleAttributePerLine": false,
8+
"bracketSameLine": false,
9+
"jsxBracketSameLine": false,
10+
"jsxSingleQuote": false,
11+
"printWidth": 120,
12+
"proseWrap": "preserve",
13+
"quoteProps": "preserve",
14+
"requirePragma": false,
15+
"semi": true,
16+
"singleQuote": false,
17+
"tabWidth": 2,
18+
"trailingComma": "es5",
19+
"useTabs": false,
20+
"vueIndentScriptAndStyle": false,
21+
"parser": "babel"
22+
}

‎_includes/footer.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@
2323
</div>
2424
</footer>
2525
<!-- //footer -->
26+
<!-- modal -->
27+
<div class="modal fade ni-modal">
28+
<div class="ni-modal-close" data-dismiss="modal"><i></i></div>
29+
<div class="ni-modal-content"></div>
30+
</div>
31+
<!-- //modal -->
2632
<!-- han -->
2733
<script src="https://code.bdstatic.com/npm/han-css@3.3.0/dist/han.min.js" async="async" crossorigin="anonymous" onload="Han(document.body).render()"></script>
2834
<!-- //han -->

‎_includes/video.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{{ include.blank }}<div class="video">{% if include.youtube %}
2-
{{ include.blank }} <div class="youtube-video"><iframe class="youtube-video-iframe" src="https://www.youtube.com/embed/{{ include.youtube }}" title="{{ include.title | default: "YouTube视频播放器" }}" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy" ></iframe></div>{% endif %}{% if include.aid or include.bvid %}
3-
{{ include.blank }} <div class="bilibili-video"><iframe class="bilibili-video-iframe" src="https://player.bilibili.com/player.html?{% if include.aid %}aid={{ include.aid }}{% elsif include.bvid %}bvid={{ include.bvid }}{% endif %}{% if include.page %}&page={{ include.page }}{% endif %}" title="{{ include.title | default: "Bilibili视频播放器" }}" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></div>{% endif %}
2+
{{ include.blank }} <div class="youtube-video"><iframe class="youtube-video-iframe" src="https://www.youtube.com/embed/{{ include.youtube }}" title="{{ include.title | default: "YouTube视频播放器" }}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy" ></iframe></div>{% endif %}{% if include.aid or include.bvid %}
3+
{{ include.blank }} <div class="bilibili-video"><iframe class="bilibili-video-iframe" src="https://player.bilibili.com/player.html?{% if include.aid %}aid={{ include.aid }}{% elsif include.bvid %}bvid={{ include.bvid }}{% endif %}{% if include.page %}&page={{ include.page }}{% endif %}" title="{{ include.title | default: "Bilibili视频播放器" }}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe></div>{% endif %}
44
{{ include.blank }}</div>

‎assets/css/_site.less‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ figure {
111111
float: right;
112112
margin-right: -12px;
113113

114-
& + a.figure-link {
114+
&+a.figure-link {
115115
margin-right: -5px;
116116
}
117117

@@ -253,10 +253,76 @@ u {
253253
height: 86px;
254254
}
255255

256-
.youtube-video-iframe, .bilibili-video-iframe, ._163-music-iframe {
256+
iframe {
257257
display: block;
258258
margin: 0 auto;
259259
width: 100%;
260260
height: 100%;
261261
border: 0;
262+
}
263+
264+
/* modal */
265+
.ni-modal-close {
266+
display: block;
267+
position: fixed;
268+
top: 0;
269+
right: 0;
270+
width: 80px;
271+
height: 80px;
272+
background-color: @color-warm;
273+
cursor: pointer;
274+
275+
i {
276+
position: relative;
277+
display: block;
278+
width: 40px;
279+
height: 40px;
280+
top: 20px;
281+
left: 20px;
282+
transform: rotate(45deg);
283+
284+
&::before, &::after {
285+
position: absolute;
286+
display: block;
287+
background-color: #fff;
288+
border-radius: 2px;
289+
content: '';
290+
}
291+
292+
&::before {
293+
top: 50%;
294+
left: 0;
295+
width: 100%;
296+
height: 4px;
297+
margin-top: -2px;
298+
}
299+
300+
&::after {
301+
top: 0;
302+
left: 50%;
303+
width: 4px;
304+
height: 100%;
305+
margin-left: -3px;
306+
}
307+
}
308+
}
309+
310+
.ni-modal-content {
311+
width: 100%;
312+
max-width: 800px;
313+
height: 100%;
314+
margin: 0 auto;
315+
padding: 30px;
316+
display: flex;
317+
align-items: center;
318+
319+
&>* {
320+
display: block;
321+
width: 100%;
322+
height: auto;
323+
}
324+
}
325+
326+
.ni-modal-youtube {
327+
aspect-ratio: 16/9;
262328
}

‎assets/css/base.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/main.js‎

Lines changed: 84 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,67 @@
11
"use strict";
22
$(function () {
33
/* 目录 */
4-
$(".ni-sidenav-list").on("click", function(e) {
4+
$(".ni-sidenav-list").on("click", function (e) {
55
let target = e.target;
66
if (target.tagName.toLowerCase() == "a") {
77
e.preventDefault();
88
e.stopPropagation();
99
let hash = "#" + decodeURIComponent(target.href.split("#")[1]);
10-
history.pushState({
11-
"url": location.href
12-
}, hash, location.href.split("#")[0] + hash);
13-
$("html").animate({
14-
scrollTop: $(hash).offset().top
15-
}, 300);
10+
history.pushState(
11+
{
12+
"url": location.href,
13+
},
14+
hash,
15+
location.href.split("#")[0] + hash
16+
);
17+
$("html").animate(
18+
{
19+
scrollTop: $(hash).offset().top,
20+
},
21+
300
22+
);
1623
}
1724
});
1825
$("body").scrollspy({
19-
"target": ".ni-sidenav"
26+
"target": ".ni-sidenav",
2027
});
2128

2229
/* 返回页面顶端 */
23-
$(".ni-navtop").on("click", function(e) {
30+
$(".ni-navtop").on("click", function (e) {
2431
e.preventDefault();
25-
$("html").animate({
26-
scrollTop: 0
27-
}, 500);
32+
$("html").animate(
33+
{
34+
scrollTop: 0,
35+
},
36+
500
37+
);
2838
});
29-
$(".ni-navbottom").on("click", function(e) {
39+
$(".ni-navbottom").on("click", function (e) {
3040
e.preventDefault();
31-
$("html").animate({
32-
scrollTop: $(document.body).height()
33-
}, 500);
41+
$("html").animate(
42+
{
43+
scrollTop: $(document.body).height(),
44+
},
45+
500
46+
);
3447
});
3548

3649
/* resize */
3750
window.windowResize = function () {
3851
let headerHeight = $(".ni-header").outerHeight(),
39-
footerHeight = $(".ni-footer").outerHeight();
52+
footerHeight = $(".ni-footer").outerHeight();
4053
$("body").css({
41-
"margin-bottom": footerHeight + 30
54+
"margin-bottom": footerHeight + 30,
4255
});
4356
$(".ni-sidenav-list").affix({
4457
"offset": {
4558
"top": $(".ni-content-main").offset().top,
46-
"bottom": footerHeight
47-
}
59+
"bottom": footerHeight,
60+
},
4861
});
4962
$(".ni-search-content").css({
5063
"top": headerHeight,
51-
"height": $(window).innerHeight() - headerHeight
64+
"height": $(window).innerHeight() - headerHeight,
5265
});
5366
};
5467
windowResize();
@@ -57,14 +70,21 @@ $(function () {
5770
/* scroll */
5871
let scrollTimer;
5972
window.windowScroll = function () {
60-
$(".ni-footer-navtop").css({
61-
"bottom": Math.max(($(window).scrollTop() + $(window).innerHeight()) - ($(".ni-content-main").offset().top + $(".ni-content-main").outerHeight()), 25)
62-
}).fadeIn(200);
73+
$(".ni-footer-navtop")
74+
.css({
75+
"bottom": Math.max(
76+
$(window).scrollTop() +
77+
$(window).innerHeight() -
78+
($(".ni-content-main").offset().top + $(".ni-content-main").outerHeight()),
79+
25
80+
),
81+
})
82+
.fadeIn(200);
6383
clearTimeout(scrollTimer);
6484
scrollTimer = setTimeout(function () {
6585
$(".ni-footer-navtop").fadeOut(500);
6686
}, 2000);
67-
}
87+
};
6888
$(".ni-footer-navtop").on({
6989
"mouseenter": function () {
7090
clearTimeout(scrollTimer);
@@ -73,8 +93,44 @@ $(function () {
7393
scrollTimer = setTimeout(function () {
7494
$(".ni-footer-navtop").fadeOut(500);
7595
}, 2000);
76-
}
77-
})
96+
},
97+
});
7898
windowScroll();
7999
$(window).on("scroll", windowScroll);
80-
});
100+
101+
/* 图片 视频链接点击*/
102+
$(".figure-link, .video-link").on("click", function (e) {
103+
let link = $(this).attr("href");
104+
console.log(link);
105+
if (link.match(/\.mp4$/)) {
106+
$(`<video/>`)
107+
.addClass("ni-modal-video")
108+
.attr({
109+
"src": link,
110+
"controls": "controls",
111+
"autoplay": "autoplay",
112+
})
113+
.appendTo($(".ni-modal-content").empty());
114+
} else if (link.match(/\.(?:bmp|jpe?g|gif|png)$/)) {
115+
$(`<img/>`).addClass("ni-modal-image").attr("src", link).appendTo($(".ni-modal-content").empty());
116+
} else if (link.match(/youtube\.com\/watch/)) {
117+
let video_id = link.match(/(?<=\/watch\?v=)[^\?&]+/)[0];
118+
let video_args = (link.match(/(?<=[\?&]).+$/) || "")[0];
119+
console.log(video_id, video_args);
120+
$(`<iframe/>`)
121+
.addClass("ni-modal-youtube")
122+
.attr({
123+
"src": `https://youtube.com/embed/${video_id}?autoplay=1&controls=1&${video_args}`,
124+
"allowfullscreen": "allowfullscreen",
125+
"allow":
126+
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
127+
})
128+
.appendTo($(".ni-modal-content").empty());
129+
}
130+
$(".ni-modal").modal("show");
131+
e.preventDefault();
132+
});
133+
$(".ni-modal").on("hide.bs.modal", function () {
134+
$(".ni-modal-content").empty();
135+
});
136+
});

‎jsconfig.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"typeAcquisition": {
3+
"include": [
4+
"jquery"
5+
]
6+
}
7+
}

0 commit comments

Comments
 (0)