Pages are positoned in the hierarchical site structure and can be either regular pages, or archive pages. More information about Archive Pages can be found in the article Archives.
The content templates of your Pages are designed using Page types. Remember that this does not necessarily mean that all pages of the same Page type has to be rendered the same way, it simply means that they have the same content structure.
The preferred way of importing Page types is by using the Piranha.AttributeBuilder package. With this package you can directly mark your Page models with the Attributes needed.
Let's first look at how the simplest possible page type could look like. This page types doesn't provide anything other than the main content are which is made up of blocks.
using Piranha.AttributeBuilder;
using Piranha.Models;
[PageType(Title = "Simple Page")]
public class SimplePage : Page<SimplePage>
{
}
To import this page type during your application startup you add the following line to your Configure method.
using Piranha.AttributeBuilder;
var builder = new PageTypeBuilder(api)
.AddType(typeof(SimplePage));
builder.Build();
The PageTypeAttribute has the following attributes available for configuring the behaviour of the Page Type.
[PageType(Title = "Simple Page")]
The display title to show when working with pages in the manager interface. If this property is omitted the class name of the Page Type will be used as title.
[PageType(UseBlocks = false)]
Whether or not the main block content area will be used. This can be very useful for pages displaying information that should be fixed in its formatting and you want to limit the content to the pre-defined regions.
By default, all page request are rewritten to the route /page. Since you want to load different model types for your pages, and often render them by different views or pages you need to specify which route should handle your Page type. Let's say we have a page that also displays a hero.
[PageType(Title = "Hero Page")]
[PageTypeRoute(Title = "Default", Route = "/heropage")]
public class HeroPage : Page<HeroPage>
{
public class HeroRegion
{
[Field]
public StringField Title { get; set; }
[Field]
public ImageField Image { get; set; }
[Field]
public TextField Body { get; set; }
}
[Region]
public HeroRegion Hero { get; set; }
}
By adding the PageTypeRouteAttribute to your page type, all requests for pages of this page type will now be routed to /heropage.
Let's say we would also like to use our Hero Page as the Startpage of the site, but we might want to handle it differently by adding some content from another system, or send it to a different view. We can then just add a second PageRouteAttribute to our class.
[PageType(Title = "Hero Page")]
[PageTypeRoute(Title = "Default", Route = "/heropage")]
[PageTypeRoute(Title = "Start Page", Route = "/startpage")]
public class HeroPage : Page<HeroPage>
{
...
}
By adding a second route the page settings in the manager will now show a dropdown where the editor can select which route the current page should use.
In some cases you might want to create a special kind of page that should include a completely different editor. An example of this is Archive Pages which includes a completely different editor for handling the post archive of the page.
A page can have any number of custom editors which can be acheived by adding multiple editor attributes to the page type.
[PageType(Title = "Product Page")]
[PageTypeEditor(Title = "Products", Component = "product-editor", Icon = "fas fa-fish")]
public class ProductPage : Page<ProductPage>
{
...
}
Custom editors are implemented as global Vue components and are responsible for handling their own data, both loading and saving. Custom components are added to the manager by registering custom javscript resource in the manager module. You can read more about this in Resources in the section Manager Extensions.