使用帶引導程序的加速移動頁面

Question

我有一個使用Bootstrap的網站。從技術上講，我目前使用Bootstrap 4。我想在我的頁面的公開部分中使用加速移動頁面（AMP）。但是，我有幾個我似乎無法動搖的錯誤。這讓我想知道，我甚至可以使用Bootstrap加速移動頁面？

我甚至允許在加速移動頁面中使用JavaScript嗎？ Bootstrap爲手機上的漢堡菜單提供JavaScript。然而，當我運行驗證程序時，我看到如下錯誤：

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'. 
The attribute 'rel' in tag 'link rel=' is set to the invalid value 
The tag 'script' is disallowed except in specific forms. 

所以，回到我的問題。是否有可能使用加速移動頁面的Bootstrap 4網站？

謝謝！

Answer 1

我也在想這個。在AMP項目的github頁面上，它聲明：

它通過限制HTML，CSS和JavaScript的某些部分來實現可靠的性能。這些限制是通過AMP HTML附帶的驗證器實施的。爲了彌補這些限制，AMP HTML爲基本HTML以外的豐富內容定義了一組自定義元素。

所以你不能像你習慣的那樣使用自定義JS。相反，您必須按照AMP方式構建頁面並使用它們指定的自定義元素。

Answer 2

現在你不能與AMP，因爲它插入了很多不必要的CSS和AMP的性能得到優化使用引導程序，但是你可以通過包括它像這樣使用字體真棒在AMP HTML：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> 

請參閱github上的原始問題：https://github.com/ampproject/amphtml/issues/2413

Answer 3

根據AMP規範，您只能使用內聯css，總大小最大爲50kb。如果這些組件不依賴bootstrap.js，那麼可以使用引導程序css和組件，因爲AMP dosent現在允許第三方JS。

此外，您需要刪除!important，無論它在引導CSS中使用，因爲AMP限制嵌入式CSS中使用!important。

Answer 4

您可以創建自定義引導版本：Customize Bootstrap

取消選中不需要的屬性並將其導出。它必須小於50kb。刪除每個「！重要」規則，並將其作爲內聯css放入您的站點。

Answer 5

爲了擺脫錯誤與作者的CSS的最大尺寸，你也可以做以下步驟時，要使用AMP和Bootstrap在一起：

• 把你的整個CSS和白手起家的css到一個css文件，可以說entire.css
• 下載並安裝https://github.com/purifycss/purifycss
• 使用淨化：purifycss entire.css yourpage.html --min --info --out minified.css
• 如果minified.css小於50k，那麼你可以把這個文件的內容在<style amp-custom>
• 如果沒有，你可以使用在線的css壓縮器。

編輯： 有不幸的一個問題是很難解決方法。 Bootstrap在很多地方使用!important關鍵字，這是限制由AMP。 AMP validator首先顯示此錯誤，當您使用低於50kb的自定義CSS時。

Answer 6

試用AMP project準備自舉4 CSS： https://github.com/jupeter/bootstrap/blob/v4-dev/dist/css/bootstrap-amp.min.css

該項目是基於原單引導4叉。 在CSS文件中加載的所有組件都放在： https://github.com/jupeter/bootstrap/blob/v4-dev/scss/bootstrap-amp.scss

如果需要添加自定義組件，您可以在「SCSS /自舉amp.scss」文件中添加和使用編譯：

$ npm run amp-css