Question

我有一个我用Yeoman生成的Polymer web应用程序。以下片段显示了如何在index.html中定义页面：

            <iron-pages attr-for-selected="data-route" selected="{{route}}">

                <section data-route="home">
                    <paper-material elevation="1">
                        <my-greeting></my-greeting>
                    </paper-material>
                </section>

                <section data-route="users">
                    <paper-material elevation="1">
                        <h2 class="paper-font-display2">Users</h2>

                        <p>This is the users section</p>
                        <a href="/users/Rob">Rob</a>
                    </paper-material>
                </section>

所以基本上你为每个页面定义一个部分。

是否可以将这些部分定义为对某些外部文件的引用？我不想在主index.html中添加所有内容，因为它很快会变得混乱。

Answer 1

除非您使用ajax / iFrames（否）来加载内容，否则会有可能但不会在HTML中出现，并且会使抓取工具难以正常抓取您的所有网页。

您需要将页面转换为Java，Python，PHP，.net框架。

由于您对此不熟悉，我建议您使用WordPress。那里有很多模板，将来很容易创建和定制。

通常，客户端路由用于单页面应用程序，其中服务器端代码主要用于提供客户端代码通过Ajax使用的RESTful API。

然后你会看到使用Angluar.js

Answer 2

更新：这是一个更清洁的版本：

<dom-module id="dyn-import">
<template>
    <div id="container">
        <link rel="import" href="{{href}}"/>
    </div>
</template>
</dom-module>
<script>
(function() {
    Polymer({
        is: 'dyn-import',
        properties: {
            href: {
                type: String,
                notify: true
            }
        },
        attached: function() {
            var container = this.$.container;
            var link = Polymer.dom(container).querySelector('link[rel="import"]');
            link.addEventListener('load', function() {
                var importedDoc = link.import;
                var importedNode = document.importNode(importedDoc.firstChild, true);
                container.innerHTML = importedNode.innerHTML;
            });
        }
    });
})();

导入的HTML可以包含Polymer元素，工作正常。整个事情似乎没有在Safari上工作。此外，我似乎仍然有一些关于相对URLS的问题（比如导入的HTML片段使用HTML导入引用另一个Polymer元素 - 它似乎确实有效，但是控制台上出现错误，错误中的URL似乎已构建像这样：网络欣赏主机+相对网址，这显然是错误的。）

我终于通过编写一个Polymer组件解决了这个问题（好吧，毕竟它是一个Polymer应用程序：）

<dom-module id="dyn-import">
    <template>
        <div id="{{id}}">
            <link rel="import" href="{{href}}"/>
        </div>
    </template>
</dom-module>
<script>
(function() {
    Polymer({
        is: 'dyn-import',
        properties: {
            href: {
                type: String,
                notify: true
            },
            id: {
                type: String,
                notify: true
            }
        },
        ready: function() {
            this.id = "ID_" + new Date().getTime();
        },
        attached: function() {
            var sel = d3.select('#'+this.id);
            var link = sel.select('link[rel="import"]');
            link[0][0].addEventListener('load', function() {
                var importedDoc = link[0][0].import;
                var importedNode = document.importNode(importedDoc.firstChild, true);
                sel.html(importedNode.innerHTML);
            });
        }
    });
})();
</script>

然后可以在index.html中使用它，如下所示：

<section data-route="contact">
    <paper-material elevation="1">
        <dyn-import href="elements/contacts.html"></dyn-import>
    </paper-material>
</section>

我还有一个问题，那是一个搜索引擎友好的解决方案吗？

从外部文件

2 个答案: