Как заставить очистить CSS-кеш на стороне клиента?

Предположим, что мы изменили много функций для модуля (шаблоны, макеты, CSS) и собираемся перенести эти изменения на рабочий сайт, но многие клиенты кэшировали CSS в своих браузерах. Итак, вот вопрос. Как принудительно очистить CSS-кеш клиента и избежать переименования файла ( styles.css-> styles-v2.css). Есть один логический способ, но он не работает в Magento, потому что он проверяет файл, существующий (как этот метод работает для файлов JS), см. Ниже:

<action method="addCss">
    <stylesheet>css/styles.css?1</stylesheet>
</action>  

Есть идеи?

Один из способов справиться с этим - включить слияние CSS. Затем вы можете просто очистить кеш, и новый объединенный файл будет создан с новым именем файла.

System -> Configuration -> Developer -> CSS settings -> Merge CSS Files

Насколько я знаю, хеш-код объединенного CSS-файла остается прежним, даже если основные файлы изменились - только если новые файлы добавляются в набор объединенных файлов, хеш-код изменяется. - @Alex

Другой способ справиться с этим вместо того, чтобы использовать layout.xml,

просто положите их в свой page/html/head.phtml

Или создайте блок, содержащий <style>тег с номером версии, и поместите его в XML-файл в своей голове, чтобы вы могли загружать его только на определенных страницах и при этом придерживаться макетов XML.

Вы можете использовать модуль OpenSource Aoe_JsCssTstamp, который добавляет информацию о метках времени в объединенные файлы CSS. Временные метки для простых (не объединенных) CSS-файлов пока не поддерживаются, но это будет легко реализовать.

На github Magento Cachebuster есть бесплатное расширение, которое делает именно это. Это ре

https://github.com/gknoppe-guidance/magento-cachebuster

Модуль обеспечивает очистку кэша, автоматически изменяя URI, созданный Magento для> статических файлов, добавляя временную метку файла к имени файла:

До: http://www.example.com/js/varien/js.js После: http://www.example.com/js/varien/js.1324429472.js

Для этого я использую свое собственное расширение Speedster Advanced. Но основной принцип заключается в том, что имя объединенных файлов CSS и JS включает метку времени последнего измененного файла - см Mage_Core_Model_Design_Package::getMergedCssUrl(). Каждый раз, когда вы редактируете любой из CSS-файлов, создается новое имя файла, в результате чего браузеры запрашивают новый файл вместо повторного использования кэшированной версии. Поскольку ваш головной блок может быть кэширован, необходимо обновить кеш Magento.

Я также реализовал кэш-бастер для CSS-файлов. Лучший способ, я думаю, состоит в том, чтобы расширить Mage_Page_Block_Html_Head и перегрузить функцию ниже и обновить массив $ skinItems с вашими желаемыми изменениями.

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{
    $designPackage = Mage::getDesign();
    //$skinItems: contains all css
    foreach ($skinItems as $params => $rows) {
        foreach ($rows as $key=>$name) {
            $file = $designPackage->getFilename($name, array('_type' => 'skin'));
            $skinItems[$params][$key] = $name . "?fmt=" . filemtime($file);
        }
    }
    return parent::_prepareStaticAndSkinElements($format, $staticItems, $skinItems, $mergeCallback);

}

Получил вдохновение отсюда. Источник

Существует простой, но громоздкий обходной путь, который не требует никаких плагинов и просто использует встроенные возможности Magento - полезно, если вам просто нужно быстро сделать это на существующем сайте, не желая рисковать установкой дополнительного кода.

Идея состоит в том, что вы можете использовать объединенную систему CSS для генерации имени файла очистки кэша.

Поскольку имя объединенного файла CSS является хэшем всех файлов, которые объединяются вместе, вы просто добавляете дополнительный пустой файл CSS в тему с отметкой даты для имени.

Так:

1. Включите Слияние CSS-файлов в Конфигурация> Дополнительно> Разработчик
2. В макетах вашей темы найдите, где вы добавляете CSS-файлы в заголовок (обычно page.xml) и добавляете дополнительный файл таблицы стилей, называйте его как хотите, если имя уникально, например <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
3. В вашей папке CSS скина создайте новый CSS-файл с таким именем, для содержимого файла я просто оставил комментарий, в котором говорится, для чего этот файл

Теперь нажмите «live» и очистите кэш magento, объединенный css-файл теперь будет иметь другое имя, и ваши кеши будут уничтожены!

Это громоздко, так как каждый раз, когда вы хотите разрушить кеш, вам нужно изменить это имя файла, но для этого не требуется ничего, кроме встроенных возможностей Magento, так что это удобно, если вы застряли и нуждаетесь в быстром исправлении!

=> Вместо использования этого кода:

<action method="addCss">
    <stylesheet>css/styles.css?1</stylesheet>
</action>

=> Попробуйте использовать этот код:

<reference name="head">
    <block type="core/text" name="foocss">
        <action method="setText">
            <css><![CDATA[<link rel="stylesheet" type="text/css" href="foo.css?1" media="all" />]]></css>
        </action>
    </block>
</reference>

Но это не очень приятно ...

Я нашел модуль, который добавит строку запроса в конец всех CSS и JS в макетах XML. Строка запроса настраивается администратором.

https://github.com/mklooss/Loewenstark_Head

Основная идея состоит в том, чтобы переопределить, _prepareStaticAndSkinElementsчтобы включить строку запроса, как это сделано в модуле, показанном ниже.

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{
    $version = Mage::getStoreConfig("design/head/meta_version_tag");
    $format = sprintf($format, "%s?v{$version}", "%s");
    return parent::_prepareStaticAndSkinElements($format, $staticItems, $skinItems, $mergeCallback);
}

Если я понимаю предложенное решение в вашем вопросе, вы можете сделать это с небольшим изменением основного файла (на самом деле не редактируйте основной файл ):

Маг / Страница / блок / HTML / Head.php

Добавьте что-то вроде? V = 1 в строку 198, чтобы все файлы CSS были добавлены:

$html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?v=1"%s />' . "\n",

Я думаю, что Fooman Speedster Advanced ( http://www.magentocommerce.com/magento-connect/fooman-speedsteradvanced-4030.html ) может быть решением:

«Полностью автоматизированный после установки, с автоматическим контролем версий при обновлении файлов Javascript / CSS»

Я построил бесплатный модуль для этого:

http://www.magentocommerce.com/magento-connect/frontend-flush-2048.html

Пожалуйста, дайте мне знать, если он не работает должным образом, но я построил его так, чтобы объединенные файлы js и css имели другой хэш, если содержимое одного из объединенных файлов изменилось. По умолчанию Magento изменяет хеш объединенного файла, только если имя файла одного из включенных файлов изменилось.

ОБНОВИТЬ

Я также сделал бесплатный и простой модуль минификации для тех, кто в это верит.

http://www.magentocommerce.com/magento-connect/minify-7771.html

Есть действительно хороший модуль, созданный Фабрицио Бранкой, который делает именно то, что вас интересует. Он называется AOE_JsCSSTStamp . Что оно делает? Он добавляет метку времени к ресурсам CSS и JS. Когда вы очищаете кеш CSS / JS, метки времени воссоздаются.

Браузер увидит другое имя файла - поэтому он снова загрузит ресурсы и получит самое свежее, а не кэшированное в браузере.

Просто отредактируйте метод getCssJsHtml в Mage_Page_Block_Html_Head , добавьте такую ​​строку в течение нескольких дней после редактирования css, и это все ... это просто работает

// static and skin css
        $html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?foo=WHAT_YOU_WANT_HERE"%s />' . "\n",
            empty($items['js_css']) ? [] : $items['js_css'],
            empty($items['skin_css']) ? [] : $items['skin_css'],
            $shouldMergeCss ? [Mage::getDesign(), 'getMergedCssUrl'] : null
        );

Несколько лет спустя и, не найдя ни одного полезного расширения, которое не объединит файлы и является простым, я создал свое собственное. Основная идея заключается в том, что после очистки кеша будет обновляться отметка времени. Другими словами - когда вы что-то измените css/js, просто очистите кеш, и отметка времени будет обновлена.

Исходный код здесь -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Работает на версии 1.9+ . Не уверен насчет старых версий, но, скорее всего, должно работать.

Сделайте копию своей темы с новым именем (themev2) - и скин, и приложение / дизайн, и т. Д. Затем выберите новую тему в админке.