即时文章构建器 - 如何选择文章内容的两个领域/元素



我的页面具有单独的元素摘要和内容,我需要在即时文章中显示这两种内容,但不需要更改页面的HTML结构。

https://developers.facebook.com/docs/instant-articles/builder

<div class="summary-news">
    <div class="summary-content">
        <h3>Summary</h3>
        <ul>  
            <li> Item 1</li> 
            <li> Item 2</li>
            <li> ... </li>
        </ul>
    </div>
</div>
<div>
    <!-- Other content -->
</div>
<div class="text">
    <!-- Main content -->
</div>

您可以将全局列转换为设置,以适用于此完整页面的任何包装器标签。

假设您的结构周围有一个<body>标签:

<body>
<div class="summary-news">
<div class="summary-content">
    <h3>Summary</h3>
    <ul>  
        <li> Item 1</li> 
        <li> Item 2</li>
        <li> ... </li>
    </ul>
</div>
</div>
<div>
<!-- Other content -->
</div>
<div class="text">
<!-- Main content -->
</div>
</body>

然后,您只需要从GlobalRule设置更改article.body属性即可获得此包装容器:

{
            "class":"GlobalRule",
            "selector":"html",
            "properties":{
                "article.title":{...},
                "author.url":{...},
                "author.name":{...},
                "author.role_contribution" : {...},
                "author.description" : {...},
                "article.canonical": {...},
                "article.publish": {...},
                "article.body":{
                    "selector":"body",   // Or whatever selector that grabs your container
                    "type":"element"
                },
                "image.url":{...}
            }
        }

这应该为您的需要而努力。

最新更新