Skip to content

NodeBB: Creating pages

Solved Configure
9 2 2.5k 1
  • Hi @phenomlab,
    How do I create the pages? I am planning to have pages for About us, Privacy Policy, Terms of Use, etc.
    On your site, I can see you have a “link” icon which has a dropdown for individual pages. Something like that is suitable for me also.
    Also, I saw that on your Policies page, you had 3 topics grouped into a close-open kind of diaplay. How did you do that?
    Thank you!

  • Hi @phenomlab,
    How do I create the pages? I am planning to have pages for About us, Privacy Policy, Terms of Use, etc.
    On your site, I can see you have a “link” icon which has a dropdown for individual pages. Something like that is suitable for me also.
    Also, I saw that on your Policies page, you had 3 topics grouped into a close-open kind of diaplay. How did you do that?
    Thank you!

  • phenomlabundefined phenomlab has marked this topic as solved on
  • Thanks again! Should I wait to install these once the site has been upgraded to V3?

    Also, I went through the whole thread. Seems to be a complicated affair. Anyway, is this how it’s done:

    1. Open Terminal on Mac
    2. Add this script: npm install nodebb-plugin-custom-pages

    What would be the next steps? The referred page doesn’t seem to have that info. Maybe, I missed.

  • Thanks again! Should I wait to install these once the site has been upgraded to V3?

    Also, I went through the whole thread. Seems to be a complicated affair. Anyway, is this how it’s done:

    1. Open Terminal on Mac
    2. Add this script: npm install nodebb-plugin-custom-pages

    What would be the next steps? The referred page doesn’t seem to have that info. Maybe, I missed.

    @mventures It’s not as difficult as it sounds. You just need to gain access to your server via SSH (see https://sudonix.com/topic/445/nodebb-upgrading-to-nodebb-v3-x/6?_=1680448676890) then ensure you are in the NodeBB directory.

    From there, you can issue that same code, for example

    c3d5ce48-5d80-4f07-8b23-75e4a47ee8ba-image.png

    As you can see from the above, I’ve now installed this on your forum. From here, you’ll now need to activate the plugin before you can use it

    In your forum, navigate to /admin/extend/plugins#deactive. You should see the below

    45846af3-a51a-49f7-82e3-eec74dd4800e-image.png

    You’ll notice that the new plugin appears in the list, but needs to be activated first before it can be used

    924df608-bf84-4c78-9a0f-3878fe9e7641-image.png

    Click Confirm. After a few seconds, NodeBB will tell you that the plugin has been activated, but you need to rebuild and restart before it will work

    198008d7-b9d2-4c70-a619-99ee546f2848-image.png

    Now you need to rebuild and restart

    34e6d121-11bf-4d9a-88c8-99559f364f50-image.png

    86d74334-f3b8-4c55-8254-6ad83c8cc0a7-image.png

    Confirm, and the rebuild/restart process will commence

    3082d590-2805-4022-a00f-4878400934b2-image.png

    24d5a209-9735-4db3-86a4-d058818d7066-image.png

    You should then get a self-closing message telling you that the forum has restarted successfully (and can now be used). At this point, you should press F5 in your browser console to reload the page

    Now in the plugins menu, you should see Custom Pages has been added

    ed17f866-10df-4001-8844-1cbcb720fa59-image.png

    That’s it.

    Nothing for you to do here, as I’ve already done it on your site 🙂

  • @mventures It’s not as difficult as it sounds. You just need to gain access to your server via SSH (see https://sudonix.com/topic/445/nodebb-upgrading-to-nodebb-v3-x/6?_=1680448676890) then ensure you are in the NodeBB directory.

    From there, you can issue that same code, for example

    c3d5ce48-5d80-4f07-8b23-75e4a47ee8ba-image.png

    As you can see from the above, I’ve now installed this on your forum. From here, you’ll now need to activate the plugin before you can use it

    In your forum, navigate to /admin/extend/plugins#deactive. You should see the below

    45846af3-a51a-49f7-82e3-eec74dd4800e-image.png

    You’ll notice that the new plugin appears in the list, but needs to be activated first before it can be used

    924df608-bf84-4c78-9a0f-3878fe9e7641-image.png

    Click Confirm. After a few seconds, NodeBB will tell you that the plugin has been activated, but you need to rebuild and restart before it will work

    198008d7-b9d2-4c70-a619-99ee546f2848-image.png

    Now you need to rebuild and restart

    34e6d121-11bf-4d9a-88c8-99559f364f50-image.png

    86d74334-f3b8-4c55-8254-6ad83c8cc0a7-image.png

    Confirm, and the rebuild/restart process will commence

    3082d590-2805-4022-a00f-4878400934b2-image.png

    24d5a209-9735-4db3-86a4-d058818d7066-image.png

    You should then get a self-closing message telling you that the forum has restarted successfully (and can now be used). At this point, you should press F5 in your browser console to reload the page

    Now in the plugins menu, you should see Custom Pages has been added

    ed17f866-10df-4001-8844-1cbcb720fa59-image.png

    That’s it.

    Nothing for you to do here, as I’ve already done it on your site 🙂

    @phenomlab Thank you so much yet again! Much appreciated.

    How do I now add the pages?

    I went to PLUGINS > CUSTOM PAGES & did the below:
    Screen Shot 2023-04-04 at 8.22.00 pm.png

    Then, I went to EXTEND > WIDGETS & did the below:
    Screen Shot 2023-04-04 at 8.23.06 pm.png

    SAVED at both places but nothing has appeared on the footer.
    Where am I going wrong?

  • @phenomlab Thank you so much yet again! Much appreciated.

    How do I now add the pages?

    I went to PLUGINS > CUSTOM PAGES & did the below:
    Screen Shot 2023-04-04 at 8.22.00 pm.png

    Then, I went to EXTEND > WIDGETS & did the below:
    Screen Shot 2023-04-04 at 8.23.06 pm.png

    SAVED at both places but nothing has appeared on the footer.
    Where am I going wrong?

    @mventures That widget will appear in the page it is created, so

    7f564f90-69e1-4ce2-abe3-5f0a37cb272c-image.png

    I’d also recommend placing that in the content section (widget) unless you intended for it to be in the footer ?

  • @mventures That widget will appear in the page it is created, so

    7f564f90-69e1-4ce2-abe3-5f0a37cb272c-image.png

    I’d also recommend placing that in the content section (widget) unless you intended for it to be in the footer ?

    @phenomlab I would like it the way you have it. Is that the CONTENT SECTION you are referring to? How do I place my new pages in the CONTENT SECTION widget? I have done it as below and saved it, but I can’t see it on the page.
    Screen Shot 2023-04-04 at 9.56.24 pm.png

  • @phenomlab I would like it the way you have it. Is that the CONTENT SECTION you are referring to? How do I place my new pages in the CONTENT SECTION widget? I have done it as below and saved it, but I can’t see it on the page.
    Screen Shot 2023-04-04 at 9.56.24 pm.png

    @mventures The privacy policy you see on my site is in fact custom code. The page itself is created the same way, but the running widget is my creation. I’m happy to share the code with you if it’ll help, but it may not operate correctly on your site if you use the v2 version.

    Thankfully, I have a v3 version ready to go also, and happy to share that if it helps.

  • @mventures The privacy policy you see on my site is in fact custom code. The page itself is created the same way, but the running widget is my creation. I’m happy to share the code with you if it’ll help, but it may not operate correctly on your site if you use the v2 version.

    Thankfully, I have a v3 version ready to go also, and happy to share that if it helps.

    OK, I think I have figured out how to place a link in the footer which will click to a new page.


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Nodebb to Xenforo

    Solved Configure xenforo nodebb
    3
    0 Votes
    3 Posts
    237 Views
    @cagatay as @downpw stated, there isn’t a native tool that will do this for you. You’d need to either develop your own or ask the nodebb team to assist which will be a paid exercise.
  • What’s going on with NodeBB?

    Performance nodebb script die
    20
    8 Votes
    20 Posts
    2k Views
    @cagatay The most reliable way to upgrade Node.js on Ubuntu depends on how you originally installed it. Method 1: Using NVM (Recommended) If you already use Node Version Manager (NVM), upgrading is simple. NVM allows you to keep both versions and switch between them if needed. Install Node 22: nvm install 22 Switch to Node 22: nvm use 22 Set it as your default: nvm alias default 22 Verify the change: node -v Method 2: Using NodeSource (PPA) If you installed Node.js via apt using the NodeSource repository, you need to update the repository script to point to the new version. Remove the old NodeSource list (optional but cleaner): sudo rm /etc/apt/sources.list.d/nodesource.list Download and run the NodeSource setup script for Node 22: curl -fsSL [https://deb.nodesource.com/setup_22.x](https://deb.nodesource.com/setup_22.x) | sudo -E bash - Install/Upgrade Node.js: sudo apt-get install -y nodejs Verify the installation: node -v Method 3: Using the ‘n’ Package If you have npm installed, you can use the n interactive manager. Clear the npm cache: sudo npm cache clean -f Install the ‘n’ helper: sudo npm install -g n Install Node 22: sudo n 22 Update your shell: hash -r Troubleshooting Permission Denied: If you see permission errors using Method 2 or 3, ensure you are using sudo. Path Issues: If node -v still shows version 20 after upgrading via NVM, restart your terminal or run source ~/.bashrc. Conflicts: Avoid mixing these methods. If you switch from apt to nvm, it is best to sudo apt remove nodejs first to avoid path conflicts.
  • Custom html in nodebb to prevent cache

    Unsolved Configure nodebb
    18
    2 Votes
    18 Posts
    4k Views
    @Panda You’ll need to do that with js. With some quick CSS changes, it looks like this [image: 1690796279348-d619844f-fbfe-4cf1-a283-6b7364f6bf18-image.png] The colour choice is still really hard on the eye, but at least you can now read the text
  • NodeBB: Upgrading to NodeBB v3.x

    Solved Configure nodebb v3.x
    6
    0 Votes
    6 Posts
    2k Views
    @mventures You’d need to connect to the server and execute it directly - not on your local terminal. Review the guide below, which will show you how to gain access via SSH to your server https://docs.ovh.com/gb/en/dedicated/ssh-introduction/ Once you have access, you’ll need to navigate to the actual folder where NodeBB is installed You’ll then need to change to the directory as shown below /home/unbuntu/nodebb [image: 1680448167972-fdffe673-bf63-4b6d-a728-5506fddc1aff-image.png] In most cases, initial access takes you to the root of the file system. You can always issue pwd in a Linux terminal which will show you the Present Working Directory. From there, you can issue the command cd /home/ubuntu/nodebb Once in the NodeBB directory, you’d use the below commands ./nodebb stop git fetch && git checkout develop && git reset --hard origin/develop ./nodebb upgrade ./nodebb start Line 1 stops the NodeBB instance Line 2 gets the latest files from GIT (repository) and then checks out the development branch. It then resets the version you are using to the development branch ready for v3 Line 3 Runs the upgrade once the new branch is set, and code pulled Line 4 Restarts the NodeBB instance after the upgrade has completed Note that when you restart NodeBB and log back in, things will look very different to what you had in v2.
  • NodeBB: Creating the Swatch modes

    Solved Configure swatch
    2
    0 Votes
    2 Posts
    720 Views
    @mventures the swatch feature you refer to isn’t a NodeBB plugin, but a utility that I wrote that handles this. It is available for v2 (as you can see here) but I’ve stopped developing and releasing the code because it has been entirely rewritten to work for v3. If you’d like the code, this is possible, but you’ll need to upgrade to v3 first.
  • restarting nodebb on boot

    Unsolved Configure nodebb
    3
    1 Votes
    3 Posts
    1k Views
    @eeeee said in restarting nodebb on boot: can I just run nodebb under nodemon for auto restarts? It’s a better method. Nodemon just looks for file system changes and would effectively die if the server was rebooted meaning you’d have to start it again anyway. Systemd is the defacto standard which is how the operating system interacts in terms of services, scheduled tasks etc.
  • MailGun Not Working NodeBB

    Solved Configure mail mailgun
    6
    1 Votes
    6 Posts
    1k Views
    @phenomlab did it i did not create smtp user on mailgun. everything is working now. [image: 1667569376261-6cc6061f-ed5d-41f6-8eb7-5d98f98b3706-image.png]
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    1k Views
    @eveh Welcome board The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; } Note, that you will need to adjust your CSS code to suit your own site / requirements.