如何在 Sitecore 中编辑 CSS 类

Question

我们已经收到团队的 HTML 设计，现在正在集成到 Sitecore 8 项目 (ASP.NET)。

我看到重要元素的图像在 css class 中声明。

例如：页面中有两种类型的 header 部分 - 长和短，它们的 class 是：

.title-long{
  background:url('/images/bg-long.jpg');
  width:700px;
  height:80px;  
}

.title-short{
  background:url('/images/bg-short.jpg');
  width:300px;
  height:50px;  
}

这就是它们的使用方式。

<h3 class=".title-long">A very long header</h3>
<h3 class=".title-short">short header</h3>

如果 header 标题过长，则使用 title-long class。

内容作者 (CA) 应该能够编辑 header 以及图像。我不知道如何制作图像（引用自 css class），可在体验编辑器中编辑。

因此，我将通知 CA 只能从内容编辑器中编辑此图像，然后我的代码将是：

ascx

<h2 id="sectionHeader" runat="server" class="title-long">
  <sc:Text ID="txtHeader" runat="server" Field="Section Header" />      
</h2>

ascx.cs

//add background image to header 
sectionHeader.Style.Add("background", "url(" + MediaManager.GetMediaUrl(headerImage.MediaItem) + ") no-repeat center center");

虽然这种方法很好用，但问题是。

即使 CA 上传 'short Image'，class 也永远是 title-long。

这种情况的标准方法是什么，即 CA 应该有良好的编辑体验，同时更改 css class.

中的图像

Answer 1

在模板（或数据源模板）上创建 background image 和 css class 字段。
对 background image 和 css class 字段使用 Edit Frame。

就是这样。作者将能够直接从体验编辑器中编辑它们。

在此处了解有关编辑框架的更多信息：Using Sitecore EditFrame in PageEdit or here: https://www.google.com/search?q=sitecore+edit+frame。

Answer 2

这种元内容的最佳位置始终存在。可以说它不是真正的 'content'，而是更多关于如何呈现组件和内容的配置。

基于此，另一种选择是使用渲染参数。这些使您能够定义允许配置组件的字段，并且可以通过内容编辑器或体验编辑器进行配置。有关详细信息，请查看 https://www.captechconsulting.com/blogs/sitecore-rendering-parameters-part-1--how-and-why-to-use-rendering-parameters

如何在 Sitecore 中编辑 CSS 类

How to edit CSS classes in Sitecore

sitecore

sitecore8