saltMonger / tfx-statiq-blog

Portfolio website built in Statiq.Web and C#

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Blog Boilerplate for Statiq.Web

This boilerplate is designed to help you quickly get your statically generated blog up and running using Statiq.Web. It includes an RSS feed, a customizable sidebar, and widgets such as categories and date archives. Please respect the licensing terms for Statiq.Web.

How to use the boilerplate

Making customizations to your blog using the boilerplate is easy. Here is a detailed write-up on the subject. Following are some common configuration suggestions.

  • To add your own blog posts, create Markdown (.md) files, or use any other supported syntax and place them in the /input/blog/posts/ directory. There are sample posts included in the boilerplate.

  • To change your website title, blog title, and other details, edit the appropriate value in Constants.cs.

  • To change the subdirectory for your blog from /blog/ to another path, change the name of the blog folder in the input directory and set the BlogPath string in Constants.cs to the new location.

  • To change your permalink structure, change line 24 of Program.cs. By default, the boilerplate template uses /{year}/{category}/{title} for generating permalinks.

  • The sidebar is displayed by default. To hide it, add HideSidebar: true markup to the pages where you do not wish to show the sidebar.

  • To change the order of items in the sidebar, or to add your own widgets, simply edit /input/blog/_sidebar.cshtml. If you want the sidebar to display on the left side of the page. Simply move things around in /input/_layout.cshtml.

  • To adjust how posts are displayed in index and archive pages, adjust /input/blog/_posts.cshtml. For example, you could create a card-style display by using the following code:

<div class="row">
    @foreach (IDocument post in Model)
    {
        IDocument topicDocument = Outputs[nameof(Archives)][$"{Constants.BlogPath}/categories/{post.GetString("Category")}/index.html"];
        string excerpt = post.GetString(Statiq.Html.HtmlKeys.Excerpt);
        excerpt = excerpt.RemoveEnd("");
        var words = excerpt.Split().Take(50);
        excerpt = string.Join(" ", words);
        excerpt += $" ... <span class=\"small\"><a href=\"{Context.GetLink(post)}\">Read more</a></span></p>";
 
        <div class="col-12 col-md-6 @(Document.GetBool("HideSidebar")?"col-lg-4 col-xl-3":"col-xl-4") mb-3">
            <div class="card">
                <div class="card-header">
                    <h2 itemprop="headline name" class="card-title">
                        <a itemprop="url" class="small" href="@Context.GetLink(post).Substring(1)">@post.GetString("Title")</a>
                    </h2>
                    <div class="bh">
                        <time datetime="@post.GetString("Published")" itemprop="datePublished">@post.GetDateTime("Published").ToString("MMMM dd, yyyy")</time>
                        @if (topicDocument != null)
                        {
                            <a href="@(topicDocument.GetLink())"><span class="badge badge-info">@topicDocument.GetTitle()</span></a>
                        }
                    </div>
                </div>
                <div class="card-body">
                    <div itemprop="articleBody">
                        <div class="card-text">@Html.Raw(excerpt)</div>
                    </div>
                </div>
            </div>
            <div class="collapse" aria-hidden="true" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
                <meta itemprop="name" content="@post.GetString("Author")">
            </div>
            <meta itemprop="dateModified" content="@post.GetString("Modified")">
        </div>
    }
</div>

Thanks to the following projects who currently use Statiq.Web. Their code was used as a reference for designing this boilerplate.

About

Portfolio website built in Statiq.Web and C#


Languages

Language:C# 78.2%Language:CSS 16.4%Language:JavaScript 5.4%