5. Tag Helpers & Partial Views

In order to aid theme design DasBlog Core provides a series of components (Tag Helpers and Partial Views) that make it easier to layout themes.

Themes are created and edited through the theme editor at /admin/themes. Theme files use Razor, a markup syntax (supports C#) for embedding server-based code into web pages. Check out what you can accomplish with Razor here.

The following is a list of the most useful DasBlog Core components.

Blog Post

Blog post layouts are defined by _BlogItem.cshtml and rely on a model (@model PostViewModel).

Tag Helper\Partial View	Description
<post-title-link post=@Model />	Post title with a link to the post
<post-perma-link post="@Model" css="btn"> Read more... </post-perma-link>	Read more text with a post link
<post-link post="@Model" css="btn" />	Generic link to the post
<post-title post=@Model />	Post title text only
<post-content post="@Model" />	Post content
<post-content post="@Model" strip-html="true" />	Post content, strip HTML
<post-content post="@Model" content-length="200" />	Post content, restrict length
<post-description post="@Model" />	Post excerpt/description
<post-created-date post="@Model" />	Post created date
<post-created-date post="@Model" date-time-format="MMMM dd, yyyy" />	Post created date with formatting
<post-image post=@Model css="card-img" default-image="/images/default/dasblog.png" />	Post featured image with fallback
<post-read-time post="@Model" />	Estimated read time in minutes
<post-author post="@Model" />	Post author name
<post-categories-list post="@Model" >, </post-categories-list>	List of categories associated with the post
<post-comment-link post="@Model" />	Link to the comment section

Comment

Tag Helper\Partial View	Description
<partial name="_CommentBlockPartial" model="@Model.Comments" />	Displays comment section
<partial name="_CollapseCommentBlockPartial" model="@Model" />	Collapsible comment section with toggle
<comment-content comment="@Model" />	Comment text content
<comment-date comment="@Model" date-time-format="MMMM dd, yyyy H:mm" />	Comment date with formatting
<comment-gravatar-image comment="@Model" css="img-thumbnail" />	Gravatar image for comment author
<comment-user-home-page-link comment="@Model" />	Comment author name (links to homepage if provided)
<comment-css comment="@Model" />	Conditional CSS class based on comment state
<comment-page-control />	Pagination control for comment lists

Editing Posts

Edit/Delete tags should always be secured as defined here.

Tag Helper\Partial View	Description
<post-edit-link post="@Model" />	Edit link
<post-delete-link post="@Model" />	Delete link
<comment-management-link post="@Model" />	Link to comment management page
<comment-approval-link comment="@Model" />	Approve comment link (moderation)
<comment-unapprove-link comment="@Model" />	Move comment back to pending
<comment-delete-link comment="@Model" />	Delete comment link
<comment-mailto-link comment="@Model" css="btn" />	Email comment author

Social sharing

Tag Helper\Partial View	Description
<post-to-twitter post="@Model">Twitter</post-to-twitter>	Twitter share button
<post-to-facebook post="@Model">Facebook</post-to-facebook>	Facebook share button
<post-to-reddit post="@Model">Reddit</post-to-reddit>	Reddit share button
<post-to-linked-in post="@Model">LinkedIn</post-to-linked-in>	LinkedIn share button
<post-to-blue-sky post="@Model">BlueSky</post-to-blue-sky>	BlueSky share button

Site

For use in the _Layout.cshtml view...

Tag Helper\Partial View	Description
@RenderBody()	Renders the main portion of a content page (MVC).
<site-title />	Site title text
<site-title-link css="navbar-brand" />	Site title as a clickable link to home
<site-sub-title />	Site subtitle text
<site-description />	Site description text
<site-copyright />	Site copyright text
<site-root />	Site root URL
<site-search-box/>	Site search box
<site-page-control view-context="@ViewContext" />	Page control (page/1, page/2, etc)
<recent-posts />	List of recent blog posts
<category-list />	List of all categories
<archive-list />	Archive list grouped by month/year
<user-avatar css="rounded-circle" size="32" />	Gravatar for authenticated user

HTML head tag

Tag Helper\Partial View	Description
<partial name="_HtmlHeadPartial" />	Contains site title, description, author, Microsummary, etc.
<partial name="_HtmlRSSPartial" />	Contains RSS URL and edit URI
<partial name="_HtmlAtomPartial" />	Contains Atom feed link
<partial name="_TwitterCardPartial" />	Contains Twitter card meta tags
<partial name="_OpenGraphPartial" />	Contains Open Graph meta tag for the site
<partial name="_BlogPostingSchemaOrgPartial" />	Contains Open Graph meta tag for the blog post
<partial name="_HtmlThemePartial" />	References the site CSS and the Theme CSS

Securing tags

Tag Helper\Partial View	Description
<div dasblog-authorized class="col-md-12 mb-6"></div>	div and contents only gets displayed when logged in
<div dasblog-unauthorized class="col-md-12 mb-6"></div>	div and contents only gets displayed when logged out
<div dasblog-roles="Admin" class="col-md-12 mb-6"></div>	div and contents only gets displayed when logged in as Admin

Additional questions?

If you have additional questions or concerns please submit an issue.