教程

教程

将粒子(Particle)复制到另一个主题

介绍

Gantry 5主题提供了不同的粒子(Particle)。并非每个粒子(Particle)都包含在每个Gantry 5主题中。有时您可能想要将来自另一个主题的粒子(Particle)包含到您正在使用的主题中。本教程向您显示在主题之间复制粒子(Particle)的安全方式,这些主题不会被主题更新再次覆盖。

是由什么组成的

一个粒子(Particle)是由这些东西组成的:

  • 一个YAML(纯文本)文件,它告诉Gantry 5粒子(Particle)使用哪些字段
  • TWIG(纯文本)文件,使用这些字段在页面上呈现输出
  • 包含SASS / CSS的SCSS(纯文本)文件,用于在页面上呈现的粒子(Particle)
  • 可选地,包含JavaScript / jQuery代码以使粒子工作的一个或多个JS(纯文本)文件。

所有主题特定的粒子(Particle)都在: THEMENAME/particles 所有主题特定的粒子(Particle)SCSS文件在: THEMENAME/scss/THEMENAME/particles 所有主题特定的JS文件在: THEMENAME/js

复制粒子(Particle)

这样做是非常重要的,因为任何后续的主题更新都不会覆盖您所做的工作。以下步骤确保了这种情况。

复制 THEMENAME/particles/PARTICLENAME.html.twig 至 THEMENAME/custom/particles

复制 THEMENAME/particles/PARTICLENAME.yaml 至 THEMENAME/custom/particles

复制 THEMENAME/scss/THEMENAME/particles/_PARTICLENAME.scss 至 THEMENAME/custom/scss (注意文件名开头的下划线)。

对于您知道粒子(Particle)需要的任何JS文件,请复制 THEMENAME/js/JSFILENAME.js 至 THEMENAME/custom/js

如果您还没有custom.scss文件,则需要创建一个(纯文本文件)。您的custom.scss文件应该放入THEMENAME/custom/scss。您的自定义SCSS文件必须将此语句作为第一行:

@import "dependencies";

接下来你需要做的是确保粒子(Particle)的SCSS也被加载。我们通过将其包含到我们的自定义SCSS文件中来实现。

    @import "PARTICLENAME";

如果粒子确实使用单独的JS文件,那么您可能需要加载该JS文件(检查它是否正在PARTICLENAME.html.twig中加载,如果是这样,则不需要加载它)。您可以在“ 页面设置”选项卡上的基本大纲中的主题中执行此操作。

Gantry粒子(Particle)复制

您正在复制的粒子也可能依赖JS库(例如jQuery,Mootools等),因此您可能还需要确保已加载相应的库。您可以通过将JavaScript Frameworks原子拖动到原子部分(如果您还没有),然后编辑原子设置以切换适当的框架,再次在基本页面的“ 页面设置”选项卡上执行此操作。

Gantry框架

转到基本大纲“样式”选项卡,然后单击“重新编译CSS”。

说点什么...
取消
你是一个访客 ( 注册 ? )
作为一个访客
加载评论... 注释将在之后刷新 00:00.

第一个发表评论

joomlass-logo31.png

Search