ProcessWire - One Page Website

Links

https://processwire.com/talk/topic/7297-one-page-websites/

Strategien

• Kindseiten um Sections zu erstellen
• Repatermatrix o.ä. können zu Sections werden

Navigation erstellen

• Smooth Scroll nutzen (sieht einfach besser aus und hilft bei der Orientierung.
• Klasse in CSS Editor wenn nicht alle Links Smooth Scroll Links werden sollen
• Klasse in Navigation

Beispiel für Repeater Matrix

Wir nutzen ein Feld nav_title für jedes Repeater Matrix Item. Ist dieses ausgefüllt erstellen wir einen Navigationspunkt. Als ID / Name für jede Section nutzen wir einfach die ID des RepeaterMatrix Items mit dem Buchstaben p als Prefix. nav_hashNav.php

<?php namespace ProcessWire;
$mainMenuMarkup = '';
$activeClass='';
$homePage = $pages->get("/");
$navItems = $homePage->and($homePage->children('menu.id=1'));
$mainMenuMarkup .= '<ul class="nav">';
foreach ($navItems as $navItem){
    $itemMarkup='';
    $hashNav='';
    // Current Page ?
    if($navItem->id == $page->id){
        $activeClass = ($navItem->id == $page->id) ? " active" : "";
        $hashNavItems = getHashNavItems($navItem);
        $hashNav = renderHashNav($hashNavItems);
    }
    $itemMarkup = '
    <li class="nav-item">
        <a class="nav-link '.$activeClass.'" href="'.$navItem->url.'"> '. $navItem->title.'</a>
        '.$hashNav.'
    </li>
    ';
    $mainMenuMarkup .= $itemMarkup;
} 
$mainMenuMarkup .= '</ul>';


// HASH NAVI FUNCTIONS
// If Hash-Links on actual page use them as subnav
// Hashes are created when field nav_title in layout_blocks is filled
// caching (i.e proCache) is recommended

function getHashNavItems($p){
	$navItems = array(); // pid=>title 
	foreach($p->layout_blocks as $lb){
		if($navTitle = $lb->nav_title) $navItems[] = array('pid'=>$lb->id, 'title' => $lb->nav_title);
	}
	if( !empty($navItems) ){
		return $navItems;
	}else return false;
}
function renderHashNav($subnavItems){
	$out='';
	if(!empty($subnavItems)){
		$out .= '<ul class="nav nav-v npl nml">';
		foreach($subnavItems as $item){
			$out .= '<li><a class="scroll" href="#p'.$item['pid'].'">'.$item['title'].'</a></li>';
		}
		$out .= '</ul>';
	}
	return $out;
}
?>

SmoothScroll JS

$(document).on('click', 'a.scroll', function (event) {
		event.preventDefault();
		$('html, body').animate({
			scrollTop: $($.attr(this, 'href')).offset().top
		}, 100);
	});

Smooth Scroll wird mittlerweile auch von vielen Browsern direkt unterstützt. Mit der scroll-behaviour Eigenschaft kann man es aktivieren.

SmoothScroll (CSS)

html,body{
    min-height: 100%;
    height: 100%;
}
html{
	scroll-behavior: smooth;
}