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&amp;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&amp;u={{ my_escaped_url | url_param_escape }}

希望这有助于某人。你可以在这里阅读更多： jsFiddle

Answer 5

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

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

<强> 2。创建一个新代码段在主题编辑器中创建一个新片段，然后复制并粘贴按钮构建器的步骤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中添加按钮和代码段最后，将代码粘贴到您希望按钮显示的任何位置。

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

然后在theme.liquid文件中的</body>之前添加代码段。

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

uri编码shopify url到文章

5 个答案: