在bluetronix CMS中嵌入自定义JavaScript和CSS文件
在本教程中，你将把自定义的JavaScript文件和样式表嵌入到你的网站布局中。你将了解_own规则，并学习在更改时如何使用文件版本控制。
前提条件和目标
本教程需要您拥有对bluetronix CMS的开发者访问权限，并且应了解布局和开发者文件夹的结构。您将学习如何将自定义JavaScript和CSS文件附加到现有CMS文件中，而不改变原始系统文件。
我们使用在屏幕截图中显示的文件BxHeadScript_own.js和BxStyle_own.css。这两个文件在布局中明确包含，以便CMS在加载网页时考虑到它们。
1. 打开布局
在CMS中打开布局部分，选择布局 - HTML。然后打开您想要嵌入JavaScript和CSS文件的布局。在这个例子中，我们使用标准布局。
在布局定义中，您可以找到已有的CMS文件的引用，例如BxHeadScript.js和BxStyle.css。您可以直接在旁边添加自己的额外文件。
2. 在文件管理器中创建自定义JavaScript文件
打开文件管理器，切换到红色标记的系统文件夹bx_script。在这里，您可以找到bluetronix CMS的核心JavaScript文件以及可能的语言相关变体。
在此创建自己的文件BxHeadScript_own.js，或者如果它已经存在，则选择它。您可以复用一个现有的合适文件作为模板。
选择编辑，以在文本编辑器中打开您自己的文件的JavaScript代码。
在所示的示例中，文件包含用于选择深色模式和浅色模式的自定义JavaScript代码。您可以在文本编辑器中维护您的项目特定JavaScript代码，然后保存。
请不要更改原始的BxHeadScript.js以用于自定义扩展。在bx_系统文件夹中的文件在CMS更新时可能会被覆盖。请在该文件夹中将自定义文件标记为_own。
3. 在布局中嵌入自定义JavaScript文件
返回到布局 - HTML。在现有的CMS文件旁边添加您的自定义JavaScript文件。如果您的脚本需要早期加载，您可以像屏幕截图中所示在现有的Head脚本后面插入。
<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>
附加的行会加载您自己的JavaScript代码。原始的BxHeadScript.js保持不变。自定义文件的文件路径和名称必须与文件管理器中的一致。
4. 在文件管理器中创建自定义CSS文件
在文件管理器中打开系统文件夹bx_style。这里有核心样式表BxStyle.css等。对于自定义调整，我们使用一个名为BxStyle_own.css的单独文件。
创建文件BxStyle_own.css或打开现有的自定义文件。系统文件BxStyle.css将保持不变。
通过编辑，您可以在此文件中添加自定义CSS规则并保存。
5. 在布局中嵌入自定义CSS文件
再次打开布局 - HTML。在head部分，您在现有样式表之后添加自己的CSS文件。排列顺序很重要，如果自定义规则要覆盖标准格式化。
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">
标准CSS文件保持不变，而您在BxStyle_own.css中单独管理附加或不同的格式化。
6. 在头部或页面底部使用JavaScript
根据其任务，JavaScript文件可以在head部分或关闭的body标签之前的页面底部引入。所示的BxHeadScript_own.js会在头部加载。对于其他脚本，您也可以使用自己的项目文件夹，并在布局中稍后引入文件。
示例：从自己的文件夹中的附加文件位于页面底部：
<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>此示例显示一个附加文件。如果您想用自己的版本替换系统文件，必须在所选布局中有意识地调整相应的引入，并确保没有必要的CMS功能被丢失。
7. 区分系统文件夹和自己的项目文件夹
红色标记的bx_文件夹属于bluetronix CMS。在这些文件夹内的自定义文件必须标记为_own，以便在常规CMS更新时不被视为系统文件。
您也可以选择在自己创建的项目文件夹中保存自定义的JavaScript和CSS文件，而不使用bx_前缀，例如/script/或/my_scripts/。在那里不一定需要标记_own。但是您需要在布局定义中使用实际路径。
标记_own并不替代在布局中的引用：独立创建的文件仅在通过合适的script或link行引入时加载。
8. 自动文件版本控制
在显示的布局中，bluetronix CMS 使用标记 __FV_…__。通过此标记，CMS 可以根据修改日期附加版本参数。通过更改后，浏览器将加载当前的 JavaScript 或 CSS 文件，而不是继续使用旧的缓存版本。
例如，像/script/MyScript.js这样的原始路径在处理后可以添加一个版本参数。你无需在相应引用的文件中手动更新每个布局的版本号。
9. 保存和检查更改
首先保存自己的JavaScript和CSS文件，然后保存编辑后的布局。刷新你的网页，检查你的JavaScript函数是否执行，以及自己的CSS规则是否应用。
如果文件未加载，首先检查文件名、大小写、文件夹路径和在布局中的引用。如果使用多个布局，请确认你已编辑了与相关页面分配的布局。
总结
对于自己创建的扩展，例如在bx_script文件夹中创建BxHeadScript_own.js，在bx_style文件夹中创建BxStyle_own.css。然后，将这两个文件添加到Layout - HTML中，除了原始的CMS文件。这将保持标准文件不变，同时使你可以独立管理项目特定的JavaScript和CSS代码。
常见问题
客户常问我们的问题
我需要开发者权限才能引入自己的JavaScript和CSS文件吗？
是的。该教程面向具有bluetronix CMS的布局定义和开发者文件夹访问权限的开发者。
我在哪里可以找到JavaScript和CSS的引用？
打开Layout并选择Layout - HTML。在那里你可以补充所需布局中的引用。
我在哪里存储自己的JavaScript文件？
在所示的示例中，你在bx_script文件夹中创建BxHeadScript_own.js，并将其与现有的BxHeadScript.js一起引入到布局中。
我在哪里存储自己的CSS文件？
在所示的示例中，自己的文件BxStyle_own.css位于bx_style文件夹中。在布局中，它将被引入到现有样式表之后。
为什么自己的文件名中需要包含_system文件夹中的_own？
红色标记的bx_系统文件夹可能在更新时被覆盖。通过_own，你可以标记自己的项目特定文件。
_own文件会在创建后自动加载吗？
不。你必须在所需布局中使用适当的script或link引用来补充自己的JavaScript或CSS文件。
我可以使用自己的文件夹而不是bx_-系统文件夹吗？
可以。在一个不带bx_前缀的自定义项目文件夹中，_own不是必需的。在布局中使用实际文件路径即可。
我应该在标准文件之前还是之后加载自己的CSS文件？
在示例中，BxStyle_own.css在BxStyle.css之后引入。因此，当相同的特异性时，自定义规则可以覆盖之前加载的标准规则。
文件路径中的标记 __FV_…__ 有什么用途？
这使得bluetronix CMS能添加文件版本参数，以便浏览器在更改后加载当前文件。
如果我的文件未生效，我应该检查什么？
检查文件名、大小写、指定路径以及正确布局的嵌入和选择。