I'm just trying to add a "dummy" div into the head of this HTML snippet, and I've tried 100 ways and nothing is working.
This is what the head looks like when I pull it down:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Horraa</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
I just want to put in this dummy div:
<div> id='todd' class='{{customer.name}} {{shop.domain}}'</div>
So the end result is this
<head>
<div> id='todd' class='{{customer.name}} {{shop.domain}}'</div>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Horraa</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
This is my Nokogiri
page = Nokogiri::HTML(todd)
head = page.css('head')
Head is now a Nokogiri::XML::NodeSet
This doesn't work
div = "<div> id='todd' class='{{customer.name}} {{shop.domain}}'</div>"
head.push(div)
Or this
div = "<div> id='todd' class='{{customer.name}} {{shop.domain}}'</div>"
update = Nokogiri::XML::Node.new('div', todd)
update['class'] = '{{customer.name}} {{shop.domain}}'
head.add_previous_sibling(update)
head << update
or this
head.add_next_sibling "<div> id='todd' class='{{customer.name}} {{shop.domain}}'</div>"
and I've tried 10 others, but this is getting long.. Where did I go astray?
Try this
html_string = "<div id='todd' class='{{customer.name}} {{shop.domain}}'></div>"
page.at('head').add_child(html_string)
Related
I'm working on a .NET and Angular webapp, with ngx-sharebuttons ShareButtonModule. When I want to get a link of the post or share it via WhatsApp, the meta tags are not being updated properly. I am setting up default meta tags in index.html:
index.html
<html lang="pl">
<head>
<meta charset="utf-8">
<title>DDM - Daily Dose Of Memes</title>
<base href="/">
<meta name="description" content="Memy na miarę Twoich możliwości. Ty też możesz dać z siebie 30%! Zbiór obrazków, gifów i filmików dla sympatyków czarnego humoru.">
<!-- <meta name="keywords" content="Memy, hard, obrazki, filmiki, czarny humor"> -->
<meta name="keywords" content>
<meta name="url" content="https://ddmemes.com.pl">
<meta name="title" content="DDM - Daily Dose Of Memes">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="shortcut icon" href="./assets/favicon.ico">
<!-- og meta tags for link share -->
<meta property="og:title" content="DDM - Daily Dose Of Memes"/>
<meta property="og:url" content="https://ddmemes.com.pl"/>
<meta property="og:image" content="https://res.cloudinary.com/duj1ftjtp/image/upload/v1659954431/LogoImage.png"/>
<meta property="og:description" content="Memy na miarę Twoich możliwości. Ty też możesz dać z siebie 30%! Zbiór obrazków, gifów i filmików dla sympatyków czarnego humoru.">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#000000">
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
Later, when the user wants to share a post's component, it appears that the meta attributes are not being updated properly. First, I am setting the data via share-buttons modal:
meme-card.component.html
<share-buttons theme="modern-dark"
[include]="['copy', 'facebook', 'messenger', 'reddit', 'telegram', 'twitter', 'whatsapp']"
[showIcon]="true"
[showText]="true"
[autoSetMeta]="false"
image="{{meme?.url}}"
url="https://ddmemes.com.pl/meme/{{meme.id}}/{{convertText(meme.title)}}"
description="{{meme?.title}}"
title="{{meme?.title}}"
class="pt-3">
</share-buttons>
Also, I am updating the meta tags themselves in ngOnInit via below code:
meme-card.component.ts
changeMetaTags() {
this.meta?.updateTag(
{ property: 'og:title', content: this.meme?.title },
);
this.meta?.addTag(
{ name: 'title', content: this.meme?.title}
);
this.meta?.updateTag(
{ name: 'description', content: this.meme?.title },
);
this.meta?.updateTag(
{ property: 'og:image', content: this.meme?.url },
);
}
Although everything appears to be updated properly upon inspecting a page, when I send the link to somebody or upon checking in https://www.heymeta.com/, it appears that the data still remains default, equal to the one given in index.html. The only thing that seems to be updated is url.
Is there something I'm missing here? I'd appreciate any help.
Cheers
I would like to change the basic hmtl structure in VS code that is loaded with [! + tab] or [ctrl + space]
What I have when I press [! tab]:
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
</body>
</html>
What I would like to set it to for example :
<!DOCTYPE html>
<html lang="fr">
<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 rel='stylesheet' type='text/css' media='screen' href='main.css'>
<title>Document</title>
</head>
<body>
</body>
</html>
I tried looking into the html snippets parameters but didn't find anything.
To overwrite existing emmets in VS Code:
Create a snippets.json file, add this JSON structure and save it somewhere on your hard disk.
{
"html": {
"snippets": {
"!": "{<!DOCTYPE html>}+html[lang='fr']>(head>meta:utf+meta:vp+title{${2:Document}}+link[rel='stylesheet' type='text/css' media='screen' href='main.css'])+body"
}
},
"css": {
"snippets": {}
}
}
Open the VS Code settings (Code → Preferences → Settings) and search for “Emmet Extensions Path”.
Click “Add Item”, enter the path to the folder where you’ve saved the snippets.json file you’ve created earlier, and press “OK”.
Now try ! + TAB ;)
To learn more about how custom snippets work, check this article
I have made a basic form page in HTML and programmed it such that when I click the submit button, it must go to a JSP page where the details entered will be displayed.
The HTML code is:
<!DOCTYPE html>
<html lang="en">
<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>ABC</title>
</head>
<body>
<form method="post" action="xyz.jsp">
Name: <input type="text" name="nm" placeholder>
ID: <input type="text" name="id" placeholder>
Submit: <input type="submit">
</form>
</body>
</html>
The JSP code is:
<!DOCTYPE html>
<html lang="en">
<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>XYZ</title>
</head>
<body>
<%
String St1 = request.getParameter("nm");
String St2 = request.getParameter("id");
out.println("Your name is: " + St1);
out.println("Your id is: " + St2);
%>
</body>
</html>
When I tried running the HTML page using the live server in vs code, it shows the page not found after clicking the submit button.
I am literally a beginner and helpless, please tell me what should I do? OR where am I getting it wrong?
I`m using VSCode for the aforementioned.
I pretty new on these things and im trying to improve my self on html skeleton. So when I call html skeleton on vscode it's being like this as you know.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
</body>
</html>
but i want to change default html skeleton content as like this;
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body{background-color: black;}
</style>
</head>
<body>
</body>
</html>
Someone can help me with this?
You can make your own custom snippet using vscode.
As in your case you can create one using the following steps:
Open the gear icon on the bottom left of you vscode.
Select user snippet
Type html
Adding your custom html skelton
You can now add this code to have your custom skelton:
"boilerplate": {
"prefix": "log",
body: [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<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>Document</title>",
" <style>",
" body{background-color: black;}",
" </style>",
"</head>",
"<body>",
" ",
"</body>",
"</html>",
],
"description": ""
}
],
"description": "Log output to console"
}
}
I haven't changed the prefix, but it can be changed through "prefix": ""
Using the custom snippet
To use the custom snippet, just type the prefix in the html file to get the results!
If you want to add you own custom code, and have problem in converting it into snippet, here's a website which will help in that:
snippet generator
For more knowledge this video can help: YouTube video
So i've recently picked up Sublime and it's the best editor I've ever had, hands down. That said, I'm trying to write a custom snippet for an HTML page framework, but can't seem to get it to insert properly in Sublime. It isn't kicking back any errors, and Sublime recognizes that it exists, but when I try to insert it, it doesn't do anyting....am I missing something in the snippet code here?
I used the documentation here while I was writing it.
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>${1:WebsiteName}</title>
<meta charset="utf-8" >
<meta http-equiv="default-style" content="pref" >
<!--disables caching of the site-->
<meta http-equiv="pragma" content="no-cache" >
<!--other sites cannot display this page in a frame-->
<meta http-equiv="window-target" content="_top" >
<!--must be completed for SEO-->
<meta name="keywords" content="${3:keywords...}" >
<!--must be completed for SEO-->
<meta name="description" content="${4:description...}" >
<meta name="author" content="${5:your_name}" >
<!--allows bots to index website-->
<meta name="robots" content="index, follow" >
<meta name="copyright" content="${6:copyright}" >
<!--sets the revisit frequency for search bots-->
<meta name="revisit-after" content="14 days">
<!--prevents dup entries in open directory project DMOZ-->
<meta name="googlebot" content="noodp">
<!--used for age appropriateness, values: {general} {mature} {restricted} {14 years} {safe for kids}-->
<meta name="rating" content="general">
<meta name="reply-to" content="${7:webmasteremail#yoursite.com}">
<!--use the content of this to indicate the developer who created the page-->
<meta name="web_author" content="${8:your_name}">
<!--controls caching permissions, values: {Public} {Private} {no-cache} {no-Store}-->
<meta name="Cache-control" content="Public">
<!--cookie data should be dynamically handled by PHP if needed-->
<!-- <meta name="Set-Cookie" content="" -->
<meta name="host" content="Internet Connection Inc">
<meta name="host-admin" content="${9:webmaster_name}">
<meta name="contactName" content="${10:customer_name}">
<meta name="contactOrganization" content="${11:business_name}">
<meta name="contactStreetAddress1" content="${12:business_address}">
<meta name="contactZipcode" content="${13:business_zipcode}">
<meta name="contactCity" content="${14:business_city}">
<meta name="contactCountry" content="${15:business_country}">
<meta name="contactPhoneNumber" content="${16:business_phone}">
<meta name="contactFaxNumber" content="${17:business_fax}">
<meta name="contactNetworkAddress" content="${18:business_email}">
<meta name="linkage" content="${19:website_url_absolute}">
<link id="pref" rel="stylesheet" type="text/css" href="${20:CSS_Location}" >
<!--[if lte IE 6]>
<link rel="stylesheet" href="${21:CSS_Location}">
<!--[endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html15.js"></script>
<!--[endif]-->
</head>
<body>
<?php include("${22:Header_location"); ?>
<!--main HTML content goes here-->
<?php include("${23:Footer_location"); ?>
</body>
</html>
]]></content>
<tabTrigger>htf</tabTrigger>
<scope>text.html</scope>
<description></description>
</snippet>
Part 22 and 23 are not ended correctly, number 2 is missing and number 7 is strange:
content="${7:webmasteremail#yoursite.com}"
Which should be:
content="${7:webmasteremail}#yoursite.com"
This should work for you (notice that I've changed some names and made them all uppercase, but the functionality is the same):
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>${1:WEBSITENAME}</title>
<meta charset="utf-8" >
<meta http-equiv="default-style" content="pref" >
<!--disables caching of the site-->
<meta http-equiv="pragma" content="no-cache" >
<!--other sites cannot display this page in a frame-->
<meta http-equiv="window-target" content="${2:WINDOW_NAME}" >
<!--must be completed for SEO-->
<meta name="keywords" content="${3:KEYWORDS}" >
<!--must be completed for SEO-->
<meta name="description" content="${4:DESCRIPTION}" >
<meta name="author" content="${5:YOUR_NAME}" >
<!--allows bots to index website-->
<meta name="robots" content="index, follow" >
<meta name="copyright" content="${6:COPYRIGHT}" >
<!--sets the revisit frequency for search bots-->
<meta name="revisit-after" content="14 days">
<!--prevents dup entries in open directory project DMOZ-->
<meta name="googlebot" content="noodp">
<!--used for age appropriateness, values: {general} {mature} {restricted} {14 years} {safe for kids}-->
<meta name="rating" content="general">
<meta name="reply-to" content="${7:WEBMASTEREMAIL}#yoursite.com">
<!--use the content of this to indicate the developer who created the page-->
<meta name="web_author" content="${8:YOUR_NAME}">
<!--controls caching permissions, values: {Public} {Private} {no-cache} {no-Store}-->
<meta name="Cache-control" content="Public">
<!--cookie data should be dynamically handled by PHP if needed-->
<!-- <meta name="Set-Cookie" content="" -->
<meta name="host" content="Internet Connection Inc">
<meta name="host-admin" content="${9:WEBMASTER_NAME}">
<meta name="contactName" content="${10:CUSTOMER_NAME}">
<meta name="contactOrganization" content="${11:BUSINESS_NAME}">
<meta name="contactStreetAddress1" content="${12:BUSINESS_ADDRESS}">
<meta name="contactZipcode" content="${13:BUSINESS_ZIPCODE}">
<meta name="contactCity" content="${14:BUSINESS_CITY}">
<meta name="contactCountry" content="${15:BUSINESS_COUNTRY}">
<meta name="contactPhoneNumber" content="${16:BUSINESS_PHONE}">
<meta name="contactFaxNumber" content="${17:BUSINESS_FAX}">
<meta name="contactNetworkAddress" content="${18:BUSINESS_EMAIL}">
<meta name="linkage" content="${19:WEBSITE_URL_ABSOLUTE}">
<link id="pref" rel="stylesheet" type="text/css" href="${20:CSS_LOCATION}" >
<!--[if lte IE 6]>
<link rel="stylesheet" href="${21:CSS_LOCATION2}">
<!--[endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html15.js"></script>
<!--[endif]-->
</head>
<body>
<?php include("${22:HEADER_LOCATION}"); ?>
<!--main HTML content goes here-->
<?php include("${23:FOOTER_LOCATION}"); ?>
</body>
</html>
]]></content>
<tabTrigger>htf</tabTrigger>
<scope>text.html</scope>
<description></description>
</snippet>