最后我解决了。我在 .zip 存档中找到了一个演示文件夹,其中包含演示 .html 文件。我刚刚将演示 .html 文件中的整个部分复制到我的 Contao 站点布局的 Additional -Tags 部分中。那是:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Social Timeline plugin - Demo</title>
<link type="text/css" rel="stylesheet" href="dpSocialTimeline/css/styles.css">
<link type="text/css" rel="stylesheet" href="dpSocialTimeline/css/magnific-popup.css">
<link type="text/css" rel="stylesheet" href="dpSocialTimeline/css/dpSocialTimeline.css">
<script type="text/javascript" src="dpSocialTimeline/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="dpSocialTimeline/js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="dpSocialTimeline/js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="dpSocialTimeline/js/jquery.dpSocialTimeline.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#socialTimeline').dpSocialTimeline({
feeds:
{
'facebook_page': {data: '5550296508', limit: 2},
'youtube': {data: 'youtube'},
'flickr': {data: '52617155@N08'},
'tumblr': {data: 'drinkyourjuice'}
},
layoutMode: 'timeline',
addLightbox: true,
itemWidth: 200,
total: 10
});
});
</script>
然后我向我的站点添加了一个新模块并编辑了 HTML 代码并插入了以下代码:
<div id="socialTimeline" style="width:650px;" class="light"> </div>