How to add in a / for URL

I am writing in EJS.

data-slug="<%- post.title %><%- post.slug %>"

The above renders … www.domain.com/TITLESLUG

What I need is … www.domain.com/TITLE/SLUG (thus, a / between title and slug)

I tried:

data-slug="<%- post.title %>/<%- post.slug %>"
Also I tried:
data-slug="<%- post.title %><span>/</span><%- post.slug %>"
Also I tried:
data-slug="<%- post.title %>"/"<%- post.slug %>"

None of the above three work… :frowning:

How to write it?

Hello Ronnie,

First time I ever hear about EJS, I just checked out the document.

Could not find a online place to try your code, but you may try <%- post.title %><%/%><%- post.slug %>

Hi,

Unfortunately it did not work… was worth a try, though…

We will find out Ronnie,

First you sure data-slug is valid? is it a variable? shouldn’t be data_slug?

what about this?

var s_="/";
<%- post.title %><%=s_%><%- post.slug %>

or

var s_="/";
<%- post.title %><%-s_%><%- post.slug %>

Also not… :frowning:

Yes, the variable is correct… all works good with this…
<%- post.title %<%- post.slug %>
and also just one of them… <%- post.title %> standalone or <%- post.slug %> standalone.
But when I put them together with a / in between that is needed for the URL, then its wild-guessing it seems… :frowning:

Everything in between the <% %> tags are processed as normal JavaScript, so try concatenating the string there.

<%- `${post.title}/${post.slug}` %>

We are getting closer… :slight_smile:

This code renders my URL… domain.com/NaN

Not sure what that means…

It means at some point, post.slug is being coerced into a number. Are you using any math operators by mistake? Make sure you’ve got the backticks around your string exactly as I have them in the post above.

Yes, I copy/pasted your code.
No math operators.
I only need the slash in between for the correct URL to show.

Try it with the equals sign instead:

<%= `${post.title}/${post.slug}` %>

Same “NaN” error… :frowning:

Hmmmm…

At this point, it’s the blind leading the blind since I don’t know EJS very well and I don’t have access to your project to test this. Let’s get hacky.

<%= [post.title, "/", post.slug].join('') %>

You inspire me to try some things and this brings it closer a bit…

<%- [post.title,post.slug] %>

This generates… www.domain.com/title,slug

So the comma can be fitted in between atleast… :slight_smile:
I tried the / instead of ,
but that did not work.

What about <%- [post.title '/' post.slug] %> ?

Unfortunately no luck…

This is becoming fun… :slight_smile:

You may also provide any error or unexpected result for each try, would be great.

Cool

Now try this

var _addr=post.title + "/" + post.slug;
data-slug="<%- _addr %>"

Also not… :slight_smile:

A little background.

I have a commenting system integrated with my blog.

The commenting system has:

path_url="https://www.domain.com/%SLUG%"

This path leads me to the correct blogpost where I received a comment.

My blog is set up with title/post.
So for example… politics/why-we-need-less-politicans.

In my blogpost file I have the “notorious” code…
data-slug="<%- [post.title, post.slug] %>"

This code the way it is written is fixed as per the commenting system config.

There is not much more to it.

I just have to fit in the / in between so it renders to the correct blogpost with title/post.

This:

<%= [post.title, post.slug] %>

Is outputting that array directly into the template: effectively, it’s running toString on the array, so it’ll just try to print that as a string. If I test this, like

> const ejs = require('ejs');
> ejs.render('<%- [post, title] %>', {post: 'post', title: 'title'})
'post,title'

So you need to join, so like:

> const ejs = require('ejs')
> ejs.render("<%= [post, title].join('/') %>", {post: 'post', title: 'title'})
'post/title'

or

> const ejs = require('ejs')
> const path = require('path')
> ejs.render("<%= path.join(post, title) %>", {post: 'post', title: 'title'})
'post/title'

If that isn’t working then might need to see if your code is doing anything else here because I can’t replicate the slash being stripped at all.

Thanks!

Makes sense… still did not work.

So my commenting system has this:

  • "page_url": "https://domain.com/%SLUG%",

  • const post_url = config.get('page_url').replace('%SLUG%', event.slug)+'#comment-'+event.id;

My blogpost has:

  • data-slug="<%= [post.title,post.slug] %>"

If I add join() in data-slug, then the comment section disappears completely in my blogpost (the whole commenting system is just blank).
This data-slug="<%= [post.title,post.slug] %>" atleast “works” in that I can use the commenting system fully.

But the only problem is that the commenting system then outputs… domain.com/title,post

I think I cannot do what is needed within data-slug, but perhaps there is solution here in this line?
const post_url = config.get('page_url').replace('%SLUG%', event.slug)+'#comment-'+event.id;

This is the full relevant code in my blogpost:

<div class="comments-go-here"></div>
<script type="text/javascript"
   src="https://domain.com/embed.js"
   data-target=".comments-go-here"
   data-slug="<%= [post.title,post.slug] %>">
</script>

Thank you all for your help.

And I am sorry I did not post a full more detailed explanation. Honestly, I thought it was just a simple small syntax issue.