Blogger：在布局页面上标记部分答案

【问题标题】：Blogger: Labeling Sections on the Layout PageBlogger：在布局页面上标记部分
【发布时间】：2013-05-14 15:19:16
【问题描述】：

我为 Blogger 创建了一个响应式主题。因此，由于布局页面显示的是实际布局的反映，但不使用媒体查询。管理区域中的所有内容都以 100% 宽度垂直排列（这是预期的）。

我的问题：有没有办法可以以某种方式标记这些部分，以便标签显示在布局页面上，但在查看网站时不显示？目前在查看布局页面时，有 8 个部分说“添加小工具”，用户无法知道哪个部分是什么。

【问题讨论】：

标签： blogger

【解决方案1】：

是的！您可以更改与布局页面（管理页面）的外观和样式（包括标题）有关的任何内容，而不会影响实际站点的外观和样式。

回答您关于布局页面标题的问题。例如，您有一个 TEXT 小部件，并且您想将“TEXT”的标题更改为布局中的实际标题，而不是实际站点中的标题：

“跳转到小部件”中列出的所有小部件都是您希望使用的 ID，具体取决于您要解决的问题。

您可以使用相同的方法在您的 CSS 代码之前使用代码“#layout”来更改布局部分中的任何内容并为其设置样式。比如说，你调整了标题的高度，它自动调整了布局部分（管理部分），但它导致标题部分和布局中的博客部分之间的空间太大。

这样做：

    #header {
    height:147px;
    }

    #layout #header {
    height: 0px !important;
    }

要调整整个布局，例如宽度，使用：

     body #layout {
     width: 700px !important; 
     }

如果您没有立即在布局页面上看到更改，则在保存模板后，在布局页面上单击刷新按钮。

编辑：（测试答案的快照）

您可以看到小部件的标题显示在布局页面上，而不是实际站点上：

【讨论】：

这个方法好像不行。我已经尝试过。例如，我将 Flexslider 硬编码到模板中，并希望将其隐藏在管理部分中，以免破坏布局。所以我使用了：#layout .flexslider {display: none}; ，但什么都没有改变。我检查了 console.log 并没有被应用。
您会在布局页面（管理页面）上找到的唯一内容是小部件。小部件是显示在布局中的框。您可以通过以下方式找到所有小部件：“模板”>“跳转到小部件”>
如果您没有在小部件列表中看到它：“跳转到小部件”而不是它不在布局中。可能您的 Flexslider 位于一个名为“HTML/Javascript”的小部件中，该小部件可以识别为“HTML1”或“HTML2”等...您必须使用滑块所在的小部件 ID。
是的，我在为您发布答案之前对其进行了测试。小部件中的类指的是小部件的类型，小部件中的 ID 指的是特定的小部件。这是非常基本的 Blogger 内容。
我是个傻瓜。我终于用你的方法让它工作了。我不知道之前发生了什么，我只能猜测我的浏览器捕获需要刷新什么的。将正确答案更改为此..

【解决方案2】：

无法设置 Blogger 布局页面的样式，因为它会剥离您添加到模板的样式和内容。

但是您绝对可以找到解决方法来完成这项工作。由于它是布局面板，因此唯一会使用它的将是博客管理员。安装一些浏览器扩展，允许您将自定义 CSS 添加到任何网页，并添加一些特定于博客布局页面的 CSS 规则。

我主要使用 Chrome，我是这样做的。

安装了 Chrome 扩展程序 - https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
现在添加 CSS 来自定义布局页面。我的博客页脚有一个 b:section，id 为 footer-3 。所以我加了

#footer-3:before{content: "footer";}

作为 CSS，我添加了一条规则，仅在以 http://www.blogger.com/display?blogID=11 开头的 URL 上使用 CSS（11 应该是博客 ID）

现在，当我打开布局页面时，它在页脚部分上方添加了文本“页脚”。您也可以找到 FireFox 的类似扩展和解决方法。

但如果您尝试将此功能编码到模板中，它将无济于事

【讨论】：

【解决方案3】：

admin section 通常称为Layout。

您从哪个设备查看布局。如果您从浏览器尺寸为 1024 x 768 或更大的计算机打开博客网站，则布局应显示为实际网站上的样子，not 单行100% 宽度。即使我使用响应式博客模板，也没有遇到这个问题。

回到主要问题，没有出路。已经存在的小部件的标题标签应明确提示正在考虑哪个位置。

【讨论】：

我不知道我为什么这么说。实际上我也为它设计了一个自定义主页，主页上没有列。无论如何，这不是问题。我只是在寻找一些方法来标记这些部分。
另外，我添加了几个部分（如广告展示位置）。小部件的类型不会告诉您哪些部分是什么。
很遗憾，只能看到标题标签。
我不认为你明白我在问什么。不是小部件，而是部分。想象一个没有小部件和几个部分的管理区域。我试图弄清楚是否有办法以某种方式标记这些部分。我不能使用 CSS，因为管理区域在 iframe 中...
请你给我一个管理区域/部分的屏幕截图:)

【解决方案4】：

多年后，正确答案现在已经过时，不再有效。然而，谷歌添加了对命名部分的支持，只需将属性：name="NameOFSectionHere" 添加到小部件部分。

在“admin > 布局”中将标题部分命名为“新标题”的完整示例：

<b:section id='header' name='New Header' showaddelement='true'>

【讨论】：