如何为 rails 中的 google amp 页面使用内联样式

Question

我有以下 rails 模板用于 rails 中 google amp 兼容页面的网站布局，它正在开发中，但样式表无法在生产中编译

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

Answer 1

看来难度不大。您可以添加以下助手，我从 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

Answer 2

您可以使用内置的 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>

此博客 post 也可能有用：How To Create Custom Stylesheets Dynamically With Rails And Sass

如何为 rails 中的 google amp 页面使用内联样式

How to use inline styles for google amp pages in rails

ruby-on-rails

erb

amp-html