{"id":4513,"date":"2020-11-27T17:50:04","date_gmt":"2020-11-27T17:50:04","guid":{"rendered":"https:\/\/robertjwallace.com\/?p=4513"},"modified":"2023-07-18T23:22:40","modified_gmt":"2023-07-18T23:22:40","slug":"adding-links-to-web-pages-in-home-assistant","status":"publish","type":"post","link":"https:\/\/robertjwallace.com\/es\/adding-links-to-web-pages-in-home-assistant\/","title":{"rendered":"C\u00f3mo agregar enlaces a p\u00e1ginas web en Home Assistant"},"content":{"rendered":"<p>I have been playing around with Home Assistant for just a little while now, and while I am impressed with what it does, I find the documentation and the examples to be less than helpful.  One thing I wanted to do was simply add a &#8220;card&#8221; of web links to the UI.  Since the Home Assistant interface (Lovelace) is web based you would think that this would be easy.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>But Googling showed people asking how to do it but getting no clear, clean answers.<\/p>\n\n\n\n<p>In Home Assistant you can add to the interface by adding &#8220;cards&#8221;.  There are predefined cards for a lot of things, including one to embed a web page into the interface (as long as the page address is https:).  But nothing as simple as adding a bunch of web links.<\/p>\n\n\n\n<p>I was about to delve into how to make a custom card with programming (ugh!) when I notice a predefined card called &#8220;Markdown&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/robertjwallace.com\/wp-content\/uploads\/2020\/11\/markdown.png\"><img decoding=\"async\" width=\"334\" height=\"366\" data-src=\"https:\/\/robertjwallace-images.s3.us-east-2.amazonaws.com\/wp-content\/uploads\/2020\/11\/markdown.png\" alt=\"\" class=\"wp-image-4514 lazyload\" data-srcset=\"https:\/\/robertjwallace-images.s3.us-east-2.amazonaws.com\/wp-content\/uploads\/2020\/11\/markdown.png 334w, https:\/\/robertjwallace-images.s3.us-east-2.amazonaws.com\/wp-content\/uploads\/2020\/11\/markdown-274x300.png 274w\" data-sizes=\"(max-width: 334px) 100vw, 334px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 334px; --smush-placeholder-aspect-ratio: 334\/366;\"><\/a><\/figure>\n\n\n\n<p>Reading the fine print shows that it will allow you to add links to web pages.  All you need to do is learn the Markdown language.  Not what I wanted to do, learn\/use yet another language.  I already can code html.  Fortunately there is an on-line converter from html to markdown.<\/p>\n\n\n\n<p>And to make things easier, most of the links I wanted to add are in my browser bookmarks.  So here is what I did.<\/p>\n\n\n\n<p>I exported my bookmarks from Chrome by going to the Bookmarks manager and exporting.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/robertjwallace.com\/wp-content\/uploads\/2020\/11\/bm.png\"><img decoding=\"async\" width=\"255\" height=\"316\" data-src=\"https:\/\/robertjwallace-images.s3.us-east-2.amazonaws.com\/wp-content\/uploads\/2020\/11\/bm.png\" alt=\"\" class=\"wp-image-4515 lazyload\" data-srcset=\"https:\/\/robertjwallace-images.s3.us-east-2.amazonaws.com\/wp-content\/uploads\/2020\/11\/bm-255x182.png 255w, https:\/\/robertjwallace-images.s3.us-east-2.amazonaws.com\/wp-content\/uploads\/2020\/11\/bm-242x300.png 242w\" data-sizes=\"(max-width: 255px) 100vw, 255px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 255px; --smush-placeholder-aspect-ratio: 255\/316;\"><\/a><\/figure>\n\n\n\n<p>Then I edited the exported file to clean up the html code.  I had to add &lt;br&gt; tags to the end of the &lt;href&gt; tags and I removed all the html code except for the headers (&lt;h1&gt; y &lt;h2&gt; tags).  When I had the html code cleaned I copied and pasted it into an online html to markdown converter (<a href=\"https:\/\/www.browserling.com\/tools\/html-to-markdown\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.browserling.com\/tools\/html-to-markdown<\/a>)<\/p>\n\n\n\n<p>Now I had the markdown code.  In Home Assistant I edited the dashboard and added the Markdown card.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/robertjwallace.com\/wp-content\/uploads\/2020\/11\/edit.png\"><img decoding=\"async\" width=\"265\" height=\"220\" data-src=\"https:\/\/robertjwallace-images.s3.us-east-2.amazonaws.com\/wp-content\/uploads\/2020\/11\/edit.png\" alt=\"\" class=\"wp-image-4516 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 265px; --smush-placeholder-aspect-ratio: 265\/220;\"><\/a><\/figure>\n\n\n\n<p>Editing the &#8220;Markdown&#8221; card, I simply replaced the &#8220;Content&#8221; with my &#8220;Markdown&#8221; code and I got my card with links!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/robertjwallace.com\/wp-content\/uploads\/2020\/11\/links.png\"><img decoding=\"async\" width=\"1024\" height=\"454\" data-src=\"https:\/\/robertjwallace-images.s3.us-east-2.amazonaws.com\/wp-content\/uploads\/2020\/11\/links-1024x454.png\" alt=\"\" class=\"wp-image-4517 lazyload\" data-srcset=\"https:\/\/robertjwallace-images.s3.us-east-2.amazonaws.com\/wp-content\/uploads\/2020\/11\/links-1024x454.png 1024w, https:\/\/robertjwallace-images.s3.us-east-2.amazonaws.com\/wp-content\/uploads\/2020\/11\/links-300x133.png 300w, https:\/\/robertjwallace-images.s3.us-east-2.amazonaws.com\/wp-content\/uploads\/2020\/11\/links-768x341.png 768w, https:\/\/robertjwallace-images.s3.us-east-2.amazonaws.com\/wp-content\/uploads\/2020\/11\/links.png 1075w\" data-sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/454;\"><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>I have been playing around with Home Assistant for just a little while now, and while I am impressed with what it does, I find the documentation and the examples to be less than helpful. One thing I wanted to do was simply add a &#8220;card&#8221; of web links to the UI. Since the Home &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/robertjwallace.com\/es\/adding-links-to-web-pages-in-home-assistant\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> &#8220;Adding links to web pages in Home Assistant&#8221;<\/span><\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_eb_attr":"","footnotes":""},"categories":[143,166],"tags":[],"class_list":["post-4513","post","type-post","status-publish","format-standard","hentry","category-computer-stuff","category-home-assistant"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"Bob","author_link":"https:\/\/robertjwallace.com\/es\/author\/admin\/"},"_links":{"self":[{"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/posts\/4513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/comments?post=4513"}],"version-history":[{"count":2,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/posts\/4513\/revisions"}],"predecessor-version":[{"id":4519,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/posts\/4513\/revisions\/4519"}],"wp:attachment":[{"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/media?parent=4513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/categories?post=4513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/robertjwallace.com\/es\/wp-json\/wp\/v2\/tags?post=4513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}