4

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

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

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

4

5 回答 5

12

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

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

于 2014-03-11T17:04:06.030 回答
10

我的粗略尝试如下：

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

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

于 2013-08-28T15:25:31.373 回答
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，因为你永远不知道链接语法什么时候会改变

于 2013-08-26T09:23:56.280 回答
2

在这里聚会有点晚了，但对于任何想知道的人来说，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

于 2016-06-28T15:48:21.020 回答
0

我最终使用 Tumblr构建了一个按钮小部件，然后稍微修改了 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>

并</body>在你的 theme.liquid 文件中添加代码片段。

<!-- Scripts for Tumblr Share Button -->
{% include 'your-tumblr-script-name' %}
于 2014-08-06T21:14:23.493 回答