when executting this code, nothing shows
<!doctype html>
<html>
<meta charset="utf-8">
<title>Admin</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<body>
<app-administrador>Administrador...</app-administrador>
</body>
</html>
Im using angular electron, just like any angular
my Component({
selector: 'app-administrador',
templateUrl: './administrador.component.html',
styleUrls: ['./administrador.component.scss']
})
Related
I have a fragment for the head tag, and from within this I would like to call another fragment for my styles and scripts.
templates/fragments/commonHead.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="commonHead(title)">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div th:replace="~{fragments/styles :: styles}"></div>
<div th:replace="~{fragments/scripts :: scripts}"></div>
<title th:text="${title}"></title>
</head>
templates/fragments/styles.html
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="styles" th:remove="tag">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<link type="text/css" th:href="#{/css/normalize.css}" rel="stylesheet"/>
<link type="text/css" th:href="#{/css/style.css}" rel="stylesheet"/>
</div>
templates/fragments/scripts.html
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="scripts" th:remove="tag">
<script src="https://cdn.jsdelivr.net/npm/axios#1.1.3/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</div>
And this is how I am calling the common head fragment.
templates/schedule.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/commonHead :: commonHead('Schedule')}"></head>
<body>
----
But when I do this, there are no errors, but the generated html does not complete the head tag. There must be some issue, but I have no indication what is wrong. Is it not possible to do this? I have tried both with <div th:replace="~{fragments/styles :: styles}"></div> and <div th:replace="~{styles :: styles}"></div> (same for scripts) in case it doesn't need the directory when the fragment is in the same folder.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
EDIT:
After further troubleshooting here, it seems like it is completely overlooking the fragments in commonHead. If I intentionally call something with the wrong name (like <div th:replace="~{fragmentsX/stylesX :: stylesX}"></div>) I get no errors, and of course the fragment is not included.
It seems like the issue was with having the head tag in my commonHead fragment. When I changed that to div (with th:remove="tag" so that the div didn't show up in the html), then it worked fine.
Only change was made to templates/fragments/commonHead.html, final version is below.
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="commonHead(title)" th:remove="tag">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div th:replace="~{fragments/styles :: styles}"></div>
<div th:replace="~{fragments/scripts :: scripts}"></div>
<title th:text="${title}"></title>
</div>
I added open graph meta tags to my thymeleaf page.
When I try to share my page - it looks like tags absent.
My page (partially) code
<!DOCTYPE html>
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
prefix="og: //ogp.me/ns#">
<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"/>
<link th:href="#{/css/app.css}" rel="stylesheet"/>
<title th:text="${'pageTitle'}">Title</title>
<meta property="og:type" content="article" />
<meta property="og:url" th:content="${'https://my_site_url'}" />
<meta property="og:title" th:content="${'pageTitle'}" />
<meta property="og:description" th:content="${'DESCRIPTION'}" />
<meta property="og:image" th:content="#{'https://pp.vk.me/c629531/v629531034/3172e/xEBYyER1WE4.jpg'}" />
</head>
<body>
<section class="base fullpage">
<div class="fullpage__content">
<div th:replace="component/partial/header"/>
<div th:replace="${page}"/>
</div>
<div class="fullpage__bottom">
<div th:replace="component/partial/footer"/>
</div>
</section>
<div th:replace="component/auth/auth"/>
</body>
</html>
And my share page button
<a th:href="#{'https://twitter.com/share?url=' + ${full_my_Page_Url}}" rel="canonical" target="_blank" class="c-article-socials__link twitter-share-button">
<div class="icon">
<img th:src="#{/img/icons/social/tw-h.svg}" alt="">
</div>
</a>
I expected share preview card if full by open graph tags, but now it is empty, I can share, but haven't information. Only the link from the share button, but no info from og prefix info
UPDATES
My generated HTML head code looks like:
<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">
<link href="/css/app.css" rel="stylesheet">
<title>Статья</title>
<meta property="og:type" content="website">
<meta property="og:url"content="https://localhost:8443/articles/instruction/2">
<meta property="og:title" content="Статья">
<meta property="og:description" content="DESCRIPTION">
<meta property="og:image" content="/cmsstatic/img/posts/image_5.png">
</head>
I have integrated my angular project with ASP.NET MVC. I want to redirect my MVC page to angular route on first load. I have following code in my Index.cshtml page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Myapp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="skin-blue sidebar-mini wysihtml5-supported">
<app-root></app-root>
<script type="text/javascript" src="~/Scripts/client/runtime.js"></script>
<script type="text/javascript" src="~/Scripts/client/polyfills.js"></script>
<script type="text/javascript" src="~/Scripts/client/styles.js"></script>
<script type="text/javascript" src="~/Scripts/client/vendor.js"></script>
<script type="text/javascript" src="~/Scripts/client/main.js"></script>
</body>
</html>
I also have the index.html page configurations in angular index page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Myapp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>
<div class="wrapper">
</div>
</app-root>
</body>
</html>
Now I need to redirect the page from here to angular route where login route is defined for angular.
{ path: 'login', component: LoginComponent },
You have everything needed for Angular to run from your cshtml file. No need for index.html file.
Try to add this to your route config.
{path:'', redirectTo:'login', pathMatch: 'full' }
Once you add this Angular should redirect to login route by default.
I made Rails app and released.
I set ogp and twitter card by using meta-tags gem.
However,Twitter Cards Validator could not find any meta tags.
The browser shows codes blow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美味しい和菓子が見つかるメディア | MOMIJI</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta name="description" content="美味しい和菓子が見つかるメディア">
<meta name="keywords" content="和菓子, スイーツ, momiji">
<link rel="canonical" href="https://momiji.work/articles">
<meta property="og:title" content="MOMIJI">
<meta property="og:description" content="美味しい和菓子が見つかるメディア">
<meta property="og:type" content="website">
<meta property="og:url" content="https://momiji.work/articles">
<meta property="og:image" content="http://momiji.work/assets/wa_1.jpg">
<meta property="og:site_name" content="MOMIJI">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MOMIJI">
<meta name="twitter:description" content="美味しい和菓子が見つかるメディア">
<meta name="twitter:image" content="http://momiji.work/assets/wa_1.jpg">
<meta name="twitter:site" content="#Justin0370">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="jcjt5ya59ZrydFwnxiBcOdi7w3O5sXXSe6QXktFwt6uygvwi/DYmaTgV0yx0HbP/P8l1Zvsz5x5APEjlzsfE5A==" />
<link rel="stylesheet" media="all" href="/assets/application-c4248fae82b61852d60924641256d5953280f16c38ed2795e77c3a303f6fa588.css" data-turbolinks-track="true" />
<script src="/assets/application-0d8e513de520a20d78d2ba43d84d1c021d3937e16f681fee552500eb92297b4e.js" data-turbolinks-track="true"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Twitter Card Validator shows
INFO: Page fetched successfully
WARN: No metatags found
If you can know why my app can't show twitter card, answer this question, please.
i have created a theme in themeroller and used like this in my app
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="assets/css/jquery.mobile.1.3.2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/pinkhash.min.css" />
<link rel="apple-touch-startup-image" href="assets/img/logo.png" />
<link rel="apple-touch-icon" href="assets/img/logo.png" />
</head>
On first load, the new theme is used, but when i login to the app and logout, the old default blue theme appears, why is this?
Do not use jQuery Mobile's default CSS file. Instead use jQuery Mobile's structure CSS file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- YOUR CUSTOM THEME CSS -->
<link rel="stylesheet" href="your_custom_theme.css" />
<!-- JQUERY STRUCTURE CSS -->
<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/pinkhash.min.css" />
<link rel="apple-touch-startup-image" href="assets/img/logo.png" />
<link rel="apple-touch-icon" href="assets/img/logo.png" />
</head>