HTML import each modules instead of link import - html

This is my HTML head of electron APP.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="import" href="importInfo.info">
</head>
And this is importInfo.info File.
<meta charset="utf-8">
<title>HITS</title>
<script>window.$ = window.jQuery = require('../node_modules/jquery/dist/jquery.min.js');</script>
<link rel="stylesheet" href="../asset/font-awesome/css/font-awesome.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../node_modules/jquery-ui/external/requirejs/require.js"></script>
<link href="../asset/css/jquery-ui.css" rel="stylesheet">
<link href="../asset/css/style.css" rel="stylesheet">
<script src="../asset/js/frontLib.script"></script>
And I wanted to change this into the HTML below by simply copying and pasting because of this error
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HITS</title>
<script>window.$ = window.jQuery = require('../node_modules/jquery/dist/jquery.min.js');</script>
<link rel="stylesheet" href="../asset/font-awesome/css/font-awesome.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../node_modules/jquery-ui/external/requirejs/require.js"></script>
<link href="../asset/css/jquery-ui.css" rel="stylesheet">
<link href="../asset/css/style.css" rel="stylesheet">
<script src="../asset/js/frontLib.script"></script>
</head>
As soon as I changed
require.js:166 Uncaught Error: Mismatched anonymous define() module: function () {
return _;
}
this error occurs.
What should I do? Can I simply stay with link rel="import"???
It says it is planned to be removed around March 2018 so I'm afraid of that, though time already passed.

Related

Failed to load resource: net::ERR_FILE_NOT_FOUND in HTML

I'm using some libs
In Visual Studio Code, with the Live Server extension it doesn't give this error, but when opening the file without using the extension, I have these errors in the console
`
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerador de E-mail HTML</title>
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
`My head in HTML

How do I add line breaks when using the Thymeleaf template layout?

How do I add line breaks when using the Thymeleaf template layout?
Here is my html base code.
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">Layout title</title>
<!-- Common -->
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/
awesomeapp.css}">
<link rel="shortcut icon" th:href="#{/images/favicon.ico}">
<script type="text/javascript" th:src="#{/sh/scripts/codebase.js}"></
script>
<!-- Add -->
<th:block th:replace="${links}" />
</head>
And this is the html main code.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
<title>Main title</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui.css}">
</head>
<body>
main content
</body>
</html>
Here is the result rendered by <th:block th:replace="${links}" />.
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"><link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui .css}">
But what I want is:
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="#{/themes/smoothness/jquery-ui.css}">
Making the line break like this is what I want.
How can I solve this problem?

Allow a HTML file which requires external files to be used in Electron

How would you make this HTML file use the css file while being run in electron?
<!DOCTYPE html>
<html>
<head>
<title>First electron html app</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
</html>

Try this: <link rel="stylesheet" type="text/css" href="styles.css">

Thymeleaf functionality on Meta tag

I'm not sure if this could be a known scenario. But I'm confused since I couldn't find any discussions on this.
Raising my clarification. Does thymeleaf based html page allow meta tags within its head?
I've this code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Data Services Platform Support</title>
<div th:replace="fragments/header :: header-css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}"
href="../../css/main.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
which displays the page I'm looking for.
But when I tried adding the meta tag to upgrade my page with few functionalities(which require a meta tag), Whitelabel Error Page is all what I get.
My modified code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Data Services Platform Support</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div th:replace="fragments/header :: header-css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}"
href="../../css/main.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
Is there something I need to consider? Please help.

Yes, Thymeleaf supports all tags. If you are using an old version of thymeleaf, it may be likely that it needs to be valid xhtml. So your meta tags should looks like this:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
(with the ending slash). The server log error message will contain the details of the error.

CSS stylesheet not added on localhost, bootstrap, XAMPP

when i open http://localhost/Website/home.html my css stylesheet is not showing up. Maybe it is something with the bootstrap css? I am new to both bootstrap and XML. Here is my home.html head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>****</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
My style.css is located in the same folder as my home.html
EDIT: some of my css are now showing, but not all. Strange..
EDIT 2: Apparently the bootstrap CSS did something fishy, it works if i changed the order to this:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />