README

这是一个基于 roots/sage 开发者主题的入门主题

安装

在 Bedrock 或 Sage 根目录中安装 composer 包

  composer require log1x/navi tombroucke/otomaties-sage-helper

发布 bootstrap 组件

  wp acorn vendor:publish --tag="Bootstrap components"

查找与替换

• %devurl%（不带 https://）
• %client_name%
• %themename%
• %mu-plugin-namespace%

功能

Bootstrap

• Bootstrap 默认加载。您可以在 resources/styles/config/bootstrap 中取消注释组件和助手以减少构建时间。
• 自定义分页（@include('partials.pagination')）
• 面包屑导航（@include('partials.breadcrumb')）

PurgeCSS

• 将 css 类添加到 purge-safelist.cjs 以将其列入白名单

WPML

• 添加 @include('partials.language-switcher') 以出现 WPML 语言切换器

内置 headroom.js 支持

• 您只需添加 headroom 类（banner--not-top，banner--unpinned，...）的样式即可

WickyNilliams/headroom.js

自定义块样式

• 在 resources/scripts/editor.js 中，我们为 core/paragraph 块添加了 'Lead' 样式。使用 .is-style-lead 添加样式。

Ray 指令

您可以使用 @ray($somevariable) 指令将输出到您的 Ray 控制台

自定义

块

来自 Otomaties sage 助手的默认块

默认块（手风琴、卡片、相册、英雄等）可以轻松地从 Otomaties sage helper 中添加，例如。

wp acorn vendor:publish --tag="Otomaties block Buttons"

• 在 resources/scripts/blocks 中的 .js 文件将在找到匹配的块时动态导入。例如 resources/views/blocks/image-content.blade.php > resources/scripts/blocks/image-content.js
• 在 resources/styles/blocks 中的 .scss 文件将在存在相同名称（不带命名空间）的块的情况下自动入队。如果您想为 core/paragraph 入队块样式，您应该创建 resources/styles/blocks/paragraph.scss。

⚠️ 在添加 scss 文件后，需要重新启动 bud

自定义块

可以使用 Log1x/acf-composer 添加自定义块，例如。

wp acorn acf:block MyCustomBlock

自定义块的视图应包装在 <x-block> 组件中。例如

<x-block :block="$block">
  @if ($items)
    <ul>
      @foreach ($items as $item)
        <li>{{ $item['item'] }}</li>
      @endforeach
    </ul>
  @else
    <p>{{ $block->preview ? 'Add an item...' : 'No items found!' }}</p>
  @endif

  <div>
    <InnerBlocks />
  </div>
</x-block>

另请参阅 ACF Builder Cheatsheet

您可以在 resources/styles/blocks/my-block.scss 中添加您块的样式。这些将自动由我们的主题入队。添加样式后重新启动 bud。如果需要 bootstrap 变量、混入等。

@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/functions';
@import './../config/variables';
@import 'bootstrap/scss/variables';

Google 字体

1. 安装 Laravel Google Fonts，在 https://github.com/tombroucke/bedrock 使用时应该已经安装
2. 在 config/google-fonts.php 中替换字体
3. 在 head 中添加字体（前端和后台）

add_action('admin_head', function () {
    echo app(\Spatie\GoogleFonts\GoogleFonts::class)->load()->toHtml();
});

add_action('wp_head', function () {
    echo app(\Spatie\GoogleFonts\GoogleFonts::class)->load()->toHtml();
});

Theme.json

容器

容器有两种宽度：contentSize（768px）和 wideSize（1320px）。这些可以从 theme.json 中更改

颜色

在 resources/styles/config/_variables.scss 中定义的颜色应复制到 theme.json 中（settings.color.pallette）。有一个 ThemeJson 面板可以提取颜色。

在 PHP 中获取所有主题颜色的 <键，值> 列表

ThemeJson::colors()->pluck('name', 'slug');

导航

• 此入门主题使用 Log1x/navi。导航在 app/View/Composers/Navigation.php 中构建。
• 您可以将 Bootstrap 按钮类添加到菜单项（例如 btn btn-primary）以将其样式化为按钮
• 您可以将 fontawesome 类添加以添加图标（例如 fas-envelope）
• resources/scripts/components/header.js 将监听 .menu-item--has-submenu 元素上的点击事件，并切换此元素上的 menu-item--open 类。它还将从每个其他元素中删除 menu-item--open 类

移动端导航

• resources/scripts/components/header.js 将监听 .navbar-toggler 元素上的点击事件，并在 body 元素上切换 primary-nav-open 类。

谷歌地图

如果您正在使用谷歌地图，可以将 GOOGLE_MAPS_KEY 变量添加到您的 .env 文件中

代码片段

SVG 标志

文件应位于 resources/icons/logoname.svg

<x-icon-logoname width="200" height="100" />

在列表中获取 fontawesome 图标的列表

// app/Providers/ThemeServiceProvider.php
$this->app->bind('icons', function() {
    return Cache::rememberForever('fontawesome-icons', function () {
        $icons = [];
        $sets = app()->make('BladeUI\Icons\Factory')->all();
        foreach ($sets as $setname => $set) {
            if (strpos($setname, 'fontawesome') === false) {
                continue;
            }

            $niceSetName = str_replace('fontawesome-', '', $setname);
            foreach ($set['paths'] as $path) {
                $files = glob($path . '/*.svg');
                foreach ($files as $file) {
                    $iconBasename = basename($file, '.svg');
                    $iconName = $set['prefix'] . '-'. $iconBasename;
                    $icons[$iconName] = "$iconBasename $niceSetName";
                }
            }
        }
        return $icons;
    });
});


// app/Blocks/BlockWithIcons.php
...
->addSelect('icon', [
    'label' => __('Icon', 'sage'),
    'choices' => app()->make('icons'),
    'default_value' => 'fas-star',
])
...