npm 包 hapi-spa-prerender 使用教程

在前端开发中，使用 Single Page Application（SPA） 可以为用户提供更好的用户体验，但是 SPA 也有个缺点，搜索引擎无法抓取 JavaScript 页面。这里介绍一个 npm 包 hapi-spa-prerender，它可以解决这个问题，使在 SPA 中使用 SEO 成为可能。

hapi-spa-prerender 简介

hapi-spa-prerender 是一个用于 hapi 的插件。它使用 PhantomJS 技术来预渲染 JavaScript 页面的 HTML 代码，并可以将其呈现给搜索引擎的爬虫，以促进更好的搜索结果。

安装

--- ------- ------------------ ------

使用方法

  1. 在你的 hapi 项目中，引入 hapi-spa-prerender 插件
---- --------

----- ---- - ----------------
----- ------------- - ------------------------------

----- ------ - --- --------------

-------------------
    ----- ------------
    ----- ----
---

------------------------------ ----- -- -
    -- ----- -
        ----- ----
    -

    ------------------ -- -
        -- ----- -
            ----- ----
        -

        ------------------- ------- ----- -----------------
    ---
---
  1. 安装 PhantomJS

hapi-spa-prerender 需要使用 PhantomJS 来生成预渲染的 HTML 代码，因此需要先安装 PhantomJS。

--- ------- ------------------ ------
  1. 配置 hapi-spa-prerender

配置项可以包括：

  • prerender.serviceUrl：PhantomJS 服务的地址。
  • prerender.prerenderedHeaderName：发送给 PhantomJS 服务的 header 名称。默认值为 X-Prerendered.
  • prerender.timeout：PhantomJS 操作超时时间（单位毫秒）。默认值为 60000。
  • prerender.whitelist：需要预渲染的 路径前缀数组
  • prerender.blacklist：不需要预渲染的 路径前缀数组
-
    --------- --------------
    -------- -
        ---------- -
            ----------- ------------------------
            ---------------------- ----------------
            -------- ------
            ---------- -----
            ---------- -------
        -
    -
-

示例代码

---- --------

----- ---- - ----------------
----- ------------- - ------------------------------

----- ------ - --- --------------

-------------------
    ----- ------------
    ----- ----
---

------------------------------ -
    ---------- -
        ----------- ------------------------
        ---------------------- ----------------
        -------- ------
        ---------- -----
        ---------- -------
    -
-- ----- -- -
    -- ----- -
        ----- ----
    -

    --------------
        ------- ------
        ----- ----
        -------- -------- --------- ------ -
            -------------------
        -
    ---

    ------------------ -- -
        -- ----- -
            ----- ----
        -

        ------------------- ------- ----- -----------------
    ---
---

总结

使用 hapi-spa-prerender 可以让搜索引擎抓取 JavaScript 页面，从而使得 SEO 功能得到提升。在 hapi 项目中，只需要安装及配置 hapi-spa-prerender 插件及 PhantomJS 即可快速实现。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005668081e8991b448e29e2

阅读全文

猜你喜欢

  • npm 包 bitcoin-txdecoder 使用教程

    前言 在比特币区块链领域，交易数据是最重要的资源之一。交易数据保存了比特币交易的细节，包括交易金额、支付地址等等。这些信息有助于区块链分析和比特币钱包开发。 然而，交易数据并不总是可视化的，通常以十六...

    3 年前
  • npm 包 generator-angular-pkg 使用教程

    本文将为大家介绍 npm 包 generator-angular-pkg 的使用方法。具体而言，我们将会探讨以下几个方面： npm 包 generator-angular-pkg 的简介 gener...

    3 年前
  • npm 包 is-vue2-leaflet 使用教程

    is-vue2-leaflet 是一个官方支持的 Vue 2 版本的 Leaflet 库。该库支持 Vue 的组件化开发方式，可以方便地构建出 Leaflet 地图组件。

    3 年前
  • npm 包 facebook-chat-api-mod 使用教程

    如果你经常使用 Facebook Messenger，那么你可能会想要在自己的网站或者应用程序中集成 Facebook Messenger 聊天功能。而 facebook-chat-api-mod 正...

    3 年前
  • npm 包 ionic-orm-x 使用教程

    前言 在现代的 web 应用程序开发中，框架和库之间的集成已成为日常生活的一部分。Ionic framework 是基于 Angular 的前端框架，它提供了一组功能强大的工具和组件来构建跨平台的移动...

    3 年前
  • npm 包 seneca-muxer 使用教程

    seneca-muxer 是一个可用于 Seneca 框架的插件，用于将多个 action 绑定到一个统一的 action 上，并在原始数据中进行路由。这个插件可以帮助你写出高可读性代码，同时也可以节...

    3 年前
  • npm 包 kit-build 使用教程

    什么是 kit-build kit-build 是一个前端构建工具，提供模块化开发、代码压缩、自动刷新、样式预处理等功能，能够提高前端开发效率。kit-build 是基于 webpack 进行开发的，...

    3 年前
  • npm 包 morphlingjs 使用教程

    前言 在开发一个项目时，我们可能会遇到需要针对不同的用户展示不同的内容，比如对于手机端和电脑端用户，应该展示不同的页面布局。而手动针对每个用户类型写代码是非常耗时的。

    3 年前
  • npm 包 ngx-order-by 使用教程

    在前端开发中，我们经常需要对列表进行排序。而 ngx-order-by 是一个非常实用的 npm 包，在 Angular 应用中能够帮助我们快速而方便地排序数据。本文将介绍 ngx-order-by ...

    3 年前
  • npm 包 process-argv-parser 使用教程

    process-argv-parser 是一个方便的 Node.js 模块，用于解析命令行参数。它可以帮助开发人员更轻松地处理命令行参数，减少代码复杂性。本文将介绍如何使用此模块。

    3 年前
  • npm 包 react-web-tabview 使用教程

    简介 在 Web 开发中，选项卡视图是很常见的一种 UI 控件，它可以让用户在不同的选项卡之间切换并展示不同的内容。在 React 技术栈中，我们可以使用一个 npm 包叫做 react-web-ta...

    3 年前
  • npm 包 osh 使用教程

    什么是 osh？ osh 是一款基于 TypeScript 编写的前端小工具库，提供一些常用的工具函数和类型定义，可以帮助项目进行快速开发和维护。 安装 osh 可以通过 npm 安装 osh，命令如...

    3 年前
  • npm 包 ykit-config-sass 使用教程

    前端开发中，SASS（Syntactically Awesome Style Sheets）是一种比 CSS 更加强大、灵活的样式预处理器。在使用 SASS 进行开发时，我们需要使用一些工具来转换 S...

    3 年前
  • NPM 包 Chronik 使用教程

    简介 Chronik 是一个开源的 JavaScript 库，提供了一种简单的方法来跟踪现实世界的时间线，并允许你以各种方式对时间线进行操作。 在前端开发中，有时我们需要使用到时间线来进行一些数据可视...

    3 年前
  • npm 包 speednode 使用教程

    npm 是 Node.js 的包管理工具，其中包含了许多优秀的 Node.js 模块。在前端开发中，我们通常使用 npm 包来加快开发速度和提升代码质量。而 speednode 就是一个可以提升 np...

    3 年前
  • npm 包 ez-promise 使用教程

    什么是 ez-promise？ ez-promise 是一个封装了 Promise 的 npm 包，具有更加优美简洁的语法，也更加易于使用。它可以让开发者在不需要深入理解 Promise 的情况下，快...

    3 年前
  • npm 包 filemanager 使用教程

    在前端开发过程中，经常会用到文件管理的功能，比如上传、下载、重命名、删除等操作。npm 上有许多开源的文件管理工具，其中比较优秀的一个就是 filemanager。

    3 年前
  • npm 包 hubot-aww2 使用教程

    简介 hubot-aww2 是一个用于 Hubot 的 NPM 包，允许在聊天窗口中发送可爱的动物图片，例如猫咪、狗狗和松鼠等。这个包使用了 The Dog API 和 The Cat API。

    3 年前
  • @wandiparis/eslint-config-wandi 使用教程

    什么是 @wandiparis/eslint-config-wandi @wandiparis/eslint-config-wandi 是一个基于 ESLint 的前端代码规范配置包。

    3 年前
  • npm 包 gulp-opencc 使用教程

    随着中文互联网的快速发展，越来越多的网站和应用开始考虑支持中文。而开发者们在使用中文时也面临着一些问题，其中最常见的就是中文繁简转换问题。本文将介绍一款 npm 包 gulp-opencc，它是一个基...

    3 年前

相关推荐

    暂无文章