HTML href 变量值-解网

问：

在我的网页中，我有一个像 20 篇文章的提要，每篇文章下面都有一个社交媒体共享面板，用于分享每篇文章，代码如下：

<a href="http://www.facebook.com/sharer.php?u=HTTPURLTOSHARE">
  <i class="fab fa-facebook"></i>
</a>

所以基本上我为每个社交媒体服务（比如 10、FB、TW、IG 等）和每篇文章都有几个这样的链接。
我的问题是：有没有办法编写包含所有共享服务链接的共享 DIV，单击共享按钮时，只需将其 URL （HTTPURLTOSHARE）分配给社交媒体共享按钮，？
我知道这是可能的服务器端，但我不熟悉前端后端开发。

HTML 变量常量 href non-repetitive

你知道吗！对我来说，为每个共享 div 重复一堆行不是问题，每篇文章大约有 100 行，因为它将通过桌面 Windows 应用程序自动完成，我只给他文章链接，他获取信息，然后将每篇文章的代码注入页面，我的问题是我在一个网页中以 5000 篇文章的 50 行代码结束，我认为这会影响页面加载???

答：

2赞 mplungjan 1/5/2021 #1

这并非微不足道

我做了一个模板
我给弹出链接一个带有文章 URL 的数据属性
我在每个链接后插入模板内容

window.addEventListener("load",function() {
  [...document.querySelectorAll("a[data-url]")]
    .forEach((lnk,i) => {
      const url = lnk.dataset.url;
      const pop = document.getElementById("sharer").content.cloneNode(true)
      pop.querySelector('.overlay').setAttribute("id",lnk.hash.slice(1)); 
      [...pop.querySelectorAll(".social-square a")].forEach(lnk => lnk.href = lnk.href.replace("SHARE",url))
     lnk.after(pop)
    })
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"  />
<!-- FIRST ARCITLE -->
<h1>We must stop calling Trump’s enablers ‘conservative.’ They are the radical right.</h1>
<p>You hear the word “radical” a lot these days. It’s usually aimed like a lethal weapon at Democratic office-seekers, especially those who want to unseat a Republican incumbent. Sen. Kelly Loeffler, the Georgia Republican, rarely utters her challenger’s name without branding him as “radical liberal Raphael Warnock.”</p>
<a href="#popup1" data-url="https://www.washingtonpost.com/lifestyle/media/trump-enablers-radical-right-conservative/2021/01/04/634edcda-4e97-11eb-b96e-0e54447b23a1_story.html">Share this article</a>


<!-- SECOND ARTICLE -->
<h1>An Insurgency From Inside the Oval Office</h1>
<p>President Trump’s effort to overturn the election he lost has gone beyond mere venting of grievances at the risk of damaging the very American democracy he is charged with defending.</p>
<a href="#popup2" data-url="https://www.nytimes.com/2021/01/04/us/politics/trump-biden-inauguration.html">Share this article</a>


<template id="sharer">
<!-- HERE START THE SHARING MODAL WINDOW and it will be repeated for each article, Only the article URL change so this is why i want to find a way to write this code once and assign only the URL for each article if possible -->
<div id="" class="overlay">
    <div class="popup"><a class="close" href="#"><i class="fas fa-times-circle"></i></a>
        <div class="content">
            <div class="shr-div">
                <!-- Facebook -->
                <div class="social-square fac" data-content="facebook">
                    <a href="http://www.facebook.com/sharer.php?u=SHARE"><i class="fab fa-facebook-f"></i></a>
                </div>
                <!-- Twitter -->
                <div class="social-square twi" data-content="twitter">
                    <a href="https://twitter.com/share?url=SHARE"><i class="fab fa-twitter"></i></a>
                </div>
                <!-- WhatsApp -->
                <div class="social-square wha" data-content="whatsapp">
                    <a href="whatsapp://send?text=SHARE"><i class="fab fa-whatsapp"></i></a>
                </div>
                <!-- Viber -->
                <div class="social-square vib" data-content="viber">
                    <a href="viber://forward?text=SHARE"><i class="fab fa-viber"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END OF THE SHARE MODAL WINDOW -->
</template>

@CarolineD。我创建了一个 Windows 软件，我在其中选择文章，只给他 URL，它获取它们（标题、描述、OG 图像、链接等）并为每篇文章创建 HTML 代码，包括每篇文章下共享 DIV 元素的 100 行代码，我最终一页有 5000 行或更多行，这就是问题所在

上一个：响应式和粘性顶部菜单冲突

下一个：使用 jq 一次删除多个密钥

HTML href 变量值

HTML href variable value

评论

评论

评论