与Jekyll和JSON的动态链接

我有一个API，我用它来为每个单独的商家生成单独的JSON文件。

我在用Jekyll。我希望能够生成一个动态链接，为每个单独的JSON文件呈现一个模板。例如,

我希望用户能够点击一个链接，然后他们被带到一个页面(导航条应该留在外面)，液体模板引擎循环JSON文件，并呈现我想要的特定模板。

在《杰基尔》中，最好的方法是什么?我看到人们硬编码的url，但我想有url是动态的，Jekyll应该能够呈现一个额外的链接，如果一个新的JSON文件显示。

重申:

我想链接到各个页面，并从他们各自的JSON文件呈现他们的内容。

我对Jekyll是如何工作的有一个基本的了解，并得到_data文件夹和网站问题，但问题是网站问题不是动态的，我不想硬核任何链接。到目前为止，我刚刚掌握了这个问题，如果你能给我指点指点，我将不胜感激。

请,

谢谢。

我已经设法弄明白了。下面是我如何处理它的一小段代码:

`{% for item in site.data._json %}
{% if page.title == item[0] %}
{% for content in item[1][1] %}`

我所有的JSON文件都存储在_data/_json目录下。

我有与存储在根目录中的商家目录中的文件名称相匹配的链接。为_JSON目录中的每个项目构建一个HTML文件。

解释顶部的循环:

首先我在_json中遍历所有JSON文件。
接下来，我检查当前页面标题(即在商家目录中指定了什么，指定了什么在该页面的单个HTML文件中，使用frontmatter,"title">
如果页面标题与条目[0]匹配，则为文件的当前名称，然后我可以访问它

如果你有任何问题，请在这里回答。

Jekyll的目的是生成静态网站，比如简单的博客，主页，作品集等。但是，您似乎需要一个动态的网页上。在这种情况下，我建议你不要使用杰基尔。不是说你不能用Jekyll，但我不明白你为什么要用它。

如果你真的想使用Jekyll，我能想到的方法是使用AJAX。这意味着你可以通过添加在页面模板中的脚本("_layout ")动态地改变你的页面。文件夹)。如果您选择这种方法，可以使用JQuery使您的工作更轻松。

总之，"正确的方向"在这种情况下是为了避开杰基尔在《jekyll》中做到这一点的最佳方法，老实说，我不知道，但您可以使用上述方法实现您想要的。

编辑:我认为OP想要一个动态的网站，其内容将从HTTP请求到他的API。事实证明，他显然有一堆JSON文件存储在"数据"中。文件夹，然后使用此文件生成静态网站。对于那些感兴趣的人，如果我的假设是正确的，我提出的解决方案将是这样的:

在我的例子中，我使用{JSON}占位符"API和react独立库

<!DOCTYPE html>
<html>
<head>
<!-- Load react, react-dom and babel -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="/public/index.js"></script>
</head>
<body>
<div id="index">
</div>
</body>
</html>

公共/index.js

function Hyperlink(props) {
const url = `https://jsonplaceholder.typicode.com/posts/${props.id}`
return (
<a href={url}>{props.title}</a>
)
}
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {posts: []}
}
componentDidMount() {
let xhr = new XMLHttpRequest();
xhr.open("GET", 'https://jsonplaceholder.typicode.com/posts');
xhr.send(null);
const that = this;
xhr.onreadystatechange = function() {
const DONE = 4;
const HTTP_OK = 200;
if(xhr.readyState == DONE) {
if(xhr.status == HTTP_OK) {
that.setState({
posts: JSON.parse(xhr.responseText)
})
} else {
console.log(xhr.status);
}
}
}
}
render() {
return (
<ul>
{
this.state.posts.map((post, idx) => <li key={idx}><Hyperlink id={post.id} title={post.title} /></li>)
}
</ul>
);
}
}
ReactDOM.render(
<Index />
, document.getElementById("index")
);

结果

你只需要有一个根元素(可以是任何div)来放置你的动态生成的

相关内容

最新更新

热门标签：