0

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

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

我希望用户能够单击一个链接，然后他们被带到一个页面（导航栏应该留在外面），并且液体模板引擎循环遍历 JSON 文件并在该特定模板上呈现我想要的内容。

在 Jekyll 中执行此操作的最佳方法是什么？我已经看到人们对 URL 进行硬编码，但我希望 URL 是动态的，如果出现新的 JSON 文件，Jekyll 应该能够呈现额外的链接。

重申：

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

我对 Jekyll 的工作原理有基本的了解，并获得了 _data 文件夹和站点问题，但问题是站点问题不是动态的，我不想硬核任何链接。到目前为止，我只是在处理这个问题，并希望能朝着正确的方向轻推。

亲切地，

谢谢你。

4

2 回答 2

0

Jekyll 的目的是生成静态网站，例如简单的博客、登陆页面、投资组合等。但是，您似乎想要一个动态网页。在这种情况下，我建议您根本不要使用 Jekyll。并不是说你不能用 Jekyll 完成它，但我不明白为什么你应该不去使用它。

如果你真的想用 Jekyll，我能想到的方式就是用 AJAX。这意味着您可以通过添加到页面模板（“_layouts”文件夹）中的脚本使用 javascript 动态更改页面。如果您选择这种方法，您可以使用 JQuery 让您的生活更轻松。

总之，在这种情况下，“正确的方向”是避免 Jekyll。老实说，我不知道“在 Jekyll 中执行此操作的最佳方法”，但您可以使用上述方法实现您想要的。

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

  • 在我的示例中，我使用{JSON} 占位符“假”API 并对独立库做出反应。

_layouts/default.html

<!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）来放入你的动态生成。

于 2021-03-09T03:30:18.220 回答
0

我已经设法弄清楚了。这是我如何处理它的一小段代码：

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

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

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

解释顶部的循环：

  1. 首先，我在 _json 中遍历所有 JSON 文件。
  2. 接下来，我检查当前页面标题（这是在商家目录中指定的内容，在该页面的单个 HTML 文件中指定，带有frontmatter“标题”。
  3. 如果页面标题与 item[0] 匹配，这是文件的当前名称，那么我可以访问该特定模板的单个文件中的该内容。

如果您有任何问题，请在此处回复。

于 2021-03-09T20:38:45.230 回答