By default you can’t add Fluid Engine section to Blog in Squarespace. But we can create some pages in Not Linked, design them with Fluid Engine section, then attach them to blog post content.
The code will automatically map based on URL rules, so you won’t need to do much editing.
Follow these steps.
#1. First, find Blog Item URL
In my example, we will have:
-
/527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b-4eyxe
-
/527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b
-
/527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b-4eyxe-83lrc
#2. Next, create some pages in Not Linked
with URL like this. fe-527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b-4eyxe-83lrc
in my example, we have 3 blog items, so you will create 3 pages, with urls
-
fe-527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b-4eyxe-83lrc
-
fe-527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b-4eyxe
-
fe-527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b
It’s basically the same as a blog item URL, only we add “fe-” before the URL.
#3. Next, install Section Loader Supreme Plugin
#4. Next, use this extra code under Plugin code
<script>
document.addEventListener('DOMContentLoaded', function() {
const currentPath = window.location.pathname;
if (!currentPath.startsWith('/527blogsidebar/')) {
return;
}
const contentWrappers = document.querySelectorAll('.blog-item-content-wrapper');
const fePageUrl = currentPath.replace(/^\//, '/fe-');
contentWrappers.forEach((contentWrapper, index) => {
const loaderDiv = document.createElement('div');
loaderDiv.setAttribute('data-wm-plugin', 'load');
loaderDiv.setAttribute('data-source', fePageUrl);
contentWrapper.parentNode.insertBefore(loaderDiv, contentWrapper);
contentWrapper.remove();
});
if (window.wmSectionLoader) {
wmSectionLoader.init();
}
});
</script>
Remember to update Blog Page URL
#5. Result
#6. In case you want to replace whole blog content (blog title, blog post content) with Fluid Engine Page, you can use this new code.
Remember to update Blog Page URL.
<script>
document.addEventListener('DOMContentLoaded', function() {
const currentPath = window.location.pathname;
if (!currentPath.startsWith('/527blogsidebar/')) {
return;
}
const sectionsContainer = document.querySelector('main#page > .sections');
if (!sectionsContainer) {
return;
}
const fePageUrl = currentPath.replace(/^\//, '/fe-');
const loaderDiv = document.createElement('div');
loaderDiv.setAttribute('data-wm-plugin', 'load');
loaderDiv.setAttribute('data-source', fePageUrl);
sectionsContainer.parentNode.insertBefore(loaderDiv, sectionsContainer.nextSibling);
sectionsContainer.remove();
if (window.wmSectionLoader) {
wmSectionLoader.init();
}
});
</script>
If Header overlaps Fluid Engine Section, you can use this extra code to Custom CSS
body[class*="type-blog"].view-item {
header#header {
position: static !important;
}
}
