OrchardCore 集成 Start Bootstrap Coming Soon 主题实战指南：从背景视频落地页到可运行的建设中网站

CMS后端Web框架【免费下载链接】OrchardCoreOrchard Core is an open-source modular and multi-tenant application framework built with ASP.NET Core, and a content management system (CMS) built on top of that framework.项目地址https://gitcode.com/gh_mirrors/or/OrchardCore点击查看免费下载本文以 OrchardCore 仓库内 TheComingSoonTheme 主题所携带的原版 README.md 为主线系统讲解这款 Coming Soon 主题的下载安装、npm 构建管线、邮件订阅表单接入方式并结合仓库源码深入剖析它在 OrchardCore 中的落地形态主题清单、资源清单、Liquid 布局、静态资源构建管线以及通过 setup recipe 一键生成建设中网站的完整机制。读完后你将能够在自己的 OrchardCore 站点中启用该主题或借助它的构建脚本与 recipe 快速定制一款带背景视频、邮件订阅和用户注册功能的落地页。一、主题定位与核心特性TheComingSoonTheme 是 OrchardCore 内置的主题之一其源头是 Start Bootstrap 开源的 Coming Soon Bootstrap 模板。主题清单 Manifest.cs 给出了官方定义名称The Coming Soon Theme作者Orchard Core Team描述Landing page for a project that is under construction面向正在建设中的项目的落地页标签Landing page原版 README 点明了该主题最具辨识度的视觉特征背景视频background video 移动端背景图片回退mobile background image fallback。在仓库中对应的资源是 bg.mp4 与 bg-mobile-fallback.jpg前者在桌面端作为循环播放的静音背景视频后者在移动端作为静态图片兜底。在 OrchardCore 中它被定位为站点主题site themerecipe 将管理后台主题指定为 TheAdmin将前台站点主题指定为 TheComingSoonTheme二者职责分离。二、仓库中的主题资产与目录结构该主题在仓库内分两个层次存放可编辑源资产Assets/TheComingSoonTheme/即原版模板的完整源码包含src/下的 Pug、SCSS、JS 源文件以及scripts/目录下的构建脚本和package.json。原版 README 正位于 Assets/TheComingSoonTheme/README.md。构建产物wwwroot/主题实际提供给 OrchardCore 运行时使用的静态资源包括css/styles.css、styles.min.css、bootstrap-oc.css、bootstrap-oc.min.css、js/scripts.js、scripts.min.js以及assets/视频、图片、favicon。目录 / 文件作用Assets/TheComingSoonTheme/src/pug/index.pug页面骨架的 Pug 源文件编译后生成 HTMLAssets/TheComingSoonTheme/src/scss/SCSS 源文件含_global.scss、sections/_masthead.scss、sections/_social.scss等模块Assets/TheComingSoonTheme/src/js/scripts.js主题自定义 JS当前为空白占位文件Assets/TheComingSoonTheme/package.jsonnpm 构建脚本与依赖声明Assets.jsonOrchardCore 主题资产构建清单定义源资产如何产出到wwwroot/Views/layout.liquidOrchardCore 侧的主题布局替代原模板中的静态 HTMLRecipes/comingsoon.recipe.json站点初始化 recipe一键生成建设中站点ResourceManagementOptionsConfiguration.cs声明主题用到的脚本与样式资源清单Manifest.cs、Startup.cs主题声明与依赖注入入口wwwroot/下的产物均由Assets/中的源资产构建而来详见第五节构建管线因此日常改样式应改src/scss而非直接改wwwroot/css。三、下载与安装方式原版 README 提供了三种获取模板的方式在 Start Bootstrap 官网下载最新 release通过 npm 安装npm i startbootstrap-coming-soon通过 git clone 克隆原模板仓库或 fork 后自行维护。注意本文不粘贴上述外部链接读者如需获取原模板可直接使用 npm 包名startbootstrap-coming-soon检索。在 OrchardCore 的语境下你无需单独下载——模板源码已经以Assets/TheComingSoonTheme/的形式完整 vendored 进仓库且wwwroot/中已有构建好的成品资源主题开箱即用。npm 安装方式仅适用于你想在独立项目中复用这套模板资产时。四、基础使用直接编辑 dist 产物原版 README 的 Basic Usage 说明下载模板后只需编辑dist目录中包含的 HTML 和 CSS 文件——这是唯一需要关心的文件集合其余都可以忽略在浏览器中直接打开index.html即可预览改动效果。映射到本仓库原模板的dist/等价于主题的 wwwroot/其中 css/styles.css 是核心样式含 Bootstrapcss/bootstrap-oc.css是 OrchardCore 团队对 Bootstrap 的定制扩展详见 bootstrap-oc.scss打开 index.html 预览对应的是纯静态场景在 OrchardCore 中页面渲染由 layout.liquid 接管正文内容则来自数据库中的内容项而非静态 HTML。如果你只是做样式层面的快速调整改颜色、间距、字体直接编辑wwwroot/css下的 CSS 即可看到效果若要长期维护仍建议走源码 构建管线。五、高级使用npm 构建管线与脚本5.1 启动开发预览原版 README 的 Advanced Usage 步骤克隆主题源码 → 进入主题根目录 → 运行npm install→ 运行npm start此时会在默认浏览器中打开模板预览监听核心模板文件的变更并在保存时对浏览器做 live reload。使用该构建环境的前提是本地已安装 npm。5.2 npm 脚本一览原版 README 记录了 8 个 npm 脚本仓库内 Assets/TheComingSoonTheme/package.json 也声明了对应脚本。两者对比如下脚本作用README 说明仓库 package.json 中的实际定义npm run build构建整个项目将 assets、HTML、JS、CSS 产出到distnpm run clean npm run build:pug npm run build:scss npm run build:scripts npm run build:assetsnpm run build:assets将src/assets/目录中的文件复制到distnode scripts/build-assets.jsnpm run build:pug编译src/pug/目录中的 Pug 到distnode scripts/build-pug.jsnpm run build:scripts将src/js/scripts.js带到distnode scripts/build-scripts.jsnpm run build:scss编译src/scss/目录中的 SCSS 到distnode scripts/build-scss.jsnpm run clean删除dist目录为重新构建做准备node scripts/clean.jsnpm run start:debug以调试模式运行项目npm run build node scripts/start-debug.jsnpm start/npm run start运行项目默认浏览器打开实时预览监听src下文件变更npm run build node scripts/start.js几点值得留意的仓库实况构建产物默认输出到dist/而 OrchardCore 主题真正加载的是wwwroot/二者的衔接由 Assets.json 完成见 7.4 节。从源码结构看Assets/TheComingSoonTheme/scripts/目录下实际存放的是render-assets.js、render-pug.js、render-scss.js、render-scripts.js、clean.js、sb-watch.js、start.js、start-debug.js而 vendored 的package.json中脚本指向的是build-*.js文件名二者存在出入。若你直接在Assets/TheComingSoonTheme/下执行 npm 脚本需以该目录实际存在的脚本文件为准必要时同步修正 package.json 中的脚本声明。package.json 声明的版本为6.0.6而资源清单中样式/脚本声明版本为6.0.5亦存在轻微版本漂移可在升级资源时一并校正。5.3 核心依赖package.json 中运行时依赖为bootstrap5.1.3与popperjs/core2.11.8开发依赖包括sassSCSS 编译、pug模板编译、browser-sync实时预览、autoprefixer/postcssCSS 兼容性处理、concurrently并行任务、chokidar文件监听、shelljs/upath脚本辅助等。可见这是一套标准的 Bootstrap 模板开发栈Pug 写结构、SCSS 写样式、BrowserSync 做热更新。六、Signup 表单SB Forms 接入原 README 用法原版 README 特别说明模板内置的订阅表单signup form预置了SB Forms的标记markup。SB Forms 是 Start Bootstrap 提供的简单表单解决方案只需三步即可让表单真正可用在 Start Bootstrap 官网注册 SB Forms 账号注册后设置表单将要使用的域名获取 access key将 access key 填入表单的data-sb-form-api-tokenAPI_TOKEN数据属性替换占位符API_TOKEN。完成后订阅表单即可接收提交。表单标记位于 src/pug/index.pugform#contactForm携带data-sb-form-api-token与data-sb-validationsrequired,email输入框带data-sb-feedback反馈节点页面底部/body前还需引入 SB Forms 的 JS 脚本。如果你不使用 SB Forms原版 README 给出的清理方法是删除表单上的自定义 data 属性并移除/body闭合标签上方对 SB Forms 脚本的引用。重要说明这是针对原版静态模板的用法。在 OrchardCore 中该主题并没有沿用 SB Forms——订阅表单改由 OrchardCore.Forms 模块 工作流实现详见第八节的 recipe 剖析。如果你要基于Assets/TheComingSoonTheme独立开发静态页面才需要按本节方式配置 SB Forms。七、OrchardCore 集成实现深度解析7.1 主题清单与启动入口Manifest.cs 使用[assembly: Theme(...)]声明主题Startup.cs 继承StartupBase在ConfigureServices中仅做一件事AddResourceConfigurationResourceManagementOptionsConfiguration()即把主题的资源清单注册进 OrchardCore 的资源管理系统。7.2 资源清单脚本与样式的集中声明ResourceManagementOptionsConfiguration.cs 定义了 4 个命名资源布局中通过名称引用由 OrchardCore 负责去重、合并与 CDN 回退资源名类型内容TheComingSoonTheme-bootstrap-bundleScriptBootstrap 5.1.3 bundlejsdelivr CDN SRI 完整性哈希版本5.1.3coming-soonScript主题 JS~/TheComingSoonTheme/js/scripts.min.js调试用scripts.js版本6.0.5coming-soonStyle主题 CSS~/TheComingSoonTheme/css/styles.min.css调试用styles.css版本6.0.5TheComingSoonTheme-bootstrap-ocStyleOrchardCore 定制的 Bootstrap~/TheComingSoonTheme/css/bootstrap-oc.min.css版本1.0.0每个资源都同时提供 min 版与调试版 URLSetUrl的两个参数并支持 CDN 完整性校验SetCdnIntegrity这保证了生产环境走压缩文件、开发环境可读源码的体验。7.3 Liquid 布局如何呈现建设中页面Views/layout.liquid 是主题在 OrchardCore 中的页面骨架与原模板的index.pug一一对应背景视频video classbg-video playsinline autoplay muted loop内嵌 bg.mp4通过href过滤器解析~/TheComingSoonTheme/assets/mp4/bg.mp4虚拟路径资源注入{% resources type: Meta %}、{% style name:font-awesome, version:7 %}、{% style name:coming-soon, version:6 %}、{% script name:thecomingsoontheme-bootstrap-bundle, at:Foot %}等标签按名称引用 7.2 节声明的资源由资源管理器统一输出字体与图标引入 Google FontsTinos 与 DM Sans与 Font Awesome 图标库社交图标正是依赖后者渲染fab fa-x-twitter、fab fa-facebook-f、fab fa-instagram等类名区域渲染{% render_section Content %}等标签渲染 Header/Content/Footer 区域正文由内容项模板Content__ComingSoon填充。7.4 资产构建管线Assets.jsonAssets.json 是连接源资产与wwwroot 产物的桥梁定义了 4 条构建动作copy将Assets/TheComingSoonTheme/dist/assets/**复制到wwwroot/assets/视频、图片、faviconmin将dist/css/styles.css压缩输出到wwwroot/css/sass编译 src/scss/bootstrap-oc.scss 输出到wwwroot/css/产出bootstrap-oc.css与 min 版min将dist/js/scripts.js压缩输出到wwwroot/js/。这解释了仓库中为何Assets/与wwwroot/内容高度对应主题先通过 npm 管线在Assets/TheComingSoonTheme/dist/产出中间构建物再由 OrchardCore 的资产构建任务按 Assets.json 拷贝/压缩到wwwroot/供运行时使用。其中bootstrap-oc.scss是 OrchardCore 团队在原模板 SCSS 基础上引入的 Bootstrap 定制它 import Bootstrap 的 functions/variables/mixins并额外引入modules/_flow.scss、_messages.scss、_widgets.scss、_pager.scss、_taxonomy.scss、_form.scss等模块——这些是 OrchardCore 后台组件流式布局、消息、部件、分页、分类、表单所需的样式扩展。八、一键落地ComingSoon setup recipe 剖析主题自带 comingsoon.recipe.json它是一个issetuprecipe: true的站点初始化 recipe也就是说可以用它直接完成站点的初始配置。recipe 全程演示了 OrchardCore 的 recipe 机制变量、JavaScript 表达式、多步骤串联分步如下。8.1 变量预定义recipe 顶部用[js: ...]表达式预定义变量内容项 ID、工作流类型 ID、活动 ID、当前时间now以及readyDate——用 JavaScript 计算下个月 年份作为预计上线日期如strongOctober 2026/strong动态注入到订阅文案中。变量首次访问时求值并在后续步骤间复用。8.2 启用功能与主题切换Feature步骤一次性启用了约 40 个模块功能覆盖内容管理OrchardCore.Contents、ContentTypes、ContentFields、Flows、Widgets、表单OrchardCore.Forms、安全ReCaptcha、Security、Roles、Users.Registration、工作流OrchardCore.Workflows、Workflows.Http、模板Templates、Shortcodes.Templates、后台TheAdmin等themes步骤指定admin 主题为 TheAdmin、站点主题为 TheComingSoonTheme。8.3 内容类型与部件设计ContentDefinition步骤定义了 3 个内容类型内容类型用途关键部件PartComingSoon首页主内容项TitlePart、AutoroutePartShowHomepageOption: true、FlowPart放 Widget 流、FormPart FormElementPart承载订阅表单、BagPartSocialIcons社交图标集合SocialIcon单个社交图标TitlePart 自定义SocialIcon部件IconClass文本字段用 IconPicker 编辑器选择 Font Awesome 类名Url必填链接Register订阅邮箱输入组件Widget 原型HtmlBodyPartWYSIWYG 编辑器 自定义Register部件Placeholder、InputFieldName、Button三个文本字段content步骤创建了默认内容项标题 Coming Soon、设为首页AutoroutePart.SetHomepage: true、3 个默认社交图标X/Twitter、Facebook、Instagram、FlowPart 中的 3 个 Widget——ValidationSummary校验摘要、Register订阅表单区其 HtmlBodyPart 使用readyDate变量拼出上线文案、ReCaptcha人机验证。FormPart 的Action指向工作流触发地址[js: getUrlPrefix(/workflows/invoke/ encodeURI(createWorkflowToken(variables(workflowTypeId), variables(workflowActivityId))))]。8.4 订阅 → 用户注册工作流WorkflowType步骤创建名为 User Registration 的工作流串起完整订阅流程这也正是 7.3 节布局与 8.3 节表单背后真正的表单后端HttpRequestEventPOST、校验防伪令牌接收表单提交BindModelStateTask将表单绑定到 ModelStateForkTask并行分叉ValidateFormFieldTask校验邮箱字段字段名ValidationSummaryPart.Email错误信息 this is not a valid emailValidateReCaptchaTask校验 ReCaptchaJoinTask汇合 →ValidateFormTask判定整体有效性无效则HttpRedirectTask跳回首页ScriptTask用脚本setProperty(Email, requestForm(ValidationSummaryPart.Email))取出邮箱RegisterUserTask注册用户开启SendConfirmationEmail邮件正文模板为Thank you for your interest! Please [click here] to confirm your email.主题为Welcome to {{Site.SiteName}}AddModelValidationErrorTask输出提示 Thank you. A confirmation email has been sent.随后HttpRedirectTask重定向回首页。8.5 模板 SnippetsTemplates步骤把两个 Liquid 片段注册为内容模板Snippets/Content__ComingSoon.liquid渲染标题遍历FlowPart.Widgets逐个渲染 Widget并遍历SocialIcons.ContentItems输出社交图标链接Snippets/Widget__Register.liquid输出 HtmlBodyPart 文案 邮箱输入框{% helper input %}生成placeholder 与字段名取自Register部件 Notify Me! 提交按钮。九、在自己的 OrchardCore 站点中启用有两种启用路径已有站点启用主题进入后台 → Features 启用TheComingSoonTheme并确认已启用其依赖的 OrchardCore.Forms、OrchardCore.Workflows、OrchardCore.ReCaptcha、OrchardCore.Users.Registration 等功能→ Themes 中将站点主题切换为 The Coming Soon Theme。之后按第八节结构自行创建内容类型、内容项与工作流或将 recipe 中的ContentDefinition/content/WorkflowType步骤迁移到你的站点。从零初始化在站点设置阶段直接选用 Coming Soon recipe系统会按 8.28.5 全自动创建主题配置、内容类型、默认内容与注册工作流无需手工操作。注意 recipe 中启用了OrchardCore.Email与OrchardCore.Users.Registration用户注册的确认邮件能否发出取决于你是否已正确配置 SMTP 邮件提供程序。十、相关文件索引继续深入可从以下路径入手原版模板 READMEAssets/TheComingSoonTheme/README.md主题构建脚本与依赖Assets/TheComingSoonTheme/package.json、Assets/TheComingSoonTheme/scripts/页面源码src/pug/index.pug、src/scss/bootstrap-oc.scssOrchardCore 集成布局 Views/layout.liquid、资源清单 ResourceManagementOptionsConfiguration.cs、资产管线 Assets.json站点初始化Recipes/comingsoon.recipe.json 与 Snippets综上所述TheComingSoonTheme 是第三方静态模板如何在 OrchardCore 中变成可管理内容站点的典型范例模板源码负责视觉与构建OrchardCore 的 Manifest/资源清单/Liquid 布局负责运行时渲染recipe 工作流则把静态订阅表单升级为具备校验、人机验证、用户注册与确认邮件能力的完整业务闭环。无论你是想快速搭一个即将上线的落地页还是研究主题资产构建与 recipe 编写这个主题都是一份值得对照阅读的参考实现。赞分享CMS后端Web框架【免费下载链接】OrchardCoreOrchard Core is an open-source modular and multi-tenant application framework built with ASP.NET Core, and a content management system (CMS) built on top of that framework.项目地址https://gitcode.com/gh_mirrors/or/OrchardCore点击查看免费下载相关推荐Android轮盘选择器CursorWheelLayout打造炫酷旋转选择界面的终极指南Android轮盘选择器CursorWheelLayout打造炫酷旋转选择界面的终极指南 CursorWheelLayout是一款专为Android平台设计的Yeti Cover 布局完全指南用纯 CSS 打造视口高度居中的 Hero、登录页与 Coming Soon 页面Yeti Cover 布局完全指南用纯 CSS 打造视口高度居中的 Hero、登录页与 Coming Soon 页面 Yeti 的 cover 是一个极简的前端如何为Bootstrap网站添加动态视频背景终极视觉冲击指南如何为Bootstrap网站添加动态视频背景终极视觉冲击指南 在现代网页设计中动态视频背景已成为提升用户体验和视觉吸引力的关键元素。本文将详细介绍如何利用G前端文档上一篇tsParticles zIndex 深度解析用层级因子驱动粒子透明度、尺寸与速度下一篇猫抓浏览器插件解锁网页媒体资源的7个关键技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考