如何使用HTML、CSS和JavaScript制作自己的Linktree

Linktree 是一种工具，允许您将各种社交媒体的多个超链接分享到一个网站上。它在Instagram上很受欢迎，因为Instagram只允许您在Stories和个人资料页面的“bio”部分之外的地方共享网站链接，而这个部分有严格的字符限制。在本文中，我们将学习如何使用HTML、CSS和JavaScript创建自己的Linktree。

实现方法： 将使用以下方法来实现：

创建一个项目文件夹，在其中创建三个文件夹，分别命名为“CSS”（用于编写CSS文件）、“js”（用于link.js和main.js文件）以及资产（用于logo图片），然后创建一个文件“index.html”（用于编写HTML）。
在HTML文件中，创建两个容器元素，比如一个div元素，用于放置您的logo和about（简介）。
使用CSS对您的linktree进行样式设置。这可能包括设置链接的字体、颜色和大小，以及清单项的布局和间距。
使用JavaScript为您的linktree添加交互功能。例如，您可以使用JavaScript在新标签页中打开链接，或者在用户将鼠标悬停在链接上时添加悬停效果。

项目结构：

root
|
|
|____assets
     |____discord.png
     |____facebook.png
     |____gmail.png
     |____instagram.png
     |____linkedin.png
     |____link-solid.svg
     |____telegram.jpg
     |____twitter.png
     |____youtube.png
|____css
     |____main.css
|____js
     |____links.js
     |____main.js
|____README.md
|____index.html

注意： 如果你想改变网页的字体，只需要在你的程序中引入以下样式表即可：

@import url(
"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");

示例： 下面的示例说明了逐步创建Linktree的基本实现方法。

步骤1： 将以下代码添加到 index.html 文件中。

index.html

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                         initial-scale=1.0" /> 
    <title>Linktree</title> 
  
    <script type="module" defer  
            src="main.js"> 
    </script> 
  
    <link rel="stylesheet" 
          href="main.css" /> 
</head> 
  
<body> 
    <main> 
        <div class="logoContainer"> 
            <img class="logo"
                 src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20221223192752/gfg_200x200-min.png"
                 alt="click here"/> 
        </div> 
        <div class="greetings"> 
            <div>GeeksforGeeks</div> 
        </div> 
        <div class="about"> 
            <div> 
                We welcome you to the platform where  
                we consistently strive to offer the  
                best of education 
            </div> 
        </div> 
        <div class="links" 
             id="links"> 
        </div> 
    </main> 
</body> 
  
</html>

步骤2： 创建一个文件夹 “CSS”， 在这个“css”文件夹中，将以下代码添加到main.css文件中。

main.css

CSS

@import url( 
 "https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"); 
  
* { 
    padding: 0; 
    margin: 0; 
  
    transition: all 0.3s ease-in-out; 
} 
  
body { 
    font-family: "Montserrat", sans-serif; 
    background-color: #060c21; 
} 
  
main { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
} 
  
a { 
    text-decoration: none; 
    font-size: 1.125rem; 
    font-weight: 600; 
} 
  
.logo { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    border-radius: 50%; 
    margin-top: 8%; 
} 
  
.logoContainer { 
    margin: 1rem 0; 
    position: relative; 
    height: 225px; 
    aspect-ratio: 1; 
    border-radius: 50%; 
    margin-bottom: 2rem; 
} 
  
.links { 
    display: flex; 
    flex-direction: column; 
} 
  
.link { 
    height: 2.75rem; 
    width: 600px; 
  
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #000; 
  
    margin: 0.5rem 0; 
    border-radius: 15px; 
} 
  
.greetings { 
    font-size: 2rem; 
    font-weight: 700; 
    margin-bottom: 2rem; 
    color: white; 
} 
  
.about { 
    font-size: 1rem; 
    font-weight: 500; 
    margin-bottom: 2rem; 
    color: white; 
} 
  
.link span { 
    width: 80%; 
    text-align: center; 
} 
  
.link img { 
    height: 2rem; 
    aspect-ratio: 1; 
} 
  
.linkIcon { 
    height: 2rem !important; 
    aspect-ratio: 1; 
} 
  
.link:nth-child(1) { 
    background: linear-gradient(90deg, 
            rgba(241, 241, 241, 0.1) 30%, 
            rgba(113, 113, 113, 0.3) 100%), 
        #EBC7E8; 
    color: white; 
} 
  
.link:nth-child(2) { 
    background: linear-gradient(90deg, 
            rgba(241, 241, 241, 0.1) 30%, 
            rgba(113, 113, 113, 0.3) 100%), 
        #BFACE0; 
    color: white; 
} 
  
.link:nth-child(3) { 
    background: linear-gradient(90deg, 
            rgba(241, 241, 241, 0.1) 30%, 
            rgba(113, 113, 113, 0.3) 100%), 
        #A084CA; 
    color: white; 
} 
  
.link:nth-child(4) { 
    background: linear-gradient(90deg, 
            rgba(241, 241, 241, 0.1) 30%, 
            rgba(113, 113, 113, 0.3) 100%), 
        #645CAA; 
    color: white; 
} 
  
.link:nth-child(5) { 
    background: linear-gradient(90deg, 
            rgba(241, 241, 241, 0.1) 30%, 
            rgba(113, 113, 113, 0.3) 100%), 
        #4b4585; 
    color: white; 
} 
  
.link:nth-child(6) { 
    background: linear-gradient(90deg, 
            rgba(241, 241, 241, 0.1) 30%, 
            rgba(113, 113, 113, 0.3) 100%), 
        #413b71; 
    color: white; 
} 
  
.link:nth-child(7) { 
    background: linear-gradient(90deg, 
            rgba(241, 241, 241, 0.1) 30%, 
            rgba(113, 113, 113, 0.3) 100%), 
        #352e5c; 
    color: white; 
} 
  
.link:nth-child(8) { 
    background: linear-gradient(90deg, 
            rgba(241, 241, 241, 0.1) 30%, 
            rgba(113, 113, 113, 0.3) 100%), 
        #211d38; 
    color: white; 
} 
  
.link:hover { 
    filter: drop-shadow(0px 5px 1px rgba(0, 0, 0, 0.2)); 
    transform: scale(1.05); 
} 
  
.link>* { 
    transition: all 0.3s ease-in-out; 
    transition-delay: 0.1s; 
} 
  
.link:hover>* { 
    transform: scale(1.1); 
    filter: drop-shadow(0px 5px 1px rgba(0, 0, 0, 0.2)); 
} 
  
@media (max-width: 600px) { 
    body { 
        background-size: 100%; 
    } 
  
    .logo img { 
        width: 200px; 
    } 
  
    .link span { 
        width: 70%; 
        text-align: center; 
    } 
  
    .link { 
        width: 95vw; 
    } 
  
    .link:hover { 
        transform: scale(1.01); 
    } 
}

步骤3 ：创建一个名为 “js” 的文件夹，将 “js” 文件夹中添加两个文件 “links.js” 和 “main.js” 。在 links.js 文件中添加以下代码。

links.js

Javascript

export const links = [ 
    { 
        name: "Twitter", 
        link:  
"https://twitter.com/geeksforgeeks", 
        image:  
"https://media.geeksforgeeks.org/wp-content/uploads/20230115205457/user1.png", 
    }, 
    { 
        name: "Linkedin", 
        link:  
"https://www.linkedin.com/company/geeksforgeeks/", 
        image:  
"https://media.geeksforgeeks.org/wp-content/uploads/20230115205457/user1.png", 
    }, 
    { 
        name: "Instagram", 
        link:  
"https://www.instagram.com/geeks_for_geeks/?hl=en", 
        image:  
"https://media.geeksforgeeks.org/wp-content/uploads/20230115205457/user1.png", 
    }, 
    { 
        name: "E-mail", 
        link:  
"mailto:feedback@geeksforgeeks.org", 
        image:  
"https://media.geeksforgeeks.org/wp-content/uploads/20230115205457/user1.png", 
    }, 
    { 
        name: "Telegram", 
        link:  
"https://t.me/geeksforgeeks_official", 
        image:  
"https://media.geeksforgeeks.org/wp-content/uploads/20230115205457/user1.png", 
    }, 
    { 
        name: "YouTube", 
        link:  
"https://www.youtube.com/@GeeksforGeeksVideos/featured", 
        image:  
"https://media.geeksforgeeks.org/wp-content/uploads/20230115205457/user1.png", 
    }, 
    { 
        name: "Discord", 
        link:  
"https://discord.com/invite/HvJvpjz27z", 
        image:  
"https://media.geeksforgeeks.org/wp-content/uploads/20230115205457/user1.png", 
    }, 
    { 
        name: "Facebook", 
        link:  
"https://www.facebook.com/geeksforgeeks.org/", 
        image:  
"https://media.geeksforgeeks.org/wp-content/uploads/20230115205457/user1.png", 
    }, 
];

main.js

Javascript

import { links } from "./links.js"; 
  
const linkContainer = document.getElementById("links"); 
  
function addLink(name, link, image) { 
    return ` 
  <a href="{link}" class="link" target="blank" rel="noopener"> 
    <img src="{image}"/> 
    <span>${name}  </span> 
    <img class="linkIcon" src="link-solid.svg" alt=""/> 
  </a> 
  `; 
} 
  
let allLinks = ""; 
  
links.forEach((ele) => { 
    let link = ele.link; 
    let name = ele.name; 
    let image = ele.image; 
  
    allLinks += addLink(name, link, image); 
}); 
  
linkContainer.innerHTML = allLinks;