Content Management Systems are great for making edits to text and images, but they usually come at a cost: You have to build your website on the CMS platform.
That means if you're using WordPress, Drupal, or Joomla, you're writing PHP and you're on their platform for good. If you use Ghost, Squarespace, or others, you are similarly locked into designing, planning, and scaling using their tech stack.
In this post, we'll enable you to use any tools you want to add a fast, SEO-friendly CMS that works on any website, on any platform.
About Anymod
Anymod is a tool that lets us add CMS functionality wherever we want by adding <section> tags to our HTML. These tags are then converted into editable content by the browser.
For example, this code:
<section id=anymod-klaln data-load=b></section>
loads the following content:
You can see it in action here: https://anymod.com/mod/preview?key=klaln
This content has some nice features:
- It gets delivered fast and indexed by Google
- The text and images are easily editable by developers, teams, or clients
- The HTML, CSS, and JavaScript are fully customizable
Once a section is added to your HTML, authorized editors on your team see a pencil icon when viewing your web page. Clicking the pencil allows them to make edits directly from the page.
With this setup in place, edits are simple, and you don't have to redeploy code for every. single. change. That means a faster, more robust workflow.
Next, let's add a working section and customize its content and code.
Adding a section
Visit the demo section here and click "Fork" at the top right to create your own section to work from.
Now copy the section tag and Anymod script at the bottom of the page and paste them into your project. Add the <section> tag wherever you want the section to show, and add the <script> tag at the bottom of your page, just before the closing </body> tag.
When you reload your web page, your section should appear on the page automatically.
Editing content
From your own page, you can edit content by clicking the pencil on the right side of the page and then choosing which section to edit by clicking on it.
You can also edit content & code in the Anymod dashboard, which is what we'll do here.
To edit content in the dashboard, click the "Content" tab at the top of the page. From here, you can manage the section's text & images.
Try editing some text, then click "Publish" when you are finished.
Customize CSS
We can style our section however we want using CSS rules that get scoped to apply only to this section. To see this in action, click on the "Code" tab at the top to open the code editor, then add a CSS rule that blurs our image on hover:
img:hover {
-webkit-filter: blur(5px) saturate(6);
filter: blur(5px) saturate(6);
}
Now whenever a visitor hovers over our image, it will blur.
Note that this CSS rule only applies to this section; it will not affect anything else on our page.
You can continue adding CSS (or SCSS) rules to the section to style it exactly the way you want.
Customize HTML
Let's add a heading at the top of the card that's also editable. To do this, we'll create a new content field and then add it to our section's HTML.
Click the "Settings" tab at the top, then use the form to add a plain text field called title. Click "Add field" to add the field.
Now click on the "Content" tab again and see that the title field was added. Enter a message like Hello, World! into this field and click "Publish".
Now we can insert this content into our section. Click the "Code" tab at the top to go back to the code editor.
Anymod uses Vue.js syntax to insert content. That means if we have a field named title (which we do), we can insert it into an <h2> element like this:
<h2 v-text="title"></h2>
Let's use this approach and update the section's HTML to include our new title field:
<div class="card" @click="bark">
<div class="card-block">
<h2 v-text="title" class="card-title"></h2>
<hr>
<div v-html="content"></div>
</div>
</div>
Saving this will update our preview, and we can now see that our new Hello, World! content is being inserted:
You can continue to add fields and edit the HTML to suit your needs.
Custom JavaScript
Now let's make our section interactive. We'll set it up so that the card starts out small and then expands when we click it.
To do this let's use a variable called isCompact to determine whether or not the card should be "compact".
Under the hood, each Anymod component is a Vue.js instance, so all the methods available in a Vue.js instance are available to us by accessing the component object in our section.
For example, we can set a variable called isCompact through the component.data object in our JavaScript:
component.data.isCompact = true
We can further add a method to component.methods that will toggle the isCompact variable when called:
component.data.isCompact = true
component.methods = {
bark: function () {
console.log('woof')
component.data.isCompact = !component.data.isCompact
}
}
In our HTML, this bark method is already called whenever the card is clicked because of the @click="bark" attribute that was already there.
We can also add :class="{ compact: isCompact }" to set the .compact class on our card-block element whenever isCompact is true:
<div class="card" @click="bark">
<div class="card-block" :class="{ compact: isCompact }">
<h2 v-text="title" class="card-title"></h2>
<hr>
<div v-html="content"></div>
</div>
</div>
Now all that's left is to define some CSS rules that make our card-block element small when the compact class is added and large when it isn't:
.card-block {
cursor: pointer;
overflow: hidden;
transition: max-height 0.5s;
max-height: 1200px;
}
.compact {
max-height: 200px;
}
Our updated section is now interactive. It starts out compact and then expands when clicked.
Pulling it all together
You can see the final code for this post here. If you want to compare the before and after, here they are:
Feel free to fork either one into your own project and start using it!
Now you can add CMS features anywhere on your site, customize them, and set up your team and clients to maintain the content on their own. It's completely customizable and very easy to get going.
You get the benefits of a "normal" CMS, but you can choose whatever technology you like.
Anymod works well with all the popular frameworks, both front end and back end, and you can find nice examples for React, Angular, Vue, and Bootstrap in the guide.
If you come up with some cool sections, feel free to share them with others! ✌️
Top comments (3)
This is super interesting. I was really into the idea of making a Ruby CMS at one point, but this seems a lot more flexible than what I was thinking of.
Also, not sure if this is entirely your project, but you can also add the #showdev tag for showing something you made.
Thanks! Yes it's a project I've been working on for quite some time now. Flexibility across a lot of technologies and platforms has been interesting and I'll probably do a post about that too soon :)
PS tag added!
Thanks for the article! Anything that gets folks using a CMS to offload the content out of the developer's hands is good. Have you tried a headless CMS?