uri 将 shopify url 编码为文章

Question

有没有办法在 shopify 中对链接进行 uri 编码：

http://www.tumblr.com/share?v=3&u={{ shop.url }}{{ article.url }}

构建共享按钮和 tubmlr 不喜欢它们没有编码。

Answer 1

不确定它是否是最近添加的，但url_param_escape 似乎完全符合您的要求。这对我有用：

{{ shop.url | append: article.url | url_param_escape }}

Answer 2

我的粗略尝试如下：

{{ article.url | replace: ' ', '%20' | replace: '&', '%26' | replace: '?', '%3F' | replace: '!', '%21' | replace: ',', '%2C' | replace: "'", "%27" }}

等等。我还没有掌握编写液体函数的艺术。

Answer 3

很遗憾，Shopify 不提供任何过滤器来对 URI 进行编码。你最好的选择是使用 Javascript。例如，将 data-url="{{ shop.url }}{{ article.url }}" 属性添加到您的 HTML 标记中，并给它一个唯一的 ID，然后是脚本：

var x=document.getElementById("uniqueID");
if (x != null) {
  var url='http://www.tumblr.com/share?v=3&u='+encodeURIComponent(x.getAttribute("data-url"));
  x.setAttribute("href", url);
}

如果您愿意，可以在自调用或准备好文档时调用它。将 HTML 中的 href 设置为非 JavaScript 浏览器所需的任何值。您可以考虑使用 Tumblr 图标小部件构建器： http://www.tumblr.com/buttons 和他们的官方 JS，因为你永远不知道链接语法什么时候会改变

Answer 4

在这里聚会有点晚了，但对于任何想知道的人来说，Shopify 现在有一个内置过滤器。

{{ my_var | url_param_escape }}

因此，在上述情况下，您可以这样做：

{% capture my_escaped_url %}
  {{ shop.url }}{{ article.url }}
{% endcapture %}

http://www.tumblr.com/share?v=3&u={{ my_escaped_url | url_param_escape }}

希望这对某人有所帮助。你可以在这里阅读更多： https://help.shopify.com/themes/liquid/filters/string-filters#url_param_escape

Answer 5

我最终使用 Tumblr 的 build a button widget 进行此操作，然后稍微修改了 JS。由于我想使用 Font Awesome/Bootstrap 中的 Tumblr 图标，我只是删除了 JS 分配的样式属性，然后将适当的类分配给 JS 创建的锚点。说明如下：

1.获取代码： 选择一个随机按钮样式（这无关紧要，因为您最终会删除指定背景图像的代码），将帖子类型设置为“照片”，并选择“Javascript”作为编程语言（最后两个选项位于“高级”手风琴下）。完成此操作后，Tumblr 会吐出一些代码，然后您可以对其进行修改。

2。创建一个新的 sn-p： 在主题的编辑器中创建一个新的 sn-p，然后复制并粘贴在按钮构建器的第 1 步和第 3 步中找到的脚本中。

<script src="http://platform.tumblr.com/v1/share.js"></script>

<!-- Set these variables wherever convenient -->
<script type="text/javascript">
  var tumblr_photo_source = "";
  var tumblr_photo_caption = "";
  var tumblr_photo_click_thru = "";
</script>

<!-- Put this code at the bottom of your page -->
<script type="text/javascript">
  var tumblr_button = document.createElement("a");
  tumblr_button.setAttribute("href", "http://www.tumblr.com/share/photo?source=" + encodeURIComponent(tumblr_photo_source) + "&caption=" + encodeURIComponent(tumblr_photo_caption) + "&clickthru=" + encodeURIComponent(tumblr_photo_click_thru));
  tumblr_button.setAttribute("title", "Share on Tumblr");
  tumblr_button.setAttribute("style", "display:inline-block; text-indent:-9999px; overflow:hidden; width:20px; height:20px; background:url('http://platform.tumblr.com/v1/share_4.png') top left no-repeat transparent;");
  tumblr_button.innerHTML = "Share on Tumblr";
  document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);
</script>

3.自定义 JS： 首先，设置变量。然后，您可以为锚指定背景图像或图标。就像我上面说的，我使用的是 Font Awesome 中的 Tumblr 图标，所以我只是删除了所有样式属性，innerHTML，并分配了一个“fa fa-tumblr”类。

如果您想使用背景图片，您可以简单地将 URL 替换为您的图片并调整高度和宽度属性。

<script src="http://platform.tumblr.com/v1/share.js"></script>

<script type="text/javascript">
  var tumblr_photo_source = "{{ product.featured_image | product_img_url: "master" }}";
  var tumblr_photo_caption = "";
  var tumblr_photo_click_thru = "{{ shop.url | append: product.url }}";
</script>

<script type="text/javascript">
  var tumblr_button = document.createElement("a");
  tumblr_button.setAttribute("class", "fa fa-tumblr");
  tumblr_button.setAttribute("href", "http://www.tumblr.com/share/photo?source=" + encodeURIComponent(tumblr_photo_source) + "&caption=" + encodeURIComponent(tumblr_photo_caption) + "&clickthru=" + encodeURIComponent(tumblr_photo_click_thru));
  tumblr_button.setAttribute("title", "Share on Tumblr");
  document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);
</script>

4.在 HTML 中包含按钮和 sn-p： 最后，将下面的代码粘贴到您希望按钮显示的任何位置。

<!-- Put this tag wherever you want your button to appear -->
<span id="tumblr_button_abc123"></span>

然后在你的 theme.liquid 文件中的 </body> 之前添加 sn-p。

<!-- Scripts for Tumblr Share Button -->
{% include 'your-tumblr-script-name' %}