Gridea Theme InlineAMP 演示站
念念不忘,必有回响


Gridea Theme InlineAMP是一款纯AMP主题,若使用Gridea自带的Markdown编辑器插入图片可能出现排版错位的情况。

为什么会这样

Gridea将Markdown转化为普通的HTML 网页,而AMP网页需要遵循另外一套规范

有什么解决方法?

最简单的方法:如果你只是偶尔在文章里配几张图片,直接插入规范的amp-img标签即可。AMP项目官网给出了使用方法:
https://amp.dev/zh_cn/documentation/guides-and-tutorials/develop/media_iframes_3p/

例子

在这里我引用了一张visualhunt上的图片,直接在Gridea的编辑器中输入:

<amp-img alt="这是一个例子" src="https://visualhunt.com/photos/1/glaciers-melting-in-polar-climate.jpg?s=l" width="3000" height="1987" layout="responsive"> </amp-img>

将URL替换为你的图片地址;此外你还需要给每张图片设置尺寸,没有特别需要的话直接填上原图片的宽和高就可以了,图片是自适应的。

效果:

其他方法:

Github上有将markdown转换为AMP HTML的工具:
https://github.com/search?q=markdown+to+AMP

插入视频和音频

插入视频

<amp-video controls width="640" height="360" src="https://amp.dev/static/inline-examples/videos/kitten-playing.mp4" poster="https://amp.dev/static/inline-examples/images/kitten-playing.png"> </amp-video>

效果:

插入音频

<amp-audio src="https://storage.googleapis.com/media-session/sintel/snow-fight.mp3" artwork="https://storage.googleapis.com/media-session/sintel/artwork-512.png" title="Snow Fight" album="Jan Morgenstern" artist="Sintel" height="50" width="auto" controls> </amp-audio>

效果: