系统模板语法
前言
B2BCMS采用前后端分离模式开发，您完全可以根据自己的喜好自定义一套属于自己的前端库，但是通常我们不建议您这样做，因为系统也同时集成了一套完整的前端框架，通常您只需要编写少量的css和html代码即可自定义一个任意风格的网站。
系统默认事件与网站开发集成
事件概述 当访客浏览网站时，访客在网站上搜索哪些关键词，播放哪些视频，是否有点击相应的按钮，通过访客的事件动作，管理员可通过后台随时查看跟踪访客在网站上的一系列行为，并可以无缝与Google Analytics和Google Ads / Bing Ads 等营销平台无缝集成 内置事件 事件名称 事件
系统模板语法
基础原理 系统模板文件使用.cshtml文件扩展名，使用Razor标记语法，Razor默认的语言为HTML，它可以让您将基于服务器的代码（C#）嵌入到网页中，当一个网页被请求时，服务器在返回页面给浏览器之前先执行页面中的基于服务器的代码，再输出HTML内容。 更通俗的理解：模板文件中的内容使用htm
系统模板结构
阅读本文前需要先阅读之前的文章 系统模板语法 的基础原理 章节以便我们后续的理解。 模板位置 系统模板的位置在根目录下的theme文件夹下。（位置：”/theme“），theme 里存放着不同主题的互相独立的模板文件，系统默认的主题为skin5-native。 主题文件夹下有两个设置文件，不可删除。
模型属性和方法
在模板中调用相应的属性和方法时，需严格区分大小写，具体语法请阅读系统模板语法文章 全局属性与全局方法可在任意模板页面中使用，返回当前站点的相应信息，如果系统有配置多个站点，当前模板页为站点A使用，则返回的值为站点A的配置信息，全局属性和方法以@Cms.开头，例如： <div> <!
结构化数据处理方案
外观主题开发
留言模块功能集成
留言提交按钮参数说明 属性名 默认属性值 必须 属性说明 data-provider post-message 是 Javascript识别留言提交的唯一标识，不可更改 data-target msg-@GetHashCode() 是 留言提交成功后，显示信息的元素ID data-process P
视频模块功能集成
1.视频使用 1.引用核心JS和CSS文件 2.系统参数 参数 属性值 说明 data-provider video 必须，视频集成唯一标识 data-mode auto / responsive / fill /none 如果设置为auto模式，播放器将尝试css样式中的max-width和max
系统内置字体图标
文件说明 B2BCMS前端核心框架内置104个常用字体图标 文件位置：/plugins/fonts/cmsfont2.woff2 字体名称：CmsFont 使用方法 引用核心CSS文件后 1.CSS Class方式： <i class="icon icon-tiktok"></i&
菜单导航效果
粘性定位特效(sticky) 当页面滚动时,可以让元素在滚动过程中“粘”在屏幕上的某个位置，当滚动区域大于目标元素区域时，目标元素将粘贴在页面固定位置不再随页面滚动(fixed状态)，反之则随页面滚动(static状态)。 css通过position:sticky实现粘性定位，但无法在实现定位的同时
图片轮播组件开发
系统轮播组件基于swiper 深度定制(保留源程序所有的参数调用形式),采用参数配置替代手写编程代码形式，以实现各种轮播滚动效果，该方式可适配绝大多数情况下轮播效果 代码结构与源网站形式保持一致 属性列表 属性名 说明 默认值 官网对应 data-ident 轮播组件ID,同一页面多个轮播ID必须唯
CSS变量
-变量名称 说明 --container-width div宽度 --body-font-family 网站默认字体 --title-font-family 网站标题字体 --body-font-size 网站默认字体大小 --body-color 网站默认字体颜色 --body-line-heig
CSS过渡动画
CSS动画说明 动画效果可以为我们的网站或应用程序在页面载入时添加各种炫酷(如图片/文字在页面载入时偏移，淡入，缩放)的效果 友情提示：过度使用动画效果会降低页面性能 参数列表 属性名称 功能说明 默认值 data-animated 定义一个动画 无,必须 data-countup 定义一个数字累加
Tab选项卡
点击切换 移动切换 可以在button上面添加data-hover属性实现移动切换效果 循环分类介绍 <div class="home-overview"> <div class="container-xl"> <div class="row"> <div
图片&视频延迟加载 (Lazyload)
延迟加载又称为惰性加载，懒加载，是一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略,可以缩短页面加载时间，延迟加载特性以及对Google Page speed的相关知识，请参考以下第三方权威链接： Google web.dev：https://web.dev/i18n/zh/lazy-
开发问题解答
产品页如何加载所有的扩展字段？
@foreach (var item in Model.FieldList) { <dt>@item.Key</dt> <dd>@item.Value</dd> }
如何调用扩展字段？
通过 Model["modelname"] 调用扩展字段
如何调用语言项目
通过Cms.Lang("") 调用 @if (!Cms.Lang("site.aboutus").ToString().IsEmpty()) {@Cms.Lang("site.aboutus")} else { @:"site.aboutus" }
如何更改后台登录地址
找到网站根目录下的 web.config, 修改其中的 <!--后台管理目录路径,不可与真实目录(manage)同名--> <add key="AdminArea" value="$YOURADMIN" /> 将其中的 $YOURADMIN 改为新的后台登录地址。
前端开发
如何设置自动识别浏览器语言，跳转到相关版本的网站？
当需要根据浏览器的语言偏好进行跳转时，可以使用 JavaScript 的 navigator.language 属性获取浏览器的语言信息，然后根据不同的语言进行跳转。 我们通过 JavaScript 对根据国家代码进行逻辑判断并实现跳转功能。针对中国用户不进行跳转，对日本用户进行特定域名跳转，对其他
如何在谷歌地图中标识你的地址
我有三个子公司， 名为北京分公司， 上海分司， 香港分公司， 编写一段 js, 通过 google map api , 在世界地图上标识这三家公司， 包括 图片（100*100px）, 分公司名称，经度，维度。 在以下代码中，我们首先引入了Google Maps JavaScript API，并定义
如何将一个字符串拆分成两个字符串？
例如 @item.Caption， 通过 | 进行分割， PAYPAL|支付方式 则第一个字符串为： @item.Caption.Split('|')[0].Trim() 第二个字符串为： @item.Caption.Split('|')[1].Trim() 可在不改变网站结构的情况下，实现更多的功
如何手写代码实现Bootstrap 5 框架结构？
案例1： 灵活布局, 等宽布局框架, 每一个 .col 宽度相同。 <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"&
如何自定义Swiper 幻灯片的左右切换按钮样式？
要自定义 Swiper 幻灯片的左右按钮样式，您可以使用 Swiper 提供的 navigation 参数来实现。您可以在初始化 Swiper 时指定 navigation.nextEl 和 navigation.prevEl 选项，以指定左右按钮的 HTML 元素或选择器。然后，您可以使用 CSS
如何在前端中加入免费google网页翻译功能
添加如下 js 脚本， 保存成 .js 文件，然后在页面中 </body> 结束前调用。 // 创建标签并设置CSS样式 var style = document.createElement('style'); style.innerHTML = ` #translator-contai