cubear/cwd_project

一个轻量级的Drupal 8子主题,与cubear/cwd_base一起使用;来自康奈尔大学CIT-CD。

安装: 21

依赖: 0

建议者: 0

安全: 0

星级: 1

关注者: 22

分支: 0

语言:SCSS

类型:drupal-custom-theme

3.0.5 2024-01-30 17:20 UTC

README

Latest Stable Version

CD项目的启动子主题

另请参阅:CD Demo - Drupal启动套件和演示网站。

用法

从cwd_project创建子主题

  1. GitHub仓库获取此"cwd_project"文件夹的副本。

    • 如果您的网站是CD Demo的全新克隆,您已经在web/themes/custom中有了cwd_project。
  2. 将此副本重命名为适合您的项目。这将是您主题的机器名称(例如,康奈尔大学Ursine学院的名称可能是cwd_ursine)。为了保持一致性,我们通常将文件夹和文件命名为"cwd_xxxx"。

    • CWD是自定义开发网络开发部门的旧名称。虽然现在已经弃用,但它在许多地方仍在使用,三个字母比两个字母更具特色。所以现在,我建议就按这个名字!😛
  3. 启动主题中还有一些文件也需要更新它们的文件名以匹配

    • cwd_project.info.yml → cwd_ursine.info.yml

    • cwd_project.libraries.yml → cwd_ursine.libraries.yml

    • cwd_project.theme → cwd_ursine.theme

      • CSS和JavaScript资产也应重命名,但不需要与主题的机器名称匹配。例如,简化为ursine.css就很好。

      • 启动的project.scssproject.css文件是空的(除了注释中的某些断点建议)。启动的project.js也是空的,除了我们通常在每个项目中都需要(但通常也需要自定义)的Drupal特定搜索代码。

  4. "project"机器名称还必须在重新命名的cwd_ursine.info.yml内容中更新。这些实例用@CUSTOMIZE注释标记以增加清晰度。例如,在库部分

    • - 'cwd_project/global-styling' # @CUSTOMIZE (第25行)
  5. 也在cwd_ursine.info.yml中,应适当设置面向公众的"CWD Starter Theme"名称。(第5行)

    • 可选地,您还可以取消注释库引用以自定义CKEditor样式。(第27 & 28行)

    • CKEditor样式已从基本主题继承,因此您只有需要特定于项目的样式,并且它们不适合添加到基本主题本身时,才应取消注释这两行。如果您使用自定义CKEditor样式,则需要将基本主题中的css/ckeditor文件夹的副本添加到您的子主题中进行修改,并根据需要更新templates/ckeditor_templates.js文件。

  6. cwd_ursine.libraries.yml中,应更新CSS和JavaScript资产的文件名引用(如上步骤3中命名)。这也是您将添加任何项目特定自定义资产的地方。

  7. 主题中还有一个用于Drupal CMS的screenshot.png文件。请向设计师寻求帮助更新它!

    • 如果要让它与基本主题相匹配,则排版使用Avenir Next Medium。
  8. 从您的主题中删除composer.json(不需要保留)。

  9. ⚠️请按照以下“Drupal”步骤操作,包括cwd_project的重要清理。

Drupal

在您创建子主题并将其提交到您的站点仓库后

  1. 前往 /admin/appearance
  2. 启用您的新子主题并将其设置为默认主题。
  3. 卸载 cwd_project。
  4. 将上述主题更改的配置编码化。
  5. 从您的代码库中删除 cwd_project。

模板子文件夹

内容类型和其他组件

名为 newseventsslideshow 等的子文件夹是为内容类型和其他组件准备的。组件的更广泛子文件夹也行,只要最适合您的项目即可。(例如,在生物技术中,有一个 resources 子文件夹是有意义的,其中包含服务组件和仪器组件的模板。)

部分模板

将“部分”模板放在这里,例如 site-footer.html.twigincl--article-image.html.twig。这些模板不是完整的模板,它们是可重用/可重复的标记片段。它们可以直接包含,也可以带有参数(即 include ... with)。

示例用法

  • html.html.twig 使用 site-footer.html.twig
  • news--full.html.twig 使用 incl--article-image.html.twig

覆盖

将完整的模板覆盖放在这里,例如 views-view.html.twigmedia.html.twigfield--post-date.html.twig_block--with-button.html.twig。这些模板正是这样:完整的模板。它们可以直接包含,也可以带有参数包含,或者扩展,或者嵌入。

示例用法

  • 待办事项