Bước 1: Thêm 1 shoutbox lịch sử:
Ô 1:
{{_self.env.addGlobal('album_message_list',message_list)}} {{_self.env.addGlobal('album_url',form_url)}}
Ô 2:
{{message}}[-date-]{{message_date|date('U')}}[-xoa-]{{delete_post_button}}[-msS-]
Số tin nhắn để 100, Dòng mới Không
Bước 2: Thêm 1 shoutbox lịch sử
Ô 1:
{%set msg=message_list|split('[-msS-]')%} {%set sdata=_self.env.getGlobals()['sdata']%} {%set sdata=sdata~message_list%}{{_self.env.addGlobal('sdata',sdata)}} {%set surl=_self.env.getGlobals()['surl']%} {%if msg|length>=99%} {%if surl is empty%} {%set url=''%} {%else%} {%set url=surl%} {%endif%} {%else%} {%if surl is not empty%} {%set url=surl%} {%else%} {%set url=form_url%} {%endif%} {%endif%} {{_self.env.addGlobal('surl',url)}}
Ô 2:
{{message}}[-date-]{{message_date|date('U')}}[-xoa-]{{delete_post_button}}[-msS-]
Số tin nhắn để 100, Dòng mới Không
Bước 3: Thêm Mã HTML (style)
<!--Album Ảnh--> <style type="text/css"> .album_img{ border: 1px solid #dcdcdc; border-radius: 2px; padding: 1px; box-shadow: 1px 1px 3px 1px #928686; background-color: #fff; } input, textarea, select, button { background: #fff; border: 1px solid #d8d8d8; color: #686868; margin: 1px; padding: 4px; border-radius: 3px; } .title a:link{color:white} .title a:hover{color:#f00} body { background-color: #fff ; color: #000; margin: 0 auto; padding: 0; max-width: 800px; } body, td, input, textarea { font-family: Arial,Tahoma,sans-serif; font-size: small; } .body { background-color: #EBEBEC; padding: 4px; border: 1px solid #DEDEE0; box-shadow: 0 0 10px #343434; } * { word-wrap: break-word; } * { box-sizing: border-box; } .title { background-color: #009688; border: 1px solid; border-color: #009688; padding: 5px; color: #fff; margin-top: 4px; text-align: left; } .menu, .topmenu, .noti { background: #fff; -moz-border: 1px solid; border: 1px solid; -moz-border-color: #DCDBDB #CACACA; border-color: #DCDBDB #CACACA; border-top: none; padding: 6px; color: #00796B; margin-top: 0; } a:link, a:visited { color: #00796B; text-decoration: none; } </style>
Bước 4: Thêm Mã Twig
{%set u=api.u.get(api.r.get('uid'))%} {%set user=api.u.get(api.user_id)%} {%set album_url='/user_info.php?uid='~u.uid~'&album='%} {%set image_url='/user_info.php?uid='~u.uid~'&album=view_album&image='%} {%set list=_self.env.getGlobals()['album_message_list']|split('[-msS-]')%} {%set sdata=_self.env.getGlobals()['sdata']|split('[-msS-]')%} {%if user.uid==u.uid%}<div class="title"><a href="{{album_url}}upload">Upload ảnh</a> | <a href="{{album_url}}view_album">Xem album ảnh</a> | <a href="{{album_url}}add_album">Thêm album ảnh</a> | <a href="{{album_url}}list_album">Danh sách album</a></div>{%endif%} {%if user.uid!=u.uid or api.r.get('album')=='view_album'%}<div class="title"><a href="{{image_url}}all_image">Tất cả ảnh</a> {%for i in 0..list|length-2%} | <a href="{{image_url}}all_image&sid={{list[i]|split('[-date-]')[1]|split('[-xoa-]')[0]|raw}}">{{list[i]|split('[-date-]')[0]|raw}}</a> {%endfor%}</div>{%endif%} {%if api.r.get('album')=='add_album'%} <div class="title">Thêm album mới vào</div> <div class="menu"> <form action="main.php?[ses]&id=ch_topic_h&uid={{_self.env.getGlobals()['album_url']|split('&uid=')[1][0:6]}}&uuid={{u.uid}}&back_url=%2Fuser_info.php%3Fuid%3D{{u.uid}}%26album%3Dlist_album" method="post"> Nhập tên Album mới<br/> <input type="text" name="text" value="New Album"/><br/> <input name="submit" type="submit" value="Thêm"/> </form> </div> {%endif%} {%if api.r.get('album')=='list_album'%} <div class="title"><a href="{{album_url}}list_album">Danh sách album</a> | <a href="{{album_url}}list_album&act=del">Xóa</a></div> {%for i in 0..list|length-2%} <div class="menu">{{list[i]|split('[-date-]')[0]|raw}}{%if api.r.get('act')=='del'%} {{list[i]|split('[-xoa-]')[1]|raw}}{%endif%}</div> {%endfor%} {%endif%} {%if api.r.get('album')=='upload'%} <div class="title">Thêm ảnh mới</div> <div class="menu"> Chọn album ảnh<br/> <select id="album"> <option value="0">Tất cả ảnh</option> {%for i in 0..list|length-2%} {%if list[i]|split('[-date-]')[0]|length >2%} <option value="{{list[i]|split('[-date-]')[1]|split('[-xoa-]')[0]|raw}}">{{list[i]|split('[-date-]')[0]|raw}}</option> {%endif%} {%endfor%}</select><br/> Nhập trạng thái (status):<br/> <input type="text" id="status" value="Cảm thấy: "/><br/><br/> <button onclick="document.querySelector('#input_frm').click();return false;" id="up_info"><b>Upload ảnh vào album của bạn</b></button><input style="visibility: collapse; width: 0px;display:none" type="file" onchange="upload(this.files[0])" id="input_frm"/> </div> <script type="text/javascript"> function upload(file) { if (!file || !file.type.match(/image.*/)) return; document.querySelector("#up_info").innerHTML='Đang upload ảnh..'; var fd = new FormData(); fd.append("image", file); var xhr = new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")||new ActiveXObject("Msxml2.XMLHTTP"); xhr.open("POST", "http://uploads.im/api?upload"); xhr.onload = function() { document.querySelector("#up_info").innerHTML='Đã upload thành công^^'; var link = JSON.parse(xhr.responseText); var slink=((link.data.thumb_url).replace('/t/','/d/')); //var mlink=((link.data.thumb_url).replace('/t/','/d/')); var http = new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")||new ActiveXObject("Msxml2.XMLHTTP"); var url = "main.php?[ses]&id=ch_topic_h&uid={{_self.env.getGlobals()['surl']|split('&uid=')[1][0:6]}}&uuid={{u.uid}}"; var sid=document.getElementById('album').value; var status=document.getElementById('status').value; var sdata=sid+'[-msg-]'+status+'[-status-]'+slink; var params = "text="+sdata; http.open("POST", url, true); http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http.onreadystatechange = function() { if(http.readyState == 4 && http.status == 200) { window.location.href='{{album_url|raw}}view_album&sid='+sid; } } http.send(params); } xhr.send(fd); } </script> {%endif%} {%if api.r.get('album')=='view_album' or api.r.get('album') is empty%} {%set sid=api.r.get('sid')|default('0')%} <div class="menu"> {%for i in 0..sdata|length-2%} {%if sdata[i]|split('[-msg-]')[0]==sid%} <a href="{{album_url}}view&sid={{sdata[i]|split('[-msg-]')[0]}}&img={{sdata[i]|split('[-date-]')[1]|split('[-xoa-]')[0]}}"><img src="{{sdata[i]|split('[-status-]')[1]|split('[-date-]')[0]}}" width="75" height="100" class="album_img"/></a> {%endif%} {%endfor%} </div> {%endif%} {%if api.r.get('album')=='view'%} <div class="title">Xem chi tiết ảnh | <a href="{{album_url}}view_album&image=all_image&sid={{api.r.get('sid')|default('0')}}">Quay về</a></div> <div class="menu"> {%for i in 0..sdata|length-2%} {%if sdata[i]|split('[-date-]')[1]|split('[-xoa-]')[0]==api.r.get('img')%} <center><img src="{{sdata[i]|split('[-status-]')[1]|split('[-date-]')[0]}}" class="album_img"/></center> <br/> <b>Status: </b>{{sdata[i]|split('[-msg-]')[1]|split('[-status-]')[0]}}<br/> <b>Ngày tải lên: </b> {{api.r.get('img')[0:14]|date('d/m/Y H:i:s')}}<br/> {{sdata[i]|split('[-xoa-]')[1]|raw}} {%endif%} {%endfor%} </div> {%endif%}
Demo: http://shoutboxgenerator.wap.mu
Nguồn: http://chonguoivotinh.wap.mu