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

boonkiong

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

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

1. <!--{hook/viewthread_title_extra}-->

复制代码

换行添加下边的代码：

1. <style>
   
2.                 #viewui_fontsize{float: right;}
   
3.                 #viewui_fontsize span{font-size:12px;color:#999;margin-right:3px;}
   
4.                 #viewui_fontsize ul{display: inline-block;vertical-align: -4px;}
   
5.                 #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;}
   
6.                 #viewui_fontsize ul li.a,#viewui_fontsize ul li:hover{background: #369;}
   
7. </style>
   
8. <div id="viewui_fontsize">
   
9. <span>阅读字号:</span>
   
10. <ul>
    
11. <li class="" onclick="setFontsize(this,'24');" title="点击切换为此字号,选中后再次点击可取消选择">大</li>
    
12. <li class="" onclick="setFontsize(this,'18');" title="点击切换为此字号,选中后再次点击可取消选择">中</li>
    
13. <li class="a" onclick="setFontsize(this,'14');" title="点击切换为此字号,选中后再次点击可取消选择">小</li>
    
14. </ul>
    
15. </div>
    
16. <script type="text/javascript">
    
17.     function setFontsize(checkobj, size){
    
18.         if(checkobj.className == 'a'){
    
19.             document.cookie = "viewui_fontsize=; expires=" + new Date(0).toUTCString() + ";path=/";
    
20.             location.reload();
    
21.             return;
    
22.         }
    
23.         var box = document.getElementById('viewui_fontsize').getElementsByTagName('li');
    
24.         for(var i=0; i<box.length; i++){
    
25.             box[i].className = '';
    
26.         }
    
27.         checkobj.className = 'a';
    
28. 
    
29.         // 核心：动态生成一个全局样式标签，用 !important 强制覆盖所有子元素（包括代码块）的字号
    
30.         var styleId = 'dynamic_fontsize_style';
    
31.         var oldStyle = document.getElementById(styleId);
    
32.         if (oldStyle) {
    
33.             oldStyle.parentNode.removeChild(oldStyle);
    
34.         }
    
35. 
    
36.         var css = `
    
37.             .message, .t_f, .t_f *, .message *, .blockcode, .blockcode *, .blockcode li, .blockcode code, .blockcode td, .pcb {
    
38.                 font-size: ` + size + `px !important;
    
39.             }
    
40.         `;
    
41.         
    
42.         var head = document.head || document.getElementsByTagName('head')[0];
    
43.         var style = document.createElement('style');
    
44.         style.id = styleId;
    
45.         style.type = 'text/css';
    
46.         if (style.styleSheet){
    
47.             style.styleSheet.cssText = css;
    
48.         } else {
    
49.             style.appendChild(document.createTextNode(css));
    
50.         }
    
51.         head.appendChild(style);
    
52. 
    
53.         // 记录 Cookie
    
54.         document.cookie = 'viewui_fontsize=' + size + '; expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/';
    
55.     }
    
56. 
    
57.     // 页面加载时自动读取 Cookie 恢复字号
    
58.     window.onload = function(){
    
59.         var match = document.cookie.match(new RegExp('(^| )viewui_fontsize=([^;]+)'));
    
60.         if (match) {
    
61.             var size = match[2];
    
62.             var lis = document.getElementById('viewui_fontsize').getElementsByTagName('li');
    
63.             var targetSizeLi = (size == '24') ? lis[0] : (size == '18' ? lis[1] : lis[2]);
    
64.             if(targetSizeLi){
    
65.                 setFontsize(targetSizeLi, size);
    
66.             }
    
67.         }
    
68.     }
    
69. </script>

复制代码

如下图所示：

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