Làm cách nào để buộc xóa bộ đệm CSS ở phía máy khách?

Giả sử rằng chúng tôi đã thay đổi rất nhiều chức năng cho mô-đun (mẫu, bố cục, CSS) và chúng tôi sẽ chuyển những thay đổi này sang trang sản xuất, nhưng rất nhiều khách hàng đã lưu CSS vào trình duyệt của họ. Vì vậy, đây là một câu hỏi. Cách buộc xóa bộ đệm CSS của máy khách và tránh đổi tên tệp ( styles.css-> styles-v2.css). Có một cách hợp lý nhưng nó không hoạt động trong Magento, vì nó kiểm tra tệp hiện có (bằng cách phương thức này hoạt động cho các tệp JS), xem bên dưới:

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

Có ý kiến ​​gì không?

Một cách để đối phó với điều này là cho phép hợp nhất CSS. Sau đó, bạn có thể xóa bộ nhớ cache và một tệp được hợp nhất mới sẽ được tạo bằng một tên tệp mới.

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

Theo tôi biết, mã băm của tệp CSS đã hợp nhất vẫn giữ nguyên ngay cả khi các tệp bên dưới thay đổi - chỉ khi các tệp mới được thêm vào tập hợp các tệp được hợp nhất, hàm băm thay đổi. - @Alex

Một cách khác để giải quyết vấn đề này là thay vì sử dụng layout.xml,

chỉ cần đặt chúng trong của bạn page/html/head.phtml

Hoặc tạo một khối chứa <style>thẻ có số phiên bản và đặt nó vào XML trong đầu để bạn có thể tải nó trên các trang cụ thể và vẫn tiếp tục sử dụng các bố cục XML.

Bạn có thể sử dụng Mô-đun OpenSource Aoe_JsCssTstamp để thêm thông tin dấu thời gian vào các tệp CSS được hợp nhất. Tuy nhiên, dấu thời gian cho các tệp CSS đơn giản (chưa hợp nhất) chưa được hỗ trợ nhưng điều này sẽ dễ thực hiện.

Có một phần mở rộng miễn phí trên github 'Magento Cachebuster' thực hiện chính xác điều này. Nó lại

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

Mô-đun cung cấp bộ nhớ đệm bằng cách tự động thay đổi URI được tạo bởi Magento cho> tệp tĩnh bằng cách thêm dấu thời gian của tệp vào tên tệp:

Trước: http://www.example.com/js/varien/js.js Sau: http://www.example.com/js/varien/js.1324429472.js

Tôi sử dụng tiện ích mở rộng Speedster Advanced của riêng tôi cho việc này. Nhưng nguyên tắc cơ bản là tên của các tệp css và js đã hợp nhất bao gồm dấu thời gian của tệp được sửa đổi cuối cùng - xem Mage_Core_Model_Design_Package::getMergedCssUrl(). Bất cứ khi nào bạn chỉnh sửa bất kỳ tệp css nào, tên tệp mới sẽ được tạo khiến trình duyệt yêu cầu tệp mới thay vì sử dụng lại phiên bản được lưu trong bộ nhớ cache. Vì khối đầu của bạn có thể được lưu trong bộ nhớ cache, nên cần phải làm mới bộ đệm Magento.

Tôi cũng đã thực hiện một buster cache cho các tập tin css. Cách tốt nhất tôi đoán là mở rộng Mage_Page_Block_Html_Head và vượt qua chức năng bên dưới và cập nhật mảng $ skinItems với các thay đổi mong muốn của bạn.

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);

}

Có cảm hứng từ đây. Nguồn

Có một cách giải quyết đơn giản nhưng cồng kềnh không yêu cầu bất kỳ plugin nào và chỉ sử dụng các khả năng Magento tích hợp - hữu ích nếu bạn chỉ cần nhanh chóng làm điều đó trên một trang web hiện có mà không muốn mạo hiểm cài đặt thêm mã.

Ý tưởng là bạn có thể sử dụng hệ thống CSS được hợp nhất để tạo một tên tệp bộ nhớ cache.

Vì tên tệp CSS được hợp nhất là hàm băm của tất cả các tệp được hợp nhất với nhau, bạn chỉ cần thêm một tệp css trống vào chủ đề bằng dấu ngày cho tên.

Vì thế:

1. Bật Hợp nhất các tệp CSS trong Cấu hình> Nâng cao> Nhà phát triển
2. Trong bố cục chủ đề của bạn, hãy tìm nơi bạn thêm tệp CSS vào phần đầu (thường là page.xml) và thêm tệp biểu định kiểu bổ sung, gọi nó là bất cứ thứ gì bạn muốn miễn là tên đó là duy nhất, ví dụ: <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
3. Trong thư mục CSS skin của bạn tạo một tệp css mới với tên đó, đối với nội dung tệp tôi chỉ cần đặt một nhận xét cho biết tệp đó dùng để làm gì

Bây giờ hãy đẩy trực tiếp và xóa bộ đệm magento, tệp css đã hợp nhất sẽ có một tên khác và bộ nhớ cache của bạn sẽ bị lỗi!

Thật cồng kềnh vì mỗi lần bạn muốn phá bộ nhớ cache, bạn cần thay đổi tên tệp đó, nhưng nó không đòi hỏi gì ngoài khả năng của Magento, vì vậy thật tiện lợi nếu bạn thấy mình bị kẹt và cần sửa chữa nhanh!

=> Thay vì sử dụng mã này:

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

=> Hãy thử sử dụng mã này:

<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>

Nhưng nó không đẹp lắm ...

Tôi đã tìm thấy một mô-đun sẽ nối một chuỗi truy vấn vào cuối của tất cả CSS và JS trong bố cục xml. Chuỗi truy vấn có thể cấu hình từ quản trị viên.

https://github.com/mklooss/Loewenstark_Head

Ý tưởng cơ bản là ghi đè _prepareStaticAndSkinElementsđể bao gồm một chuỗi truy vấn, như được thực hiện trong mô-đun, được hiển thị bên dưới.

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);
}

Nếu tôi hiểu giải pháp được đề xuất trong câu hỏi của bạn, bạn có thể thực hiện điều đó với một chút sửa đổi thành tệp lõi ( không thực sự chỉnh sửa tệp lõi ):

Pháp sư / Trang / Khối / Html / Head.php

Thêm một cái gì đó như? V = 1 vào dòng 198 để tất cả các tệp css có phần này được nối thêm:

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

Tôi nghĩ Fooman Speedster Advanced ( http: //www.magentoc Commerce.com/magento-connect/fooman-speedsteradvified-4030.html ) có thể là một giải pháp:

"Hoàn toàn tự động sau khi được cài đặt, với phiên bản tự động khi các tệp Javascript / CSS được cập nhật"

Tôi đã xây dựng một mô-đun miễn phí cho việc này:

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

Vui lòng cho tôi biết nếu nó không hoạt động như mong đợi nhưng tôi đã xây dựng nó để các tệp js và css kết hợp sẽ có hàm băm khác nếu nội dung của một trong các tệp được nối đã thay đổi. Theo mặc định, Magento chỉ thay đổi hàm băm của tệp kết hợp nếu tên tệp của một trong các tệp được bao gồm đã thay đổi.

CẬP NHẬT

Tôi cũng đã tạo ra một mô-đun minify miễn phí và đơn giản cho những người bạn tin vào nó.

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

Có một mô-đun thực sự đẹp được tạo bởi Fabrizio Branca, chính xác là thứ mà bạn quan tâm. Nó được gọi là AOE_JsCSSTStamp . Những gì nó làm? Nó thêm dấu thời gian cho cả tài nguyên CSS và JS. Khi bạn xóa bộ đệm CSS / JS thì dấu thời gian được tạo lại.

Trình duyệt sẽ thấy tên tệp khác nhau - đó là lý do tại sao nó sẽ tải lại tài nguyên một lần nữa và được phục vụ với cái mới nhất thay vì được lưu trong bộ nhớ cache trong trình duyệt.

Chỉ cần chỉnh sửa phương thức getCssJsHtml trong Mage_Page_Block_Html_Head , thêm một chuỗi như thế này trong vài ngày sau khi chỉnh sửa css và tất cả ... nó chỉ hoạt động

// 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
        );

Vài năm sau và không tìm thấy bất kỳ tiện ích mở rộng hữu ích nào không hợp nhất các tệp và đơn giản, tôi đã tạo riêng cho mình. Ý tưởng chính là sau khi xóa bộ đệm, nó sẽ cập nhật Dấu thời gian. Vì vậy, nói cách khác - khi bạn thay đổi một số css/js, chỉ cần xóa bộ đệm và Dấu thời gian sẽ được cập nhật.

Mã nguồn ở đây -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Hoạt động trên phiên bản 1.9+ . Mặc dù không chắc chắn về các phiên bản cũ hơn, nhưng rất có thể sẽ hoạt động tốt.

Tạo một bản sao của chủ đề của bạn với một tên mới (themev2) - cả skin và ứng dụng / thiết kế, v.v. Sau đó chọn chủ đề mới trong quản trị viên.