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>
效果: