Jump to main content

Edit block templates inside the manager with Scriban

2021-08-12 Piranha
Want to edit block templates without rebuilding your project? Let Scriban help you with that. Scriban parses your custom Html and objects and then gives you HTML ready to be used anywhere.

Scriban makes your life easier as a developer when you need to merge texts with data from your objects. By simply adding double curly brackets followed by your objects properties you can specify where in the text your data will be inserted. This comes in handy when generating emails, PDF files and much more.

Also note that Scriban automatically converts your property names into lowercase characters and if you have multiple capital letters they will be separated by underscores. This is due to the fact that Scriban is based on "Liquid templates". In other words the property MyPropertyIsNice will be converted into my_property_is_nice

There is a section in Scribans documentation that covers this issue with a possible solution. You can read more about the issue here:  https://github.com/scriban/scriban/blob/master/doc/runtime.md#member-renamer

Github: https://github.com/scriban/scriban
Nuget: https://www.nuget.org/packages/Scriban/

This block's HTML is powered by Scriban

By passing a string with your custom html and block object, Scriban can merge these two and return finished Html. This makes it easier when you need a chance to tweak things within the same type of blocks

Install Scriban
//Visual studio
Install-Package Scriban

//Command line
dotnet add package Scriban
ScribanBlock.cs - This will be our example block
[BlockType(Name = "Scriban block", Category = "Special", Icon = "fas fa-vial")]
public class ScribanBlock : Block
{
    [Field(Title = "Html template", Placeholder = "Enter some code..")]
    public TextField HtmlTemplate { get; set; }

    [Field(Title = "Title")]
    public StringField Title { get; set; }

    [Field(Title = "Content")]
    public HtmlField Content { get; set; }

    public string Html { get; set; }

    public void Init()
    {
        try
        {
            var template = Template.Parse(HtmlTemplate.Value);
            Html = template.Render(this);
        }
        catch
        {
            Html = @"
                <div class=""alert alert-danger"" role=""alert"">
                    The block could not be rendered. An error occoured!
                </div>";
        }
    }
}
ScribanBlock.cshtml - The block view
@model ScribanBlock

@Html.Raw(Model.Html)
Example code to try out in manager
<div class="text-center p-3 bg-light border">
	<h2>{{title.value}}</h2>
	{{content.value}}
</div>
How about another great post? Previous

You might also want to read the following

2021-08-11 Piranha

Track users with Google Analytics on your Piranha site

Keep a track on your visitors and which pages are popular with Google Analytics. This post gives you a great example on how you can implement a dynamic way to add end edit your tracking codes

2021-08-10 Piranha

Manage your footer with a region

Footers are a basic component of almost all websites. Therefor we'll make it as easy as possible for us to manage ours by turning it into a region area on our site model. This guide uses Bootstrap 5

2021-08-08 Piranha

Carousel block for Piranha with Bootstrap

A good image slider or carousel can complete your website. This post will give you a quick example on how you can add your own carousel to your Piranha site

2021-08-07 Piranha

Youtube block for Piranha

Want to show Youtube videos on your Piranha site? This post will give you a quick example on how you could implement a Youtube block on your site, either for showing useful videos or Rick-Rolling your visitors

2021-08-05 Piranha

Accordion block with Bootstrap 5

Sometimes you have way to much text to fit on a page. A simple way to structure and group important content is by using an accordion. This post will give you an idea on how you can implement your own accordion on a Piranha site