nystudio107/routemap

此包最新版本（1.0.0）没有提供许可信息。

返回Craft/Vue/React路由规则和服务工作者从Craft条目中获取的入口和资产URL列表

维护者

详细信息

github.com/nystudio107/routemap

源代码

问题

资助包维护！
khalwat

安装: 12

依赖者: 0

建议者: 0

安全: 0

星星: 28

观察者: 5

分支: 2

开放问题: 1

类型:craft-plugin

1.0.0 2017-08-28 16:01 UTC

Requires

Unknown License 1e1fd4d9ab9709681f57b4c329fb6e5b9c6db36f

This package is auto-updated.

Last update: 2024-08-29 04:53:55 UTC

README

No Maintenance Intended

已弃用

此Craft CMS 2.x插件不再受支持，但它完全功能正常，您可以继续按需使用它。许可协议还允许您将其分叉并做出必要的更改，以支持旧版。

此插件的Craft CMS 3.x版本可在以下位置找到：craft-routemap，并且也可以通过Craft CP中的Craft插件商店进行安装。

Craft CMS的路由图插件

返回Craft/Vue/React路由规则和服务工作者从Craft条目中获取的入口和资产URL列表

安装

要安装Route Map，请按照以下步骤操作

  1. 下载并解压文件，将routemap目录放入您的craft/plugins目录中
  2. -或者- 直接在craft/plugins文件夹中执行git clone https://github.com/nystudio107/routemap.git。然后您可以使用git pull进行更新
  3. -或者- 使用Composer通过composer require nystudio107/routemap安装
  4. 在Craft控制面板的设置>插件下安装插件
  5. 插件文件夹应命名为routemap，以便Craft能够识别。GitHub最近开始在下载zip文件的文件夹名称中附加-master（分支名称）。

Route Map适用于Craft 2.4.x和Craft 2.5.x。

Route Map概览

Route Map是一个插件，用于帮助连接前端技术（如Vue/React）和Craft CMS之间的路由差距。使用Route Map，您可以像往常一样在Craft CMS中定义您的路由，并使用XHR获取JSON格式的路由列表，用于Vue/React前端（它将动态路由blog/{slug}转换为/blog/:slug）。

这允许您使用AdminCP动态地在Craft CMS中创建路由，并自动将其转换为所选的前端框架。

Route Map还通过提供Craft CMS站点的所有URL列表或您感兴趣的特定部分来帮助服务工作者。您可以通过任何ElementCriteriaModel属性限制返回的URL，并且Route Map甚至可以返回特定条目使用的所有资产的URL列表（无论是在资产字段中还是嵌入在Matrix/Neo块中）。

例如，这允许您拥有一个服务工作者，它会自动预缓存您网站上最新的5篇博客文章以及这些页面上的任何图像，以便在离线浏览时使用。

Route Map维护每个请求的URL集合的缓存，以实现重复请求的优秀性能。每当创建或修改条目时，此缓存将自动清除。

配置Route Map

没有需要配置的内容。

通过XHR使用Route Map

路由规则

控制器API端点/admin/actions/routeMap/getAllRouteRules将返回您的网站所有路由规则。默认情况下，它们以Craft CMS格式（例如：blog/{slug}）表示。

{
  "notFound": {
    "handle": "notFound",
    "type": "single",
    "url": "404",
    "template": "404"
  },
  "blog": {
    "handle": "blog",
    "type": "channel",
    "url": "blog\/{slug}",
    "template": "blog\/_entry"
  },
  "blogIndex": {
    "handle": "blogIndex",
    "type": "single",
    "url": "blog",
    "template": "blog\/index"
  },
  "homepage": {
    "handle": "homepage",
    "type": "single",
    "url": "\/",
    "template": "index"
  }
}

format URL参数允许您指定URL路由的Craft | React | Vue格式。例如，控制器API端点/admin/actions/routeMap/getAllRouteRules?format=Vue将返回上述相同的路由规则，但格式化为Vue（例如：blog/:slug）。

{
  "notFound": {
    "handle": "notFound",
    "type": "single",
    "url": "\/404",
    "template": "404"
  },
  "blog": {
    "handle": "blog",
    "type": "channel",
    "url": "\/blog\/:slug",
    "template": "blog\/_entry"
  },
  "blogIndex": {
    "handle": "blogIndex",
    "type": "single",
    "url": "\/blog",
    "template": "blog\/index"
  },
  "homepage": {
    "handle": "homepage",
    "type": "single",
    "url": "\/",
    "template": "index"
  }
}

请注意，blog\/{slug} 已更改为 blog\/:slug。这允许您轻松地将 Craft CMS 的静态和动态路由映射到您选择的路由器。

如果您只想获取特定部分的路线规则，可以使用控制器 API 端点 /admin/actions/routeMap/getSectionRouteRules?section=blog（注意必需的 section 参数，该参数指定了您想要的分区句柄）

{
  "handle": "blog",
  "type": "channel",
  "url": "blog\/{slug}",
  "template": "blog\/_entry"
}

您还可以通过控制器 API 端点传递可选的 format 参数以获取特定格式的路由规则，例如通过 /admin/actions/routeMap/getSectionRouteRules?section=blog&format=Vue

{
  "handle": "blog",
  "type": "channel",
  "url": "blog\/:slug",
  "template": "blog\/_entry"
}

条目 URL

控制器 API 端点 /admin/actions/routeMap/getAllUrls 将返回您网站上所有条目的所有 URL 的列表

[
  "http:\/\/nystudio107.dev\/404",
  "http:\/\/nystudio107.dev\/blog\/a-gulp-workflow-for-frontend-development-automation",
  "http:\/\/nystudio107.dev\/blog\/making-websites-accessible-americans-with-disabilities-act-ada",
  "http:\/\/nystudio107.dev\/blog\/static-caching-with-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/the-case-of-the-missing-php-session",
  "http:\/\/nystudio107.dev\/blog\/so-you-wanna-make-a-craft-3-plugin",
  "http:\/\/nystudio107.dev\/blog\/a-b-split-testing-with-nginx-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/mobile-testing-local-dev-sharing-with-homestead",
  "http:\/\/nystudio107.dev\/blog\/simple-static-asset-versioning",
  "http:\/\/nystudio107.dev\/blog\/tags-gone-wild",
  "http:\/\/nystudio107.dev\/blog\/local-development-with-vagrant-homestead",
  "http:\/\/nystudio107.dev\/blog\/mitigating-disaster-via-website-backups",
  "http:\/\/nystudio107.dev\/blog\/web-hosting-for-agencies-freelancers",
  "http:\/\/nystudio107.dev\/blog\/implementing-critical-css",
  "http:\/\/nystudio107.dev\/blog\/autocomplete-search-with-the-element-api-vuejs",
  "http:\/\/nystudio107.dev\/blog\/json-ld-structured-data-and-erotica",
  "http:\/\/nystudio107.dev\/blog\/craft-3-beta-executive-summary",
  "http:\/\/nystudio107.dev\/blog\/prevent-google-from-indexing-staging-sites",
  "http:\/\/nystudio107.dev\/blog\/loadjs-as-a-lightweight-javascript-loader",
  "http:\/\/nystudio107.dev\/blog\/creating-a-content-builder-in-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/service-workers-and-offline-browsing",
  "http:\/\/nystudio107.dev\/blog\/using-phpstorm-with-vagrant-homestead",
  "http:\/\/nystudio107.dev\/blog\/frontend-dev-best-practices-for-2017",
  "http:\/\/nystudio107.dev\/blog\/using-systemjs-as-javascript-loader",
  "http:\/\/nystudio107.dev\/blog\/a-better-package-json-for-the-frontend",
  "http:\/\/nystudio107.dev\/blog\/modern-seo-snake-oil-vs-substance",
  "http:\/\/nystudio107.dev\/blog\/lazy-loading-with-the-element-api-vuejs",
  "http:\/\/nystudio107.dev\/blog\/installing-mozjpeg-on-ubuntu-16-04-forge",
  "http:\/\/nystudio107.dev\/blog\/a-pretty-website-isnt-enough",
  "http:\/\/nystudio107.dev\/blog\/using-vuejs-2-0-with-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/image-optimization-project-results",
  "http:\/\/nystudio107.dev\/blog\/database-asset-syncing-between-environments-in-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/hardening-craft-cms-permissions",
  "http:\/\/nystudio107.dev\/blog\/multi-environment-config-for-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/google-amp-should-you-care",
  "http:\/\/nystudio107.dev\/blog\/creating-optimized-images-in-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/the-craft-cache-tag-in-depth",
  "http:\/\/nystudio107.dev\/blog\/twig-processing-order-and-scope",
  "http:\/\/nystudio107.dev\/blog\/stop-using-htaccess-files-no-really",
  "http:\/\/nystudio107.dev\/blog",
  "http:\/\/nystudio107.dev\/"
]

您可以通过控制器 API 端点 /admin/actions/routeMap/getSectionUrls?section=blog 获取特定部分的条目（注意必需的 section 参数，该参数指定了您想要的分区句柄）

[
  "http:\/\/nystudio107.dev\/blog\/a-gulp-workflow-for-frontend-development-automation",
  "http:\/\/nystudio107.dev\/blog\/making-websites-accessible-americans-with-disabilities-act-ada",
  "http:\/\/nystudio107.dev\/blog\/static-caching-with-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/the-case-of-the-missing-php-session",
  "http:\/\/nystudio107.dev\/blog\/so-you-wanna-make-a-craft-3-plugin",
  "http:\/\/nystudio107.dev\/blog\/a-b-split-testing-with-nginx-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/mobile-testing-local-dev-sharing-with-homestead",
  "http:\/\/nystudio107.dev\/blog\/simple-static-asset-versioning",
  "http:\/\/nystudio107.dev\/blog\/tags-gone-wild",
  "http:\/\/nystudio107.dev\/blog\/local-development-with-vagrant-homestead",
  "http:\/\/nystudio107.dev\/blog\/mitigating-disaster-via-website-backups",
  "http:\/\/nystudio107.dev\/blog\/web-hosting-for-agencies-freelancers",
  "http:\/\/nystudio107.dev\/blog\/implementing-critical-css",
  "http:\/\/nystudio107.dev\/blog\/autocomplete-search-with-the-element-api-vuejs",
  "http:\/\/nystudio107.dev\/blog\/json-ld-structured-data-and-erotica",
  "http:\/\/nystudio107.dev\/blog\/craft-3-beta-executive-summary",
  "http:\/\/nystudio107.dev\/blog\/prevent-google-from-indexing-staging-sites",
  "http:\/\/nystudio107.dev\/blog\/loadjs-as-a-lightweight-javascript-loader",
  "http:\/\/nystudio107.dev\/blog\/creating-a-content-builder-in-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/service-workers-and-offline-browsing",
  "http:\/\/nystudio107.dev\/blog\/using-phpstorm-with-vagrant-homestead",
  "http:\/\/nystudio107.dev\/blog\/frontend-dev-best-practices-for-2017",
  "http:\/\/nystudio107.dev\/blog\/using-systemjs-as-javascript-loader",
  "http:\/\/nystudio107.dev\/blog\/a-better-package-json-for-the-frontend",
  "http:\/\/nystudio107.dev\/blog\/modern-seo-snake-oil-vs-substance",
  "http:\/\/nystudio107.dev\/blog\/lazy-loading-with-the-element-api-vuejs",
  "http:\/\/nystudio107.dev\/blog\/installing-mozjpeg-on-ubuntu-16-04-forge",
  "http:\/\/nystudio107.dev\/blog\/a-pretty-website-isnt-enough",
  "http:\/\/nystudio107.dev\/blog\/using-vuejs-2-0-with-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/image-optimization-project-results",
  "http:\/\/nystudio107.dev\/blog\/database-asset-syncing-between-environments-in-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/hardening-craft-cms-permissions",
  "http:\/\/nystudio107.dev\/blog\/multi-environment-config-for-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/google-amp-should-you-care",
  "http:\/\/nystudio107.dev\/blog\/creating-optimized-images-in-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/the-craft-cache-tag-in-depth",
  "http:\/\/nystudio107.dev\/blog\/twig-processing-order-and-scope",
  "http:\/\/nystudio107.dev\/blog\/stop-using-htaccess-files-no-really"
]

上述两个控制器 API 端点都支持可选的 attributes 参数，允许您传递一个 ElementCriteriaModel 属性键/值对的数组，用于细化所选的条目。

例如，如果您只想获取 blog 分区中的最新 5 个条目，请使用控制器 API 端点 /admin/actions/routeMap/getSectionUrls?section=blog&attributes[limit]=5

[
  "http:\/\/nystudio107.dev\/blog\/a-gulp-workflow-for-frontend-development-automation",
  "http:\/\/nystudio107.dev\/blog\/making-websites-accessible-americans-with-disabilities-act-ada",
  "http:\/\/nystudio107.dev\/blog\/static-caching-with-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/the-case-of-the-missing-php-session",
  "http:\/\/nystudio107.dev\/blog\/so-you-wanna-make-a-craft-3-plugin"
]

或者，如果您想获取 blog 分区中的 5 个最旧条目，请使用控制器 API 端点 /admin/actions/routeMap/getSectionUrls?section=blog&attributes[limit]=5&attributes[order]=postDate asc

[
  "http:\/\/nystudio107.dev\/blog\/stop-using-htaccess-files-no-really",
  "http:\/\/nystudio107.dev\/blog\/twig-processing-order-and-scope",
  "http:\/\/nystudio107.dev\/blog\/the-craft-cache-tag-in-depth",
  "http:\/\/nystudio107.dev\/blog\/creating-optimized-images-in-craft-cms",
  "http:\/\/nystudio107.dev\/blog\/google-amp-should-you-care"
]

条目 URL 资产

控制器 API 端点 /admin/actions/routeMap/getUrlAssetUrls?url=/blog/tags-gone-wild 将返回 URI 为 /blog/tags-gone-wild 的条目中的所有图像资产，无论是在资产字段中还是在 Matrix/Neo 块中（注意必需的 url 参数，该参数指定了您想要的条目的 URL）

[
  "http:\/\/nystudio107.dev\/img\/blog\/buried-in-tag-manager-tags.jpg",
  "http:\/\/nystudio107.dev\/img\/blog\/they-told-two-friends.png",
  "http:\/\/nystudio107.dev\/img\/blog\/tag-manager-tags-gone-wild.png",
  "http:\/\/nystudio107.dev\/img\/blog\/google-chrome-activity-indicator.png",
  "http:\/\/nystudio107.dev\/img\/blog\/tag-javascript-executing.png",
  "http:\/\/nystudio107.dev\/img\/blog\/tags-are-prescription-drugs.jpg",
  "http:\/\/nystudio107.dev\/img\/blog\/taming-tags-whip.jpg"
]

通过 url 参数可以传递完整 URL 或部分 URI。

默认情况下，它仅返回类型为 image 的资产，但通过使用可选参数 assetTypes，您可以传递要返回的资产类型的数组。例如，如果我们想返回 image、video 和 pdf 资产，我们将使用控制器 API 端点 /admin/actions/routeMap/getUrlAssetUrls?url=/blog/tags-gone-wild&assetTypes[0]=image&assetTypes[1]=video&assetTypes[2]=pdf。

在您的 Twig 模板中使用路由图

您还可以从 Craft CMS Twig 模板中访问上述任何功能。

路由规则

获取您网站上所有路由规则

{% set routeRules = craft.routeMap.getAllRouteRules() %}

要指定返回路由规则应采用的格式，请传递 Craft | React | Vue

{% set routeRules = craft.routeMap.getAllRouteRules('Vue') %}

要获取特定部分（例如 blog，在这种情况下）的路由规则，请传递分区句柄

{% set routeRules = craft.routeMap.getSectionRouteRules('blog') %}

您还可以传递可选的 format 参数以获取特定部分的特定格式的路由规则

{% set routeRules = craft.routeMap.getSectionRouteRules('blog', 'Vue') %}

条目 URL

获取您网站上所有公共条目 URL

{% set urls = craft.routeMap.getAllUrls() %}

要细化返回的 URL，您可以通过键/值对传递可选的 ElementCriteriaModel 属性

{% set urls = craft.routeMap.getAllUrls({'limit': 5}) %}

或者

{% set urls = craft.routeMap.getAllUrls({'limit': 5, 'order': 'postDate asc'}) %}

要获取特定部分的 URL

{% set urls = craft.routeMap.getSectionUrls('blog') %}

要细化返回的 URL，您可以通过键/值对传递可选的 ElementCriteriaModel 属性

{% set urls = craft.routeMap.getSectionUrls('blog', {'limit': 5}) %}

或者

{% set urls = craft.routeMap.getSectionUrls('blog', {'limit': 5, 'order': 'postDate asc'}) %}

条目 URL 资产

通过传递条目的 URL 或 URI 获取特定条目中的所有资产 URL（无论是在资产字段中还是在 Matrix/Neo 块中）

{% set urls = craft.routeMap.getUrlAssetUrls('/blog/tags-gone-wild') %}

默认情况下，它仅返回类型为 image 的资产。您可以通过传递可选的资产类型数组来获取您想要的资产

{% set urls = craft.routeMap.getUrlAssetUrls('/blog/tags-gone-wild', ['image', 'video', 'pdf']) %}

从您的插件中使用路由图

craft()->routeMap 服务通过您的插件为您提供上述所有功能的访问权限。

路由规则

获取您网站上所有路由规则

$routeRules = craft()->routeMap->getAllRouteRules();

要指定返回路由规则应采用的格式，请传递 Craft | React | Vue

$routeRules = craft()->routeMap->getAllRouteRules('Vue');

要获取特定部分（例如 blog，在这种情况下）的路由规则，请传递分区句柄

$routeRules = craft()->routeMap->getSectionRouteRules('blog');

您还可以传递可选的 format 参数以获取特定部分的特定格式的路由规则

$routeRules = craft()->routeMap->getSectionRouteRules('blog', 'Vue');

条目 URL

获取您网站上所有公共条目 URL

$urls = craft()->routeMap->getAllUrls();

要细化返回的 URL，您可以通过键/值对传递可选的 ElementCriteriaModel 属性

$urls = craft()->routeMap->getAllUrls(array('limit' => 5));

或者

$urls = craft()->routeMap->getAllUrls(array('limit' => 5, 'order' => 'postDate asc'));

要获取特定部分的 URL

$urls = craft()->routeMap->getSectionUrls('blog');

要细化返回的 URL，您可以通过键/值对传递可选的 ElementCriteriaModel 属性

$urls = craft()->routeMap->getSectionUrls('blog', array('limit' => 5));

或者

$urls = craft()->routeMap->getSectionUrls('blog', array('limit' => 5, 'order' => 'postDate asc'));

条目 URL 资产

通过传递条目的 URL 或 URI 获取特定条目中的所有资产 URL（无论是在资产字段中还是在 Matrix/Neo 块中）

$urls = craft()->routeMap->getUrlAssetUrls('/blog/tags-gone-wild');

默认情况下，它仅返回类型为 image 的资产。您可以通过传递可选的资产类型数组来获取您想要的资产

$urls = craft()->routeMap->getUrlAssetUrls('/blog/tags-gone-wild', array('image', 'video', 'pdf'));

路由图路线图

要完成的事情以及潜在功能的一些想法

  • 添加对分类组/分类 URL 的支持
  • 添加对 Commerce 产品/变体 URL 的支持
  • 添加对多个区域的支持

由 nystudio107 提供