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 area 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();
You can also define a single import for all of the content types in your application by adding the assemblies containing your types. The benefit of this is that you don't have to update your Startup code when adding new types.
using Piranha.AttributeBuilder;
var builder = new ContentTypeBuilder(api)
.AddAssembly(typeof(Startup).Assembly);
builder.Build();
Defining an archive page is equally simple, the only additional thing you need to do is to set IsArchive = true.
using Piranha.AttributeBuilder;
using Piranha.Models;
[PageType(Title = "Simple Archive", IsArchive = true)]
public class SimpleArchive : Page<SimpleArchive>
{
}
The page type is imported in the same way as regular pages.
The PageTypeAttribute has the following attributes available for configuring the behaviour of the Page Type.
[PageType(IsArchive = true)]
If the Page Type should be used as an Archive Page. The default value of the property is false.
[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.
[PageType(UseExcerpt = false)]
If the excerpt should be available when working with pages in the manager interface. The default setting is true.
[PageType(UsePrimaryImage = false)]
If the primary image should be available when working with pages in the manager interface. The default setting is true.
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.
using Piranha.AttributeBuilder;
using Piranha.Extend;
using Piranha.Extend.Fields;
using Piranha.Models;
[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.
You can secure pages by adding permissions to them that the current user must have in order to have access to them. By adding one or more permission to a page also means that the user has to authenticated in order to access the page. This can be done both from the manager interface but also from code.
myPage.Permissions.Add("WebUser");
You can read more about how to add custom permissions to your application in Authentication.
Now that you know the basics for setting up pages, you should continue to read about the different components available for creating more advanced content. Information about this can be found in the articles Blocks, Regions and Fields.