In custom_colors.css.erb file is:
<%
WebsiteSetting.last.link_color.present? ? (link_color = WebsiteSetting.last.link_color) : (link_color = '#0088cc')
%>
$custom_link: <%= link_color %>;
and in many css files i'm using $custom_link variable, but when i update WebsiteSetting.last by setting link_color field by colorpicker (hex), nothing changes in views. I suppose the problem is with precompiling custom_colors.css.erb file after request.
Dynamic assets precompilation (on each request) is normally done in development environment only for debugging reasons.
If you want to be able to use some request-dependent styles consider moving that code to the application layout:
application.html.erb:
<!DOCTYPE html>
<html lang="en">
<head>
...
<style type="text/css">
#my_div {
color: <% WebsiteSetting.last.link_color.present? ? WebsiteSetting.last.link_color : '#0088cc' %>;
}
</style>
...
</head>
<body>
...
</body>
</html>
Related
I am using angular universal.
This is the main url : https://domain-name.com/articles/some-article-slug-here
When this url is opened then res.render('index') is called and it causes to render the index.html file as shown in the code below.
app.get('*', (req, res) => {
res.render('index', { req });
});
Content of index.html is shown below:
<!doctype html>
<html lang="en">
<head >
......some head data here.....
</head>
<body>
......some body data here......
</body>
</html>
I want that when url : https://domain-name.com/amp/articles/some-article-slug-here is opened then replace the whole content inside html tag with some another html as shown below:
<!doctype html>
<html amp lang="en">
<head >
......some another head data here.....
</head>
<body>
......some another body data here......
</body>
</html>
Use Angular routing, you are saying: "I need a SPA with Angular!"
https://angular.io/guide/router
I have a sidekiq worker with a private method inside it that uses wicked_pdf to change an HTML file into a pdf then upload it to AWS s3 and return the URL, here's my private method inside the sidekiq worker.
def build_invoice_statistics_pdf()
#number_of_users = 5
pdf = WickedPdf.new.pdf_from_string(
ApplicationController.renderer.new.render(
template: "store_portal/cities/show.html.erb",
layout: "layouts/pdf.html.erb",
formats: [:html])
)
s3_public_url = upload_pdf_to_s3(pdf)
s3_public_url
end
And I'm using that HTML file as a template, my problem is I want to pass a variable or a value to that HTML file, to make it a dynamic file, for example, I want to pass #number_of_users variable
to the HTML file. here are my HTML template code and my layout code
show.html.erb
<%= #number_of_users %>
pdf.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<style>
td, th {
border: 1px solid #ddd;
padding: 8px;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #7e827e;
color: white;
}
</style>
<body>
<%= yield %>
</body>
</html>
the variable #number_of_users value is always nil, any solutions please on how to pass it to the html file which is used as template for wicked_pdf?
Wicked is looking for #number_of_users in the store_portal/cities_controller.rb controller's show action. Put it there.
You'll need to add locals the render method, in order to pass variables to the template. More details here. Make sure to change #number_of_users in your template to number_of_users (without the #).
pdf = WickedPdf.new.pdf_from_string(
ApplicationController.renderer.new.render(
template: "store_portal/cities/show.html.erb",
layout: "layouts/pdf.html.erb",
locals:{ number_of_users: #number_of_users }
formats: [:html])
)
I'm making a website with spring-boot & spring-security which prefers to supply freemarker as view. I don't know ftl much, and now I need use adminLTE's CSS and JS files in my ftl, but how?
<html lang="en">
<#assign basePath=request.contextPath>
<#macro head>
...
<script src="${basePath}WEB-INF/AdminLTE/dist/js/adminlte.min.js"></script>
<link src="${basePath}WEB-INF/AdminLTE/plugins/iCheck/line/line.css" rel="stylesheet"></link>
<script src="${basePath}WEB-INF/AdminLTE/plugins/iCheck/icheck.js"></script>
...
<#macro>
you can include css file by using <#include > tag,
place the stylesheet in the directory and use the
<#include "/{path to style sheet}/Styles.css">
and make sure your style sheet is inside the styles element:
<style type="text/css">
...
</style>
Example of this approach is
Test Template
<html>
<head>
<#include "css/test.css">
</head>
<body>
.......................
</body>
</html>
test.css
<style type="text/css">
body{background-color:#C5C5C0;}
*{font-family:Tahoma, Verdana, Helvetica, sans-serif;}
</style>
you can declare some param in code and use it to fill full path to css
// in java
params.put("htmlIncludePath", "classpath:/templates/pdfTemplates/include/");
...
// in ftl
<link href="${htmlIncludePath}manrope.css" rel="stylesheet">
physically files should be located in src/main/resources/templates/pdfTemplates/include
I use this simple solution.
I created a dedicated Get method for css-s.
#GetMapping(value="/css/{cssFile}")
public #ResponseBody byte[] getFile(#PathVariable("cssFile") String cssFile) throws IOException {
InputStream in = getClass()
.getResourceAsStream("/css/" + cssFile);
try {
return in.readAllBytes();
} catch (Exception e){
var error = new String("ERROR: css file (/css/" + cssFile + ") not found");
return error.getBytes();
}
}
Now I can reference the css file in the usual html way right in .ftlh file. Just need to put my file under resources/css/ directory.
<html>
<head>
<link href="css/general.css" rel="stylesheet">
</head>
<body>
...
Please also note that the suggested method (see other responses) with include statement, will produce a html file with full content of the corresponding css file not a link to css. So if you have heavy css files expect that their content will be literally included into html files received by clients.
If I have an .html.erb file that looks like this:
<html>
<head>
<title>Test</title>
</head>
<body>
<%= #name %>
</body>
</html>
How can I generate an HTML file that looks like this?
<html>
<head>
<title>Test</title>
</head>
<body>
John
</body>
</html>
How can I execute the template (passing the name parameter) given that the format is .html.erb and be able to get just an .html file?
#page.html.erb
<html>
<head>
<title>Test</title>
</head>
<body>
<%= #name %>
</body>
</html>
...
require 'erb'
erb_file = 'page.html.erb'
html_file = File.basename(erb_file, '.erb') #=>"page.html"
erb_str = File.read(erb_file)
#name = "John"
renderer = ERB.new(erb_str)
result = renderer.result()
File.open(html_file, 'w') do |f|
f.write(result)
end
...
$ ruby erb_prog.rb
$ cat page.html
<html>
<head>
<title>Test</title>
</head>
<body>
John
</body>
</html>
Of course, to make things more interesting, you could always change the line #name = "John" to:
print "Enter a name: "
#name = gets.chomp
The ruby ERB library operates on strings, so you would have to read the .erb file into a string, create an ERB object, and then output the result into an html file, passing the current binding to the ERB.result method.
It would look something like
my_html_str = ERB.new(#my_erb_string).result(binding)
where #my_erb_string. You could then write the html string into an html file.
You can read more about binding here and about the ERB library here.
Here is a sample code:
require 'erb'
template = File.read("template.html.erb")
renderer = ERB.new(template)
class Message
attr_accessor :name
def initialize(name)
#name = name
end
def get_binding
binding()
end
end
message = Message.new 'John'
File.open('result.html', 'w') do |f|
f.write renderer.result message.get_binding
end
The template.html.erb is your .html.erb template file and result.html is the rendered html file.
Some nice articles you can take a look, link1, link2.
When I view my Rails (3.1) app in Internet Explorer, for some reason it sometimes shows bits of html tags at the end of my page, but it doesn't do this in Chrome or Firefox. In particular, it shows part of the tag - never the full tag, but part - like </h or </htm - in the view as text (at the bottom of the page).
In my layout template, I do have this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><%= title %></title>
<% if params[:controller] == 'pages' %>
<%= stylesheet_link_tag "static_pages", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" %>
<% elsif %>
<%= stylesheet_link_tag "bootstrap", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" %>
<% end %>
<%= javascript_include_tag "https://ws.sharethis.com/button/buttons.js", "admin.js" %>
<%= csrf_meta_tag %>
<script type="text/javascript" charset="utf-8">
//jQuery.noConflict();
jQuery.extend( jQuery.fn.dataTableExt.oStdClasses, {
"sSortAsc": "header headerSortDown",
"sSortDesc": "header headerSortUp",
"sSortable": "header"
} );
jQuery(document).ready(function() {
jQuery('#datatable').dataTable( {
"sDom": "<'row'<'span5'l><'span8'f>r>t<'row'<'span4'i><'span8'p>>",
"sPaginationType": "bootstrap"
} );
} );
</script>
<%= yield :javascript%>
<%= yield :script%>
</head>
<body>
</body>
</html>
When I look at the html source code generated for the view, I notice that the Chrome/Firefox the source concludes with </body> and not </html> (or any partial code like IE).
Can someone please let me know what I'm doing wrong? Thank you.
An empty Head tag will not be recognized as well formed (closed ) unless it contains a mandatory child
( as defined in the DTD of the doctype 'Transitional' you are using. )
Give it a title
<head>
<title>A Title</title>
</head>
I think this is mandatory for all doctypes ( but don't quote me on that ) - but mute point too - every web page should have a title.
Update: Says title is present, still sounds like a "well formed" issue though ..
1) Run, view source and copy all the code into notepad/simular and save that as test.html ( this will highlight any chars that are not correct like ( " ) etc ..
2) Upload your test.html into the w3c validator service w3c Validator service
That should give some good clues
hope that cracs it