jescalan / roots

a toolkit for rapid advanced front-end development
http://roots.netlify.com/
Other
1.45k stars 133 forks source link

Page title variable similar to _path in locals? #692

Closed pauljakobwhite closed 8 years ago

pauljakobwhite commented 8 years ago

Hello, I just posted on another issue so I hope I'm not being a bother. But I wanted to check if there is a simpler solution for what I'm trying to achieve before I go building my own method. What I'm trying to do is very basic, similar to the fact that the _path variable is available in locals and is unique to the current page, I'm looking for a way to make a variable from json data in roots-records available as well to a particular page.

So for instance when creating a layout on a site perhaps called example, I could have the following:

title= records.global.siteTitle + "|" + _path 

Which would output for index.jade: Example | /index.html

But I'd like to be able to attach a page title to that so the output could be Example | Home' for index.html, or Example | About for about.html, etc...

Is there a convention built into roots for this, or do go about setting up some config functions?

Thanks very much!

jescalan commented 8 years ago

Nothing built in that will do this. The thing is, we can't automatically know what you want to have as your page title, so I'm afraid it's not possible. One thing you could do is use a little local function that would do a string transform though! You could use some regex replacement and perhaps underscore.string to help out.

You can inject a function into your jade templates through the locals key in app.coffee. For example:

locals:
  title: (p) -> p.match(/\/(\w+)\.html$/)[1]

Then in your jade template you would call it like this:

h1 Example | #{title(_path)}

Or the way you did it with string concat. But jade can do interpolation like this as well. Hope this helps, I'm going to close out this issue but happy to continue discussion if there's anything else I can help with!

pauljakobwhite commented 8 years ago

Thanks @jenius, this works great in returning the file name, and I tried playing around with it to do the following, but with no success:

Basically, I would like to use a function similar to this to expose some json data located elsewhere to that particular page, i.e.:

Lets say we are working with index.html

The function you provided, (slightly modified):

locals:
  source: (p) -> p.match(/\/(\w+)\.html$/)[1]

would return index, I would then like to take that result and use it to pull in data from records.data containing something like the following:

"index" : {
  "title" :  "Home",
  "anything" : "else"
}

so in theory, the data would be coming from records.data.**locals.source**.title

I'm having trouble achieving this, but in the end I would like to have something like the following:

locals:
  source: (p) -> p.match(/\/(\w+)\.html$/)[1],
  page: function that grabs any json data from records.data with the key matching "source" in locals

and in this way I could reference in my jade layouts #{page.***} to grab the title or any other data I've included.

I apologize I'm using your github issues when these questions may be more appropriate for stackoverflow, but I haven't had any success on SO with this functionality specific to roots.

Thank you again for your help!

jescalan commented 8 years ago

You basically have it. There are a ton of ways you can manage to do this. You can use the result of the source function in your jade layout to select a key in the records.data object like records.data[source(_page)].title. You could load the json file with this data into your app.coffee file then contain the whole process within the local. You could just drop the raw function into your jade layout and skip the local altogether...

You got this -- there's no magic going on in roots its just javascript!

pauljakobwhite commented 8 years ago

My goodness I was so close, I had just written it wrong in jade, I think I had something like:

#{records.data.{source(_path)}.title} ... using braces instead of brackets lol ...

Thanks again for your help, all is working!

jescalan commented 8 years ago

Of course, happy to help! Nice work getting it in place, and hope roots continues to treat you well :grinning: You are always welcome to join us at http://gitter.im/jenius/roots for the community chat as well if you are looking for some quick help!