什么是“替代呼叫”在html中的意思？

发布于 2025-02-09 23:37:19 字数 4429 浏览 1 评论 0原文

我正在使用zuck.js库来构建自定义故事，我想包括一个自定义密钥。因此，我阅读了GitHub文档，发现我可以与HTML进行替代呼叫以读取自定义密钥。所以我尝试了它，但它不起作用。

这是javascript代码：

var currentSkin = "Snapgram",
    stories = {
        backNative: !0,
        previousTap: !0,
        skin: "Snapgram",
        autoFullScreen: !1,
        avatars: !0,
        paginationArrows: !0,
        list: !1,
        cubeEffect: !0,
        localStorage: !0,
        stories: 
        [{
            id: "",               // story id
            photo: "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/1.jpg",            // story photo (or user photo)
            name: "Test1",             // story name (or user name)
            link: "",             // story link (useless on story generated by script)
            lastUpdated: "",      // last updated date in unix time format
            seen: false,          // set true if user has opened
          
            items: [              // array of items
              // story item example
              {
                id: "",       // item id
                type: "video",     // photo or video
                length: 15,    // photo timeout or video length in seconds - uses 3 seconds timeout for images if not set
                src: "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/2.mp4",      // photo or video src
                preview: "",  // optional - item thumbnail to show in the story carousel instead of the story defined image
                link: "",     // a link to click on story
                linkText: "", // link text
                time: "",     // optional a date to display with the story item. unix timestamp are converted to "time ago" format
                seen: false, // set true if current user was read,
                customKey: "myKey" // another-custom-value
              }
            ]
          }]

    }

    let storiesNew = new Zuck("stories", stories);

和这是HTML代码：


<html>
  <head>
    <title>zuck.js</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />

    <!-- demo styles -->
    <link rel="stylesheet" href="style.css">

    <!-- lib styles -->
    <link rel="stylesheet" href="zuck.min.css">
    
    <!-- lib skins -->
    <link rel="stylesheet" href="snapgram.css">
  </head>

  <body>

    <div id="stories">

        <!-- story -->
        <div class="story" data-id="{{storyId}}" data-last-updated="{{story.lastUpdated}}" data-photo="{{story.photo}}">
            <a class="item-link" href="{{ story.link }}">
              <span class="item-preview">
                <img src="{{ story.photo }}" />
              </span>
              <span class="info" itemProp="author" itemScope="" itemType="http://schema.org/Person">
                <strong class="name" itemProp="name">Test</strong>
                <span class="time">{{story.lastUpdated}}</span>
              </span>
            </a>
            
            <ul class="items">
            
                <!-- story item -->
                <li data-id="{{storyItemId}}" data-time="{{storyItem.time}}" class="{{storyItem.seen}}">
                    <a href="{{ storyItem.src }}"
                    
                     data-type="{{storyItem.type}}" 
                     data-length="{{storyItem.length}}" 
                     data-link="{{storyItem.link}}" 
                     data-linkText="{{storyItem.linkText}}" 
                     
                     data-custom-key="{{storyItem.custom-key}}" 
                     data-another-custom-key="{{storyItem.another-custom-key}}">
                        <img src="{{storyItem.preview}}" />
                    </a>
                </li>
                <!--/ story item -->
                
            </ul>
        </div>
        <!--/ story -->
        
    </div>

    <script src="zuck.js"></script>
    <script src="test-other.js"></script>

    
  </body>
</html>

感谢任何类型的帮助。

原文

I am using the zuck.js library to build custom stories and I want to include a custom key. So I read the GitHub docs and found out that I can make an alternate call with html to read the custom key. So I tried it and it doesn't work.

Link to GitHub

Here is the javascript code:

var currentSkin = "Snapgram",
    stories = {
        backNative: !0,
        previousTap: !0,
        skin: "Snapgram",
        autoFullScreen: !1,
        avatars: !0,
        paginationArrows: !0,
        list: !1,
        cubeEffect: !0,
        localStorage: !0,
        stories: 
        [{
            id: "",               // story id
            photo: "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/users/1.jpg",            // story photo (or user photo)
            name: "Test1",             // story name (or user name)
            link: "",             // story link (useless on story generated by script)
            lastUpdated: "",      // last updated date in unix time format
            seen: false,          // set true if user has opened
          
            items: [              // array of items
              // story item example
              {
                id: "",       // item id
                type: "video",     // photo or video
                length: 15,    // photo timeout or video length in seconds - uses 3 seconds timeout for images if not set
                src: "https://raw.githubusercontent.com/ramon82/assets/master/zuck.js/stories/2.mp4",      // photo or video src
                preview: "",  // optional - item thumbnail to show in the story carousel instead of the story defined image
                link: "",     // a link to click on story
                linkText: "", // link text
                time: "",     // optional a date to display with the story item. unix timestamp are converted to "time ago" format
                seen: false, // set true if current user was read,
                customKey: "myKey" // another-custom-value
              }
            ]
          }]

    }

    let storiesNew = new Zuck("stories", stories);

and here is the html code:


<html>
  <head>
    <title>zuck.js</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />

    <!-- demo styles -->
    <link rel="stylesheet" href="style.css">

    <!-- lib styles -->
    <link rel="stylesheet" href="zuck.min.css">
    
    <!-- lib skins -->
    <link rel="stylesheet" href="snapgram.css">
  </head>

  <body>

    <div id="stories">

        <!-- story -->
        <div class="story" data-id="{{storyId}}" data-last-updated="{{story.lastUpdated}}" data-photo="{{story.photo}}">
            <a class="item-link" href="{{ story.link }}">
              <span class="item-preview">
                <img src="{{ story.photo }}" />
              </span>
              <span class="info" itemProp="author" itemScope="" itemType="http://schema.org/Person">
                <strong class="name" itemProp="name">Test</strong>
                <span class="time">{{story.lastUpdated}}</span>
              </span>
            </a>
            
            <ul class="items">
            
                <!-- story item -->
                <li data-id="{{storyItemId}}" data-time="{{storyItem.time}}" class="{{storyItem.seen}}">
                    <a href="{{ storyItem.src }}"
                    
                     data-type="{{storyItem.type}}" 
                     data-length="{{storyItem.length}}" 
                     data-link="{{storyItem.link}}" 
                     data-linkText="{{storyItem.linkText}}" 
                     
                     data-custom-key="{{storyItem.custom-key}}" 
                     data-another-custom-key="{{storyItem.another-custom-key}}">
                        <img src="{{storyItem.preview}}" />
                    </a>
                </li>
                <!--/ story item -->
                
            </ul>
        </div>
        <!--/ story -->
        
    </div>

    <script src="zuck.js"></script>
    <script src="test-other.js"></script>

    
  </body>
</html>

I appreciate any type of help.

分享到QQ

分享到微博