Video Site
为了搭建一个受控的marketing channel，需要搭建一个视频网站，对标youtube！
前端页面2
作者: n5321
base.html (YouTube 模板)
目的: 看起来是一个类似于 YouTube 的网站的基础模板。它定义了整体结构、头部，以及大多数页面上常见的元素。
主要特征:
HTML 结构: 标准的 HTML5 结构，包含 <!DOCTYPE html>, <html>, <head>, 和 <body>。
静态文件: 使用 {% load static %} 和 {% static '...' %} 加载静态资源，比如图片和 JavaScript 文件。这是 Django 模板的特性。
头部区域: 包含头部区域，具有：
一个指向首页的链接 ({% url 'index' %})。
一个菜单图标（使用 Material Icons）。
一个 YouTube 标志。
一个搜索栏（带有一个提交到 {% url 'search' %} 端点的表单）。
用于视频上传、应用、通知和用户个人资料（或登录）的图标。 条件逻辑 ({% if request.user.is_authenticated %}) 根据用户是否已登录来处理显示特定于用户的链接。
外部资源 (CDN): 包含了指向以下内容的链接：
jQuery
Font Awesome
Google Material Icons
Axios (JavaScript HTTP 客户端)
基本样式: 用于 .message-alert 和 a (链接) 元素的内联 CSS。
JavaScript 引入: 在 body 标签的末尾引入 {% static 'js/main.js' %}。
预期用途: 这个模板会被其他模板（例如，首页模板，视频页模板）扩展，以创建完整的网站。 子模板将用特定于该页面的内容填充 style, single 和 content 块。
baseCorp.html (企业视频模板)
目的: 看起来是一个企业视频查看网站或门户的基础模板。 它侧重于视频呈现，并且可能具有受限访问（由于禁用了上下文菜单）。
主要特征:
HTML 结构: 与 base.html 类似，具有基本的 HTML5 结构。
Bootstrap: 使用 Bootstrap 5 进行样式和布局。
用于视频控制的 JavaScript: 包含 JavaScript 代码来：
禁用右键点击上下文菜单（可能为了防止视频下载）。
函数 showVideo 和 showThumbnail 用于切换显示视频缩略图和视频本身，可能通过悬停或点击事件触发。
导航栏引入: 从 includes/navbar.html 引入导航栏（使用 Django 模板 include 标签）。
视频样式: CSS 用于设置视频缩略图的样式，使其看起来像 YouTube 缩略图（使用类名如 .video-card, .video-thumbnail, .video-title 等）。
"上传视频" 链接: 包含上传视频的链接 ({% url 'upload_video' %}).
内容块: 与 base.html 类似，它定义了一个 {% block content %}，供子模板插入它们特定的内容。
预期用途: 这个模板会被子模板扩展，以显示视频列表、单个视频页面等。 重点是以干净和受控的方式呈现视频。
比较
特性 base.html (YouTube) baseCorp.html (企业) 主要用途 YouTube 风格的网站 企业视频门户 样式 Material Icons, 基础 CSS Bootstrap 5 JavaScript main.js 禁用右键，视频控制 导航栏 自定义 引入 navbar.html 关注点 开放平台功能 视频保护，企业展示 外部资源 更多样 (jQuery, Axios) 更侧重 Bootstrap 总结:
base.html 是一个更通用的模板，旨在构建一个类似 YouTube 的网站，重点在于搜索、上传和社交功能。
baseCorp.html 是一个更专业的模板，针对企业视频展示，强调视频保护和简洁的呈现方式。 它利用 Bootstrap 简化了布局和样式，并通过 JavaScript 控制视频播放行为。
总之，base.html 旨在模仿 YouTube 的用户体验和功能，而 baseCorp.html 则侧重于企业环境下的视频展示和控制。 它们的选择取决于您要构建的网站的具体需求。
git checkout 52e2054328f39f25c4237966df59c2992f56f751.
git checkout master
<h4>Filename</h4>
<span>Video File name here</span>
</div>
</div>
</div>