I want my homepage to have a different Title Layout than the rest of the forum

Technical Support
  • Hello,

    Like the title says, I want that my homepage to have a different Title Layout than the rest of my forum.

    I want my title homepage to be...

    {browserTitle} | {pageTitle} => Decentrade | Buy and sell products and commodities with crypto
    

    And my other pages to be...

    {pageTitle} | {browserTitle} => Create an account | Decentrade
    

    Right now I have the last example to all of my site, and my homepage says...

    Buy and sell products and commodities with crypto | Decentrade
    

    That's because my Settings > Home Page is set to 'Buy and sell products and commodities with crypto', and my {browserTitle} is Decentrade. I set that way because I want my pagetitle to be first, and my browserTitle to be second, but In my homepage I want the inverse of that.

    I can do it creating a plugin? What hook should I use?

    Thanks.

  • 'filter:middleware.renderHeader' is the hook you want to use.

    In that hook you can modify the browserTitle property if you are on the homepage.

    myPlugin.filterMiddlewareRenderHeader = async function (hookData) {
       if (hookData.req.route && hookData.req.route.path === '/') { 
         // if on homepage modify browser title
         hookData.templateValues.browserTitle = ' my custom homepage title';
       }
       return hookData;
    };
    
  • @baris Hello, baris; thanks for the help.

    I'm testing this hook and it only fires up when I enter the web from the url. If i'm moving on the site, and clic the logo to go back home, the plugin doesnt fire up. That means that the title doesn't change. I hope that make sense to you.

    Theres a way to fix this?

    Thanks.

  • That is harder to do since there is no hook client side for it. I added one here https://github.com/NodeBB/NodeBB/commit/698718f87ced0a33fdb4bd38b494c9a1181c72d7.

    You can use this to modify the .title property and the browser title will change to that.

    // client side plugin code
    $(window).on('action:ajaxify.updateTitle', function (event, data) {
       if (location.pathname === config.relative_path + '/') {
          data.title = 'my custom title for home page';
       }
    });
    

    I am just typing these off the top of my head, so make sure you test them before using.

  • @baris

    Thanks for the help 🙂

    So, I need to make the same change that you did in the source code, and use that client side plugin?

    Where should I add that client side plugin? In the javascript section on the panel admin?

    Thanks.

  • Yes you either have to update to latest master or apply the change manually. If you don't want to write a plugin you can put that code in the custom JS tab.

  • @baris Yeah, I prefer to write a plugin; i'm making a plugin using 'filter:middleware.renderHeader' hook for changing the title in the first loading of the web, so I just will change the client side too.

    Thanks.

  • @baris I just tested it changing the code manually and it worked perfectly; but I want to upgrade the branch changing to master.

    I'm in the 1.15.x branch. If I want to change the branch to master, I need to do...

    $ git fetch
    $ git checkout master
    $ git merge origin/master
    

    Right?

    I just did the following commands for upgrading my 1.15.x branch, and it worked fine; but the change you did is ahead of 1.15.x.

    $ git fetch
    $ git reset --hard origin/v1.15.x
    
  • Yes that should work, we might release 1.15.5 to hot fix https://community.nodebb.org/topic/15155/unable-to-login-after-upgrade-to-1-15 so you could use that too.


Suggested Topics