URI編碼shopify網址文章

Question

有沒有辦法來URI編碼在Shopify來說鏈接：

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

建立了共享按鈕和tubmlr不喜歡，他們不被編碼。

Answer 1

不幸的是Shopify沒有提供任何過濾器來對URI進行編碼。你最好的選擇是使用Javascript。例如增加數據-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 2

我試圖原油爲：

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

等。我還沒有掌握寫液體功能的藝術。

Answer 3

不知道它是否最近添加，但url_param_escape似乎完全是你想要的。這爲我工作：

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

Answer 4

我結束了使用的tumblr的build a button widget然後稍微修改JS這樣做。由於我想使用Font Awesome/Bootstrap中的Tumblr圖標，我只是刪除了JS分配的樣式屬性，然後將相應的類分配給JS創建的錨點。說明如下：

1.獲取代碼： 選擇一個隨機按鈕樣式（這並不重要，因爲你最終會刪除指定的背景圖像的代碼），設置崗位類型到「照片」，並選擇「Javascript」作爲編程語言（最後兩個選項在「Advanced」手風琴下找到）。一旦你這樣做了，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' %} 

Answer 5

有點晚了這裏的聚會，但任何人都知道，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