zhao/hugo-theme-moments
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add local video support

Browse source 
Support single video moment, like WeChat friend cycle.
Just use the `video` key
This commit is contained in:
atompi 2023-03-07 20:00:35 +08:00
parent 69f23442e8
commit c8145dba79
3 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

5
layouts/partials/after-content-js.html
View file

@ -14,13 +14,16 @@
<!-- fancybox --> <!-- fancybox -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
<!-- videojs -->
<script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script>
{{/* a pangu support */}} {{/* a pangu support */}}
{{ if .Site.Params.features.pangu }} {{ if .Site.Params.features.pangu }}
<!-- pangu.js --> <!-- pangu.js -->
<script> <script>
pangu.spacingElementByClassName('moment-note'); pangu.spacingElementByClassName('moment-note');
pangu.spacingElementByClassName('context'); pangu.spacingElementByClassName('context');
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// listen to any DOM change and automatically perform spacing via MutationObserver() // listen to any DOM change and automatically perform spacing via MutationObserver()
pangu.autoSpacingPage(); pangu.autoSpacingPage();

6
layouts/partials/head.html
View file

@ -1,6 +1,6 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
{{/* {{/*
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
@ -39,6 +39,9 @@
<!-- fancybox css (js in the end before the body closing tag) --> <!-- fancybox css (js in the end before the body closing tag) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>
<!-- videojs -->
<link href="https://vjs.zencdn.net/8.0.4/video-js.min.css" rel="stylesheet" />
<!-- pure.css --> <!-- pure.css -->
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/base-min.css"> <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/base-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-min.css"> <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/grids-min.css">
@ -64,4 +67,3 @@
<!-- website title --> <!-- website title -->
<title>{{ .Site.Params.title }}</title> <title>{{ .Site.Params.title }}</title>

9
layouts/partials/row.html
View file

@ -58,7 +58,7 @@
<div class="context heti"> <div class="context heti">
{{ .Content }} {{ .Content }}
</div> </div>
{{/* add-on info 1: pictures */}} {{/* add-on info 1: pictures */}}
{{/* new pictures API `pictures` (combine single & multiple pictures)*/}} {{/* new pictures API `pictures` (combine single & multiple pictures)*/}}
{{ $pictures_set := slice}} {{ $pictures_set := slice}}
@ -71,6 +71,13 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ $video_caption := .Plain}}
{{ with .Params.video }}
<a data-src="{{ . }}" data-fancybox="video-gallery" data-caption={{ $video_caption }}>
<video class="video-js" src="{{ . }}"></video>
</a>
{{ end }}
{{ if (eq (len $pictures_set) 1) }} {{ if (eq (len $pictures_set) 1) }}
{{ range $pictures_set }} {{ range $pictures_set }}
<img src="{{ . }}" class="single-pic" alt="Responsive image" data-fancybox="gallery" data-caption={{ $picture_caption }}></img> <img src="{{ . }}" class="single-pic" alt="Responsive image" data-fancybox="gallery" data-caption={{ $picture_caption }}></img>