Discuz! X5模板帖子内容页打印的旁边添加阅读字号

boonkiong · 发表于 2026-8-10 01:04:10

打开 template\discuzx5\forum\viewthread.php。查找：

复制代码

换行添加下边的代码：

<style>
#viewui_fontsize{float: right;}
#viewui_fontsize span{font-size:12px;color:#999;margin-right:3px;}
#viewui_fontsize ul{display: inline-block;vertical-align: -4px;}
#viewui_fontsize ul li{float: left;background: #b3b3b3;padding: 0px 3px 1px 3px;color: #FFF;font-size: 12px;border-radius: 2px;margin: 0 3px;cursor: pointer;}
#viewui_fontsize ul li.a,#viewui_fontsize ul li:hover{background: #369;}
</style>
<div id="viewui_fontsize">
<span>阅读字号:</span>
<ul>
<li class="" onclick="setFontsize(this,'24');" title="点击切换为此字号,选中后再次点击可取消选择">大</li>
<li class="" onclick="setFontsize(this,'18');" title="点击切换为此字号,选中后再次点击可取消选择">中</li>
<li class="a" onclick="setFontsize(this,'14');" title="点击切换为此字号,选中后再次点击可取消选择">小</li>
</ul>
</div>
<script type="text/javascript">
function setFontsize(checkobj, size){
if(checkobj.className == 'a'){
document.cookie = "viewui_fontsize=; expires=" + new Date(0).toUTCString() + ";path=/";
location.reload();
return;
}
var box = document.getElementById('viewui_fontsize').getElementsByTagName('li');
for(var i=0; i<box.length; i++){
box[i].className = '';
}
checkobj.className = 'a';
// 核心：动态生成一个全局样式标签，用 !important 强制覆盖所有子元素（包括代码块）的字号
var styleId = 'dynamic_fontsize_style';
var oldStyle = document.getElementById(styleId);
if (oldStyle) {
oldStyle.parentNode.removeChild(oldStyle);
}
var css = `
.message, .t_f, .t_f *, .message *, .blockcode, .blockcode *, .blockcode li, .blockcode code, .blockcode td, .pcb {
font-size: ` + size + `px !important;
}
`;
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.id = styleId;
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
// 记录 Cookie
document.cookie = 'viewui_fontsize=' + size + '; expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/';
}
// 页面加载时自动读取 Cookie 恢复字号
window.onload = function(){
var match = document.cookie.match(new RegExp('(^| )viewui_fontsize=([^;]+)'));
if (match) {
var size = match[2];
var lis = document.getElementById('viewui_fontsize').getElementsByTagName('li');
var targetSizeLi = (size == '24') ? lis[0] : (size == '18' ? lis[1] : lis[2]);
if(targetSizeLi){
setFontsize(targetSizeLi, size);
}
}
}
</script>

复制代码

如下图所示：

Discuz! X5模板帖子内容页打印的旁边添加阅读字号

boonkiong · 发表于 2026-8-10 09:26:08

Discuz! 自带手机版

打开 template\default\touch\forum\viewthread.php，查找：

<div class="view_tit">
<em>[{$_G['forum']['threadtypes']['types'][$_G['forum_thread']['typeid']]}]</em>
<em>[{$_G['forum']['threadsorts']['types'][$_G['forum_thread']['sortid']]}]</em>
$_G['forum_thread']['subject']
<span>({lang moderating})</span>
<span>({lang have_ignored})</span>
<span>({lang draft})</span>

复制代码

在下面添加：

<style>
#viewui_fontsize{float: right;}
#viewui_fontsize span{font-size:12px;color:#999;margin-right:3px;}
#viewui_fontsize ul{display: inline-block;vertical-align: -4px;}
#viewui_fontsize ul li{float: left;background: #b3b3b3;padding: 0px 3px 1px 3px;color: #FFF;font-size: 12px;border-radius: 2px;margin: 0 3px;}
#viewui_fontsize ul li.a,#viewui_fontsize ul li:hover{background: #369;}
</style>
<div id="viewui_fontsize">
<span>阅读字号:</span>
<ul>
<li class="" onclick="setFontsize(this,'20');" title="点击切换为此字号">大</li>
<li class="" onclick="setFontsize(this,'18');" title="点击切换为此字号">中</li>
<li class="a" onclick="setFontsize(this,'16');" title="点击切换为此字号">小</li>
</ul>
</div>
<script type="text/javascript">
function setFontsize(checkobj, size){
if(checkobj.className == 'a'){
document.cookie = "viewui_fontsize=; expires=" + new Date(0).toUTCString() + ";path=/";
location.reload();
return;
}
var box = document.getElementById('viewui_fontsize').getElementsByTagName('li');
for(var i=0; i<box.length; i++){
box[i].className = '';
}
checkobj.className = 'a';
// 获取手机版正文容器
var obj = document.getElementsByClassName('message');
if(obj.length == 0){
obj = document.getElementsByClassName('t_f');
}
if(obj.length > 0){
for(var i=0; i<obj.length; i++){
// 1. 设置正文主容器字号
obj[i].style.fontSize = size + 'px';
// 2. 遍历并修改正文里所有的 font 标签
var fonts = obj[i].getElementsByTagName('font');
for(var o=0; o<fonts.length; o++){
fonts[o].style.fontSize = size + 'px';
}
// 3. 【新增】强制修改代码块内部的字号（适配 Discuz 的 blockcode / pre / code）
var codeBlocks = obj[i].querySelectorAll('.blockcode, .blockcode code, .blockcode pre, .blockcode li, pre, code');
for(var c=0; c<codeBlocks.length; c++){
codeBlocks[c].style.fontSize = size + 'px';
}
}
}
document.cookie = 'viewui_fontsize=' + size + '; expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/';
}
// 页面加载时自动读取 Cookie 恢复字号
window.onload = function(){
var match = document.cookie.match(new RegExp('(^| )viewui_fontsize=([^;]+)'));
if (match) {
var size = match[2];
var lis = document.getElementById('viewui_fontsize').getElementsByTagName('li');
var targetSizeLi = (size == '20') ? lis[0] : (size == '18' ? lis[1] : lis[2]);
setFontsize(targetSizeLi, size);
}
}
</script>

复制代码

Discuz! X5模板帖子内容页打印的旁边添加阅读字号

相关帖子

管理员

帅哥

金牛座

羊