How to access to public dir in my custom theme

velikikomsa

I have the directory called static inside of the root dir of my custom theme.
I've put my fonts dir inside the static dir.
How to reference that folder from my less file?
Same with the scripts. I don't know how to include my custom scripts in a nodebb template?
I would be very thankful for any help.

yariplus

You can use the plugin.json file.

In nodebb-theme-lavender for example, plugin.json has:

	"staticDirs": {
		"vendor": "static/vendor"
	},

there is a file called masonry.js that can accessed at http://yourdomain.com/plugins/nodebb-theme-lavender/vendor/masonry.js

So in your case, you can use in your plugin.json

	"staticDirs": {
		"fonts": "static/fonts"
	},

and access it at http://yourdomain.com/plugins/nodebb-theme-yourtheme/fonts/thefont.ttf

you can do multiple routes with staticDirs like:

	"staticDirs": {
		"fonts": "static/fonts",
		"scripts": "static/js"
	},

or make the whole directory reachable like:

	"staticDirs": {
		"static": "static"
	},

The later is what I usually do.

yariplus

For scripts, if you want them included on every page, use the "scripts" section of plugin.json. Example from lavender:

	"scripts": [
		"static/lib/lavender.js",
		"static/vendor/masonry.js",
		"static/vendor/imagesLoaded.js"
	]

If you want a script loaded/run for a specific template, I think you are looking for ajaxify.contentLoaded. It passes the template name so you check that and do whatever you need per template.

For example, inside your main script which is loaded on every page:

$(window).on('action:ajaxify.contentLoaded', function(event, data) {
    console.log(data.tpl);  // to inspect what is passed back by NodeBB

    if (data.tpl === 'categories') {
        // If you want to load an external module.
        require(['url/to/script'], function(theScript){
             // The module is loaded, you can call its functions or do whatever.
            theScript.somefunction();
        });

       // or If you just want to do something.
       console.log("I'm doing something on the categories page!");
    }
});

This is how I do it, there may be other ways.

velikikomsa

yariplus thank you for your replay.
Actually I've done that.
My plugin.json looks like this:

{
"id": "nodebb-theme-mytheme",
"staticDirs":{
"fonts":"static/fonts"
},
"hooks": [],
"scripts": [
"static/lib/categories.js"
]
}

My dir strucutre is:

nodebb-theme-mytheme
- static
  - fonts
    - ...font files ..
  - lib
    -categories.js

But it's not loading script nor I could access the font directorty from my less file.

@font-face {
font-family: "my-font";
src:url("/plugins/nodebb-theme-mytheme/fonts/gem.eot");
src:url("/plugins/nodebb-theme-mytheme/fonts/gem.eot?#iefix") format("embedded-opentype"),
url("/plugins/nodebb-theme-mytheme/fonts/gem.woff") format("woff"),
url("/plugins/nodebb-theme-mytheme/fonts/gem.ttf") format("truetype"),
url("/plugins/nodebb-theme-mytheme/fonts/gem.svg#gem") format("svg");
font-weight: normal;
font-style: normal;

}

It seems I'm missing something and I'm kicking the wall right now

velikikomsa

I got it man. I've needed to add the package.json file to the theme root directory.
:
THANK YOU !!!.