问题
I'm trying to create an AMP page using this tutorial and all sample code. However, when I go to validate my page, I'm seeing these two errors:
Every search I've done for this tells me I need to use this exact string, which is already provided in the tutorial: https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md
My sample code is here: http://pastebin.com/VZ1UEs1q
What am I doing wrong? The only thing I can think of is that my Visual Studio is auto expanding and formatting their 1-liner for the <style>
and <noscript>
tags.
回答1:
AMP team member who wrote the linked tutorial here –
I think your assumption is correct. Go to https://validator.ampproject.org/ and try changing just a single character in the <style amp-boilerplate>
content, and you'll see the same error you are seeing.
The boilerplate code must match exactly – that is, no added line breaks, formatting, anything. I can see how this can be a source of frustration, but a more forgiving check in the validator would be much more expensive (we would have to actually parse the CSS, as opposed to just matching the string).
回答2:
I have just run into this and the cause for me was VS2015 trying to be helpful with the GUI layout but was adding in spaces and return lines. After pasting in the sample code and hitting Undo (Ctrl + Z), the problem went away.
The end result that works for me was ensuring that the template styles were minified to a single line.
<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>
<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
回答3:
I encountered same problem when I tried inserting my own style in the same place, but turned out it needs to be be put in <style amp-custom>
instead.
However, documentation states that no space is allowed inside the code.
Currently, allowed mutations are: (1) inserting arbitrary whitespace immediately after the style tag opens, and immediately before it closes; (2) replacing any space in the snippet below with arbitrary whitespace
Source: ampproject github
来源:https://stackoverflow.com/questions/38976944/amp-the-mandatory-text-cdata-inside-tag-head-styleamp-boilerplate-is-mi