shatodj/bolt-shato-theme

Bolt 4 CMS 的模板主题，使用 Webpack 构建

维护者

详细信息

github.com/shatodj/bolt-shato-theme

主页

源代码

问题

安装: 14

依赖: 0

建议者: 0

安全性: 0

星标: 0

关注者: 2

分支: 0

开放问题: 9

语言:Twig

类型:bolt-theme

1.0.0 2021-07-30 08:29 UTC

Requires

Conflicts

MIT 23af849d8f8ab749a9ac41e92e092be8280c0203

themeboltwebpackbulma

This package is auto-updated.

Last update: 2024-09-21 09:31:57 UTC

README

Bolt 5 CMS 的模板主题。

该主题旨在提供一种简单的方式来扩展模板中的核心元素。主题中的自定义内容类型增强了用户体验，以便放置可重用的区域块。

功能

  • 自定义颜色外观
  • 使用 Twig 扩展主题块
  • 图片和区域背景的懒加载
  • 响应式设计
  • 开发和生产构建
  • 不需要 JQUERY，因为你不需要它！
  • EcmaScript6 语法

技术栈

  • Webpack 5
    • 从 /src/scss 编译并压缩 scss 到 /dist/css
    • 从 /src/js 编译并压缩 js 到 /dist/js
    • 优化 /src/images 中的图片到 /dist/images
    • 从 /src/fonts 导出字体到 /dist/fonts
    • 导出 Google 字体到 /dist/css/woff.css
  • Bulma.io
  • Font Awesome
  • FsLightbox
  • eslint

如何在您的开发机器上运行

要求

  • Node.js v20 及以上

步骤

  1. 将此项目克隆到 Bolt 主题目录 或 使用 composer install

    composer require shatodj/bolt-shato-theme

bin/console bolt:copy-theme shatodj/bolt-shato-theme

  2. 在主题目录中安装项目依赖

    cd <bolt_directory>/public/theme/bolt-shato-theme
npm install

  3. 运行准备脚本，这将

    • 生成构建所需的变量和配置文件
    • 将主题的自定义内容类型和分类法添加到 Bolt 的配置文件中（确保脚本具有写入权限）
    npm run prepare

  4. 构建主题

    # build for development
npm run build:dev

# ..or build for production
npm run build

  5. 别忘了更改 Bolt 的 config/bolt/config.yaml 中的默认主题属性

    theme: bolt-shato-theme

  6. 重新生成数据库样本（可选）。在前一个步骤中，我们创建了一些新的内容类型。这将清除当前数据库并创建带有占位符数据的新数据库。

    cd ../../../
bin/console doctrine:fixtures:load

TODO

  • 移除 JQuery
  • 维护模板 twig 修复
  • 部署/存档脚本
  • 渐进式图片加载（目前仅适用于区域背景）
  • 更新 js/scss 的实时重新加载
  • 根据主题偏好填充演示内容脚本
  • 区域块文档