Better Hexo title tag

Question

I have setup my posts in Hexo and assigned tags to each post. However the title tag is not capitalizing the way I would like.

This is the rendered HTML:

<title>Viewing pizza | My site</title>

But I would to achieve this:

<title>Viewing Pizza | My site</title>

The tag: pizza is lowercase, and not sure how to make the tag begin with a capital letter within the title tag (e.g. Pizza, Pasta, Italy and so on).

My code:

<%
    function capitalize (str) { return str.charAt(0).toUpperCase() + str.substring(1).toLowerCase() }
    var title = page.title;
    if (is_archive()) {
        title = capitalize(__('Viewing'));
        if (is_month()) {
            title += ': ' + page.year + '/' + page.month;
        } else if (is_year()) {
            title += ': ' + page.year;
        }
    } else if (is_category()) {
        title = capitalize(__('Viewing')) + ': ' + page.category;
    } else if (is_tag()) {
        title = capitalize(__('Viewing')) + ': ' + page.tag;
    }
%>
<title><% if (title) { %><%= title %> | <% } %><%= config.title %></title>

Thanks in advance!

Louis Barranqueiro · Accepted Answer · 2016-08-26T15:35:04.917

Here is a function to capitalize each words of a sentence :

function capWords(str) {
    // we split string by words in an array
    // and we iterate on each word to capitalize the first letter
    // and we join each element with a space
    return str.split(' ').map(function(str) {
        return str[0].toUpperCase() + str.substr(1).toLowerCase()
    }).join(' ');
}

In your code :

<%
    function capWords(str) {
        // we split string by words in an array
        // and we iterate on each word to capitalize the first letter
        // and we join each element with a space
        return str.split(' ').map(function(str) {
            return str[0].toUpperCase() + str.substr(1).toLowerCase()
        }).join(' ');
    }

    var title = page.title;
    if (is_archive()) {
        title = __('Viewing');
        if (is_month()) {
            title += ': ' + page.year + '/' + page.month;
        } else if (is_year()) {
            title += ': ' + page.year;
        }
    } else if (is_category()) {
        title = __('Viewing') + ': ' + page.category;
    } else if (is_tag()) {
        title = __('Viewing') + ': ' + page.tag;
    }
%>
<title>
    <% if (title) { %>
        <%= capWords(title) + ' | ' %> 
    <% } %>
    <%= config.title %>
</title>

sorry I couldn't get this to work, I tried to replace my function above but then get "title is not defined" — user5898548, Aug 26 '16 at 14:14

score 0 · Answer 2 · answered Dec 11 '17 at 11:03

I don't know if this is new in hexo, but if you're still looking, there is titlecase, which is a function you can use in your templates.

This should come with your hexo installation now. If you are using ejs as your renderer, you can use it as the documentation states:

You could do <%- titlecase('pizza') %> and get what you want.

Should you need to write your own functions, the preferred way is to write them in a /scripts/my_helpers.js file (name the .js file anything you want, but it has to be in scripts in your project directory). Alternatively, publish your module prefixed with hexo- and import it into your project (make sure it's listed in package.json if you're doing this).

You can then make your javascript function available with the following incantation in your .js file:

// note, I haven't tested this code.
hexo.extend.helper.register('capitalize', (aString) => {
    return aString.split(" ").map(function(word) {
        return word[0].toUpperCase() + word.substring(1).toLowerCase()}).join(" ")
});

Then you can use <%- capitalize("i am a strInG") %>

<title>
<% if (page.title) { %>
    <%= capitalize(page.title) %> | 
<% } %>
<%= config.title %>
</title>

`

Better Hexo title tag

2 Answers2