1623
This commit is contained in:
Vaica committed
1 parent
310be913ef
commit
fe8c99a53e
8 files changed
+367
-157
No files matched your search
@@ -40,6 +40,7 @@ html {
|
||||
[data-theme="dark"] body {
|
||||
color: var(--text-content-dark-color);
|
||||
background-color: var(--background-dark-color);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .main {
|
||||
@@ -5706,3 +5707,84 @@ a.link-card:hover .link-card-arrow {
|
||||
font-size: inherit !important;
|
||||
color: var(--accent, #3b82f6) !important;
|
||||
}
|
||||
|
||||
/* ==================== 视频样式 ==================== */
|
||||
|
||||
.post-video-wrapper {
|
||||
margin: 1.5rem 0;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .post-video-wrapper {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.video-container video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 80vh;
|
||||
border-radius: 12px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.video-container video::-webkit-media-controls-panel {
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
|
||||
}
|
||||
|
||||
.video-caption {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
color: #6b7280;
|
||||
background: #f9fafb;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .video-caption {
|
||||
color: #9ca3af;
|
||||
background: #1f2937;
|
||||
border-top-color: #374151;
|
||||
}
|
||||
|
||||
/* Bilibili / YouTube 嵌入 */
|
||||
.video-embed {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.video-embed iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* 文章内直接写 <video> 标签的样式 */
|
||||
.post-content video {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 1.5rem auto;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .post-content video {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
{{/*
|
||||
Render hook for HTML video tags in Markdown
|
||||
让 Markdown 中的 <video> 标签自动包裹 figure 容器
|
||||
*/}}
|
||||
<figure class="post-video-wrapper">
|
||||
<div class="video-container">
|
||||
<video
|
||||
controls
|
||||
preload="metadata"
|
||||
playsinline
|
||||
webkit-playsinline
|
||||
{{ with .Attributes.poster }}poster="{{ . }}"{{ end }}
|
||||
{{ with .Attributes.class }}class="{{ . }}"{{ end }}
|
||||
>
|
||||
<source src="{{ .Destination | safeURL }}" type="{{ .MediaType.Type }}">
|
||||
你的浏览器不支持视频播放。
|
||||
</video>
|
||||
</div>
|
||||
{{ with .Text }}
|
||||
<figcaption class="video-caption">{{ . }}</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
@@ -35,8 +35,45 @@
|
||||
content.querySelectorAll('.post-video, .link-card').forEach(function(el) {
|
||||
if (!el.hasAttribute('uk-scrollspy')) el.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-bottom-small; delay: 100');
|
||||
});
|
||||
// 初始化视频播放器
|
||||
initVideoPlayers();
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', initPostScrollspy);
|
||||
|
||||
// 视频 PJAX 适配
|
||||
function initVideoPlayers() {
|
||||
document.querySelectorAll('.post-content video, .post-video-wrapper video').forEach(function(video) {
|
||||
// 暗黑模式下视频控件适配
|
||||
if (document.documentElement.dataset.theme === 'dark') {
|
||||
video.style.filter = 'brightness(0.95)';
|
||||
} else {
|
||||
video.style.filter = '';
|
||||
}
|
||||
// 确保不自动播放
|
||||
video.removeAttribute('autoplay');
|
||||
video.pause();
|
||||
});
|
||||
// 嵌入视频（B站/YouTube）在 PJAX 后重新加载
|
||||
document.querySelectorAll('.video-embed iframe').forEach(function(iframe) {
|
||||
var src = iframe.src;
|
||||
if (src) {
|
||||
iframe.src = src; // 触发重新加载
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// PJAX 导航前暂停所有视频
|
||||
document.addEventListener('pjax:send', function() {
|
||||
document.querySelectorAll('video').forEach(function(video) {
|
||||
video.pause();
|
||||
video.removeAttribute('autoplay');
|
||||
});
|
||||
});
|
||||
|
||||
// PJAX 加载完成后重新初始化
|
||||
document.addEventListener('pjax:complete', function() {
|
||||
setTimeout(initPostScrollspy, 100);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
{{/*
|
||||
视频嵌入 shortcode
|
||||
用法：
|
||||
{{< video src="/video/example.mp4" >}}
|
||||
{{< video src="https://example.com/video.mp4" poster="/image/poster.jpg" >}}
|
||||
{{< video src="/video/example.mp4" caption="视频说明文字" >}}
|
||||
{{< bilibili BV1xx411c7mD >}}
|
||||
{{< youtube dQw4w9WgXcQ >}}
|
||||
*/}}
|
||||
|
||||
{{ if .Get "bvid" | or (.Get 0) }}
|
||||
{{/* Bilibili 嵌入 */}}
|
||||
{{ $bvid := .Get "bvid" | default (.Get 0) }}
|
||||
<div class="post-video-wrapper">
|
||||
<div class="video-embed bilibili-embed">
|
||||
<iframe
|
||||
src="//player.bilibili.com/player.html?bvid={{ $bvid }}&high_quality=1&danmaku=0"
|
||||
scrolling="no"
|
||||
frameborder="0"
|
||||
allowfullscreen="true"
|
||||
loading="lazy"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ else if .Get "id" | or (and (.Get 0) (not (.Get "src"))) }}
|
||||
{{/* YouTube 嵌入 */}}
|
||||
{{ $id := .Get "id" | default (.Get 0) }}
|
||||
<div class="post-video-wrapper">
|
||||
<div class="video-embed youtube-embed">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/{{ $id }}"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen="true"
|
||||
loading="lazy"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ else }}
|
||||
{{/* 本地/外部视频 */}}
|
||||
{{ $src := .Get "src" }}
|
||||
{{ $poster := .Get "poster" }}
|
||||
{{ $caption := .Get "caption" }}
|
||||
<figure class="post-video-wrapper">
|
||||
<div class="video-container">
|
||||
<video
|
||||
controls
|
||||
preload="metadata"
|
||||
{{ with $poster }}poster="{{ . }}"{{ end }}
|
||||
playsinline
|
||||
webkit-playsinline
|
||||
>
|
||||
<source src="{{ $src }}">
|
||||
你的浏览器不支持视频播放。
|
||||
</video>
|
||||
</div>
|
||||
{{ with $caption }}
|
||||
<figcaption class="video-caption">{{ . }}</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
{{ end }}
|
||||
Reference in new issue
Block a user