摘要:二次开发完善酷画网站各项功能以适应网站需要,酷画网站由Discuz3.5提供支持,引入分类信息和模板。以下是开发过程的一些记录,供以后二次修改提供支持。
一、分类信息发布素材页面实现自动获取用户上传的图片素材尺寸和大小,使用酷画图片压缩算法。
1-pc端发帖页获取图片尺寸
/template/default/forum/post_sortoption.htm(分类信息发帖模板):
在/static/js/forum_post.js(pc端发帖页js)找到并修改:
function updatesortattach(aid, url, attachurl, identifier) {$(sortaid_ + identifier).value = aid;$(sortattachurl_ + identifier).value = attachurl + / + url;$(sortattach_image_ + identifier).innerHTML = <img src=" + attachurl + / + url + " class="spimg" onload="loadImage()"/>;ATTACHORIMAGE =1;}在/static/js/forum_post.js (pc端发帖页js)文件写入:
function loadImage(){let image = document.querySelector(.spimg);var imgsize = document.getElementById("typeoption_yu_chicun").value=image.naturalWidth+"*"+image.naturalHeight;var imgw = image.naturalWidth;var imgh = image.naturalHeight;varimgkb = (imgw*imgh*24*0.0888666)/(8*1024);var imgsize = document.getElementById("typeoption_yu_daxiao").value=imgkb.toFixed(1);}2-手机端发帖页获取图片大小尺寸:
在手机端template/mobiletpl/touch/forum/post_sortoption.php(手机端发帖页模板) 找到js变量var dataarr,修改该script下的图片上传后的名称(适配酷画):
jQuery(#sortattach_image_{$option[identifier]}).html(<img class="mbspimg" src="{$_G[setting][attachurl]}forum/+dataarr[5]+" onload="loadImage()"/>);在手机端template/mobiletpl/touch/forum/post_sortoption.php(手机端发帖页模板)顶部引入:
<script>function loadImage(){let image = document.querySelector(.mbspimg);var imgsize = document.getElementById("typeoption_yu_chicun").value=image.naturalWidth+"*"+image.naturalHeight;var imgw = image.naturalWidth;var imgh = image.naturalHeight;varimgkb = (imgw*imgh*24*0.0888666)/(8*1024);var imgsize = document.getElementById("typeoption_yu_daxiao").value=imgkb.toFixed(1);}</script>二、在分类信息模板直接调用附件上传窗口
1-在分类信息(路径/template/default/forum/post_sortoption.htm)添加附件上传控件,pc端直接调出窗口,设置文字附加提醒
<tr> <th><span class="rq">*</span>上传素材</th> <td> <span> <button type="button" class="pn" onclick="scupload()">点击上传</button> <em id="uploadattachmsg" style="color: green;"></em> </span> <div class="d">上传素材源文件,您可以设置附件阅读权限以及售卖价格。</div> </td> <td class="ptm pbm bbda" width="180"><span id="checkyu_rjian"></span></td> </tr> <tr>2-手机端附件上传成功提醒:
在手机端/template/bygsjw_2sj/touch/forum/post.php代码下上传成功js下加入alert(“上传成功!”)提醒
$(document).on(change, #attfiledata, function() {popup.open(<img src=" + IMGDIR + /imageloading.gif">);uploadsuccess = function(data) { alert(上传成功!)if(data == ) {popup.open({lang uploadpicfailed}, alert);}……pc端附件上传成功提醒:
在/static/js/forum_post.js (pc端发帖页js)找到并修改:
pc端采用直接调用附件上传窗口,无需设置提醒。
在分类信息页面添加调用附件上传窗口的button控件方法:
首先在分类信息发帖模板/template/default/forum/post_sortoption.htm分类信息合适位置添加button控件:
<tr><th><span class="rq">*</span>上传素材</th><td><span><button type="button" class="pn" onclick="scupload()">上传</button></span> <div class="d">上传素材源文件,您可以在下方附件符号设置附件阅读权限。</div></td><td class="ptm pbm bbda" width="180"><span id="checkyu_rjian"></span></td></tr>其次在发帖的js页面加入代码,在/static/js/forum_post.js写入:
function scupload() { document.getElementById(e_attach_menu).style.cssText=width: 600px;position: fixed;z-index: 301;left: 300px;top: 370.5px;visibility: visible;; document.getElementById(uploadattachmsg).innerText=......您已上传附件!;}e_attach_menu为附件窗口的id
三、同步分类信息标签到主题标签(需要先给用户组开启标签权限)
1-在分类信息页面加入同步点击按钮控件:/template/default/froum/post_sortoption.htm合适位置加入:
<tr> <th><span class="rq">*</span>同步标签</th> <td> <span> <button type="button" class="pn" onclick="writetags()">点击同步</button><em id="tbmsg" style="color: green;"></em> </span> <div class="d">同步标签到您的主题下。</div> </td> <td class="ptm pbm bbda" width="180"><span id="checkyu_rjian"></span></td> </tr>在/static/js/forum_post.js (pc端发帖页js)加入:
//错误示例,以提醒后续开发的小心: function writetags() {if(document.getElementById("extra_tag_b")){ if(document.getElementById("typeoption_img_tab_7")){var itags = document.getElementById("typeoption_img_tab_7").value;document.getElementById("tags").value=itags;// alert(主题标签同步成功!); 不可使用alert,会终止其他js执行 return;}if(document.getElementById("typeoption_img_tab")){var itags = document.getElementById("typeoption_img_tab").value;document.getElementById("tags").value=itags;//alert(主题标签同步成功!);return;}}正确方法为摒弃alert,采用插入innerText模式提醒:
function writetags() { if(document.getElementById("extra_tag_b")){ if(document.getElementById("typeoption_img_tab_7")){ var itags = document.getElementById("typeoption_img_tab_7").value; document.getElementById("tags").value=itags; document.getElementById("tbmsg").innerText="......成功!"; return; } if(document.getElementById("typeoption_img_tab")){ var itags = document.getElementById("typeoption_img_tab").value; document.getElementById("tags").value=itags; document.getElementById("tbmsg").innerText="......成功!"; return; } }}三、分类信息获取附件aid,附件详情:
在分类信息模板加入相应激发js的按钮控件:在/template/default/froum/post_sortoption.htm中加入:
<tr><th><span class="rq">*</span>获取附件信息</th><td><span><button type="button" class="pn" onclick="getattachaid()">点击获取</button><em id="getaidmsg" style="color: green;"></em></span> <div class="d">点击自动获取附件身份编码和附件相关信息。</div></td><td class="ptm pbm bbda" width="180"><span id="checkyu_rjian"></span></td></tr>在/static/js/forum_post.js (pc端发帖页js)加入:
function getattachaid() { if(document.getElementsByClassName("xi2")){ for (i = 0;i < 10000; i++) { var attachnameid = "attachname"+i.toString(); if(document.getElementById(attachnameid)){ var attachcontent = document.getElementById(attachnameid).title; document.getElementById("typeoption_icoolhua_attachcontent").value=attachcontent; document.getElementById("typeoption_icoolhua_attachaid").value=i; document.getElementById("getaidmsg").innerText="......获取成功!"; return; } } } document.getElementById("getaidmsg").innerText="......您还未上传附件!";}四、帖子阅读页使用分类信息的下载控件调出附件的下载窗口:
1-首先需要编辑分类信息的帖子阅读页面模板,修改下载控件的a标签为:
<a id="attachdownload" href="JavaScript:;" onclick="attachdownload()"><div class="yu_res_info_button"><i></i>点击下载</div></a>2-pc端在系统的帖子阅读页面js文件加入以下代码(pc端路径:/static/js/forum_viewthread.js) 手机端在/template/bygsjw_2sj/touch/forum/viewthread.php加入,可以根据用户登录情况判断动态下载地址。
function attachdownload() {if(document.getElementsByClassName("atips_close")[0]){document.getElementById("attachdownload").onclick="showWindow(login, this.href);return false;";document.getElementById("attachdownload").href="member.php?mod=logging&action=login";return;}if(document.getElementsByClassName("attnm")[0]){var attachdownloadurl=document.getElementsByClassName("attnm")[0].getElementsByTagName("a")[0].href;var attachdownloadurljs=document.getElementsByClassName("attnm")[0].getElementsByTagName("a")[0].onclick;document.getElementById("attachdownload").onclick=attachdownloadurljs;document.getElementById("attachdownload").href=attachdownloadurl;return;}}}更多开发记录持续更新,如果有错误或者不严谨尤其可能导致安全问题的地方,希望各位朋友多指教。