免费分享几个我原创的首页侧边栏模块

nwnuyhs

分享下我自己折腾的自定义模块代码供大家下载，可能某些主题不支持，具体大家自行测试



侧边栏发帖按钮代码：

1. <div style="margin: 20px 0;">
   
2.     <style>
   
3.         @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
   
4.     </style>
   
5.     <a href="forum.php?mod=misc&action=nav"
   
6.        onclick="showWindow('nav', this.href, 'get', 0); return false;"
   
7.        style="display: block; width: 100%; background-color: #009a61; color: white; padding: 12px 0; border-radius: 8px; text-align: center; text-decoration: none; font-size: 16px; font-weight: 500; transition: background-color 0.2s ease;"
   
8.        onmouseover="this.style.backgroundColor='#007a4d'"
   
9.        onmouseout="this.style.backgroundColor='#009a61'">
   
10.         <i class="fas fa-edit" style="margin-right: 6px;"></i> 我要发帖
    
11.     </a>
    
12. </div>

复制代码

首页公告框重新美化

1. <style>
   
2.         #notices {
   
3.             max-width: 800px;
   
4.             margin: 0 auto;
   
5.             padding: 0;
   
6.         }
   
7. 
   
8.         .alert-notice {
   
9.             background: #f8fdf8;
   
10.             border: 1px solid #e5f3e5;
    
11.             border-radius: 6px;
    
12.             padding: 16px;
    
13.             margin: 12px 0;
    
14.             border-left: 3px solid #22c55e;
    
15.         }
    
16. 
    
17.         .alert-notice h2 {
    
18.             color: #14532d;
    
19.             font-weight: 600;
    
20.             font-size: 18px;
    
21.             margin: 0 0 12px 0;
    
22.         }
    
23. 
    
24.         .alert-notice p {
    
25.             color: #166534;
    
26.             font-size: 14px;
    
27.             line-height: 1.5;
    
28.             margin: 8px 0;
    
29.         }
    
30. 
    
31.         .alert-notice a {
    
32.             color: #14532d;
    
33.             text-decoration: none;
    
34.             font-weight: 500;
    
35.         }
    
36. 
    
37.         .alert-notice a:hover {
    
38.             color: #0f3b21;
    
39.             text-decoration: underline;
    
40.         }
    
41. 
    
42.         @media (max-width: 768px) {
    
43.             .alert-notice {
    
44.                 padding: 14px;
    
45.                 margin: 10px;
    
46.             }
    
47.         }
    
48.     </style>
    
49. </head>
    
50. 
    
51. <div id="notices" class="">
    
52.     <div class="alert-notice alert-warning" role="alert">
    
53.         <h2>欢迎加入 Blog do 论坛！</h2>
    
54.         <p>Blog do 论坛是博客建站爱好者的交流平台，我们致力于为大家提供一个开放的交流环境。</p>
    
55.         
    
56.         <p>Blog do论坛官网：<a class="report xs-12" href="https://nav.blog.do/" target="_blank">https://www.blog.do/</a></p>
    
57.         
    
58.         <p>Blog do网址导航：<a class="report xs-12" href="https://nav.blog.do/" target="_blank">https://nav.blog.do/</a></p>
    
59.         
    
60.         <p>站长邮箱：admin@blog.do</p>
    
61.     </div>
    
62. </div>
    

复制代码

添加侧边栏友情链接展示框

1. <title>友情链接 - 美化版</title>
   
2.     <style>
   
3. /* 友情链接容器 */
   
4.         .x.cl {
   
5.             background: #ffffff;
   
6.             border-radius: 12px;
   
7.             box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   
8.             overflow: hidden;
   
9.             margin-bottom: 20px;
   
10.             border: 1px solid rgba(0, 0, 0, 0.05);
    
11.         }
    
12. 
    
13.         /* 标题样式 */
    
14.         .friendship-title {
    
15.             background: #f8f9fa;
    
16.             color: #333;
    
17.             padding: 12px 16px;
    
18.             margin: 0;
    
19.             font-size: 14px;
    
20.             font-weight: 500;
    
21.             display: flex;
    
22.             align-items: center;
    
23.             position: relative;
    
24.             border-bottom: 1px solid #e9ecef;
    
25.         }
    
26. 
    
27.         .friendship-title::before {
    
28.             content: "🔗";
    
29.             margin-right: 6px;
    
30.             font-size: 14px;
    
31.         }
    
32. 
    
33.         /* 链接列表 */
    
34.         .cl.mbm {
    
35.             list-style: none;
    
36.             margin: 0;
    
37.             padding: 10px;
    
38.             display: flex;
    
39.             flex-wrap: wrap;
    
40.             gap: 6px;
    
41.         }
    
42. 
    
43.         .cl.mbm li {
    
44.             position: relative;
    
45.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
46.             flex: 0 0 calc(50% - 3px);
    
47.         }
    
48. 
    
49.         .cl.mbm li a {
    
50.             display: block;
    
51.             padding: 8px 12px;
    
52.             color: #333;
    
53.             text-decoration: none;
    
54.             font-size: 12px;
    
55.             font-weight: 400;
    
56.             position: relative;
    
57.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
58.             background: #f8f9fa;
    
59.             border-radius: 6px;
    
60.             text-align: center;
    
61.             line-height: 1.3;
    
62.             white-space: nowrap;
    
63.             overflow: hidden;
    
64.             text-overflow: ellipsis;
    
65.         }
    
66. 
    
67.         .cl.mbm li a::before {
    
68.             content: "";
    
69.             position: absolute;
    
70.             left: 0;
    
71.             top: 0;
    
72.             bottom: 0;
    
73.             width: 100%;
    
74.             background: rgba(0, 153, 101, 0.1);
    
75.             opacity: 0;
    
76.             border-radius: 6px;
    
77.             transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
78.             z-index: -1;
    
79.         }
    
80. 
    
81.         /* 悬停效果 */
    
82.         .cl.mbm li:hover {
    
83.             transform: translateY(-2px);
    
84.         }
    
85. 
    
86.         .cl.mbm li:hover a {
    
87.             color: #009965;
    
88.         }
    
89. 
    
90.         .cl.mbm li:hover a::before {
    
91.             opacity: 1;
    
92.         }
    
93. 
    
94.         /* 响应式设计 */
    
95.         @media (max-width: 768px) {
    
96.             .sidebar-demo {
    
97.                 max-width: 100%;
    
98.                 margin: 0;
    
99.             }
    
100.             
     
101.             .friendship-title {
     
102.                 padding: 10px 12px;
     
103.                 font-size: 13px;
     
104.             }
     
105.             
     
106.             .cl.mbm {
     
107.                 padding: 8px;
     
108.             }
     
109.             
     
110.             .cl.mbm li a {
     
111.                 padding: 6px 8px;
     
112.                 font-size: 11px;
     
113.             }
     
114.         }
     
115. 
     
116.         /* 加载动画 */
     
117.         .x.cl {
     
118.             animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     
119.         }
     
120. 
     
121.         @keyframes slideInUp {
     
122.             from {
     
123.                 opacity: 0;
     
124.                 transform: translateY(20px);
     
125.             }
     
126.             to {
     
127.                 opacity: 1;
     
128.                 transform: translateY(0);
     
129.             }
     
130.         }
     
131. 
     
132.         /* 深色模式支持 */
     
133.         @media (prefers-color-scheme: dark) {
     
134.             body {
     
135.                 background: #1a1a1a;
     
136.             }
     
137.             
     
138.             .x.cl {
     
139.                 background: #2d2d2d;
     
140.                 border-color: rgba(255, 255, 255, 0.1);
     
141.                 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
     
142.             }
     
143.             
     
144.             .cl.mbm li a {
     
145.                 color: #e0e0e0;
     
146.             }
     
147.             
     
148.             .cl.mbm li:hover a {
     
149.                 background: linear-gradient(90deg, rgba(0, 153, 101, 0.15), rgba(0, 153, 101, 0.08));
     
150.                 color: #009965;
     
151.             }
     
152.             
     
153.             .cl.mbm li:not(:last-child)::after {
     
154.                 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
     
155.             }
     
156.         }
     
157.     </style>
     
158. </head>
     
159. <body>
     
160.     <div class="sidebar-demo">
     
161.         <!-- 友情链接模块 - 使用Discuz动态代码 -->
     
162.         <div class="x cl">
     
163.             <h3 class="friendship-title">友情链接</h3>
     
164.             <ul class="cl mbm">
     
165.                 [loop]
     
166.                 <li><a href="{url}" {target}>{title}</a></li>
     
167.                 [/loop]
     
168.             </ul>
     
169.         </div>
     
170.     </div>

复制代码

一定

图呢，贴个图比较好