CODEWITHSUNDEEP
javascriptapostrophe-cms
chupamokos-II
chupamokos-II

Reputation: 61

apostrophe cms - customize page settings

I want to add meta-key and meta-description fields to the page setting dialog, and then render them to the page. I was able to find that one can do something like this in the page template (html) file:

{% extends data.outerLayout %}
{% block extraHead %}
    <meta name="description" content="this is the page description" />
{% endblock %}

But how do I allow the end user to insert these values?

Upvotes: 3

Views: 636

Answers (2)

robert-jakobson
robert-jakobson

Reputation: 166

here is an improved way to do it:

{% block extraHead %}
 <meta name="description" content="{{ data.page.metaDescription | truncate(146, true, "..") | safe }}" />
{% endblock %}

What we did here:

  • we truncate meta description to a specific length (in this instance 146 characters, but you can change that);
  • we add a nice .. at the end that one is used to when googling around;
  • we output everything as "safe" - this takes care of showing certain symbols or characters as unicode / html strings. Though it can be theoretically be abused.

See the screenshot to illustrate the last point: Just a screenshot

Upvotes: 0

chupamokos-II
chupamokos-II

Reputation: 61

Ok, so after looking in the apostrophe-sandbox demo site I was able to discover the answer. I added under the lib/modules folder in my project a new folder called apostrophe-custom-pages, and inside that I added an index.js file that looks like this:

module.exports = {
  beforeConstruct: function(self, options) {
    options.addFields = [
      {
        name: 'metaDescription',
        label: 'Meta Description',
        type: 'string'
      },
      {
        name: 'metaTags',
        label: 'Meta Tags',
        type: 'string'
      }
    ]
  }
};

Then, inside my page html template I added:

{% block extraHead %}
  <meta name="description" content="{{ data.page.metaDescription}}" />
  <meta name="tags" content="{{ data.page.metaTags}}" />
{% endblock %}

That's it. It works. Now I can provide SEO support. Hurray! :)

Upvotes: 3

Related Questions