内容网站（包括本网站）的一个共同特征是在社交媒体上分享内容的链接/按钮/等等。一般来说，这是Twitter，但许多网站会包括在Facebook、LinkedIn和更多地方分享链接的方法。几天前，一位读者问我如何在Eleventy中做到这一点，我想我将分享一个快速的例子。
首先要知道的是，对于许多网站来说，他们很希望你能在你的页面上嵌入一个JavaScript库，给你一个 "增强 "的体验。我认为这是一堆额外的废话/负载/窃取隐私的东西，我不需要。也就是说，由于大多数文档都把人们引向 "小工具"，所以有时很难找到更简单的纯HTML解决方案。
在研究这个问题的时候，我发现了一个伟大的GitHub仓库，即social-share-urls。它提供了多种语言的辅助工具，使之更容易筏出这些URLs。他们还包括公共领域的图标。但真正酷的是，如果你只想直接进入URLs，他们提供了一个要点。
很可爱，对吗？正如你所看到的，每一个总是需要一个你想分享的页面的URL，有些还包括额外的东西，如页面标题和更多。让我们看一个例子，看看我们如何制作这些URL，重点放在Facebook、Twitter和LinkedIn上。(就我个人而言，我在Twitter和LinkedIn上分享我的内容，而在Facebook上只分享我孩子和乐高积木的照片）。
首先--我们需要一个URL--而这实际上并不像你想象的那么简单。Eleventy提供了一个page.url ，但它是相对的URL，不是完整的URL。如果你想要一个完整的URL，你将需要使用一些代码来探测它，可能需要一个环境变量（Netlify提供了一个），或者一个硬编码值。我个人认为，一个简单的硬编码值是最好的解决方案，可以在你的配置文件中只用一行就可以处理：
eleventyConfig.addGlobalData("rootURL", "https://www.raymondcamden.com");
鉴于此，想象一下我们有一个用Eleventy写的博客，所有的文章都使用post 。我会在底部添加社交分享链接，并像这样制作它们：
<a href="https://www.facebook.com/sharer.php?u={{ rootURL | url_encode }}{{ page.url | url_encode }}">Facebook</a> ~
<a href="https://twitter.com/intent/tweet?url={{ rootURL | url_encode }}{{ page.url}}&text={{title | url_encode}}">Twitter</a> ~
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ rootURL | url_encode }}{{ page.url | url_encode }}">LinkedIn</a>
在上面的例子中，我通过首先使用rootURL ，然后使用page.url ，创建一个 "完整 "的URL。对于这两者，请注意，我通过url_encode 过滤器，使它们在查询字符串中安全。(虽然现代浏览器倾向于为我们处理这个问题，但由于它是如此容易使用，我们也可以这样做，对吗？）请注意，Twitter的链接也包括title 的值。
总而言之，一点都不难，但代码有点乱。我们可以利用Liquid标签来使它更漂亮一些。考虑一下这个版本：
{% assign pageUrl = page.url | prepend: rootURL | url_encode %}
{% assign stitle = title | url_encode %}
<p>
<a href="https://www.facebook.com/sharer.php?u={{ pageUrl }}">Facebook</a> ~
<a href="https://twitter.com/intent/tweet?url={{ pageUrl }}&text={{ stitle }}">Twitter</a> ~
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ pageUrl }}">LinkedIn</a> ~
<a href="https://reddit.com/submit?url={{pageUrl}}&title={{stitle}}">Reddit</a>
</p>
在上面的代码块中，我利用assign 来创建两个变量，pageUrl 和stitle 。我使用prepend 来制作我的完整URL，并且仍然对值进行URL编码。对于标题，我只是对它进行编码。(我在这个例子中加入了Reddit，只是因为。
像往常一样，如果这没有意义，请让我知道!你可以在这里找到完整的源代码：https://github.com/cfjedimaster/eleventy-demos/tree/master/sharelinks
