如何使用內嵌樣式的在軌谷歌功放頁

我爲我們的網站佈局在軌道谷歌放大器兼容的網頁下面的導軌模板，它是在開發工作，不過樣式不生產編譯如何使用內嵌樣式的在軌谷歌功放頁

<!doctype html> 
<html ⚡> 
    <head> 
    <title> 
     <%= App.title %> 
    </title> 
    <%= render 'layouts/meta' %> 
    <style amp-boilerplate> 
     body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} 
    </style> 
    <style amp-custom> 
    <%= Rails.application.assets.find_asset('amp').to_s.gsub('@charset "UTF-8";', '').html_safe %> 
    </style> 
    <script async src="https://cdn.ampproject.org/v0.js"></script> 
    </head> 
    <body> 
    <%= render 'layouts/header' %> 
    <%= yield %> 
    <%= render 'layouts/footer' %> 
    </body> 
</html>

來源

2016-11-16 steven iseki

看起來不太難。您可以添加以下幫手，我從vyachkonovalov

發現添加以下到erb模板：

<style amp-custom> 
    <%= asset_to_string('amp.css').html_safe %> 
</style>

而且幫手ApplicationHelper。它在當地和生產中完美運作。

module ApplicationHelper 
    def asset_to_string(name) 
    app = Rails.application 
    if Rails.configuration.assets.compile 
     app.assets.find_asset(name).to_s 
    else 
     controller.view_context.render(file: File.join('public/assets', app.assets_manifest.assets[name])) 
    end 
    end

來源

2016-11-16 10:05:07

您可以使用內置的Sass功能來壓縮scss文件。

例如，在你的application_helper文件：

def amp_stylesheet 
    amp_css = Rails.application.assets['amp/application'].to_s 
    if amp_css.count('\n') > 2 
    ::Sass::Engine.new(amp_css, syntax: :scss, style: :compressed).render 
    else 
    amp_css 
    end 
end

而在你的佈局文件：

<style amp-custom> 
    <%= amp_stylesheet.html_safe %> 
</style>

本博客文章也可能是有用的：How To Create Custom Stylesheets Dynamically With Rails And Sass

來源

2016-11-23 06:09:09 Alyssa

如何使用內嵌樣式的在軌谷歌功放頁

回答

相關問題