How do I convert this html file into a web2py layout file? - layout

http://ideone.com/g9gdkK
According to the documentation, I have to change the hrefs and srcs to the URL form (after moving the files to static folder) and add {{include}} to the body, but the output is not proper.
<link href="css/bootstrap.min.css" rel="stylesheet">
to
<link href="{{=URL('static', 'css/bootstrap.min.css')}}" rel="stylesheet">
The original html code is in the link above.
Please help.

The file views/layout.html defines the overall structure of your site.
Find {{include}} - at this point the views (or the HTML code in your views) is included into the overall structure.
If you have a controller test and the function output as in http:\\www.whatever.com\test\output
def output():
# Do something
return dict(...)
Web2py is looking for a corresponding view output.html in views/test where you can do stuff with the returned contents (if you want to).
This HTML file might look like:
{{extend 'layout.html'}}
<div>
<!-- Your contents -->
</div>
More informations regarding this topic can be found in the page-layout section of the official documentation.

Related

Include mathjax equations in CHM file

I'm looking to create a chm file with a topic with some mathjax equations. The html file corresponding to the topic is very simple:
<html>
<head>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>
When I compile in HTML Help Workshop, it's all good. But when I open the resulting chm file and navigate to that topic, I get this issue:
and then the equations don't render - I just get whatever is written in plain text mode. Is there any way at all to get mathjax equations render properly in a chm file?
The CHM help file format is very old and hasn't been updated by Microsoft in a long time: internally it still uses a very old version of Internet Explorer to display the content of the topics.
Recent versions of MathJax are not compatible with older web browsers and that is probably why you are seeing this error.
To avoid this problem, you can either:
Use an older version of MathJax which is compatible with older web browsers such as Internet Explorer 6
Create a hyperlinks in your CHM help file to a webpage which shows the problematic content: it will be opened by the system's default web browser which is (almost) guaranteed to be much newer
Some help authoring tools also include a way to change the Internet Explorer compatibility settings which could be used to force Microsoft Edge to be used to display content: it should allow MathJax to run properly
MathJax used to be able to work in CHM files, but it was a bit fiddly to get it to work. As I recall, you had to use an explicit configuration rather than the ?config=... approach for one thing. There are some very old discussion about it in the MathJax user's forum; see here. it was always a bit difficult to get it to work, and these discussions were about very early versions of MathJax (v1.1, v2.0, v2.1), so you might need to explicitly select older versions of MathJax. Also note that the cdn.mathjax.org address was retired in 2017 (it still exists, but redirects to another CDN, and that might also be a problem for CHM files), so you may want to use one of the other CDNs that serve MathJax, e.g., cdn.jsdelivr.net/npm/mathjax#2/MathJax.js, instead.
As a first simple step you'd try to add following line into your HTML topic files:
<meta http-equiv="X-UA-Compatible" content="IE=11">
Tested and compiled by using FAR HTML with HTML file shown below and some css stuff. I did a reverse test by deleting the line mentioned above only and the script error window appears again.
For further information using X-UA-Compatible see also: https://stackoverflow.com/a/6771584/1981088
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11">
<title>MathJax Test</title>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<link rel="stylesheet" href="../design.css">
</head>
<body>
<h1>MathJax Test</h1>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>
is resulting in a CHM topic like this:
Of course you need a internet connection.

Adding Font Awesome icons in the ejs file in Nodejs (with express js) project

Hey guys i am trying to build a comment system project with Nodejs . At a certain place i want to use Font Awesome icons in my project so i tries 2 ways but failed to render thoses icons
First
inclucing
<link href="https://stackpath.bootstrapcdn.com/.../font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
inside my head tag in ejs file
and then
Second
Download this zip file https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
and open the CSS folder inside and drag the all.min.css file into your public directory in your project.
and then Use a link tag to reference it in your templates/HTML, e.g:
and
Both the ways failed, am i missing something ?
Since you are using the font-awesome solid styles with the fas class, you'll have to include the solid.css styles.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/solid.min.css">

header.ejs and footer.ejs not functioning properly

Good Day!
I am making an app and in it I have various routes. I am using node.js. I have created a "partials" directory with header.ejs and footer.ejs files that contain all the header and footer info such as bootstrap, custom css etc.
Now, this header file works fine, it is also linked correctly, I have tested it by changing the background color to complete red and this color then applies to all the pages that contain <% include header.ejs %> and <% include footer.ejs %>.
In my project, the problem is that the bootstrap and other custom css only work for the root route. For example this is the main directory (Project), this directory contains (Project/app.js, Project/package.json, Project/views, Project/public, and so on...). Project/views contains ejs files for all the routes. For example toyota.ejs file for route "/cars/toyota", honda.ejs file for route "/cars/honda" and so on. All these ejs files are stored in Project/views folder. In the main directory, along with app.js, there is a landing page called "landing.ejs" for route "/cars". The header and footer work absolutely fine for the route "/cars" which renders "landing.ejs" but when I go to different routes such as "/cars/toyota", which will render "toyota.ejs" from views folder, the header and footer stop working, only certain features work such as bootstrap button or certain custom styles.
What I mean is that header.ejs and footer.ejs only works for root route, which is "/", and the main cars route "/cars", which shows all car manufacturing companies. The problems arises only when I try try to use routes that render files from the "Project/views" folder. header.ejs and footer.ejs properties does not get applied to the files contained in the nested folder, which is called "views". Linking is working fine because I have tried changing background colors.
Can you post your code to here?
You can try this:
<%- include('filepath/header.ejs') %>
In your header.ejs file, put a "/" before your css filename in href.
For example, replace:
<link rel="stylesheet" type="text/css" href="car.css">.
with:
<link rel="stylesheet" type="text/css" href="/car.css">.
I got a similar error but my code worked two ways, either by using
<%- include("partials/header"); -%>
or by,
<%- include partials/footer.ejs-%>
also, take care of the spaces in between.
In this example, I am considering that the partials folder in the same directory, update path as per the requirements.
Happy Coding :)

How to intercept a Javascript/CSS file request from the Webpage at the cleint side, and load alternative files insted?

For example, a webpage loads its JavaScript files like this inside the head tag:
<script src="http://www.somedomain.com/js/somejsfile.js"></script>
or for CSS files:
<link rel="stylesheet" type="text/css"
href="http://www.somedomain.com/somecssfile.css">
What I want to achieve is that, while loading the page itself, instead of the original http://www.somedomain.com/js/somejsfile.js it should load another file http://www.anotherdomain.com/js/anotherfile.js
May be via some custom firefox/chrome (preferably not IE) extension or something else.
Hint:
This can be also used to subsitute jQuery library etc. to load from local source instead of remote Google* hosted file.
injecting your own content script at "document_start" will give you the chance to analise and modify the document, even before the DOM is constructed and any script is started.
But at that time, all CSS files are already loaded. Perhaps you may redefine them with other CSS.
See "run_at" property in "content-scripts" property, in manifest.json:
http://code.google.com/chrome/extensions/content_scripts.html

Using Julius or Lucius to add scripts or styles to the <head> of a page

I have a Yesod 0.9.3 scaffolded site with some small fragments that are different for every page, such as styles for specific id attributes generated from an undetermined number of search results, and I want to place them in <style> or <script> tags in the <head> of the page, so that they do not pollute my /static/tmp (while the rest of the lucius/julius templates is placed in generated files, resulting in a dozen such files for the whole site).
addJulius and addLucius include their content to one common .js or .css file (at least for Lucius) which is generated according to its content.
Is there any way to do so, more straightforward than this?
toWidgetHead [hamlet| <style> ##{someIdent} { some: style; } |]
This ends up in the generated file, not in a style tag inside page:
toWidgetHead [lucius| ##{someIdent} { some: style; } |]
The function addStaticContent can control this. just set it to return Nothing in the cases where you want the assets to be embedded in the html file.
addStaticContent haddocks

Resources