4

私のプロジェクトでは、アプリ全体で再利用する UI コンポーネントを抽象化するために、knockout.js で Web コンポーネントの実装を使用しています。それらのコンポーネントの 1 つは、アプリに関する多くの情報を含む About ポップアップです。

この About コンポーネントを抽象化することは、開発に最適です。異なるページ間で再利用でき、バックエンドではなくフロントエンドの方法論に依存してインクルードできるからです。ただし、欠点は SEO です。アプリの説明がすべての大手検索エンジンに表示されるようにしたいので、HTML 内の特定の Web コンポーネントを事前にコンパイルして、すべてのロボットに表示されるようにする必要があります。理想的なシナリオは、ビルドステップでこれを行うことだと考えています（現在、Gruntを使用してbtwをビルドしています）-つまり. <about-app>myコンポーネントのコンテンツをインライン化します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 に答える