Last active
June 8, 2019 09:22
-
-
Save king-panda/537015f9924c27658d21a49de359d508 to your computer and use it in GitHub Desktop.
【AMP】amp-listでWP REST APIを使って記事リストを取得する ref: https://qiita.com/kingpanda/items/b78fc9699067c5506ff7
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script async custom-template = "amp-mustache" src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js" ></ script > |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html amp lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Hello, AMPs</title> | |
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html"> | |
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | |
<script type="application/ld+json"> | |
{ | |
"@context": "http://schema.org", | |
"@type": "NewsArticle", | |
"headline": "Open-source framework for publishing content", | |
"datePublished": "2015-10-07T12:02:41Z", | |
"image": [ | |
"logo.jpg" | |
] | |
} | |
</script> | |
<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> | |
<style amp-custom> | |
/* any custom style goes here */ | |
body { | |
padding: 10px; | |
} | |
h1 { | |
text-align: center; | |
} | |
</style> | |
<script async src="https://cdn.ampproject.org/v0.js"></script> | |
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> | |
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script> | |
</head> | |
<body> | |
<h1>amp-list</h1> | |
<amp-list width="auto" | |
height="400" | |
layout="fixed-height" | |
src="https://demo.wp-api.org/wp-json/wp/v2/posts" | |
class="m1" | |
items="."> | |
<template type="amp-mustache"> | |
<div> | |
<a href="{{link}}">{{title.rendered}}</a> | |
</div> | |
</template> | |
</amp-list> | |
</body> | |
</html> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<amp-list width="auto" | |
height="400" | |
layout="fixed-height" | |
src="https://demo.wp-api.org/wp-json/wp/v2/posts" | |
class="m1" | |
items="."> | |
<template type="amp-mustache"> | |
<div> | |
<a href="{{link}}">{{title.rendered}}</a> | |
</div> | |
</template> | |
</amp-list> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
src="https://demo.wp-api.org/wp-json/wp/v2/posts" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"items":[...] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
src="https://demo.wp-api.org/wp-json/wp/v2/posts?per_page=2" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for this example.
May I ask a question (in English): how to inject HTML from the source file so that is rendered in the browser?
For example,
<p>Welcome to <a href="http://wp-api.org/">WP API Demo Sites</a>. This is your first post ...</p>
is{{content.rendered}}
.How to use mustache to express
{{content.rendered}}>{{something.else}}
where something.else would allow the browser to render<p>Welcome ...</p>
as HTML?Thank you for advice here.