titledk/cloudy

基于 Twitter Bootstrap 的 Silverstripe 主题

维护者

详细信息

github.com/titledk/silverstripe-cloudy

源代码

问题

安装: 187

依赖项: 0

建议者: 0

安全: 0

星星: 9

关注者: 6

分支: 3

开放性问题: 1

语言：CSS

类型：silverstripe-theme

dev-master 2013-10-27 16:44 UTC

Requires

Apache License 13271b9293ba08e89c6515e80c6500d91b426bce

themebootstrapsilverstripe

This package is not auto-updated.

Last update: 2024-09-14 13:10:01 UTC

README

image

该主题由 Anselm Christophersen 在 2012 年 1 月/2 月期间手工制作，用于 Silverstripe 主题大赛。

该主题是决赛选手之一，在代码质量方面排名第二。您可以在 Silverstripe 博客 上了解更多信息。

您可以在以下页面查看一些演示页面

版权和许可

该主题版权所有 2012 title.dk/Anselm Christophersen，并许可在 Apache 许可证 下。本主题中使用的第三方库根据各自的许可证授权。

安装

  • 将主题复制到您的 SilverStripe 项目的 themes/ 目录中。如果命名正确，应该有一个名为 themes/cloudy/templates 的目录。
  • 将以下内容添加到您的 mysite/_config.php 文件中：SSViewer::set_theme('cloudy');
  • 删除或取消注释任何其他现有的 SSViewer::set_theme 行。

关于本主题

功能

建立在伟大的 Twitter Bootstrap 2 框架 之上，Cloudy 不应仅被视为一个主题，还应被视为一个用于开始使用 Silverstripe 的工具箱，适合初学者和高级用户。

  • 在 SS3 和 SS2.4 中都能直接使用。
  • 由于其包含不同的配色方案，因此非常容易定制。此外，Cloudy 使用 Compass/SCSS 预处理器，因此可以轻松更改颜色变量。
  • 即使没有安装 Compass，CSS 仍然可以编辑！
  • 为多语言网站提供语言选择下拉菜单，以及为登录用户提供的顶部菜单。
  • 顶部菜单、引用和社交按钮等功能易于禁用。
  • 响应式 CSS 允许为小型屏幕、移动设备和平板电脑提供特定布局。

捆绑

  • 包含所有 Twitter Bootstrap 2 的小部件，以便轻松添加高级按钮、标签导航、模态框、工具提示和图片轮播。如果您不需要这些，可以轻松选择小体积的 JavaScript 版本。
  • 开源图标字体 Websymbols，允许轻松更改图标，例如 Cloud 图标，以及添加额外的社交媒体和顶部菜单图标。
  • 除了这些之外，不使用任何图像！所有图形效果都是 CSS3。后备功能由 Compass 的旧功能提供。
  • 2 个示例页面。使用这些页面来快速设置内容！

兼容性

  • 在所有现代浏览器上运行良好，并在 IE7/8 上尽可能良好。
  • 主要遵循 Silverstripe Ltd. 的模块和先前主题中设定的代码规范。
  • 包括用于博客和论坛的子主题，并且易于通过额外的子主题扩展。

Silverstripe 兼容性和支持的模块

该主题已与以下 Silverstripe 配置进行了测试

  • Silverstripe 3 alpha 2
    • 可翻译的（需要一些小调整）
    • thinc gallery（需要一些小调整）
    • 博客和论坛在此版本中似乎运行不佳。因此，它们已在 SS2 上进行了测试。
  • Silverstripe 2.4.7
    • 博客
    • 论坛（论坛支持应视为初步）

SS3微调

SS3当前的开发版本似乎在全文搜索/可翻译方面存在一些问题。为了使它们工作，已经做了以下操作

  • 在 /sapphire/search/FulltextSearchable.php 中的 enable 方法中删除以下行
    if(DB::getConn()->getDatabaseServer() == 'mysql') {

内容操作

对于内容编辑，Cloudy主要遵循Silverstripe标准。
一个小众的非标准功能是你可以在标题中集成子标题。
请看以下示例.
可以通过将标题包裹在一个HTML <small> 元素中来实现，如下所示： Gallery<small>另一个易于插入的模块</small>。

其余部分最好通过检查示例页面（查看 _preview 目录）来解释。

Bootstrap附带了一些非常棒的风格，特别是对于表格，这些表格在Cloudy中都已设置好。很快将添加如何使用这些样式的示例。

配置

图标

该主题捆绑了许多图标。请参见以下示例

使用以上参考更改 Logo.ss 中的logo图标，TopNavigation.ss 中的工具栏图标，以及 Footer.ss 中的社交图标。所有文件都位于 templates/Includes 中。

搜索和语言下拉菜单

Cloudy配置的示例。

您可以将这些添加到您的 /mysite/_config.php 文件中

#Enable Search
FulltextSearchable::enable();

#Translatable
#This requires the translatable and a couple of small tweaks 
#in the current SS3 alpha
Object::add_extension('SiteTree', 'Translatable');
Object::add_extension('SiteConfig', 'Translatable');

社交按钮

本主题包含一个包含社交媒体按钮的模板。由于它们的许多依赖项开发起来并不愉快，因此已取消注释，但它们很容易在实时网站上启用。
要启用按钮，请编辑 templates/Includes/Sidebar.ss，并将取消注释的代码更改为： <% include SocialButtons %>。

颜色方案

Cloudy附带2种颜色方案。绿色和基本。
基本颜色方案主要使用Twitter Bootstrap颜色。幸运的是，它们与Silverstripe颜色非常搭配。

更改颜色方案

通过编辑 templates/Page.ss 文件可以在颜色方案之间切换。找到包含 require themedCSS 的行，并将其更改为 cloudy-base 或 cloudy-green，或您可能已安装的任何其他颜色方案。名称对应于位于 css 目录中的CSS文件。

创建自己的颜色方案

编辑CSS相当直接。建议不要覆盖当前的主题，而是创建自己的主题，并命名为例如 cloudy-myscheme。
推荐的方法是使用 Compass，但您也可以仅使用纯CSS。

使用纯CSS
  1. 复制 css/cloudy-base.css 或 css/cloudy-green.css，并在 css 目录中创建自己的文件
  2. 在 templates/Page.ss 中编辑 require themedCSS 部分，以反映您的新方案。
  3. 开始编辑
使用Compass

使用Compass，您可以利用内置变量和Twitter Bootstrap 2库中所有模块，这些模块已由 Brajeshwar 转换为SCSS。
首先查看 scss/cloudy-green.scss。这应该会带您走很长的路。并且不要忘记cd到cloudy目录并运行 compass watch。

当使用指南针时，您可以从 config.rb 文件的最后一行中删除前面的哈希符号： sass_options = {:debug_info => true}。如果您这样做，指南针将使用来自 FireSass 的调试信息编译您的样式表，这在开发过程中非常有用（您需要安装 FireSass Firebug 扩展才能使此功能正常工作）。

预览功能

该主题包含一个“预览”功能，用于在更改颜色时显示一些实时示例，以及显示一些字体和模块示例。

删除预览功能

“预览”功能会向主题添加一些 JS/CSS 和 html 代码。由于这些代码仅用于说明目的，因此它还包含一个脚本来轻松删除整个预览功能。

删除预览功能时遇到的问题排除

通常，只需在主页上按“删除预览文件”按钮即可轻松删除“预览功能”。如果由于某种原因这不起作用，以下是如何解决此问题的信息

  • 第一次尝试：更改权限
    • 如果您使用的是 OSX/Linux，请尝试进入主题文件夹，并运行 chmod -R 777 ./cloudy。
    • 如果您使用的是 Windows，可以通过右键单击 Cloudy 文件夹并编辑属性来调整文件权限。
    • 如果主题已直接安装在 Web 服务器上，请通过 ftp 登录，右键单击 cloudy 目录，赋予所有权限，并记得单击选项以递归地对所有子目录执行相同的操作。
  • 第二次尝试：手动删除文件。
    有时您可能无法编辑权限。在这种情况下，以下是如何手动删除预览文件的信息
    • 删除 _deletepreviewfiles.php。这是最初应该自动完成您工作的文件。
    • 删除 _preview 目录
    • 在 templates/Includes/ 中删除 Preview.ss 和 PreviewAssets.ss
    • 删除 javascript/preview.js
    • 删除 scss/preview.scss 和 css/preview.css
    • 编辑 templates/Page.ss 并删除行 <% include PreviewAssets %>
    • 编辑 templates/Layout/Page.ss 并删除行 <% include Preview %>

注意：如果您在实时网站上执行此操作，一旦删除了预览文件，删除对主题文件夹的写入权限是良好的做法。

计划中的功能

由于 Cloudy 是作为对 2012 年 Silverstripe 主题大赛的贡献而设计和构建的，因此并非所有功能都成为初始版本的组成部分。
以下功能计划在未来的版本中推出

  • 完全可翻译（对不起，我没有赶在截止日期前完成）。还有预览功能和文档。
  • 缩短此 Readme 文件长度，并将其他文档放置在 docs/en 文件夹中。这样，其他翻译就有适当的位置。
  • 更多颜色方案
  • 第三级导航：使用标签页！
  • 支持最流行和积极维护的模块
    这些计划将完全支持（并且可能会添加其他模块）
    • 博客
    • userforms
    • 事件日历
  • 更多字体示例，显示所有标题和表格布局
    • 有关如何在 tinyMCE 中正确使用 editor.css 样式的文档
  • 示例中的内置 JS 方案选择器
  • 修复在 iPad 竖屏模式下响应式设计的一些小问题