0

我有几个大型 CSS 文件，有时可能需要几分钟才能找到要更改的正确选择器。如果有一个不错的 CSS 的 ModX 编辑器，我会很高兴，但我一直找不到。只要我的网站仍然呈现，我愿意将我的文件分成几部分。我可以这样做吗？怎么做？如果有一个不错的编辑器（插件？），我在哪里可以找到一个？

4

1 回答 1

5

我想真正的问题是你可以接受什么样的零件。如果您遵循这个问题，您可以开始允许 ModX 管理您的 CSS 的过程。一旦发生这种情况，您的选择就会大大增加。根据您对 ModX 的专业水平，您的 CSS 编辑将变得更容易且耗时更少。这个答案将非常简单，因为它将简单地展示如何将给定的选择器添加为资源。不过，可以从这里直观地了解其他进一步的发展。

CSS 作为资源

一旦您的 CSS 被作为资源管理（大约需要 15 分钟），您就可以使用模板、模板变量、块、片段和插件。这实际上非常惊人，但设置可能有点痛苦。你基本上会投入一些时间来节省未来的大量时间。下一个合乎逻辑的步骤是相应地拆分您的选择器，但您不想破坏当前的工作方式。对 getResources 插件有一个流畅的理解对于进一步的开发至关重要。

怎么做：

1.创建一个新块

单击元素选项卡，然后单击“新建块”。将其命名为“css 选择器”。将内容设置为：

[[+pagetitle]] {[[+content]]}

就这么简单。不要忘记点击“保存”！这将允许您将 Selector 设置为资源。它将使用选择器的标题和规则的内容。你可以忘记再使用那些牙套了。从现在开始，您的新块将处理这些。

2.调整你的模板

现在，我们只需要让模板相信它现在可以阅读部分内容，并且不要忘记整体。打开您的 CSS 样式表模板（说明[[*content]]其内容的模板）。调整代码，使其具有以下内容：

[[!getResources?
  &parent=`[[*id]]`
  &depth=`1`
  &tpl=`css-selector`
  &includeContent=`1`
  &sortby=`menuindex`
  &sortdir=`ASC`
  &limit=`99`
]]
[[*content]]

再次单击“保存”。让我快速解释一下模板。如果您有孩子，他们将根据他们的菜单索引首先呈现。此外，它将在之后呈现非子文档的内容。这将允许您只为最重要的选择器创建新资源，同时将永远不会更改的内容保留在主资源中。

3.创建一个新模板

这样您的选择器就不会做任何有趣的事情而只是渲染内容。创建一个名为“CSS 选择器”的新模板。将其内容设置为：

[[*content]]

4.创建一个新资源

创建一个新资源。将标题设置为要管理的 css 语句的选择器。然后将内容设置为不带大括号的规则。例如，如果您的 css 语句是：div#header .logo {border:0;}，您将设置标题div#header .logo和内容border:0;。将资源别名设置为您想要的任何内容。我为每个人使用数字。将模板设置为新的“CSS 选择器”。重要现在，将父文档设置为您的样式表。单击保存。

5. 测试样式表

首先，右键单击您的新资源并选择“查看资源”。这将确保语句正确呈现。它应该简单地以 CSS 格式说明您的规则。

接下来，右键单击样式表资源并选择“查看资源”。您应该会在顶部看到选择器，并在其下方看到所有其他规则。

最后的考虑

观察

  • 您会注意到您的子资源不必更改为“文档类型”的“CSS”。只有父样式表必须是。随着您对 ModX 的专业知识的增长，这允许一些整洁的东西。

  • 您可以通过简单地更改它们的菜单索引来更改规则的顺序。

  • 可以通过这种方式完成的规则​​数量取决于模板&limit中语句中的变量。适用于每个样式表，因此在此示例中，每个样式表有 99 个语句，它们可能是单独的资源。getResources&limit

服务器负载注意事项

随着资源数量的增加，这将给服务器带来负载。对于开发，请在 getResources 语句中保留“不缓存标志”（！）。完成后，删除感叹号并将其全部缓存。这将节省大量负载。

进一步的发展

  • 我添加了一个 isEnabled 模板变量，以便我可以随意打开和关闭每个规则。
  • 您可能会开始使用 FormIt 在前端管理您的 CSS。
  • 自定义管理器页面甚至可能是您更好的选择。
  • 进一步的抽象可能允许您为更进一步的组织创建语句分组。
于 2012-06-15T22:58:39.577 回答