README

• Bootstrap 4.x CSS，Font Awesome 5.x，JQuery 3.x 包含在 Page.ss 中
• 包含Bootstrap Navbar菜单链接
• 移动页面友好
• 非常容易手动或使用SilverStripe-All-in-One包自定义

如何安装主题

composer require alexstack/silverstripe-custom-bootstrap4-theme

移动演示页面

桌面演示页面

从头开始创建一个网站？尝试我们的SilverStripe All-in-one管理包

• 它将允许你在设置中更改主题，而不需要触摸 themes.yml 文件
• 易于自定义页面顶部logo、页面底部的版权内容、导航栏上方的页面内容，设置不同的自定义CSS文件
• 点击这里查看此SilverStripe-All-in-One包的详细信息

如何在SilverStripe 4.x中启用主题

编辑你的 app/_config/theme.yml，将 'old-theme' 改为 'silverstripe-custom-bootstrap4-theme'

SilverStripe\View\SSViewer:
  themes:
    - 'silverstripe-custom-bootstrap4-theme'
    - '$default'

我是否可以自定义所有的 .ss 模板文件？

• 是的，你对所有文件都有100%的控制权
• 安装后，所有的 .ss 模板文件将安装在你的-ss-project/themes/silverstripe-custom-bootstrap4-theme
• 并且CSS/JavaScript文件将复制到你的-ss-project/public/_resources/themes/silverstripe-custom-bootstrap4-theme
• 你可以忽略你的-ss-project/themes/silverstripe-custom-bootstrap4-theme中的CSS/JavaScript文件

如何为每个页面设置页脚

• 首先，它将在 SiteConfig(设置)中显示 PageFooter
• 然后，它将显示URL段为 "PageFooter" 的页面内容
• 
• 不要忘记将此页面设置为不在菜单中显示
• Silverstripe模板 Includes/PageFooter.ss 代码如下

<!-- PageFooter Start -->
<% if $SiteConfig.PageFooter %>
    $SiteConfig.PageFooter
<% else %>
    <% with $Page("PageFooter") %>
        $Content
    <% end_with %>
<% end_if %>
<!-- PageFooter End -->

如何为每个页面设置页眉（在导航栏上方）

• 首先，它将在 SiteConfig(设置)中显示 PageTop
• 然后，它将显示URL段为 "PageTop" 的页面内容
• 
• 不要忘记将此页面设置为不在菜单中显示
• Silverstripe模板 Includes/PageTop.ss 代码如下

<!-- PageTop Start -->
<% if $SiteConfig.PageTop %>
    $SiteConfig.PageTop
<% else %>
    <% with $Page("PageTop") %>
        $Content
    <% end_with %>
<% end_if %>
<!-- PageTop End -->

如何设置导航菜单

• 它将循环 $Menu(1) 并显示链接和子链接
• 文档在此： https://bootstrap.ac.cn/docs/4.1/components/navbar/
• Silverstripe模板 Includes/Header.ss 代码如下

<% loop $Menu(1) %>
<li class="nav-item <% if $Children %>dropdown<% end_if %> <% if $isCurrent %>active<% end_if %>">
    <% if $Children %>
    <a class="nav-link dropdown-toggle" href="$Link" id="drop{$ID}" role="button" 
    aria-haspopup="true" aria-expanded="false" data-toggle="dropdown" >
        $MenuTitle.XML
        <span class="icon d-none d-lg-inline icon-down-arrow"></span>
        <span class="icon opener d-lg-none icon-down-arrow"></span>
        <span class="sr-only">(current)</span></a>
        <% if $Children %>
        <div class="dropdown-menu" aria-labelledby="drop{$ID}">
        <% loop $Children %>
            <a class="dropdown-item" href="$Link">$MenuTitle.XML</a>
        <% end_loop %>
        </div>
        <% end_if %>
    <% else %>
        <a class="nav-link" href="$Link">$MenuTitle.XML</a>
    <% end_if %>
</li>
<% end_loop %>

如何为每个页面设置顶部logo（右上角）

• 它将显示 SiteConfig(设置)中的 TopLogo
• Silverstripe模板 Includes/Header.ss 代码如下

<% if $SiteConfig.TopLogo %>
    <img src="$SiteConfig.TopLogo.URL" class="top-logo" />
<% else %>
    <img src="https://via.placeholder.com/250x70/ebf0f5/000000/?text=Top+Logo" class="top-logo" />
<% end_if %>

如何为每个页面设置横幅图片（右上角）

• 它将在页面中显示横幅图片
• Silverstripe模板 Includes/Header.ss 代码如下

<% if $Top.BannerImage %>
    <div class="text-center top-banner" style="background-image: url($Top.BannerImage.URL);" >
    </div>
<% end_if %>

如何设置不同于 custom.css 的 .css 文件

• 它将显示 SiteConfig(设置)中的 CustomCssFile
• 您可以通过SilverStripe-All-in-One包轻松更改它
• Silverstripe模板 Includes/Header.ss 代码如下

	<!-- Custom CSS -->
	<% if $SiteConfig.CustomCssFile != '' %>CustomCssFile
		<% require themedCSS($SiteConfig.CustomCssFile) %>
	<% else %>
		<% require themedCSS('custom') %>
    <% end_if %>

如何在SilverStripe 3.x中启用主题

• 下载并将主题复制到你的SilverStripe项目的 themes/ 目录。如果你命名正确，应该有一个名为 themes/silverstripe-custom-bootstrap4-theme 的目录。

• 将以下内容添加到你的 mysite/_config.php 文件中。删除任何现有的 SSViewer::set_theme 行。

   SSViewer::set_theme("silverstripe-custom-bootstrap4-theme");
   HtmlEditorConfig::get('cms')->setOption('theme_advanced_styles', 'highlight=highlight;no-border=no-border,break=break');
  

许可证

• BSD-3-Clause