This page lists some of the more advanced or less-used features of the blog software.
Shortcodes are markdown content that can be shown inside blog posts (like templates that can be referenced). The idea is to reuse certain shortcodes across various blog posts. If you update the shortcode, it will be updated across all those blog posts as well.
For example if you have a running promotion you can add a shortcode and link it in various blog posts. Updating the shortcode (for example that it is almost sold out) will update all blog posts that reference this shortcode.
To create a shortcode, click on "Shortcodes" in the Admin tab of the navigation bar. You can create a shortcode by adding a name in the top row and the markdown content in the editor. Clicking on an already existing shortcode will allow you to either edit the shortcode or delete it.
Currently, deleting a shortcode will leave the shortcode name inside the blogpost. Therefore only delete shortcodes if you are sure that they are not used anymore.
There are two ways:
- If you know the shortcode name, just type in
[[SHORTCODENAME]]whereSHORTCODENAMEis the name you gave the shortcode. - Click on the more button in the editor and select "Shortcodes". This will open a dialog where you can select the shortcode you want to insert and puts it into the clipboard.
Shortcodes
- are not recursive. This means that you cannot use a shortcode inside a shortcode.
- are not part of the table of contents even though they might have headers.
- are not part of the reading time calculation.
- are only available in the content section of a blog post and not the description.
- are currently only copied to the clipboard and not inserted directly into the editor at the cursor position.
The Critical CSS Generator is a tool that extracts the minimal CSS required for rendering the above-the-fold content of the blog. This optimization improves the initial page load performance by reducing render-blocking CSS.
The generator:
- Starts a test instance of the blog
- Visits the homepage and a sample blog post
- Extracts the critical CSS using Playwright
- Outputs the CSS based on the chosen output
The generator is under tools/LinkDotNet.Blog.CriticalCSS. You can run it from the command line or directly via dotnet run. Here an example
dotnet run -- --install-playwright -o file -p "critical.css"The output of the "critical.css" should be copied into the head of the _Layout.cshtml file.
| Option | Long Form | Description | Required | Example |
|---|---|---|---|---|
-i |
--install-playwright |
Installs required Playwright dependencies | No | --install-playwright |
-o |
--output |
Output mode: console, file, or layout |
Yes | --output console |
-p |
--path |
File path for file or layout output modes |
Yes* | --path styles.css |
-h |
--help |
Shows help information | No | --help |
*Required when using file or layout output modes
Outputs the critical CSS directly to the console:
dotnet run -- --output consoleSaves the critical CSS to a new file:
dotnet run -- --output file --path critical.cssInjects or updates the critical CSS in your layout file:
dotnet run -- --output layout --path ./Pages/Shared/_Layout.cshtml- Install Playwright and output to console:
dotnet run -- --install-playwright --output console- Save critical CSS to a file:
dotnet run -- --output file --path styles.css- Update layout file with critical CSS:
dotnet run -- --output layout --path _Layout.cshtml- Show help information:
dotnet run -- --help- The tool requires an internet connection for Playwright installation
- The generated CSS is minified for optimal performance
- When using layout mode, existing
<style>tags will be replaced - If no
<style>tag exists in layout mode, it will be inserted before</head>