Joomla! 社区杂志™

下载
启动
28分钟阅读时间 (5502 字)

Joomla 4 – Cassiopeia 模板 – 一系列技巧与窍门

103785 次点击
February-Cassiopeia

在这篇文章中，Marc Dechèvre 将展示与 Joomla 4 默认前端模板 Cassiopeia 相关的一系列技巧与窍门。

0. 前言

0.1. 太懒于阅读？观看（大部分）这篇文章的视频

这篇文章是 2022 年 1 月 20 日在 New Jersey 的 Joomla 用户组上现场展示的改进版本。

您可以自由观看视频。

0.2. 不要忘记：模板媒体文件夹已随 J!4.1 移动

如您所知，随着 J4.1 中子模板的引入，"模板媒体文件夹"（css、images、js 和 scss）的路径已更改

  • 从 J!4.0 中的 templates/cassiopeia/
  • 到 J!4.1+ 中的 media/templates/site/cassiopeia/

对于 Cassiopeia（以及所有/将兼容子模板的模板）。

值得知道：如果您在 J4.0 中创建了一个 templates/cassiopeia/css/user.css，一旦您升级到 4.1，文件将自动移动到 media/templates/site/cassiopeia/css/user.css。

所以您不必担心这个问题，Joomla（在此情况下为 Dimitris Grammatikogiannis）已为您解决？

1. 资源

“站在巨人的肩膀上”

本次会议的目的是尝试提供有关 Cassiopeia 的技巧与窍门，这些技巧与窍门尚未公开。

但如果它已经公开而你错过了呢？

我总是喜欢收集有关某个主题的所有可用资源，无论是自定义字段…还是 Cassiopeia？

所以这里是所有我知道的（请告诉我如果我有遗漏）

2. 热爱Cassiopeia的原因

有很多很好的理由坚持使用原生的Cassiopeia模板

  • 它是可访问的（据我所知，这并不是市场上经典模板/框架的情况）
  • 它设计上超级高效（我在一个真实网站上甚至在没有进行最基本的优化（如启用gzip）的情况下就获得了97%的Lighthouse/GTMetrix得分，这让我很惊讶）
  • 它使用最新的技术（CSS Grid，CSS变量，纯javascript而不是框架等）
    以及最新的工具（Bootstrap5，Font Awesome 5等）
  • 会定期添加新功能，例如随着J4.1的到来（注意：J4.1 RC于2022年1月18日发布：https://github.com/joomla/joomla-cms/releases ）
    • 子模板
    • 菜单项的图标

当然，你也可能有自己（好）的理由去使用另一个模板/框架。

但是，对于Joomla 4来说，Cassiopeia显然是一个出色的选择（而对于Joomla 3，我从未考虑过除了测试目的之外使用Protostar来构建网站）

3. Cassiopeia的第一印象

当我第一次看到Cassiopeia模板选项时，我想“哦不，这么少的选项”。

但实际上——正如我们在这次演示和提到的其他资源中看到的——我们可以很容易地弥补这一点。

最后，有一个默认模板而没有膨胀是一个好事，因为它意味着

  • 更好的性能
  • 更多的稳定性
  • 以及更多的创造性和灵活性，因为我们可以使用/（重新）发现Joomla核心功能来根据我们的个人需求对其进行定制

4. Cassiopeia的技巧与窍门

4.1. 覆盖Favicon

Cassiopeia默认的Favicon路径可以在<head>中找到

<link href="/media/system/images/joomla-favicon.svg" rel="icon" type="image/svg+xml">
<link href="/media/system/images/favicon.ico" rel="alternate icon" type="image/vnd.microsoft.icon">
<link href="/media/system/images/joomla-favicon-pinned.svg" rel="mask-icon" color="#000">

如果您想覆盖它们，您只需要创建这些图标的覆盖版本，例如

  • /templates/cassiopeia/images/joomla-favicon.svg 用于 J!4.0
  • /media/templates/site/cassiopeia/images/joomla-favicon.svg 从 J!4.1 开始

注意：在线将图像转换为 svg/ico 很简单，只需在 Google 上搜索即可

4.2. 字体

4.2.1. 将 Google 字体添加到您的模板

  • 访问 https://fonts.google.com/
  • 选择您喜欢的字体
  • 只需将以下 CSS 适配并添加到 J4.1+ 中的 /media/templates/site/cassiopeia/css/user.css（在 J4.0 中为 /templates/cassiopeia/css/user.css）
/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */
@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');
/* Use the imported font on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */
body {
    font-family: 'Georama', sans-serif;
}

来源：https://coolcat-creations.com/en/blog/customize-your-cassiopeia-template

注意：此方法应该是最后的手段，它对性能的影响太大。请看下一个选项

4.2.2. 将 Google 字体本地添加到您的模板

由于隐私法律（如欧洲的 GDPR），您可能不允许调用一个 远程 字体（因为它允许提供商跟踪您的访客）。

没问题！您可以轻松下载必要的文件，并将相应的 CSS 添加到 J4.1+ 中的 /media/templates/site/cassiopeia/css/user.css（在 J4.0 中为 /templates/cassiopeia/css/user.css）

查看 https://google-webfonts-helper.herokuapp.com/fonts

来源：https://blog.astrid-guenther.de/en/cassiopeia-optionen/ > 字体方案

4.2.3. 将任何字体添加到模板 txs 到子模板

注意：这需要 J4.1+，因为它使用了名为 子模板 的新功能。感谢 txs @dgrammatiko 的功能和建议！

  1. 创建一个子模板并将其设置为默认模板
  2. 编辑子模板的 templateDetails.xml 并在 useFontScheme 字段中添加一行（基本上更改现有选项的字体名称）
  3. 就这样了

查看截图

addlocalfont1

addlocalfont2

4.3. 颜色

4.3.1. 修改整个站点上的颜色方案

将以下 CSS 添加到 J4.1+ 中的 /media/templates/site/cassiopeia/css/user.css（在 J4.0 中为 /templates/cassiopeia/css/user.css）

:root {
  --cassiopeia-color-primary: red;
  --cassiopeia-color-hover: green;
  --cassiopeia-color-link: blue;
}

当然，适配颜色，这只是个例子...

4.3.2. 修改给定页面的颜色方案

  • 转到菜单 > [您的菜单]
  • 点击选定的菜单项
  • 选择页面显示选项卡
  • 在页面类选项中添加例如 colors1
  • 将以下 CSS 添加到 J4.1+ 中的 /media/templates/site/cassiopeia/css/user.css（在 J4.0 中为 /templates/cassiopeia/css/user.css）

基本示例

.colors1 {
  --website-color-1: #5e2688;
  --cassiopeia-color-primary: var(--website-color-1);
}

更高级的示例，允许您玩转透明度（RGBA），因为我的初始变量不是直接表示为颜色，而是表示为 RGB 值（例如：37, 143, 167）

.colors1 {
  --website-color-primary: 37, 143, 167;
  --website-color-hover: 242, 48, 48;
  --cassiopeia-color-primary: rgba(var(--website-color-primary),0.5);
  --cassiopeia-color-hover: rgb(var(--website-color-hover));
  --cassiopeia-color-link: rgb(var(--website-color-primary));
}

4.3.3. 在 Cassiopeia 中添加新的颜色方案

注意：需要 Joomla 4.1+

默认的 Joomla 前端模板 Cassiopeia 随带两个颜色方案：标准方案和替代方案。

如果您修改颜色方案，您的修改可能会在下一个更新中丢失。在 Joomla 4.1 中，您现在可以添加额外的颜色方案

在 media\site\templates\cassiopeia\css\global 文件夹中创建自己的 css 文件，例如命名为 custom_colors_orange.css，然后您可以在 Cassiopeia 模板中选择它。

有关更多信息，请参阅 https://issues.joomla.org/tracker/joomla-cms/35917

4.3.4. 暗黑模式

在您的网站上启用暗黑模式有许多很好的理由。

感谢 Nicholas Dionysopoulos 的免费插件 Dark Magic，您可以在后端（仅与默认 Atum 模板）和前端（仅与默认 Cassiopeia 模板）非常容易地启用和自定义暗黑模式

  • （仅使用默认 Atum 模板）
  • （仅使用默认 Cassiopeia 模板）

注意：目前README.md（位于https://github.com/nikosdion/DarkMagic）只提到Joomla 3。但实际上该插件有两个版本，一个适用于J3，另一个适用于J4。只需在右侧列中点击“发布”即可。

  • v2.x是适用于Joomla 4的DarkMagic
  • v1.x是适用于Joomla 3的DarkMagic

当然，特别是对于前端，你可能还想进一步自定义一些颜色。好消息是，Cassiopeia广泛使用了通常称为“CSS变量”（真正的名称是“自定义属性”），这使得自定义颜色变得非常容易：它们只定义一次，然后在100多个不同的地方使用。

以下是一个示例CSS，我将其添加到J4.1+中的/media/templates/site/cassiopeia/css/user.css（在J4.0中是/templates/cassiopeia/css/user.css），以便进一步自定义暗模式下的前端颜色（使标题、按钮、链接等具有网站的官方颜色）

:root {
    --website-color-1: #D95F69;
    --website-color-2: #F29544;
}
@media screen and (prefers-color-scheme: dark) { /* to override the Dark Mode Colors defined in the Dark Magic plugin */
    :root {
        --cassiopeia-color-primary: var(--website-color-1) !important;
        --cassiopeia-color-link: var(--website-color-1) !important;
        --cassiopeia-color-hover: var(--website-color-2) !important;
        --cassiopeia-color-gradient-end: var(--website-color-1) !important;
        --cassiopeia-color-gradient-start: var(--website-color-2) !important;
    }
    .btn-primary {
        background-color: var(--website-color-1) !important;
    }
    .btn-primary:focus, .btn-primary:hover {
        background-color: var(--website-color-2) !important;
    }
    .back-to-top-link {
        color: white !important;
    }
    #cf_1 { /* Convert Forms also uses CSS Variables */
        --background-color: rgba(0, 0, 0, 0.9) !important;
    }
}

4.4. 布局

4.4.1. 了解Cassiopeia中所有可能的位置

到目前为止，我找到的最完整/最准确的所有可用位置展示如下。感谢作者Pedro Olaia分享此信息。

注意：在“菜单”位置中，html元素和类根据模块而变化。所以如果模块实际上是菜单模块，它将是：<nav class="navbar ...">而不是<div class="moduletable module">。因此，一些html元素和类可能根据模块、选定的选项和视口大小而变化。

cassiopeia-positions

4.4.2. 如何让Logo与菜单在同一行

在系统 > 模板样式 > Cassiopeia > 高级选项卡 > 品牌选项中，如果设置为“是”，你可以选择以下操作：

  • 选择一个Logo
  • 或输入一个标题（带有或没有标语）

当然，这可以工作。但考虑到Cassiopeia的布局，这个Logo或标题通常在包含菜单的标题行之前单独一行。

好吧，为什么不可以。可能有一个我忽视的原因，但这显然不是99.9%的网站上的做法。

所以，如果你想让你的Logo与菜单在同一行，你可以简单地按照以下步骤操作：

  • 转到内容 > 网站模块
  • 点击新建
  • 选择类型为自定义（HTML）的模块
  • 在此处插入你的Logo（并如果你愿意添加一个链接到主页，即"/"）
  • 选择位置菜单
  • 将模块分配给所有页面（除非例如根据语言有不同的Logo）
  • 保存

创建相应的新的模块

  • 转到内容 > 网站模块或转到系统 > 管理 > 网站模块（是的，两种方式都可以到达那里？）
  • 点击新建按钮
  • 选择类型为页脚的模块（“此模块显示Joomla!版权信息。”）
  • 输入标题
  • 选择位置页脚
  • 如有必要，转到菜单分配选项卡并自定义
  • 保存

查看前端的结果

  • 页脚出现两行文本。好事是年份和网站名称是动态创建的
  • 显示的文本由Joomla的本地语言字符串确定，即
    • MOD_FOOTER_LINE1
      版权所有 © %date% %sitename%。版权所有。
    • MOD_FOOTER_LINE2
      <a href="https://www.joomla.net.cn">Joomla!</a>是在下发布的免费软件。

自定义这两个语言字符串

  • 转到系统 > 管理 > 语言覆盖
  • 选择你选择的前端语言
  • 点击新建
  • 搜索以下常量：MOD_FOOTER_LINE1
  • 点击相应的结果
  • 根据您的需求更改文本，例如：© %date% %sitename% | <a style="text-decoration: none;" href="/privacy">隐私政策</a>
  • 对MOD_FOOTER_LINE1做相同处理
  • 如果您有多语言网站，请为每种语言重复此操作

如果您想在大型屏幕上将文本放在同一行（我认为这看起来更美观），只需将以下CSS添加到J4.1+中的/media/templates/site/cassiopeia/css/user.css（在J4.0中为/templates/cassiopeia/css/user.css）

footer div.mod-footer {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 768px) {
  footer div.mod-footer {
    flex-direction: row;
  }
}

这不仅仅针对Cassiopeia：据我所知，这个页脚从Mambo时代就已经存在了。但由于Cassiopeia没有成百上千的选项，这是一种非常优雅的方式来获得一个漂亮的定制页脚。

4.4.4. 自定义博客视图布局

除了Joomla为博客视图提供的经典选项外，Cassiopeia还有一些方便的类，可以在菜单项（博客视图类型）> 博客布局选项卡 > 文章类选项中设置

  • boxed
  • image-right
  • image-left
  • image-alternate（与image-right或image-left结合使用）
  • image-bottom

有关更多信息，请参阅https://issues.joomla.org/tracker/joomla-cms/18319

Cassiopeia还提供其他类，例如允许有“Masonry”布局

  • columns-2
  • columns-3
  • columns-4
  • masonry-2
  • masonry-3
  • masonry-4

在https://cassiopeia.joomla.com/sample-layouts/mansory-layout上查看masonry-3的示例

我对columns-X的使用不太确定，因为现在有一个选项#Columns（在J4的第一个草案中最初并没有）

4.4.5. 文章图片 – 左、中或右

Joomla 4改变了图像的浮动选项：不再有“右”、“左”或“无”的选项框，而是有一个字段来插入CSS类。Cassiopeia提供“float-start”类，用于将整个图像定位在左侧（对于rtl语言在右侧），“float-end”类用于将整个图像定位在右侧（对于rtl语言在左侧），以及“float-none”类用于无浮动。

当然，您也可以使用自己的CSS类来修改图像的位置。示例

  • float-start
  • float-end
  • float-center，然后您需要在/media/templates/site/cassiopeia/css/user.css（J4.1+中的文件，在J4.0中为/templates/cassiopeia/css/user.css）中定义自己的CSS
.float-center.item-image {
  text-align: center;
}

您可以使用这些类为所有文章全局设置，转到内容 -> 选项 -> 编辑布局，并在“完整文本图像类”字段中输入您想要的类。

或者您可以在每篇文章上使用这些类

来源：Viviana 在 https://cassiopeia.joomla.com/help

4.4.6. 模块样式 – card或noCard

  • 转到模块 -> [您的模块] -> 高级选项卡 -> 模块样式选项
  • 在那里您会看到Cassiopeia提供了两种自己的样式
    • card
    • noCard

当然，您仍然可以使用标准的Joomla模块样式，即

  • html5
  • none
  • outline
  • table

4.4.7. 更改布局即移动位置

如果您使用Cassiopeia检查一个网站，您会看到以下CSS

@supports (display: grid) {
    .site-grid {
        grid-template-areas:
          ". banner banner banner banner ."
          ". top-a top-a top-a top-a ."
          ". top-b top-b top-b top-b ."
          ". comp comp comp comp ."
          ". side-r side-r side-r side-r ."
          ". side-l side-l side-l side-l ."
          ". bot-a bot-a bot-a bot-a ."
          ". bot-b bot-b bot-b bot-b .";
    }
    @media (min-width: 992px) {
        .site-grid {
            grid-template-areas:
              ". banner banner banner banner ."
              ". top-a top-a top-a top-a ."
              ". top-b top-b top-b top-b ."
              ". side-l comp comp side-r ."
              ". bot-a bot-a bot-a bot-a ."
              ". bot-b bot-b bot-b bot-b ."
        }
    }
}

这是CSS Grid。如您所见，它非常简单直观。如果您对CSS Grid知之甚少，那么学习基本知识绝对是值得的，例如在https://css-tricks.org.cn/snippets/css/complete-guide-grid/#prop-grid-template-areas上

所以，如果您想调整布局并且例如在桌面视图中

  • 将位置banner放在组件区域之后
  • 并且底部位置bot-a和bot-b在同一行上五十五十

只需将以下CSS添加到J4.1+版本中的/media/templates/site/cassiopeia/css/user.css（在J4.0版本中为/templates/cassiopeia/css/user.css）。

@supports (display: grid) {
    @media (min-width: 992px) {
        .site-grid {
            grid-template-areas:
              ". top-a top-a top-a top-a ."
              ". top-b top-b top-b top-b ."
              ". side-l comp comp side-r ."
              ". bot-a bot-a bot-b bot-b ."
              ". banner banner banner banner ."
        }
    }
}

换句话说，基于CSS Grid的模板的优点是，您只需用几行CSS就可以更改布局，而无需编辑/覆盖/分叉任何PHP文件。

4.4.8. 修改左侧/组件/右侧区域的宽度

4.4.8.1. 情况1 – 当Cassiopeia的布局设置为流体时

在这种情况下，列宽由以下CSS行（CSS Grid）确定。

body.wrapper-fluid .site-grid {
  grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,25%)) [main-end] 100px [full-end]
}

注意中间部分，即repeat(4,minmax(0,25%))，这相当于minmax(0,25%) minmax(0,25%) minmax(0,25%) minmax(0,25%)。

  • 第一个minmax(0,25%)确定左侧位置的宽度。
  • 最后一个minmax(0,25%)确定右侧位置的宽度。
  • 中间的两个minmax(0,25%)使50%用于组件区域（例如所选文章）。

因此，例如，如果我想将左侧和右侧的25%宽度减少到20%，我只需在J4.1+版本中的/media/templates/site/cassiopeia/css/user.css（在J4.0版本中为/templates/cassiopeia/css/user.css）中添加以下CSS即可。

body.wrapper-fluid .site-grid {
  grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,20%) minmax(0,30%) minmax(0,30%) minmax(0,20%) [main-end] 100px [full-end]
}
4.4.8.2. 情况2 – 当Cassiopeia的布局设置为静态时

在这种情况下，对于大屏幕（请记住：Cassiopeia是移动优先），列宽由以下CSS行（仍然是CSS Grid）确定。

@supports (display: grid) {
  @media (min-width: 992px) {
    .site-grid {
      grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end]
    }
  }
}

注意中间部分，即repeat(4,minmax(0,19.875rem))（rem是相对单位），这相当于minmax(0,19.875rem) minmax(0,19.875rem) minmax(0,19.875rem) minmax(0,19.875rem)。

  • 第一个minmax(0,19.875rem)确定左侧位置的宽度。
  • 最后一个minmax(0,19.875rem)确定右侧位置的宽度。
  • 中间的两个minmax(0,19.875rem)使50%用于组件区域（例如所选文章）。

因此，例如，如果我想将左侧和右侧的19.875rem宽度减少到9.875rem（但保持相同的总宽度），我只需在J4.1+版本中的/media/templates/site/cassiopeia/css/user.css（在J4.0版本中为/templates/cassiopeia/css/user.css）中添加以下CSS即可。

@supports (display: grid) {
  @media (min-width: 992px) {
    .site-grid {
      grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,9.875rem) minmax(0,29.875rem) minmax(0,29.875rem) minmax(0,9.875rem) [main-end] minmax(0,1fr) [full-end]
    }
  }
}

当然，我也可以很容易地通过调整4*19.875rem的总和来更改总宽度。

4.5. 横幅

4.5.1. 在Cassiopeia中添加横幅

请参阅“添加网站页眉”https://coolcat-creations.com/en/blog/customize-your-cassiopeia-template

4.5.2. 如何自定义横幅模块的高度

只需根据需要调整以下CSS并将其添加到J4.1+版本中的/media/templates/site/cassiopeia/css/user.css（在J4.0版本中为/templates/cassiopeia/css/user.css）。

/* CLASSIC BANNER */
.container-banner .banner-overlay {
    height: max(300px, 50vh); /* by default is 50vh in Cassiopeia */
}
@media (min-width: 768px) {
    .container-banner .banner-overlay {
        height: max(300px, 45vh);
    }
}
@media (min-width: 992px) {
    .container-banner .banner-overlay {
        height: max(300px, 40vh);
    }
}
@media (min-width: 1200px) {
    .container-banner .banner-overlay {
        height: max(300px, 35vh);
    }
}

4.5.3. 如何给横幅模块添加遮罩

只需根据需要调整以下CSS并将其添加到J4.1+版本中的/media/templates/site/cassiopeia/css/user.css（在J4.0版本中为/templates/cassiopeia/css/user.css）。

/* CLASSIC BANNER */
.container-banner .banner-overlay .overlay {
    background-image: linear-gradient(120deg, rgba(231, 48, 42, 0.7), rgba(234, 174, 2, 0.7));
}

4.5.4. 如何添加视频横幅模块

Cassiopeia预见了横幅模块具有背景图片，它占据约50%的视窗高度。

对于我想要的网站

  • 在背景中有一个视频而不是图片
  • 视频要正好占据整个浏览器的高度

为此

  • 创建一个基本的自定义HTML模块，不更改任何选项
  • 粘贴以下HTML（当然，用你自己的视频和图片进行修改）
  • 将以下CSS粘贴到J4.1+版本中的/media/templates/site/cassiopeia/css/user.css（在J4.0版本中为/templates/cassiopeia/css/user.css）

HTML

<div class="video-banner">
  <div class="text">
    <h1 class="display-4 text-thin">Title</h1>
    <p class="lead">Text</p>
    <p><a class="btn btn-primary btn-lg" href="#">Link</a></p>
  </div>
  <video poster="https://assets.codepen.io/6093409/river.jpg" autoplay="autoplay" loop="loop" muted="" width="300" height="150">
   <source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4" />
  </video>
</div>

CSS

/* VIDEO BANNER - see https://codepen.io/woluweb/pen/rNGROZj */
div.video-banner {
    display: grid;
    grid-template-areas: "hero";
    place-items: center;
    height: max(300px, calc(100vh - 152px)); /* viewport height minus the fixed height of menu header on current website, with a minimum of X pixels */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}
div.video-banner > * {
    grid-area: hero; /* stacking all the child elements of the grid - could simply have set 1 / 1 / 2 / 2 instead of naming the area hero */
}
div.video-banner div.text {
    z-index: 1; /* to be sure that this is on top of the video */
    text-align: center;
    color: white;
    text-shadow: 2px 2px 5px black;
}
div.video-banner div.overlay {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, var(--cassiopeia-color-link), var(--cassiopeia-color-hover));
    opacity: 0.7;
}
div.video-banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

4.6. 添加自定义JavaScript

4.6.1. 选项1 – 直接在user.js中

  • 就像您可以在J4.1+版本中的/media/templates/site/cassiopeia/css/user.css（在J4.0版本中为/templates/cassiopeia/css/user.css）中创建自定义CSS文件一样
  • 您可以在J4.1+版本中的/media/templates/site/cassiopeia/js/user.js（在J4.0版本中为/templates/cassiopeia/js/user.js）中创建自定义JS文件

例如，在user.js中输入以下代码，您将在前端看到一个弹出窗口

alert( 'Hello, world!' );

4.6.2. 选项2 – 使用子模板

这需要J4.1（发布日期：2022年2月15日）

在资源中查看Dimitris所做的演示。

  • 转到系统 > 站点模板 > 卡西欧佩亚详情和文件
  • 单击创建子模板按钮
  • 关闭
  • 子模板已准备好
  • 可以在系统 > 站点模板中看到它与父模板并列
  • 您可以自定义它（例如，根据原始模板在根目录中创建一个文件index.php，但对其进行调整/添加一些内容）
  • 转到系统 > 站点模板样式
  • 将子模板设为默认（或如果您想自定义选项和/或菜单分配，则打开它）

4.6.3. 选项3 – 使用子模板向卡西欧佩亚添加选项

通过编辑子模板XML文件，您可以轻松地向模板添加新的选项（文本区域、单选按钮等）。

然后您可以自定义index.php，获取此参数并对其进行一些操作（如添加Head中的脚本）

<?= $this->params->get('myJS'); ?>

4.6.4. 选项4 – 使用模块备用布局

实际上，与任何模板和任何Joomla版本一样，您也可以非常容易地添加任何CSS或（内联或外部的）JS。想法是创建一个模块，它将通过备用布局（覆盖）注入所有的CSS和JS。这种技术的优点是：您可以

  • 使用所有可能的模块分配，以便代码仅在需要它的页面上加载，而不是在所有页面上加载
  • 按语言过滤
  • 设置发布开始/结束日期
  • …

以下是程序

  • 为模块 自定义HTML 创建覆盖（注意，实际上您可以使用基本上任何其他模块类型）
    • 转到系统 > 站点模板 > [您的模板] 详情和文件
    • 选择创建覆盖选项卡
    • 单击mod_custom
    • 您将收到确认消息 在 /templates/cassiopeia/html/mod_custom 中创建了覆盖
  • 将覆盖转换为备用布局
    • 选择编辑选项卡
    • 单击 /templates/cassiopeia > html > mod_custom > default.php
    • 单击重命名文件按钮
    • 给出一个您喜欢的名称，例如 add-to-head.php
  • 编辑备用布局
  • 创建自定义HTML模块
    • 转到内容 > 网站模块
    • 点击新建
    • 选择自定义
    • 选择高级选项卡
    • 在布局选项中，选择您创建的备用布局（在此情况下 add-to-head）

备用布局的任意示例代码（为 .images, h2 和 h3 添加动画）

<?php
use Joomla\CMS\Factory;
defined('_JEXEC') or die;
$doc = Factory::getDocument();

// adding some css file - for pure css animation
// either via a local file (to be added manually)
// $doc->addStyleSheet("/templates/cassiopeia/css/animate.css", array('version'=>'auto'));
// either via a distant file - see https://cdnjs.com/libraries/animate.css
$doc->addStyleSheet("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css", [], ["integrity" => "sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==", "crossorigin" => "anonymous" , "referrerpolicy" => "no-referrer" ]);

// adding some script for animation using intersection-observer
// either via a local file (to be added manually)
// $doc->addScript('/templates/cassiopeia/js/animate.js', array('version'=>'auto'));
// either via an inline script
$myAnimation = <<<MYJS
document.addEventListener('DOMContentLoaded', function() {

    let observer = new IntersectionObserver(function (observables) {
      observables.forEach(function (observable) {
        // the element becomes visible
        if (observable.intersectionRatio > 0.5) {
          observable.target.classList.add('mytest')
          // observable.target.classList.remove('not-visible')
          observer.unobserve(observable.target)
        }
      })
    }, {
      threshold: [0.5]
    });

    // we observe the elements
    let items = document.querySelectorAll('.image, h2, h3')
    items.forEach(function (item) {
      observer.observe(item)
    })

});
MYJS;
// add the script
$doc->addScriptDeclaration($myAnimation);

相应的添加到 J4.1+ 中的 /media/templates/site/cassiopeia/css/user.css（在J4.0中为 /templates/cassiopeia/css/user.css）中，所有动画都将在此定义

h2.mytest, h3.mytest, p.mytest {
    animation: fadeIn; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 2s; /* don't forget to set a duration! */
}

4.6.5. 选项5 – Bootstrap 5

上下文

  • Joomla 4自带Bootstrap 5
  • 但为了使您的网站性能更优，BS5 JavaScript默认不加载
  • 相反，您可以在子模板/覆盖/备用布局中自行决定只加载您需要的和需要的地方

假设您需要在给定的文章中使用标签页。在此复制粘贴以下HTML代码（来自https://bootstrap.ac.cn/docs/5.0/components/navs-tabs/上的示例）

<div class="bd-example">
  <nav>
    <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
      <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
      <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
      <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    </div>
  </nav>
  <div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade active show" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
      <p><strong>Home text</p>
    </div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
      <p><strong>Profile text</p>
    </div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
      <p><strong>Contact text</p>
    </div>
  </div>
</div>

在前端查看结果：标签页确实出现了，但点击第2个或第3个标签页并没有“做”任何事情。

这是因为我们还需要告诉Joomla加载标签页的JavaScript，即通过

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tab', '.selector', []);

您可以通过遵循官方文档轻松地将任何Bootstrap JavaScript添加到Cassiopeia

https://docs.joomla.org/J4.x:Using_Bootstrap_Components_in_Joomla_4

如果您遵循“方法3：使用模板覆盖”，别忘了将模块类bs-tab添加到您创建的模块中，然后标签页就会工作。

4.7. 菜单

4.7.1. 在Joomla 4中如何使用Cassiopeia的菜单

  • 右侧侧栏的垂直菜单
  • 水平菜单
  • 将菜单移动到页脚

查看https://ltheme.com/use-the-menu-with-cassiopeia/

4.7.2. 向菜单项添加图标 – 需要 J4.1

  • 在https://fontawesome.com/v5.15/icons上搜索一个图标。例如 fas fa-envelope 和 far fa-envelope（注意：fas表示实心，far表示常规）
  • 转到菜单 > [您的菜单]
  • 点击选定的菜单项
  • 打开链接类型选项卡
  • 在“链接图标类”选项中填写所需值，例如 fas fa-envelope
  • 在前端查看结果

感谢Christiane Maier-Stadtherr添加了J4.1中的这个新功能

注意：这并不强制使用Font Awesome：它将与模板希望使用的任何图标字体一起工作（显然，模板必须支持图标字体才能使其工作）

有关更多信息，请参阅https://github.com/joomla/joomla-cms/pull/34658

4.7.3. 向菜单项添加图标 – 在J4.1之前

在Joomla 4.0中，您可以手动达到类似的结果

  • 例如，向菜单项添加一个链接类my-icon-home
  • 然后，在J4.1+中添加以下CSS到/media/templates/site/cassiopeia/css/user.css（在J4.0中为/templates/cassiopeia/css/user.css）
ul.mod-menu a.my-icon-home::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "";
    margin-right: 4px;
    display: inline-block;
    width: 1.25em !important;
}

除此之外，您还可以使用此处映射的图标作为Font Awesome类，而无需进一步操作

https://github.com/joomla/joomla-cms/blob/4.0-dev/build/media_source/system/scss/_icomoon.scss

4.7.4. 如何在Cassiopeia中实现汉堡菜单

请参阅https://coolcat-creations.com/en/blog/customize-your-cassiopeia-template上的“更改菜单布局”

4.7.5. 即使在大屏幕上菜单在标志之后，小屏幕上也要将汉堡菜单放在标志之前

通常，在网站上，您会在菜单位置按以下顺序放置以下模块

  1. 标志（自定义HTML模块）
  2. 菜单
  3. 语言切换模块和/或搜索模块

但在移动视图中这很烦人，因为我们的汉堡菜单（假设我们正在使用菜单模块的折叠下拉样式）保持在“中间”。如果您想改变顺序并使汉堡菜单首先出现，请简单地将以下内容添加到J4.1+中的/media/templates/site/cassiopeia/css/user.css（在J4.0中为/templates/cassiopeia/css/user.css）

@media (max-width: 992px) {
  nav.navbar {order: -1;}
}

4.8. 可访问性

这是一个J4功能，而不是Cassiopeia本身的功能。但由于Cassiopeia从一开始就被设计成可访问的，因此提醒这两个功能是值得的

  • 启用/配置可访问性插件（此插件在左下角添加轮椅图标）
    • 转到系统 > 管理 > 插件
    • 搜索accessibility
    • 编辑系统 - 其他可访问性功能插件
    • 选择您是否希望前端和/或后端
    • 将状态设置为启用
    • 保存
  • 启用/配置 SkipTo 插件（打开页面时按 Tab 键或任何时候按 Alt+9 以生成指向所有菜单项、标题和模块的动态链接）
    • 转到系统 > 管理 > 插件
    • 搜索 skip
    • 编辑 系统 - 跳转到导航 插件
    • 选择您是否希望前端和/或后端
    • 将状态设置为启用
    • 保存

5. 一些问题及即将到来的改进

我发现 Cassiopeia 有一些问题。

5.1. 问题 1 – 小屏幕上的汉堡菜单

在一个网站上，你通常在页眉中有

  1. 标志
  2. 菜单项
  3. 语言切换器和/或搜索

但在智能手机（更普遍地说，在小屏幕上）上，即使使用 Cassiopeia 可折叠下拉菜单，点击汉堡菜单也会出现一些丑陋的东西

  • 它会推动页眉的其他元素。在我的这个截图示例中
    • 标志被推到右边，根据最长菜单项的长度
    • 没有空间留给语言切换器，因此它出现在新的一行上
    • 当然，整个网站的内容也会向下移动
  • 而不是有一个例如漂亮的 offcanvas

issue1

Bootstrap 5 的“默认”行为确实是向下推动内容： https://bootstrap.ac.cn/docs/5.0/examples/navbars/

但还有一个 offcanvas 解决方案： https://bootstrap.ac.cn/docs/5.0/examples/offcanvas-navbar/

请帮忙添加一个菜单模块的备用布局以实现此 offcanvas 解决方案（这可以成为菜单模块的新 Cassiopeia 备用布局）。谢谢！

突发新闻：Viviana Menzel 正在处理这个问题。试试看！

见 https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4

有两种备用布局：一种用于“默认”菜单，一种用于“metismenu”

  • 文件应复制到 /templates/cassiopeia/html/mod_menu
  • 在 J4.1+ 中，需要添加一些 css 代码到 /media/templates/site/cassiopeia/css/user.css（在 J4.0 中是 /templates/cassiopeia/css/user.css）

请测试并反馈！

5.2. 问题 2 – “阅读更多”按钮部分隐藏

[编辑 2022.02.10 – Viviana Menzel 在 https://issues.joomla.org/tracker/joomla-cms/36998 上提出了对这个问题的修复]

在博客视图中，根据文本长度和视口（移动视图），“阅读更多”按钮经常部分隐藏甚至完全隐藏

issue2

Viviana Menzel 帮助我解决这个问题，注意到禁用以下 CSS 行可以在移动视图中修复问题

.image-left .blog-item .item-image, .image-right .blog-item .item-image {
    flex: 1 0 40%;
}

由于此行在宽屏上是有用的，并且显然只在移动视图中有副作用，我们可能只需添加一个媒体查询来禁用它或调整它。

例如，在 J4.1+ 中的 /media/templates/site/cassiopeia/css/user.css（在 J4.0 中是 /templates/cassiopeia/css/user.css）中添加以下内容

@media (max-width: 992px) {
  .image-left .blog-item .item-image, .image-right .blog-item .item-image {
    flex: 1 1 40%;
  }
}

5.3. 问题 3 – 博客视图中的布局

[编辑 2022.02.10 – Viviana Menzel 在 https://issues.joomla.org/tracker/joomla-cms/36998 上提出了对这个问题的修复]

当使用文章类 image-right 进行博客视图（例如1列）时，我发现图片和简介文本不会均匀显示：当简介文本太短时，例如当右边的图片紧挨着左边的文本（而不是有50%-50%的布局）时。

用 image-right image-alternate boxed 来说明（但我已经核实：只需 image-right 就足以创建问题）

issue3

我没有太多时间来调查这个问题，但作为一个快速的解决方案，我在 J4.1+ 中的 /media/templates/site/cassiopeia/css/user.css（在 J4.0 中是 /templates/cassiopeia/css/user.css）中添加了以下内容

.image-left .blog-item .item-content, .image-right .blog-item .item-content {
    flex: 1 0 40%;
}

如果您能进一步调查并修复Cassiopeia，我们将不胜感激。

在Joomla社区杂志上发表的一些文章代表了作者在特定主题上的个人观点或经验，可能并不与Joomla项目的官方立场一致

1
  Facebook   Twitter   LinkedIn   Pinterest
标签
Cassiopeia Templates Designers
Joomla 4 基础培训：实战演练 - Aut...

关于作者

Marc Dechèvre

Marc Dechèvre

Marc Dechèvre
 

评论 21

已经注册？ 这里登录
Marc Dechèvre
Marc Dechèvre 在 2023年3月8日星期三 09:24
forum.joomla.org

嗨，Wraith中士。对于您的实际案例，您可以在forum.joomla.org上提问一般性问题，或在https://joomla.stackexchange.com/上提问开发者问题

0
嗨，Wraith中士。对于您的实际案例，您可以在forum.joomla.org上提问一般性问题，或在https://joomla.stackexchange.com/上提问开发者问题
取消 更新评论

通过接受，您将访问https://magazine.joomla.net.cn/之外由第三方提供的服务的服务