Question

我有几个大的CSS文件并且进行更改有时可能需要几分钟才能找到正确的选择器进行更改。我想它如果有一个很好的ModX编辑器的CSS，但我找不到一个。只要我的网站仍然呈现，我愿意满足于将我的文件分成几部分。我可以这样做吗？如果有一个漂亮的编辑器（插件？），我在哪里可以找到一个？

Answer 1

我想真正的问题是你可以接受哪种零件。如果您按照this question进行操作，则可以开始允许ModX管理您的CSS。一旦发生这种情况，您的选择就会大打开根据您对ModX的专业水平，您的CSS编辑将变得更容易，更省时。这个答案非常简单，因为它将简单地显示如何将给定的选择器添加为资源。但是，可以从这里直观地了解其他进一步的发展。

CSS作为资源

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

怎么做：

1。创建一个新块

单击Elements选项卡，然后单击“New Chunk”。将其命名为“css-selector”。将内容设置为：

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

就这么简单。别忘了点击“保存”！这将允许您将选择器设置为资源。它将使用选择器的标题和规则的内容。您可以忘记使用这些大括号了。你的新组块将从现在起处理它们。

2。调整模板

现在，我们必须让模板相信它知道如何阅读部件，以及不忘记整体。打开CSS样式表模板（为其内容显示[[*content]]的模板）。调整代码，使其具有以下内容：

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

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

3。创建一个新模板

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

[[*content]]

4。创建新资源

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

5。测试样式表

首先，右键单击新资源，然后选择“查看资源”。这只会确保语句正确呈现。它应该简单地用CSS格式说明你的规则。

接下来，右键单击样式表资源，然后选择“查看资源”。你应该看到顶部的选择器和它下面的所有其他规则。

最终注意事项

观察

您会注意到您的子资源不必更改为文档类型的“CSS”。只有父样式表必须是。随着您对ModX的专业知识的增长，这可以提供一些巧妙的东西。
您只需更改规则的菜单索引即可更改规则的顺序。
可以通过这种方式完成的规则数量取决于模板中&limit语句中的getResources变量。 &limit适用于每个样式表，因此在此示例中，每个样式表有99个语句，这些语句可能是单独的资源。

关于服务器负载的说明

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

进一步发展

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

我的CSS非常庞大。使用ModX，我可以将CSS分成几部分吗？

1 个答案: