新浪视频播吧（现在多指其视频流产品）的核心特点是：信息流瀑布式布局、视频封面突出、标题和简介精炼、互动元素（点赞、评论、分享）醒目、加载体验流畅。

dede 仿新浪视频播吧模板
（图片来源网络，侵删）

下面我将从 设计理念、模板结构、核心标签、前端实现 四个方面,为您提供一个完整的仿制方案。

设计理念与布局规划

在动手之前,我们先要明确新浪视频播吧的布局逻辑：

  1. 整体布局：通常采用 “侧边栏 + 主内容区” 的经典布局。

    • 侧边栏：包含热门排行榜、热门分类、推荐博主等模块,用于引流和增加用户粘性。
    • 区：核心区域，采用 瀑布流 或 多列网格 布局,展示视频卡片。

  2. 视频卡片设计：每个视频是一个独立的卡片,包含以下核心元素：

    dede 仿新浪视频播吧模板
    （图片来源网络，侵删）
    • 视频封面：大图，带有视频时长标签（如 05:32）。
    • ：简洁、有吸引力，通常只显示一行,超出部分用省略号。
    • 视频简介/标签下方,用较小的字体显示视频简介或相关标签。
    • 互动信息：在卡片底部，显示播放量、点赞数、评论数。
    • 博主信息：在卡片最底部,显示博主头像和昵称。

DedeCMS 模板文件结构

我们需要创建和修改以下文件：

/templets/default/  (假设您的默认模板目录)
├── style/                  (CSS和JS文件目录)
│   ├── video.css          (主样式文件)
│   └── jquery.masonry.min.js (瀑布流布局JS库)
│   └── video.js           (自定义JS文件)
├── video.htm              (视频列表主页模板)
├── video_channel.htm      (视频分类页模板)
├── video_play.htm         (视频播放页模板)
├── list_video.htm         (通用列表页模板，可复用)
└── article_image.htm      (文章内容页模板，用于展示视频)

核心模板代码实现

视频列表主页模板 (video.htm)

这是最关键的一步,我们将在这里实现瀑布流布局。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">{dede:global.cfg_webname/} - 视频播吧</title>
    <meta name="description" content="{dede:global.cfg_description/}" />
    <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/style/video.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="{dede:global.cfg_templets_skin/}/style/jquery.masonry.min.js"></script>
</head>
<body>
    {dede:include filename="head.htm"/} <!-- 包含网站头部 -->
    <div class="main-container">
        <!-- 左侧边栏 -->
        <div class="sidebar">
            {dede:include filename="video_sidebar.htm"/} <!-- 包含侧边栏模板 -->
        </div>
        <!-- 右侧主内容区 -->
        <div class="content">
            <div class="video-list" id="video-masonry">
                {dede:arclist row='20' titlelen='40' orderby='pubdate' channelid='1' addfields='video_duration,video_playnum'}
                <div class="video-item">
                    <!-- 视频封面图，这里使用文章的缩略图 -->
                    <div class="video-thumb">
                        <a href="[field:arcurl/]">
                            <img src="[field:litpic/]" alt="[field:title/]" />
                            <!-- 视频时长标签 -->
                            <span class="video-duration">[field:video_duration/]</span>
                        </a>
                    </div>
                    <!-- 视频标题 -->
                    <h3 class="video-title">
                        <a href="[field:arcurl/]">[field:title/]</a>
                    </h3>
                    <!-- 视频简介/标签 -->
                    <p class="video-desc">[field:description function='cn_substr(@me, 80)'/]...</p>
                    <!-- 互动信息和博主信息 -->
                    <div class="video-meta">
                        <span class="video-play"><i class="icon"></i> [field:video_playnum/]</span>
                        <span class="video-like"><i class="icon"></i> 999+</span>
                        <span class="video-author">
                            <img src="[field:litpic/]" alt="[field:writer/]" />
                            <a href="#">[field:writer/]</a>
                        </span>
                    </div>
                </div>
                {/dede:arclist}
            </div>
            <!-- 加载更多按钮 -->
            <div class="load-more">
                <a href="javascript:;" id="load-more-btn">加载更多</a>
            </div>
        </div>
    </div>
    {dede:include filename="footer.htm"/} <!-- 包含网站底部 -->
    <script>
        $(function() {
            // 瀑布流布局初始化
            $('#video-masonry').masonry({
                itemSelector: '.video-item',
                columnWidth: '.video-item',
                gutter: 20,
                isFitWidth: true // 父容器宽度自适应
            });
            // 加载更多功能（伪代码，需要后端配合）
            $('#load-more-btn').click(function() {
                var page = parseInt($(this).data('page')) || 2;
                $.get('/plus/list.php?tid={dede:global.tid/}&page=' + page, function(data) {
                    // 解析返回的HTML，提取新的.video-item
                    var $newElems = $(data).find('.video-item');
                    // 将新元素添加到容器中
                    $('#video-masonry').append($newElems).masonry('appended', $newElems);
                    page++;
                    $(this).data('page', page);
                    if ($newElems.length == 0) {
                        $(this).text('没有更多了').addClass('disabled');
                    }
                });
            });
        });
    </script>
</body>
</html>

{dede:arclist} 标签解析：

  • channelid='1': 最重要的一步！ 这要求你在 DedeCMS 后台创建一个 “视频” 自定义模型，并将其 ID 设置为 1（或其他你设定的 ID），你需要在这个模型里添加额外的字段，如 video_duration（视频时长）、video_playnum（播放次数）。
  • addfields='video_duration,video_playnum': 告诉 arclist 标签获取这些自定义字段的值。
  • orderby='pubdate': 按发布时间倒序排列,最新的在最前面。

样式文件 (style/video.css)

/* 全局样式 */
body { font-family: "Microsoft YaHei", Arial, sans-serif; background-color: #f4f4f4; }
.main-container { display: flex; max-width: 1200px; margin: 20px auto; padding: 0 15px; }
.sidebar { width: 300px; margin-right: 20px; }
.content { flex: 1; }
/* 瀑布流容器 */
.video-list { /* width: 100%; */ } /* masonry.js 会处理宽度 */
.video-item { 
    width: 280px; 
    margin-bottom: 20px; 
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.video-item:hover { transform: translateY(-5px); }
/* 视频封面 */
.video-thumb { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 比例 */ overflow: hidden; }
.video-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.video-duration { 
    position: absolute; bottom: 5px; right: 5px; 
    background: rgba(0,0,0,0.7); color: #fff; 
    padding: 2px 5px; border-radius: 3px; font-size: 12px;
}
/* 视频信息 */
.video-title { margin: 10px; font-size: 16px; font-weight: bold; }
.video-title a { color: #333; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-desc { margin: 0 10px; font-size: 13px; color: #999; height: 36px; overflow: hidden; }
/* 底部元信息 */
.video-meta { padding: 0 10px 10px; font-size: 13px; color: #666; display: flex; justify-content: space-between; align-items: center; }
.video-meta span { display: flex; align-items: center; }
.video-meta .icon { display: inline-block; width: 16px; height: 16px; margin-right: 5px; background: url('path/to/your/sprite.png') no-repeat; /* 使用雪碧图 */ }
.video-author { display: flex; align-items: center; }
.video-author img { width: 24px; height: 24px; border-radius: 50%; margin-right: 5px; }
/* 加载更多 */
.load-more { text-align: center; margin: 30px 0; }
.load-more a { display: inline-block; padding: 10px 30px; background: #ff8200; color: #fff; border-radius: 20px; text-decoration: none; }
.load-more a.disabled { background: #ccc; cursor: not-allowed; }

侧边栏模板 (video_sidebar.htm)

这是一个独立的文件,方便复用。

<div class="sidebar-box">
    <h3 class="sidebar-title">热门排行榜</h3>
    <ul class="hot-list">
        {dede:arclist row='10' titlelen='30' orderby='hot'}
        <li><span class="num">[field:global.autoindex/]</span><a href="[field:arcurl/]">[field:title/]</a></li>
        {/dede:arclist}
    </ul>
</div>
<div class="sidebar-box">
    <h3 class="sidebar-title">热门分类</h3>
    {dede:channel type='top' row='10'}
    <a href="[field:typelink/]" class="channel-tag">[field:typename/]</a>
    {/dede:channel}
</div>

页 (article_image.htm 或 video_play.htm)

当用户点击视频卡片后，会跳转到文章内容页，你需要修改这个模板,让它像一个专业的视频播放页。

{dede:include filename="head.htm"/}
<div class="play-container">
    <div class="play-main">
        <!-- 视频播放器区域，这里用 iframe 嵌入 -->
        <div class="player-wrapper">
            <!-- 这里是核心，需要替换成你自己的视频播放代码 -->
            <!-- 优酷、腾讯、B站的 iframe 代码 -->
            <!-- {dede:field name='body'/} 直接输出文章内容，如果文章内容里是 iframe，就会显示 -->
            <iframe height="498" width="510" frameborder="0" allowfullscreen="allowfullscreen" 
                    src="{dede:field name='body'/}"></iframe>
        </div>
        <!-- 视频标题和简介 -->
        <h1 class="play-title">{dede:field.title/}</h1>
        <div class="play-info">
            <span>播放：{dede:field name='video_playnum'/}次</span>
            <span>时间：{dede:field name='pubdate' function='MyDate('Y-m-d H:i',@me)'/}</span>
            <span>来源：{dede:field name='source'/}</span>
        </div>
        <!-- 视频详情描述 -->
        <div class="play-desc">
            {dede:field.description/}
        </div>
    </div>
    <!-- 右侧推荐视频 -->
    <div class="play-sidebar">
        <h3>相关推荐</h3>
        {dede:arclist row='6' titlelen='20' typeid='{dede:field.id/}'}
        <div class="related-item">
            <a href="[field:arcurl/]">
                <img src="[field:litpic/]" alt="[field:title/]" />
                <p>[field:title/]</p>
            </a>
        </div>
        {/dede:arclist}
    </div>
</div>
{dede:include filename="footer.htm"/}

实现步骤总结

  1. 后端准备：

    • 在 DedeCMS 后台，进入 [核心] -> [内容模型管理] -> [添加新模型]，创建一个名为“视频”的模型。
    • 在模型中添加 “视频时长” 和 “播放次数” 等自定义字段。
    • 创建相应的栏目，并选择使用这个“视频”模型。

  2. 前端制作：

    • 创建 video.htm、video_sidebar.htm、video.css 等文件。
    • 将上述代码复制到对应文件中,并根据你的网站实际情况修改路径和样式。
    • 关键：在发布视频文章时，确保填写了 缩略图、视频时长、简介 等信息，并且文章内容区粘贴的是视频网站的 iframe 代码。

  3. 部署与调试：

    • 将制作好的模板文件夹上传到服务器的 /templets/default/ 目录。
    • 在 DedeCMS 后台，进入 [模板] -> [默认模板管理]，将你制作的 video.htm 设置为对应栏目的默认模板。
    • 访问你的视频栏目页面，查看效果，瀑布流布局可能需要根据实际情况调整 .video-item 的宽度和 columnWidth。

通过以上步骤，你就可以搭建出一个功能完善、风格接近新浪视频播吧的 DedeCMS 视频网站了，这个方案不仅提供了外观的模仿，更重要的是实现了其核心的 信息流展示 和 用户交互 逻辑。