README

此模块提供基本骨架，方便构建单页网站。

安装

最佳安装方式为通过composer。您可以克隆仓库或下载zip文件，但您应该在silverstripe根目录下找到一个名为"onepage"的目录，其中包含所有文件。

使用Composer

composer require wernerkrauss/silverstripe-onepage dev-master

要求

Silverstripe 4
Heyday Colorpalette

对于兼容SS3的版本，请参阅 v0.3.1

功能

为每个幻灯片选择颜色：背景、页眉和文本
为每个幻灯片定义背景图像
为每个幻灯片定义额外的CSS类以增加灵活性
直接调用时，幻灯片将重定向到父容器

配置

您可以在config.yml中定义全局或针对每种页面类型的颜色选择，例如

Page:
  background_color_palette: 
    - '#fff'
    - '#aacccc'
    - '#ccaaaa'
    - '#000'

您可以在布局标签中仅对单页幻灯片限制额外的字段（颜色和背景图像）

Netwerkstatt\Onepage\Extensions\OnePageSlide:
  use_only_on_onepage_slides: true

您可以通过设置来设置空默认值并关闭选择颜色的需求

Netwerkstatt\Onepage\Extensions\OnePageSlide:
  colors_can_be_empty: true

用法

基本设置

定义一个页面为“单页容器”页面类型，并添加一些子页面。在“布局”标签中，您可以添加所有额外的内容，如背景图像、颜色或CSS类。这就完成了！

不同页面类型

当然，您可以使用任何页面类型作为幻灯片。只需创建一个用于包含的模板并添加后缀“_onepage”即可。请参阅包含的文件 Page_onepage.ss

如果您的页面类型支持多个布局（例如，通过下拉菜单），则可以在页面中添加一个名为 generateOnePageTemplateSuffix() 的函数，如下所示

	public function generateOnePageTemplateSuffix() {
		return '_' . $this->Layout . '_onepage';
	}

这样，您可以使用名为“Page_layout1_onepage.ss”的模板渲染幻灯片

技巧

导航和滚动到幻灯片

导航/滚动到幻灯片可以通过例如使用OnepageNav jQuery插件来完成，该插件未与此模块捆绑。

设置此设置的可能的javascript如下

$(function($){
    //remove pathname from slide links if they are on the current page
    $.when(
        $('#MainNavList').find('a').each(function(){
            if ($(this).prop('pathname') == window.location.pathname) {
                $(this).prop('href', $(this).prop('hash'));
            } else {
                $(this).addClass('external');
            }
        })
    ).done(function(){
        //initialize onepage nav
        $('#MainNavList').onePageNav({
            currentClass: 'current',
            changeHash: false,
            scrollSpeed: 750,
            scrollThreshold: 0.5,
            filter: ':not(.external)',
            easing: 'swing'
        });
    });
});

展示

您可以在以下网站上看到此模块的演示

请随意将您的项目添加到此列表中。

替代品

在SilverStripe中存在一些块构建器模块。SilverStripe 4的默认模块是Elemental。

贡献

请随意提交问题或提交拉取请求。

翻译

此模块通过Transifex翻译所有字符串。

待办事项

--滚动到幻灯片（重要！）--请参阅上面的提示
--重定向幻灯片页面到OnePageHolder#Slide--
--使用单独的模板为页面类型包含为幻灯片--
--i18n--
创建单元测试
使用focuspoint模块进行背景图像
重构和改进

许可证

MIT许可证

wernerkrauss / silverstripe-onepage

维护者

详细信息