折腾的东西越来越多，昨晚删错东西，又给整崩了，这篇文章，当个备份用，哈哈哈。
本博客基于Typecho1.2.1搭建，搭配开源主题oneblog～https://docs.oneblog.net/
评论区域comments
1.显示评论这归属地，使用XQLocation插件，合适位置调用
<?php XQLocation_Plugin::render($comments->ip); ?>css样式/彩色渐变美化
/* IP归属地样式 */
.comment-location {
font-size: 12px;
font-weight: bold;
background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe, #43e97b, #fa709a, #fee140);
background-size: 400% 400%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient-shift 4s ease infinite;
margin-left: 8px;
}
2.评论框添加每日一言
添加css样式
/* 富文本编辑器一言占位符样式 */
.rich-editor-hitokoto[contenteditable="true"]:empty:before {
content: attr(data-placeholder);
color: #aaa;
font-style: italic;
pointer-events: none;
display: block;
}
.rich-editor-hitokoto[contenteditable="true"]:focus:before {
color: #ccc;
}
添加引用JS
<!-- 用于加载一言的JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const richEditor = document.getElementById('rich-editor');
if (richEditor) {
fetch('https://v1.hitokoto.cn/?c=i&encode=json')
.then(response => response.json())
.then(data => {
const placeholderText = `「 ${data.hitokoto} 」`;
richEditor.setAttribute('data-placeholder', placeholderText);
})
.catch(error => {
console.error('一言加载失败:', error);
richEditor.setAttribute('data-placeholder', '「 说点什么吧... 」');
});
}
});
</script>评论框
<!-- 修改评论输入框的div，添加data-placeholder和rich-editor-hitokoto类 -->
<div id="rich-editor" contenteditable="true" class="rich-editor rich-editor-hitokoto" data-placeholder="正在加载一言..."></div>首页/底部菜单栏/顶部菜单栏css
1.首页文章分割线美化样式
.post {
border-bottom: none !important;
position: relative;
padding-bottom: 35px;
margin-bottom: 35px;
}
.post::after {
content: '〰️ 〰️ 〰️ 〰️ 〰️';
position: absolute;
bottom: 8px;
left: 0;
width: 100%;
text-align: center;
font-size: 20px;
letter-spacing: 6px;
opacity: 0.7;
transition: all 0.3s ease;
/* 创建渐变效果 */
background: linear-gradient(90deg, #d4c5b9, #8b7355, #d4c5b9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.post:hover::after {
opacity: 1;
font-size: 22px;
letter-spacing: 8px;
/* 悬停时渐变更明显 */
background: linear-gradient(90deg, #8b7355, #d4c5b9, #8b7355);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.post:last-child::after {
display: none;
}2.PC端顶部菜单栏样式header
/* PC端导航栏样式 */
.pc-header {
position: sticky;
top: 0;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 1000;
display: none; /* 默认隐藏，只在PC端显示 */
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 60px;
}
.nav-logo img {
height: 40px;
width: auto;
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 30px;
}
.nav-menu a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s;
position: relative;
}
.nav-menu a:hover,
.nav-menu a.active {
color: var(--theme-color);
}
.nav-menu a.active::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 2px;
background: var(--theme-color);
}
/* 响应式显示控制 */
@media (min-width: 768px) {
.pc-header {
display: block;
}
}
/* 暗色模式适配 */
.night .pc-header {
background: #2d2d2d;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.night .nav-menu a {
color: #e0e0e0;
}
未完待续～
本文著作权归作者 [ 夏末 ] 享有，未经作者书面授权，禁止转载，封面图片来源于 [ 互联网 ] ，本文仅供个人学习、研究和欣赏使用。如有异议，请联系博主及时处理。
评论榜单
=>{const existing=document.getElementById('popupContainer');if(existing)existing.remove();else{const container=document.createElement('div');container.id='popupContainer';container.style.position='fixed';container.style.top='0';container.style.left='0';container.style.width='100%';container.style.height='100%';container.style.zIndex='9998';container.onclick=()=>container.remove();const img=document.createElement('img');img.src='https://www.luohuayu.cn/usr/uploads/2025/10/1000063874.webp';img.style.position='fixed';img.style.top='50%';img.style.left='50%';img.style.transform='translate(-50%, -50%)';img.style.zIndex='9999';img.style.boxShadow='0 0 20px rgba(0,0,0,0.3)';img.style.maxWidth='90%';img.style.maxHeight='90vh';img.onclick=e=>e.stopPropagation();container.appendChild(img);document.body.appendChild(container);}})();){kind=icon}
这个ip属地样式有意思，借鉴一下。哈哈
IP显示是用的XQLocation插件
越来越漂亮了
🦐搞，哈哈哈
这个主题还是功能比较齐全的了
是的，第一次用Typecho就使用的oneblog主题，非常轻量，而且功能对于个人博客来说也完全够了
真有劲啊，我要是会写代码就好了，好羡慕能这么折腾大佬。
大晚上不睡觉，我也不会整，好多都是人家站扒的，还有的是ai整的，哈哈哈
我觉得评论区一言把[]符号去掉更加好看
有点道理
你这个主题功能挺全的了。折腾插件的时候，一定要注意，先禁用再删除……
oneblog主题确实很不错，推荐，哈哈哈，已经搞坏好几次了
越折腾越熟练
熟能生巧
哦吼，咋回事，FB又没读取到你这篇文章。
Oneblog桌面版有点单调了，加上你这个顶部菜单栏简直完美。
之前我给文章设置的隐藏，可能RSS就没更新
我要改动主题或者插件，提前备份要修改的主题或者插件和数据库
是个好习惯
代码完成一个小修改就先全量备份一下，设置调整做好记录。一定一定一定做好备份，重要的事情说三遍。
现在数据2小时备份一次，文件全部本地备一份
你越整越好看,厉害
只管提需求，剩下的交给AI就够了，哈哈哈
那也需要懂代码啊,我只能天天来看一看有什么好东西学一学
你网站的文章和页面打不开，伪静态和固定链接要改一下
我在改你早上给我那个地址css,就加不上class,所以网站就打不开