DNN CE 9.8.0下2sxc版TimelineJS V2修改语言字体导致模块空白如何解决

操作前避坑提醒 #

之前改完出现模块空白、功能异常，本质是2sxc托管的TimelineJS不是独立裸装版本，所有资源加载、配置注入都走2sxc的视图渲染管道、DNN的静态资源校验逻辑，直接改TimelineJS核心源文件、硬编码引外部资源、随便改全局配置，很容易触发资源路径不匹配、配置结构被覆写、CSP拦截的问题，直接导致初始化失败模块全空。

语言修改正确路径 #

• 不要直接修改TimelineJS核心JS里的语言常量，也不要手动引入i18n语言包：2sxc封装版本会通过构造函数参数自动匹配加载对应语言的资源
• 进入2sxc对应模块的视图编辑界面，找到Razor视图里初始化TimelineJS的代码块，定位到传给TL.Timeline()构造函数的配置对象
• 在配置对象内部正确层级加入语言参数，比如需要中文就写lang: "zh-cn"；注意不要把lang参数放到2sxc外层的模块配置块里，层级放错会导致初始化参数解析失败

字体修改正确路径 #

• 不要直接修改TimelineJS自带的核心CSS文件，会触发DNN静态资源哈希校验不匹配，导致资源加载404；也不要全局加覆盖样式打乱原布局计算逻辑
• 直接在对应2sxc视图的自定义样式区（可以在视图Razor文件里嵌style块，也可以上传自定义CSS到2sxc资源目录），只针对字体属性做局部权重覆盖，不要改动定位、尺寸类样式：
  • 主容器字体：给.tl-timeline选择器配置目标font-family
  • 时间节点标题字体：给.tl-headline选择器配置目标font-family
  • 时间内容文本字体：给.tl-text选择器配置目标font-family
• 自定义字体文件一定要上传到本站点的资源目录，不要引用外站字体链接，不然会被DNN 9.8.0默认的CSP安全策略拦截，严重时会阻断整个模块的脚本执行导致空白

模块空白排查步骤 #

• 打开浏览器开发者控制台，先看JS报错类型：
  • 如果是tl is not defined类报错，说明手动引入的资源路径不匹配2sxc路由规则，把自定义资源路径换成2sxc资源面板生成的站内相对路径，不要硬编码根目录路径
  • 如果是配置解析类报错，说明修改的时候破坏了原初始化配置的语法结构（比如多写了逗号、漏了括号），直接用备份的原初始化代码，在正确的参数位置插入需要的配置项，不要整段重写配置
• 改完之后一定要清两层缓存：先清DNN主机设置里的静态资源缓存、页面模板缓存，再清2sxc对应应用的内部缓存，不要只清浏览器缓存，不然旧资源和配置会持续加载

内容的提问来源于stack exchange，提问作者rthoeni