Question

我在使用ModX时遇到了巨大的困难。如果只上传一次所有内容而忘了它，那就太好了，但是对不是资源的CSS文件进行更改似乎绝对是一场噩梦。如果CSS是从文件加载并缓存在ModX内的，那么摆脱它似乎是不可能的。对此没有任何文档，我已经看到了一些有关通过docs管理CSS的主题，我想尝试一下，但是我无法重新开始。

编辑：链接到线程

我尝试清除缓存，删除缓存文件夹，删除css文件，然后删除并清除缓存（然后我进行了测试，以查看css实际上是否已删除但不加载，即使它不是-从我可以看到的地方存在

我的问题是：这是怎么回事？为什么无法正确清除缓存？这是错误吗？我是否缺少ModX的基础知识？如何在不重新安装ModX的情况下重新开始？我应该将CSS放在文档或代码段中吗？

不，我不想使用Sass或cssSweet。请只是无聊的普通CSS。我不会构建下一个Facebook，只是想使用它来简化客户端的后端部署和内容管理。

我的标题是一个名为“ header”的块，如下所示。（注意：找到了CSS，初始加载没有问题。此后，我已经完全删除了CSS文件，清除了缓存并删除了缓存文件夹，CSS仍然以某种方式加载）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">

<title></title>

<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link title="timeline-styles" rel="stylesheet" href="assets/timeline/css/timeline.css">
<link rel="stylesheet" href="assets/lightbox/dist/css/lightbox.css">

<link rel="stylesheet" href="assets/fonts/Southampton.ttf">
<link rel="stylesheet" href="assets/css/style.css">

</head>
<body id="section-body">

我的主页是一个模板，如下所示：

[[$header]]
[[$navbar]]

<div class="container">

  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <section id="section-banner" class="parallax">
        <img id="welcome-banner-words" src="images/web_ready/welcome_banner_words.png" class="w-100" alt="">
      </section>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <section id="section-timeline" class="w-100 h-100">
        [[$timeline]]  
      </section>
    </div>
  </div>

 <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div id="section-gallery-start" class="divider"></div>       
      <section id="section-gallery" class="w-100">
        <header id="header-gallery">Party Photos!!!</header>
        <hr class="horizontal-row-style">
        <p class="para-gallery">
Please return to this section after the party to see the photos</p>
        <!--[[$gallery]]--> 
      </section>
    </div>
  </div>

 <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div id="section-special-start" class="divider"></div>       
      <section id="section-special" class="w-100">
       <section id="section-special-intro-blurb" class="w-100 h-100">
         <header id="header-special-intro-blurb">Special Thanks</header>
         <hr class="horizontal-row-style">
         <p class="para-special-intro-blurb">
</p>
      <hr class="horizontal-row-style">
      <p class="para-special-intro-blurb">
</p>
<p class="para-special-intro-blurb">Marnie Nana and Grandma Broome</p>
<p class="para-special-intro-blurb"></p>
      </section>
      [[$special_thanks]]
      </section>
    </div>
  </div>

</div>

[[$footer]]

Answer 1

在处理浏览器的缓存时，不能确定查看者是否正在获取构成他们正在查看的页面的文件的最新副本。因此，通过在级联样式表中附加 GET 值，可以使浏览器认为样式表是动态的，从而在每次修改日期更改时都重新加载文件。

以下是我想出的一种解决方案，可以解决这种小麻烦。

lastModified MODx Extra

这是我创建的代码段，您可以通过程序包管理器下载该代码段。基本上，它将UNIX时间戳记添加到您不想缓存的文件的路径的末尾。

Answer 2

我注释掉了指向样式表的链接，然后保存了我的标题块，清除了缓存，然后再次保存了块。这似乎奏效了。

但是，这很hacky。

对于其他相关问题：

经过一些尝试，我发现实现CSS的最简单方法是将其放在称为“ css_stylesheet”的块中，确保选中“保存时清除缓存”复选框（默认情况下）因此，如果有错误，我们可以在实时设置中使用代码，然后像这样在标题块上引用样式标签中的块：

<style>
    [[$css_stylesheet]]
</style>

我想这是可以的，一般来说，避免过多嵌套块被认为是最佳实践，但是它只有一个深度，并且在换出php include时我们使用相同的语法，所以这很好。没关系。

但是，如果在文档中将此考虑因素变得更加明显，那将是很好的。在将站点从php基础转换为ModX时，应该有一些注意事项，应突出显示应作为静态资源（例如，bootstrap，jquery等）包含并且应作为块（自定义css，自定义js等）包含的文档类型。）

Answer 3

伴侣希望不晚，一个简单的解决方案是使用MinifyX处理和压缩CSS，每次清除缓存时，它都会使用新名称创建一个新的压缩文件，这意味着无法将您的CSS路径保存在内存中。干杯。

Answer 4

打破缓存的另一种方法是在CSS网址之后添加一个变量。

<link rel="stylesheet" href="assets/css/style.css?v1">

每次保存文件时，都必须更改该值，这是不可持续的，但是它会破坏CSS缓存，以便您查看工作。

不过，实际上，除了清除浏览器缓存外，您无需执行任何其他操作。我知道有些浏览器确实很喜欢保留缓存。

如何在ModX中管理CSS，更改文件系统中的CSS无效，清除缓存无效

4 个答案: