4

我在我的一个项目中使用了knockout.js中的 Web 组件实现，以便抽象出我在整个应用程序中重用的 UI 组件。其中一个组件是关于弹出窗口，其中包含有关我的应用程序的大量信息。

抽象这个 About 组件非常适合开发，因为我可以在不同的页面之间重用它，并依靠前端而不是后端的方法来包含它。然而，缺点是搜索引擎优化。我希望所有大型搜索引擎都能看到我的应用程序描述，因此我需要在我的 HTML 中预编译某些 Web 组件以确保所有机器人都能看到它。我认为理想的情况是在我的构建步骤中执行此操作（目前使用 Grunt 构建 btw） - 即。<about-app>将我的组件的内容内联到我的index.html.

有没有人写过一个工具来完成这个？或者我应该对这些 Web 组件包含大量（关键）内容的场景使用不同的方法？

4

2 回答 2

1

您可以从节点使用 PhantomJS，就像这个答案建议的那样。

var page = require('webpage').create();  
page.open('http://localhost', function (status) {
    if (status !== 'success') {
        console.log('Unable to access network');
    } else {
        var p = page.evaluate(function () {
            return document.getElementsByTagName('html')[0].innerHTML
        });
        console.log(p);
    }
    phantom.exit();
});
于 2014-11-04T13:29:39.767 回答
0

因为我很清楚我在这里寻找什么，但我找不到它，我实际上继续编写了我的第一个节点模块，并附带了一个 Grunt 任务 - grunt-inline-web-components。

该配置允许您指定 jQuery 样式选择器和模板文件的路径，这些模板文件应该内联在任何匹配的节点中。这是一个基本概念，但足够强大。例如，如果我给想要“预编译”的组件一个类critical，那么我可以将它们内联在几个选定的位置。这里有一些代码来说明：

grunt.initConfig({
    inline_web_components: {
        options: {
            components: {
                "about-app": "components/about-app.html",
                "my-component:first": "components/my-component.html",
                "flashy-button.critical": "components/flashy-button.html"
            }
        },
        dist: {
            dist: {
                files: [
                    expand: true,
                    cwd: "app",
                    src: "{,*/}*.html",
                    dest: "dist"
                ]
            }
        },
    },
});
于 2014-11-10T07:27:48.623 回答