search

tea3 / hexo-generator-amp

AMP ⚡ HTML (Accelerated Mobile Pages) generator for Hexo.
MIT License
127 stars 28 forks source link

CSS syntax error in tag 'style amp-custom' #53

Open EdisonJwa opened 5 years ago

EdisonJwa commented 5 years ago

BUG

I'm using the theme hexo-theme-suka and I was added the generator_amp part to the theme's file (themes/suka/layout/_partial/head/index.ejs)'s first line

But when I was trying to test my blog via https://validator.ampproject.org , I got this error

- CSS syntax error in tag 'style amp-custom' - incomplete declaration.AUTHOR_STYLESHEET_PROBLEM line 1744, column 290

- CSS syntax error in tag 'style amp-custom' - invalid declaration.AUTHOR_STYLESHEET_PROBLEM line 1744, column 309

- CSS syntax error in tag 'style amp-custom' - incomplete declaration.AUTHOR_STYLESHEET_PROBLEM line 1744, column 317

- CSS syntax error in tag 'style amp-custom' - invalid declaration.AUTHOR_STYLESHEET_PROBLEM line 1744, column 337

- CSS syntax error in tag 'style amp-custom' - incomplete declaration.AUTHOR_STYLESHEET_PROBLEM line 1744, column 378

- CSS syntax error in tag 'style amp-custom' - invalid declaration.AUTHOR_STYLESHEET_PROBLEM line 1744, column 392

This is the error part.

#hexo-amp-id-1{color:#DB4D6D;}#hexo-amp-id-2{color:#DB4D6D;}#hexo-amp-id-3{color:#DB4D6D;}#hexo-amp-id-4{color:#DB4D6D;}#hexo-amp-id-5{color:#DB4D6D;}#hexo-amp-id-6{background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px}#hexo-amp-id-7{display:inline-block;padding:2px 3px}#hexo-amp-id-8{height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white}#hexo-amp-id-9{display:inline-block;padding:2px 3px}

the problem is I could't find how is this part comes from, and how to fix it (exclude the first minus sign)

- "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI&quot

the is Example HTML file to this full page

Environment Info

OS version

Node version(node -v)

v12.11.1

Your site _config.yml

generator_amp:
  templateDir:  amp-template
  assetDistDir: amp-dist
  logo:
    path:   sample/sample-logo.png
    width:  600
    height: 60
  substituteTitleImage:
    path:   sample/sample-substituteTitleImage.png
    width:  1024
    height: 800
  warningLog: true   # To display warning, please set true.
  generateAmpPath: amp/archives/:abbrlink/

Plugin version(npm ls --depth 0)

hexo-site@0.0.0 /Users/edisonjwa/Documents/git/Hexo-CI
├── core-js@3.2.1
├── hexo@3.9.0
├── hexo-abbrlink@2.0.5
├── hexo-cdnify@0.0.2
├── hexo-cli@3.0.0
├── hexo-generator-amp@3.2.0
├── hexo-generator-archive@1.0.0
├── hexo-generator-baidu-sitemap@0.1.6
├── hexo-generator-category@1.0.0
├── hexo-generator-feed@2.0.0
├── hexo-generator-index@1.0.0
├── hexo-generator-sitemap@1.2.0
├── hexo-generator-tag@1.0.0
├── hexo-renderer-ejs@1.0.0
├── hexo-renderer-marked@2.0.0
├── hexo-renderer-stylus@1.1.0
├── hexo-server@1.0.0
├── hexo-spoiler@1.5.2
├── hexo-tag-aplayer@3.0.4
├── hexo-uglify@1.0.0
└── node-pre-gyp@0.12.0
EdisonJwa commented 5 years ago

After testing only if there exist headers this part will comes out if post with out context https://gist.github.com/EdisonJwa/81ac75c2fc9298b4ea119b7a20b044f6

tea3 commented 5 years ago

Are fonts used in the content embedded in your articles, such as iframes ? Also If you delete an iframe or embedded CSS, will the error disappear ?

The font specification may not be converted successfully with the hexa-generator-amp plug-in, and ; may have changed to &quot.

EdisonJwa commented 5 years ago

Are fonts used in the content embedded in your articles, such as iframes ? Also If you delete an iframe or embedded CSS, will the error disappear ?

The font specification may not be converted successfully with the hexa-generator-amp plug-in, and ; may have changed to &quot.

Yes that's it. So it's there any way to fix it?

tea3 commented 5 years ago

@EdisonJwa

I visited your web site that before it was converted AMP. https://www.wevg.org/archives/pair-locking-your-iphone/

The source code for the button is probably the source of the problem. 1

In the source code, double quotes are the reference characters. Please check if the reference character " is in the template or in the article, and replace code to the ". That will solve it. 2

Although it is possible to deal with bugs as a plug-in, this is a rare case.