javascript - 文本长度限制在我的 instafeed 模板中不起作用

Question

您好，我有一个 instafeed 模板，现在我需要限制标题的长度。我添加到 js 代码来做到这一点，但它不起作用。有没有办法制作<p><i>{{caption}}</i></p>缩短并添加省略号。

这是我的代码:

$(function(){
            $(".caption").each(function(i){
                len=$(this).text().length;
                if(len>10)
                {
                    $(this).text($(this).text().substr(0,10)+'...');
                }
            });
        });

        /* Intafeed and SimplyScroll */
        var feed = new Instafeed({
            target: 'instagram-list',
            get: 'user',
            userId: 1713392078,
            accessToken: '0000000',
            clientId: '0000000',
            limit: '30',
            sortBy: 'most-recent',
            link: 'true',
            template: '<li><figure class="effect-honey background-black1"><figcaption><p><i class"caption">{{caption}}</i></p></figcaption><a href="{{link}}" target="_blank"><img src="{{image}}" alt"{{caption}}"/></a><span class="instagram-metadata shadow">{{likes}} <span class="instagram-like"></span></span></figure></li>',
            resolution: 'low_resolution',
            after: function() {
                $("#instagram-list").simplyScroll({
                    speed: 1,
                    frameRate: 24,
                    orientation: 'horizontal',
                    direction: 'forwards',
                })
            }
        })

        feed.run();

Answer 1

您可以使用 Instafeed.js 提供的内置 filter 选项来完成。

即使 filter 选项主要用于过滤图像，您也可以使用它在图像数据发送到您的 template 字符串之前修改图像数据。

因此请使用以下内容更新您的 Instafeed.js 设置:

var feed = new Instafeed({
    target: 'instagram-list',
    get: 'user',
    userId: 1713392078,
    accessToken: '0000000',
    clientId: '0000000',
    limit: '30',
    sortBy: 'most-recent',
    link: 'true',
    filter: function(image) {
      var MAX_LENGTH = 10;

      // here we create a property called "short_caption"
      // on the image object, using the original caption
      if (image.caption && image.caption.text) {
        image.short_caption = image.caption.text.slice(0, MAX_LENGTH);
      } else {
        image.short_caption = "";
      }

      // ensure the filter doesn't reject any images
      return true;
    },

    template: '<li><figure class="effect-honey background-black1"><figcaption><p><i class"caption">{{model.short_caption}}</i></p></figcaption><a href="{{link}}" target="_blank"><img src="{{image}}" alt"{{model.short_caption}}"/></a><span class="instagram-metadata shadow">{{likes}} <span class="instagram-like"></span></span></figure></li>',
    resolution: 'low_resolution',
    after: function() {
        $("#instagram-list").simplyScroll({
            speed: 1,
            frameRate: 24,
            orientation: 'horizontal',
            direction: 'forwards',
        })
    }
})

feed.run();

这将为每个名为 short_caption 的图像分配一个新属性。然后，您可以在 template 字符串中使用 {{model.short_caption}} 代替 {{caption}}。

(将MAX_LENGTH 变量设置为您想要的最大字幕长度)

---

根据评论更新:如果您想根据最接近的词尾来限制文本，则必须在过滤器中添加更多逻辑。由于过滤器函数只是纯 JavaScript，您可以在其中添加任何类型的逻辑。

这是一个简单的示例，说明您可以在纯 JavaScript 中找到子字符串的最接近词尾的一种方法:

var MAX_LENGTH = 100;

var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis felis dolor, in volutpat erat hendrerit ut. Mauris auctor quam at nulla tincidunt aliquam. Vivamus facilisis adipiscing lacus, vel dignissim nulla imperdiet nec. Donec fermentum, urna vel adipiscing vehicula, ante odio scelerisque tortor, vitae auctor eros tortor eu massa";
var trimmedText;

var closestIndex = MAX_LENGTH;
while(true) {
  if (text.charAt(closestIndex) === ' ') {
    break;
  }
  closestIndex -= 1;
}

trimmedText = text.slice(0, closestIndex) + '...';

alert(trimmedText)

因此，使用附加逻辑更新您的 filter 函数，根据我上面展示的示例进行修改:

filter: function(image) {
  var MAX_LENGTH = 100;
  var closestIndex = MAX_LENGTH;

  if (image.caption && image.caption.text) {
    while(true) {
      if (text.charAt(closestIndex) === ' ') {
        break;
      }
      closestIndex -= 1;
    }
    image.short_caption = image.caption.text.slice(0, MAX_LENGTH);
  } else {
    image.short_caption = "";
  }

  return true;
},