mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-13 23:16:47 +00:00
movie主题调整、dplayer加入
This commit is contained in:
tangly1024
50
public/videos/dplayer.html
Normal file
50
public/videos/dplayer.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DPlayer Video Player</title>
|
||||
<!-- 引入 DPlayer 样式文件 -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0px 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 创建一个容器用于放置视频播放器 -->
|
||||
<div id="dplayer-container"></div>
|
||||
<!-- 引入 Hls.js 库 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
|
||||
<!-- 引入 DPlayer JavaScript 文件 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
|
||||
|
||||
<script>
|
||||
var myParam = location.search.split('n=')[1]
|
||||
if(!myParam){
|
||||
alert('无效的视频地址')
|
||||
}
|
||||
// 创建 DPlayer 实例
|
||||
var dp = new DPlayer({
|
||||
// 定义容器
|
||||
container: document.getElementById('dplayer-container'),
|
||||
// 视频源地址
|
||||
video: {
|
||||
url: myParam
|
||||
// 如果有多个清晰度，可以在这里添加更多的清晰度选项
|
||||
// quality: [
|
||||
// { name: 'HD', url: 'https://example.com/your-video-hd.mp4', type: 'normal' },
|
||||
// { name: 'SD', url: 'https://example.com/your-video-sd.mp4', type: 'normal' }
|
||||
// ],
|
||||
},
|
||||
// 视频封面图片
|
||||
poster: 'https://example.com/your-video-poster.jpg',
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -23,11 +23,11 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
|
||||
<LazyImage
|
||||
src={post?.pageCoverThumbnail}
|
||||
alt={post.title}
|
||||
className='h-full w-full group-hover:scale-105 transform object-cover duration-500'
|
||||
className='h-full w-full group-hover:brightness-90 group-hover:scale-105 transform object-cover duration-500'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='absolute bottom-32 z-20'>
|
||||
<div className='absolute bottom-28 z-20'>
|
||||
{post?.tagItems && post?.tagItems.length > 0 && (
|
||||
<>
|
||||
<div className='px-6 justify-between flex p-2'>
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function CategoryItem({ category }) {
|
||||
href={`/category/${category.name}`}
|
||||
passHref
|
||||
legacyBehavior>
|
||||
<div className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
|
||||
<div className={'text-2xl hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
|
||||
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -12,10 +12,9 @@ export default function TagItem({ tag }) {
|
||||
key={tag}
|
||||
href={`/tag/${encodeURIComponent(tag.name)}`}
|
||||
passHref
|
||||
className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200 mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl notion-${tag.color}_background dark:bg-gray-800`}
|
||||
className={`cursor-pointer inline-block rounded duration-200 mr-2 py-1 px-2 text-xs whitespace-nowrap`}
|
||||
>
|
||||
<div className="font-light dark:text-gray-400">
|
||||
<i className="mr-1 fas fa-tag" />{' '}
|
||||
<div className="font-light hover:scale-105 transition-all duration-200 text-xl dark:text-green-500 hover:bg-gray-100 dark:hover:bg-hexo-black-gray p-2">
|
||||
{tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -6,9 +6,9 @@ const TagItemMini = ({ tag, selected = false }) => {
|
||||
key={tag}
|
||||
href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
|
||||
passHref
|
||||
className={'inline-block rounded-xl py-0.5 mr-2 text-[#2EBF8B]'}
|
||||
className={'inline-block rounded-xl py-0.5 mr-2'}
|
||||
>
|
||||
<div className="text-md font-bold text-shadow">
|
||||
<div className="text-md font-bold text-shadow text-[#2EBF8B]">
|
||||
{selected && <i className="mr-1 fa-tag" />}{' '}
|
||||
{tag.name + (tag.count ? `(${tag.count})` : '')}{' '}
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,7 @@ const CONFIG = {
|
||||
MOVIE_MENU_SEARCH: true, // 显示搜索
|
||||
|
||||
MOVIE_ARTICLE_RECOMMEND: true, // 推荐关联内容在文章底部
|
||||
MOVIE_VIDEO_COMBINE: true, // 聚合视频，开启后一篇文章内的多个含caption的视频会被合并到文章开头，并展示分集按钮
|
||||
|
||||
MOVIE_POST_LIST_COVER: true // 列表显示文章封面
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@ const LayoutBase = props => {
|
||||
<Header {...props} />
|
||||
|
||||
{/* 主体 */}
|
||||
<div id='container-inner' className='w-full relative z-10'>
|
||||
<div id='container-inner' className='w-full relative flex-grow z-10'>
|
||||
{/* 标题栏 */}
|
||||
{/* {fullWidth ? null : <Title {...props} />} */}
|
||||
|
||||
@@ -223,12 +223,13 @@ const LayoutSlug = props => {
|
||||
figCaptionWrapper.appendChild(div)
|
||||
})
|
||||
|
||||
// 将包含 figcaption 值的容器元素添加到 notion-article 的第一个子元素插入
|
||||
videoWrapper.appendChild(carouselWrapper)
|
||||
// 条件是带有caption的视频数量大于1个，否则不处理
|
||||
if (figCaptionValues.length > 1) {
|
||||
// 将包含 figcaption 值的容器元素添加到 notion-article 的第一个子元素插入
|
||||
videoWrapper.appendChild(carouselWrapper)
|
||||
videoWrapper.appendChild(figCaptionWrapper)
|
||||
notionArticle.insertBefore(videoWrapper, notionArticle.firstChild)
|
||||
}
|
||||
notionArticle.insertBefore(videoWrapper, notionArticle.firstChild)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
Reference in New Issue
Block a user