I have a pug view
section#about.about
.container
.about__inner
.about__content
h3.about__title About me
h2.about__bigtitle Who am I
.about__text !{about}
a.btn(href="#" data-modal="#modal_hire_me") Hire me
button.btn(type="button" data-modal="#modal_resume") My resume
In express server I render it with "about", "works" and "reviewsAmount" variables.
The "about" variable value is
const about = `
<p>
I have #{works.length} works and #{reviewsAmount} reviews.
</p>
`;
But in page it renders like "I have #{works.length} works and #{reviewsAmount} reviews.". Variable values do not interpolate in paragraph tag. So, how to do that?
You are mixing up pug interpolation and JavaScript template strings. When the code is in your node/express route (and not in the template) you need to use JavaScript template strings.
If you use the ${} syntax this will fix it.
const about = `
<p>
I have ${works.length} works and ${reviewsAmount} reviews.
</p>
`;
With that said, I'd recommend against doing this and leaving all of your HTML in pug and not moving it into the node/express code. This will make your web pages more difficult to debug when something goes wrong, and also require more effort to maintain longer term.
Just pass those variables on to Pug and do the interpolation there:
section#about.about
.container
.about__inner
.about__content
h3.about__title About me
h2.about__bigtitle Who am I
.about__text
p I have #{works.length} works and #{reviewsAmount} reviews.
a.btn(href="#" data-modal="#modal_hire_me") Hire me
button.btn(type="button" data-modal="#modal_resume") My resume
Related
I have a simple sass variables declarations as below
$theme-primary-dom: #181818ff
$theme-primary-sub: #29292Bff
$theme-secondary-dom: #FAFAFAff
$theme-secondary-sub: #C4C4C4ff
$theme-primary-sub-transparent: #29292B22
This is what I need for dark theme that is a default theme. BUt I want to add a light theme as well. In my brain it is very simple.
if .wrapper.darktheme{
$theme-primary-dom: #181818ff
$theme-primary-sub: #29292Bff
$theme-secondary-dom: #FAFAFAff
$theme-secondary-sub: #C4C4C4ff
$theme-primary-sub-transparent: #29292B22
} else {
$theme-primary-dom: #FAFAFAff
$theme-primary-sub: #C4C4C4ff
$theme-secondary-dom: #181818ff
$theme-secondary-sub: #29292Bff
$theme-primary-sub-transparent: #C4C4C422
}
Now I have no idea how to do this in SASS.
Also, I have
<button class="theme__switch theme__switch--light">theme is light</button>
in header component
and,
<div class="wrapper darktheme"></div>
in main app.vue. which increase complecations as the trigger button and the trigger area are in different components.
I can easily get this using jquery of course, But since I am using vue.cli, adding jquery code didn't felt right. I have been searching all over stackoverflow and google for past 3 days but I haven't found a relative solution yet.
I am using react-select to make a select box that geocodes an address and then provides a drop down list of the corresponding local government areas of that search returns.
I am just trying to format each option so it shows the State eg. Queensland after the local government area eg. Brisbane.
So I'm trying to get it to return something like:
Brisbane <small>Queensland</small>
But in the HTML it escapes and renders the tags.
It looks like optionRenderer would work, but it seems to be only available with the Select component of react-select and I am currently using Async because I want to wait for the geocoded latitude and longitude from Mapbox.
Anyone know a way to format options while using the <Async /> component?
OK so I worked out what I was doing wrong. The optionRenderer={this.renderOption} prop was working after all but I was returning a string instead of a JSX component.
So here's my method anyway for anyone who has this issue in the future:
renderOption(option) {
return <div> {option.label} <small>small</small></div>;
}
So I'll just need to split the option.label up and put the State in between the tags.
How can I use vue.js with the dust template engine? Both are using {{}} as placeholders, are there any options to say dust: Hey, this part is especially for vue?
I got no idea since I haven't had found anything in the documentations.
https://vuejs.org/api/#delimiters
Vue.config.delimiters = ['!v', 'v!']
You can set the delimiters for Vue to whatever you'd like to avoid conflict. Also see Vue.config.unsafeDelimiters - https://vuejs.org/api/#unsafeDelimiters
The converse answer for Dust is that you can wrap a block in {` tags to tell Dust not to parse that block.
context = { "dust": "DUST!", "vue": "error" }
{dust} says {` hello {vue}! `}
will render to
DUST! says hello {vue}!
Maybe I'm asking my question wrong since it seems like the answer should be relatively easy to search for. I am parsing some .md files in express and returning the response to a jade template.
= body returns <h1>my content</h1> as a string.
#{body} returns <<h1>my content</h1>><!--<h1-->my content> or effectively:
<
my content #as a styled h1
>my content>
Thanks for any help.
UPDATE FOR CLARITY:
My question is - why is the content returning twice.
why is the content returning twice.
Because with the syntax of #{VARIABLE} Jade replace the variable with the value and interpret it as a HTML tag. For example:
passing a local variable {foo: 'bar'} and this template
#{foo}
generat this HTML
<bar></bar>
So you should pass the content and don't let interpret it by jade using = or != for unbuffered code:
!=body
btw: a whitespace is forbidden between = and the variable!
I am trying to use the Icomoon icon font with Haml and can't seem to find a way to escape the & so that it stays just an & instead of &.
The Icomoon font allows you to use HTML entities with a data-icon="" attribute. Works smooth as butter in HTML and even in a Haml file if I just do a straight HTML link.
However, since I'm learning Haml I thought I'd see if anyone on here would like to recommend the best way to approach this.
Here's a sample of what happens.
This is the original Haml:
%a(href='/posts' data-icon="&" aria-hidden='true')
This is how it compiles:
<a aria-hidden='true' data-icon='&' href='/posts'>
This is how it needs to compile for the icon font to work:
<a aria-hidden='true' data-icon='&' href='/posts'>
and here is a codepen where you can see how the icon renders due to the amp; addition: http://codepen.io/dandenney/pen/3/6
I didn't like the top poster's way of completing this question. So far the best way I've found is to do:
- foo = "&".html_safe
%a(href='/posts' data-icon=foo aria-hidden='true')
I'm not fully happy with this, but think it's better for rails apps rather than turning off HTML escaping everywhere.
You can use the :escape_attrs option to control whether HTML sensitive characters in attributes are escaped:
require 'haml'
haml = "%a(href='/posts' data-icon=\"&\" aria-hidden='true')"
puts Haml::Engine.new(haml, :escape_attrs => false).to_html
Output:
<a aria-hidden='true' data-icon='&' href='/posts'></a>
Note that this will apply to all attributes in your Haml template.
In my opinion, I don't like the idea to disable the feature to escape the characters generally. Maybe you use relay at some point in your application on it.
For me the best way to do it is:
%a{ href: '/', 'data-icon' => "✐".html_safe }