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">&nbsp;</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。当然,你也可以用你自己的方式来创建页面。

欢迎留言