首页 > 其他分享 >如何在 WordPress 网站中使用 Importmap

如何在 WordPress 网站中使用 Importmap

时间:2024-09-22 09:45:11浏览次数:8  
标签:index 登录 网站 Importmap js ccw WordPress components utils

我一直在尝试开发一个基本的 wordpress 经典主题,无需构建步骤,我可以将其用作入门主题,以便将来开发客户端站点。在撰写本文时,我没有做任何自由职业,因为我正在为一家网络机构工作,并且我们正在构建的网站都涉及构建步骤。所以我想写一个关于如何在 wordpress 主题中使用 importmap 的简短教程。career tracker 是我现有的一个副项目,它已经使用了 importmap,无需构建步骤,但它是一个纯 javascript 应用程序。 让我们看看如何在 wordpress 世界中做到这一点。 入队模块脚本在我的主题functions.php中,我使用wordpress中的wp_enqueue_script_module函数将我的javascript文件app.js作为模块脚本排入队列。wp_enqueue_script_module( 'frontend-scripts', gearup_theme_url . '/static/js/app.js', [], gearup_theme_version, true );登录后复制这将输出到前端的以下脚本标签。<script type="module" src="http://test.local/wp-content/themes/gearup/static/js/app.js?ver=0.1.0" id="frontend-scripts-js-module"></script>登录后复制我的 javascript 文件被放置在主题文件夹的 static 文件夹中。static├── css│?? ├── app.css│?? ├── global.css│?? ├── reset.css│?? ├── utils.css│?? └── variables.css└── js ├── admin.js ├── app.js ├── components │?? └── menu.js └── utils └── index.js登录后复制正如您在此文件结构中所看到的,我需要将 utils 文件夹中的 index.js 和 components 文件夹中的 menu.js 导入到我的 app.js 中。在添加 importmap 之前,让我们看看当我在 app.js 中导入这两个文件时它的样子。// utilsimport { ondocumentready } from './utils/index.js';// componentsimport menu from './components/menu.js';登录后复制但是我想要的是像这样导入文件。// utilsimport { ondocumentready } from 'utils/index.js';// componentsimport menu from 'components/menu.js';登录后复制登录后复制一旦我将导入更改为这种格式,浏览器将在控制台中抛出此错误。uncaught typeerror: failed to resolve module specifier "utils/index.js". relative references must start with either "/", "./", or "../".登录后复制 importmap 来救援将其添加到模板 html head 标签中。您可能需要在 php 中渲染此部分,以便获得静态文件夹的动态 url。<script type="importmap"> { "imports": { "utils/": "/wp-content/themes/gearup/static/js/utils/", "components/": "/wp-content/themes/gearup/static/js/components/" } }</script>登录后复制 在我的 app.js 中使用它现在有了 importmap 设置,即使这不是 node 环境,我们仍然可以在我们熟悉的结构下导入文件。请记住,文件需要以 .js 结尾。// utilsimport { ondocumentready } from 'utils/index.js';// componentsimport menu from 'components/menu.js';登录后复制登录后复制如果我将 .js 从 utils/index.js 删除到 utils/index,那么浏览器将在控制台中记录此错误。get http://test.local/wp-content/themes/gearup/static/js/utils/index net::err_aborted 404 (not found)登录后复制 将 cdn 中的文件添加到我们的导入映射中<script type="importmap"> { "imports": { "utils/": "/wp-content/themes/gearup/static/js/utils/", "components/": "/wp-content/themes/gearup/static/js/components/", "ccw/": "https://unpkg.com/[email protected]/dist/" } }</script>登录后复制我获取了指向我的 web 组件集合的 cdn 链接,并将其添加到我的导入映射中。添加后,现在我们可以像这样将 web 组件导入到 app.js 中。这不是很漂亮吗?import "ccw/side-nav/index.js";import "ccw/side-nav-item/index.js";import "ccw/icon/index.js";import "ccw/form-layout/index.js";import "ccw/text-field/index.js";import "ccw/email-field/index.js";import "ccw/date-picker/index.js";import "ccw/option/index.js";import "ccw/select/index.js";登录后复制对于 web 组件,显然我没有在我的 wordpress 主题中使用它,但你可以检查我在开头提到的副项目 career tracker,看看它们是如何工作的。 以上就是如何在 WordPress 网站中使用 Importmap的详细内容,更多请关注我的其它相关文章!

标签:index,登录,网站,Importmap,js,ccw,WordPress,components,utils
From: https://www.cnblogs.com/aow054/p/18424954

相关文章

  • 如何为您的应用程序或网站选择正确的通知基础设施
    分解通知基础设施的本质要构建弹性通知基础架构,熟悉其关键组件非常重要:消息队列和代理:通知骨干任何强大的通知基础设施的支柱都是消息队列,它管理通知流。通过异步处理消息,消息队列有助于避免瓶颈并确保通知系统内的容错能力。这些队列临时存储然后根据需要发送通知。RabbitMQ和A......
  • 在 WordPress 中排队 CSS 和 JS 脚本以获得更好的性能
    wordpress是开源软件–用户可以按照自己的意愿安装、修改和分发它。由于每个人都可以访问源代码,数百万wordpress专家和开发人员可以创建工具和扩展并与公众分享。让我们看看如何将css和js文件加入到你的wordpress项目中。大多数新开发者都喜欢,里面“header.php”<ti......
  • 在网站中实现 React tsarticles
    react-tsarticles是一个功能强大的库,可让您向react应用程序添加可自定义的粒子动画。在本指南中,我们将逐步介绍在您的项目中实现react-tsparticles的过程。安装首先,您需要安装必要的软件包。打开终端并运行以下命令:npminstalltsparticles@tsparticles/react登录后复制这将......
  • 最新毕设-Node.js-游戏网站-031726(免费领项目)可做计算机毕业设计JAVA、PHP、爬虫、APP
    游戏网站的设计摘 要基于网络游戏的蓬勃发展,游戏网站发挥着吸引玩家和提高玩家之间的互动性的重要作用,因而,建设了一个以游戏为中心的游戏官网。 该游戏提供了一个大型的玩家交流互动平台,包括用户管理、游戏社区、游戏信息、分类信息、游戏资讯、论坛分类列表、新闻分类列......
  • 只需几分钟即可创建一个专业且具有视觉吸引力的简历网站
    ai提示示例-完整的聊天内容,演示如何在几个社区获得一个具有专业外观的网站只要给我买一杯咖啡,你就会得到一个我和AI之间完整聊天内容的链接,这将展示如何在一分钟内通过使用AI和良好的提示-创建一个专业的、视觉上吸引人的简历网站。链接查看结果结果描述:一个专业、......
  • 【开题报告】基于Springboot+vue食品商城网站(程序+源码+论文) 计算机毕业设计
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着互联网的飞速发展,电子商务已成为现代商业的重要组成部分,深刻改变了人们的购物方式和消费习惯。食品作为人们日常生活中的必需品,其线上销售市场潜......
  • 国内外ChatGPT网站集合,无限制使用【2024-09最新】~
    经过我一年多以来,使用各种AI工具的体验,我收集了一批AI工具和站点这些工具都是使用的最强最主流的模型,也都在各个领域里都独领风骚的产品。而且,这些工具你都可以无限制地使用。无论你是打工人、科研工作者、学生、文案写作,我相信这些工具一定能在很大程度上帮到你~1:【AI站点......
  • 基于SpringBoot+Vue+MySQL的国产动漫网站
    系统展示用户前台界面管理员后台界面系统背景  随着国内动漫产业的蓬勃发展和互联网技术的快速进步,动漫爱好者们对高质量、个性化的国产动漫内容需求日益增长。然而,市场上现有的动漫平台大多以国外动漫为主,对国产动漫的推广和展示存在不足。为了填补这一空白......
  • 集团门户网站设计与实现
    摘 要传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装集团门户网站软件来发挥其高效地信息处理的作用,可以规范信息管理流程,让管理工作可以系统化和程序化,同时,集团门户网站的有......
  • 傻瓜式建站工具不能错过的主题网站模板
    傻瓜式建站以其简单易用、快速上手和个性化定制等特点,为不懂代码、程序的人搭建美观实用的网站提供了极大的便利。使用户无需具备专业的前端开发知识,也不需要雇佣专业的网站开发人员,即可快速搭建一个符合自己需求的网站。什么是傻瓜式建站?傻瓜式建站,也被称为自助建站系统,是一......