文本长度限制在我的 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

使用pure css截断文本并添加省略号，速度更快，更易于维护

有用于呈现文本省略号的 .js 库（例如 jquery.ellipsis）

Answer 2

您可以使用 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;
},

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

Text length limit not working in my instafeed template

javascript

instafeedjs