Let editors add pages

Most SunBird pages are built in code. A template lets editors add pages themselves, such as news stories: the developer builds the page once, says which pages it may go under, and an editor adds a new one from the edit bar of that page. Each added page has its own title, address and slot content, and is drafted, published, previewed and rolled back like any other page.

1. Build the template

A template is an ordinary Razor page. Put [SunBirdTemplate] on its PageModel, in place of [SunBirdPage]:

[SunBirdTemplate("article", Name = "Article", Description = "A news story or blog post: a headline, an introduction, a picture and the story.")]
public sealed class ArticleModel : PageModel
{
}
  • The key ("article") is stored with every page made from the template, so do not change it once editors have used it. It follows the page-key rules: 1 to 100 ASCII letters, digits, -, _ and ., unique among the site's templates.
  • Name is what editors see if there is a choice of templates. Description is an optional sentence under it.

Mark the editable parts with slots, as on any page. The markup content is each slot's default in every new page:

@page
@model ArticleModel
<article class="section">
    <h1><sb-text key="headline">A headline for the story</sb-text></h1>
    <sb-html key="intro"><p>One or two sentences that sum the story up.</p></sb-html>
    <sb-image key="picture" src="/img/hero.svg" alt="" />
    <sb-html key="body"><p>The story itself.</p></sb-html>
</article>

Put the template anywhere under Pages/, for example Pages/Templates/Article.cshtml. Its own file address answers 404: a template is reached only through the pages made from it. Put <sb-seo /> in the layout's <head>, so each added page gets its title as its <title>.

2. Say where it may be added

List the template in ChildTemplates on the page it goes under:

[SunBirdPage("news", Title = "News", ChildTemplates = ["article"])]
public sealed class NewsModel : PageModel
{
}

That is all: there is nothing to register and no setting. A template can list ChildTemplates too, so a section made by an editor can have pages of its own. Only a page whose route has no parameters can have pages under it. MapSunBird() stops at startup if ChildTemplates names a template that does not exist, or if two templates share a key.

3. List the added pages

Header, footer and navigation stay in code, so show the added pages where they belong, usually on the page they were added under:

<sb-sub-pages class="news-list" />

It renders the published sub-pages of the current page as links, newest first, and nothing if there are none:

<ul class="news-list"><li><a href="/news/opening-day">Opening day</a></li></ul>

page="news" lists another page's sub-pages, and limit="3" caps the list, for example for the latest news on the home page. For markup of your own, inject ISunBirdPages and call GetSubPagesAsync("news"): each SunBirdPageLink has the page's Key, Title, Url and FirstPublishedUtc. Both read from memory, so public pages still never write to the database. Drafts, unpublished pages and pages under an unpublished page are never listed.

How editors add a page

  1. Go to the page the new one belongs under, such as News.
  2. Click New page on the edit bar. A blade opens on the right.
  3. Type a title. The address fills itself in from the title (/news/opening-day); change it if you like. Choose the kind of page only if there is more than one.
  4. Click Create and edit. The page opens in edit mode as a draft, which only editors can see until it is published.

The blade also lists the pages already under this one, drafts included, so they are easy to find again.

Addresses

A page's address is its parent's address plus its own slug: lowercase letters, digits and single hyphens, at most 100 characters, with the whole address at most 200. An address that a code page or endpoint answers, or that another page uses, is refused. Code always wins. An address asked for in capitals redirects to the lowercase one.

In edit mode, Page settings shows an added page's Page title and Address. They are saved with the page:

  • Save as draft keeps a new address in the draft. Visitors still see the page at its published address.
  • Save and publish moves the page, and every page under it moves with it. Old addresses then redirect (301) to the new ones.

Rolling back to an earlier version restores that version's title and address too, unless another page has taken the address since.

Unpublish and delete

An added page's Page settings also has:

  • Unpublish: takes the page, and the pages under it, off the public site. Nothing is lost, editors can still open it, and publishing it again brings it back.
  • Delete page: asks first, then removes the page from the site and frees its address. Its history is kept in the database. A page with pages under it cannot be deleted until they are.

Pages built in code cannot be unpublished or deleted.

Staging

Staging and production share one database, and an added page and its address changes are drafts until published. A page added or moved on staging therefore cannot appear on the live site until someone publishes it there.

Coming: <sb-nav>, so editors can choose which pages show in the site's navigation.

Edit this page