系统模板语法
前言
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> <!
结构化数据处理方案
外观主题开发
如何给文章添加 table of content ?
添加以下代码 保存为 /module/_table-of-content.cshtml @model Param<List<ContentNavModel>> @if (Model.Param1.Count > 0) { <nav class="widget-na
留言模块功能集成
留言提交按钮参数说明 属性名 默认属性值 必须 属性说明 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 改为新的后台登录地址。
前端开发
bootstrap 5.0 弹性盒子布局 - 动态切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
如何设置自动识别浏览器语言,跳转到相关版本的网站?
当需要根据浏览器的语言偏好进行跳转时,可以使用 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