Question

我正在建立一个关于英雄联盟的网站。我选择了wordpress来做到这一点。现在我正在做冠军页面，为此我正在使用Handlebar.js（进入Wordpress页面）有一个模板，我可以动态显示所有冠军的细节和细节。我在这里发布代码（HTML到WP页面和Javascript）：

HTML：

<html>
    <head>
    <title>Champion</title><link rel="stylesheet" href="main.css">
    <link href="fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
    </head>
    <body>
    <div id="main-container"></div>
    <script id="info-champ-template" type="text/x-handlebars-template">
        {{#listItem 0 0 champions}}
            <div class="esterno">
                <h1>{{name}} Overview</h1>
                <div id="img-champion"><img src="{{icon}}" alt="img-{{name}}"/>
                </div>
                <div id="info-champion">
                    <p id="champ-name">{{name}}</p>
                    <div id="inf">{{ip}}</div>
                    <div id="riot">{{rp}}</div>
                    <br><p id="champ-title">{{title}}</p>
                </div>
                <div id="role-champion">
                    <img id="img-role" src="immagini  {{roleimg}}"/>
                    <p id="name-role">{{role}}</p>
                </div>
                <p id="champ-lore">{{{lore}}}</p>
            </div>{{/listItem}}</script>
            <!-- JavaScript***********************-->
            <script src="js/champions.js"></script>
            <script src="js/jquery-3.1.1.min.js"></script>
            <script src="js/handlebars-v4.0.5.js"></script>
            <script src="js/js.main.js"></script>
    </body>
</html>

Javascript文件：

js.main.js

var source = document.getElementById("info-champ-template").innerHTML;
var template = Handlebars.compile(source);
Handlebars.registerHelper('listItem', function (from, to, context, options){
    var item = "";
    if(to==0){
        item = item + options.fn(context[from]);
    }
    else{
        for (var i=from, j=to;i<j;i++){
            item=item+options.fn(context[i]);
        }
    }
    return item;
});
var output=template(data1);document.getElementById("main-container").innerHTML=output;

champions.js（类似于JSON文件）

var data1={"champions":[
    {name: "Champ1",
    img: "Alistar.png",
    ip: 1350,
    rp: 585,
    role: "Support",
    roleimg: "Bot.png",
    title: "il minotauro",
    lore: "Champion Lore"},

    name: "Champ2",
    img: "Alistar.png",
    ip: 1350,
    rp: 585,
    role: "Support",
    roleimg: "Bot.png",
    title: "il minotauro",
    lore: "Champion Lore"},

    name: "Champ n",
    img: "Alistar.png",
    ip: 1350,
    rp: 585,
    role: "Support",
    roleimg: "Bot.png",
    title: "il minotauro",
    lore: "Champion Lore"}
]};

当人们点击其他页面中的冠军列表时，我想动态收费此页面（我没有在此处发布，但它与Hanldebar.js相似，但也是如此）每个冠军的链接......（例如mysite.com/champion=?champion1）。我可以使用Javascript（可能使用任何外部脚本吗？），或者您是否建议我不要使用Wordpress并从头开始制作？

使用Handlebars.js的不同项目的自定义URL

0 个答案: