Plugins
Quill has two types of plugin systems. The first type is the plugins that you can configure on the Quill dashboard. And another is the ones you can insert in Craft app by putting a code block. Let’s dive into them.
Plugins from dashboard
The most of plugins are configurable on the Quill dashboard.
Header, Footer, and Sidebar
You can compose multiple Craft docs into a single page because you may need header, footer or sidebar.
You can simply paste the secret link to your doc into any of these plugins.
Whenever you modify these docs, you can come back here, and Quill will check if there’s any update. You can click "Update" button if you want.
Custom CSS
If you’re comfortable with CSS, you can write custom CSS to customize the appearance of your website. There are useful class names in the HTML that you can utilize. You can discover them from your browser’s developer tool.
Custom JS
You can insert JavaScript code.
You can also write page-specific code like the following:
const quillContainer = document.querySelector('.quill-container');
if (quillContainer.getAttribute("data-quill-path") === "post/2021-review") {
// ...
}
Custom HTML in <head> tag
You can add custom HTML in <head> tag in case you need to embed snippets for analytics, etc.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YOUR-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-YOUR-ID');
</script>
Custom HTML in <body> tag
You can add custom HTML in <body> tag in case you need to embed snippets for analytics, etc.
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-YOUR-TAG-ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Code block plugins
Custom HTML
You can add custom HTML in a specific page by adding a code block in your doc. The first line of the code block should be quill-html.
Then the rest will be rendered by Quill.
Dynamic Page List
Let’s say you run a blog with Quill, and display a list of posts you’ve written. Every time you write a new post, you need to update the list to include it. If you want to do it manually for better curation, then there’s no problem. However, you can also dynamically list posts. The code block starts with quill-pages.
quill-pages have three sections, which are all optional.
•
[include] specifies the patterns of paths to include.
•
[exclude] specifies the patterns of paths to exclude.
•
[limit] specifies the number of posts to show.
These patterns are matched by micromatch. You can learn more about the syntax here.