README

使用CSS文档生成SilverStripe主题的样式指南。

需求

SilverStripe 4或更高版本

安装

$ composer require benmanu/silverstripe-styleguide

基本用法

通过网站配置定义基础css/scss文件夹。

BenManu\StyleGuide\StyleGuideController:
  paths: 'styleguide/scss' 				// the base folder used to render kss.
  css_files:
    - 'themes/default/css/screen.css' 	// any css theme files to include in the styleguide.
  js_files:
    - 'themes/default/js/script.js' 	// any js theme files to include in the styleguide.

打开控制器路由/sg。

带有Styleguide 1.0、Styleguide 2.0等标签的注释用于创建主/sg/style-guide导航。子导航部分使用Styleguide 1.1、Styleguide 1.2等标签生成。子导航子项由类修饰符（如.btn-default、.btn-primary）组成。

示例

您可以使用以下配置文件中的配置在您的网站_config/config.yml文件中作为示例，使用样式指南模块的scss/css。

BenManu\StyleGuide\StyleGuideController:
  paths: 'styleguide/scss'
  css_files:
    - 'styleguide/dist/css/screen.css'

厨房洗涤CSS示例

/*
#Components

All the components!

Styleguide 1.0
*/

/*
#Buttons

Use the button classes on an <a>, <button>, or <input> element.

Markup:
<a class="btn $modifierClass">Button</a>

Template: Includes/Button

SectionTemplate: BenManu/StyleGuide/Includes/SGColorPalette

Deprecated:
If there was a deprecation notice it would go here.

Experimental:
If there was any experimental notes they would go here.

.btn-default - Standard button.
.btn-default:hover - Subtle hover highlight.
.btn-primary - Provides extra visual weight and identifies the primary action in a set of buttons.
.btn-success - Indicates a successful or positive action.
.btn-danger - Indicates a dangerous or potentially negative action.

$success - The success hex code variable.
$danger - The danger hex code variable.

Compatible in IE6+, Firefox 2+, Safari 4+.

Styleguide 1.1
*/

有关详细信息，请参阅KSS文档，但有几个例外是Template:和SectionTemplate:参数。Template:参数将渲染SilverStripe模板文件作为示例（请参阅以下示例），而SectionTemplate:将渲染SilverStripe模板文件作为部分显示。

所有注释描述都被视为markdown并通过parsedown解析。

部分与部分模板

示例

可以在(project)/styleguide/目录中创建一个名为fixture.yml的yml示例文件，用于填充模板变量。

所有模板文件应放在Template键下，例如

Template:
  Includes/Footer:
    FooterContent: '<p>Here is some footer content</p>'

或者，您可以通过引用其他非模板值来填充关系（has_one、has_many、many_many）和字段值，例如

SiteConfig:
  main:
    Title: MySite Title
Site:
  link1:
    Link: #link1
    Text: Link 1
  link2:
    Link: #link2
    Text: Link 2
  link3:
    Link: #link3
    Text: Link 3
StyleGuide:
  main:
    Content: '<p>Here is some footer content</p>'

Template:
  Includes/Footer:
    SiteConfig: =>SiteConfig.main
    FooterLinks: =>Site.link1, =>Site.link2, =>Site.link3
    FooterContent: =>StyleGuide.main.Content

页面

可以在(project)/styleguide/目录中创建一个名为pages.yml的yml示例文件，用于创建额外的主和子页面。参数Template应与您的主题中SilverStripe模板文件的名称相同。

所有模板文件应放在Page键下，例如

Page:
  documentation:
    Title: Documentation
    Template: SGDocumentation
  performanceMonitoring:
    Title: Performance Monitoring
    Template: SGPerformanceMonitoring

或者，您可以填充一个Children参数，以引用要包含在子导航中的子页面列表

Documentation:
  general:
    Title: General
    Template: SG_General
  css:
    Title: Css
    Template: SG_Css
  js:
    Title: Js
    Template: SG_Js
  git:
    Title: Git
    Template: SG_Git
  images:
    Title: Images and icons
    Template: SG_ImagesAndIcons

Children:
  child1:
    Title: Child 1
    Template: SGChild
  child2:
    Title: Child 2
    Template: SGChild

Page:
  documentation:
    Title: Documentation
    Children: =>Documentation.general, =>Documentation.css, =>Documentation.js, =>Documentation.git, =>Documentation.images
  performanceMonitoring:
    Title: Performance Monitoring
    Template: SGPerformanceMonitoring
    Children: =>Children.child1, =>Children.child2

项目链接

• KSS
• parsedown