Hugo 豆瓣书影音页面
从大发的 bigfa/hugo-theme-farallon 主题里提取的豆瓣书影音页面，我只是简单的加了点样式。
因为有朋友问怎么在顶部加随机播放的视频，我就贴一下豆瓣书影音页面的完整代码吧，部分 CSS 样式需要你自行调整。
一、创建 页面模板文件
在 layouts/movies/ 目录下新建 list.html，参考代码如下，需要自己动手修改页面布局和样样式哦。
1{{ define "main" }} {{ partial "header.html" . }} {{ $scss := resources.Get
2"scss/pages/_db.scss" }} {{ $css := $scss | resources.ToCSS }}
3<link rel="stylesheet" href="{{ $css.RelPermalink }}" />
4
5<style>
6 .video-banner {
7 margin-top: -5rem;
8 position: absolute;
9 z-index: -10;
10 height: 22rem;
11 width: 100%;
12 }
13
14 .video-musk {
15 margin-top: -5rem;
16 position: absolute;
17 z-index: -5;
18 height: 22rem;
19 width: 100%;
20 background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, #fff 100%);
21
22 @media (prefers-color-scheme: dark) {
23 background: linear-gradient(180deg, rgba(1, 0, 5, 0.1) 0%, #010005 100%);
24 }
25 }
26
27 .video {
28 width: 100%; /* 适应视频宽度 */
29 }
30</style>
31
32<div class="video-musk"> </div>
33<div class="video-banner overlay">
34 <video
35 class="video-source"
36 id="TopGif"
37 width="100%"
38 height="100%"
39 style="object-fit: cover"
40 webkit-playsinline="true"
41 x-webkit-airplay="true"
42 playsinline="true"
43 x5-video-player-type="h5"
44 x5-video-orientation="h5"
45 x5-video-player-fullscreen="true"
46 preload="auto"
47 autoplay="true"
48 loop=""
49 muted=""
50 >
51 <source src="" type="video/mp4" />
52 </video>
53</div>
54
55<div class="site--main">
56 <div class="db--container" data-token="{{ if .Params.token }}{{ .Params.token }}{{ end }}">
57 <nav class="db--nav">
58 <div class="db--navItem JiEun current" data-type="movie">Movie</div>
59 <div class="db--navItem JiEun" data-type="book">Book</div>
60 <div class="db--navItem JiEun" data-type="game">Game</div>
61 <!-- 以下3个分类可自行启用 -->
62 <!-- <div class="db--navItem JiEun" data-type="book">Book</div>
63 <div class="db--navItem JiEun" data-type="music">Music</div>
64 <div class="db--navItem JiEun" data-type="drama">Drama</div> -->
65
66 </nav>
67 <div class="db--genres">
68 </div>
69 <div class="db--list db--list__card">
70 </div>
71 <div class="block-more block-more__centered">
72 <div class="lds-ripple">
73 </div>
74 </div>
75 </div>
76</div>
77
78<script src="/js/movies.js"></script>
79
80<script>
81 document.addEventListener("DOMContentLoaded", function () {
82 const movieNavItem = document.querySelector(
83 '.db--navItem[data-type="movie"]'
84 );
85 const gameNavItem = document.querySelector(
86 '.db--navItem[data-type="game"]'
87 );
88 const videoElement = document.querySelector(".video-source");
89 const videoSource = videoElement.querySelector("source");
90
91 const movieVideos = [
92 "https://www.yuxiyuqi.com/movies/example.mp4",
93 "这里替换为你自己的远程视频地址",
94 // ...更多电影视频...
95 ];
96
97 const gameVideos = [
98 "这里替换为你自己的远程视频地址",
99 "这里替换为你自己的远程视频地址",
100 // ...更多游戏视频...
101 ];
102
103 function playRandomVideo(videos) {
104 const randomIndex = Math.floor(Math.random() * videos.length);
105 videoSource.src = videos[randomIndex];
106 videoElement.load();
107 }
108
109 movieNavItem.addEventListener("click", function () {
110 playRandomVideo(movieVideos);
111 });
112
113 gameNavItem.addEventListener("click", function () {
114 playRandomVideo(gameVideos);
115 });
116
117 // 初始随机播放一个电影视频
118 playRandomVideo(movieVideos);
119 });
120</script>
121{{ end }}
二、在 assets/scss/目录下新建 _db.scss，代码 参考这里
三、在 static/js/ 目录下新建 movies.js，代码 参考这里
四、微信扫码登录 https://node.wpista.com/
输入你的豆瓣数字 id，点击保存即可自动同步豆瓣记录。
点击 Get integration token 会生成一个 token。
在你的站点配置中加入参数
1[params]
2 wpdToken= '上面生成的token'
五、在 content/movies/ 下新建个_index.md。当然，你也可以用你自己的方式来创建页面。