标签 Joe主题下的文章 - 尋鯨錄的Blog

找到 3 篇与 Joe主题相关的结果

2024-12-30

技术教程奇奇怪怪 # Typecho # 无聊 # Joe主题

尋鯨錄 2年前

2 63 2

2024-12-20

typecho joe主题美化手机侧边栏图标颜色修改 AI摘要美化Typecho Joe主题手机侧边栏图标颜色，通过修改代码中字体颜色和图标样式实现，具体修改包括首页、栏目、页面和推荐等部分。此内容根据文章生成，仅用于文章内容的解释与总结效果图 000056图片修改教程 1.首页原代码 <span>首页</span>改代码 <span><font color="#ff8900" style="font-weight:600;"> <i class="fa fa-home"></i> 首页</font></span>000050图片 000051图片 2.栏目原代码 <span>栏目</span>改代码 <span><font color="0909f7b" style="font-weight:600;"> <i class="fa fa-mail-reply-all"></i> 栏目</font></span>000052图片 000053图片 3.页面原代码 <span>页面</span>改代码 <span><font color="#f709f7b" style="font-weight:600;"> <i class="fa fa-window-restore"></i> 页面</font></span>000054图片 000055图片 4.推荐原代码 <span>推荐</span>改代码 <span><font color="#66ff00b" style="font-weight:600;"> <i class="fa fa-thumbs-o-up"></i> 推荐</font></span> 很抱歉这个推荐的代码页面没有截屏！

技术教程 # Typecho # 博客 # Joe主题

尋鯨錄 2年前

3 54 3

2024-12-02

Joe主题美化教程-实用教程 AI摘要本文介绍了Joe主题的美化教程，包括顶部视频、头像呼吸灯、自定义透明度、格子背景、文章列表渐变颜色、弹窗和彩色标签等美化方法。此内容根据文章生成，仅用于文章内容的解释与总结 000031图片站点首页顶部视频效果图 000015图片教程代码 - 首先在主题根目录（usr/themes/joe）新建一个文件夹，什么名称都可以然后在刚刚创建的文件夹里面创建几个其他的文件夹分为index,post,other,css,js这几个文件夹当然你也可以不创建，我这样只是为了方便你们区分文件夹创建完成之后，在index这个文件夹里面创建一个video.php的文件然后把以下代码放进去保存 <div class="video-background"> <video poster="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/a7e1480a41a61cfa23145ea8a30fd75dfba726c0e06fc59c22ef8ce03f0a21381c5026a125fa502a27f32b1792d9c838?pictype=scale&from=30111&version=3.3.3.3&fname=Screenshot_2024_1127_034242.png&size=1024" playsinline="" autoplay="" loop="" muted=""> <source src="https://alimov2.a.kwimgs.com/upic/2024/12/13/19/BMjAyNDEyMTMxOTE4MjZfMzAxNDE5NDQ2Nl8xNTEwNTk4MTI5OTRfMl8z_b_B3addd920d6174ebffd11478576239387.mp4?clientCacheKey=3xkity3uyjknhhu_b.mp4" type="video/mp4"> </video> <span class="title"><?php $this->options->title(); ?></span> <span class="description"><?php $this->options->description(); ?></span> </div>然后在css里面新建一个video.css填入以下代码保存 <style>/*首页视频css*/ .video-background { width: 100%; height: 100%; position: relative; display: block; margin-bottom: 20px; border-radius: 5px; overflow: hidden; background-image: url('https://p4-ad.adukwai.com/upic/2024/11/19/21/BMjAyNDExMTkyMTAzNTVfMzI5NDExNzQ5MF8xNDkwNTA2MDk1NzdfMl8z_ccc_B0b6fae48a22a4f4ac0d976d3538c17a0.jpg?tag=1-1732805729-unknown-0-5tzpnp9tno-3361e55adfa70e5c&clientCacheKey=3xqqtnmb6n4j7zk_ccc.jpg&bp=10000&ss=vp'); background-size: cover; background-position: center; } .video-background video { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; playsinline: "autoplay"; autoplay: "autoplay"; loop: "loop"; muted: "muted"; } .video-background .title { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 9vw; font-weight: bold; text-align: center; white-space: nowrap; } .video-background .description { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 3vw; font-weight: bold; text-align: center; white-space: nowrap; } @media (min-width: 768px) { .video-background .title { font-size: 36px; } .video-background .description { font-size: 16px; } }</style>以上两个文件创建完成之后找到分别找到以下两个文件 /usr/themes/joe/module/head.php 在里面适合的位置增加以下代码 <?php $this->need('改为你主题根目录创建的文件夹名称/css/video.css'); ?>然后 /usr/themes/再续前缘主题目录/index.php里面把第 43 行下面的（有的人的可能不在43行，那就自己找下） 000022图片 $this->need('module/index/carousel.php'); 改为 000023图片 $this->need('你那会创建的文件夹名称/index/video.php'); Joe主题的头像呼吸灯效果图 000013图片评论区的头像也会自动加上呼吸灯，点击头像或电脑端停留在头像上面还会旋转头像呼吸灯 - <style> /*头像呼吸光环和鼠标悬停旋转放大*/ .avatar { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .avatar:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;} } </style>将上面的代码放到网站的或里面保存即可查看效果了，建议放在里面使用CSS代码自定义调整博客主题的透明度我们的博客在使用背景图后，可能会被文字遮挡，影响背景图的效果，方法很简单，不需要任何插件教程开始自定义博客主题透明度 - 打开主题的设置页面，找到自定义CSS ，复制粘贴下面的代码 body { --background: rgba(255,255,255,0.7) }其中（）里面的0.7表示透明度，可以自行更改达到自己想要的效果 eg：我想要实现半透明，就把0.7改为0.5，代码如下 body { --background: rgba(255,255,255,0.5) }同理如果想实现完全透明，那就将0.7改为0.0即可完全透明 CSS代码实现让博客网站使用格子背景网站美化能让我们的网站变得更好看，比如美化字体、增加特效、添加背景图片等，但是过度美化无疑会增加服务器的压力，今天分享一个格子背景由 CSS代码实现，又节省一个 http请求调整博客主题的透明度可以达到一个不错的效果 😁 代码格子背景 - body::before { background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 10%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0); background-size: 20px 20px; background-position: 50%; background-repeat: repeat; } }将上面的代码放在自定义CSS 里面即可，此CSS还解决了部分特定页面下，普通背景高度不够的问题 Joe文章列表添加渐变颜色效果效果图 000016图片教程接下来需要编辑的文件以及相对Joe主题的文件路径： joe.index.js →→→ usr/themes/Joe/assets/js/joe.index.js joe.index.css→→→usr/themes/Joe/assets/css/joe.index.css joe.mode.css →→→ usr/themes/Joe/assets/css/joe.mode.css 渐变颜色 - 添加HTML代码打开joe.index.js文件找到如图所示位置 000017图片可以直接搜joe_list__item wow default定位到，其实一打开就是了。在第一个a标签元素后面加入如下代码 <div class="article-banner-wrap"></div> <div class="article-banner"></div>000018图片添加CSS代码直接将下面的css代码复制粘贴到joe.index.css文件的最后面就行了 /*首页列表渐变*/ .article-banner-wrap { position: absolute; height: 100%; width: 50%; right: 0; top: 0; } .article-banner { visibility: hidden; opacity: .2; position: absolute; height: 100%; width: 50%; right: 0; top: 0; z-index: 0; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center center; transition: opacity 0.2s; -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); border-radius: 8px; background:linear-gradient(to left,#2BC0E4,#EAECC6); visibility: visible; animation: banner-show 1s; } .joe_list__item.default:hover .article-banner{opacity: 1;}其中的background可以改成图片地址，这样效果就是图片了，但图片会拖累网站加载速度，可自行决定是否要换成图片。适配夜间模式打开joe.mode.css文件，将以下CSS代码加入文件底部即可。 /*首页列表图片渐变夜间模式*/ html[data-night='night'] .article-banner{ background: linear-gradient(to left,#1F1C2C,#928DAB); opacity:0.1 }000019图片为网站添加一个的弹窗效果图 000020图片教程弹窗代码 - 将下面的代码放在自定义HTML里面即可， style="color:blue">在填写代码之前先把需要的弹窗内容修改完善 <style> .popup-container { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 9999; justify-content: center; align-items: center; } .popup { animation: popOut .4s ease-in-out forwards; transform-origin: center center; transform: scale(0); } @keyframes popOut { to { transform: scale(1); } } .popup-content { background-color: #fff; padding: 30px; max-width: 400px; text-align: center; border-radius: 6px; /* 添加弹窗的圆角边框 */ } .popup-title { font-size: 21px; font-weight: bold; margin-bottom: 10px; color: #000000 } .popup-text { text-align: left; font-size: 14px; margin-bottom: 20px; color: #808080 } .popup-button { background-color: #007bff; color: #fff; border: none; padding: 6px 20px; font-size: 13px; cursor: pointer; border-radius: 4px; /* 添加圆角 */ background-color: #B0C4DE; } .slide-container { width: 100%; height: 200px; overflow: hidden; /* 隐藏超出部分 */ } .slide-content { width: 100%; /* 比容器宽度多一定值，保证有滚动条 */ height: 100%; padding: 5px; /* 内容区域留白 */ overflow-y: scroll; /* y方向滚动 */ } } </style> <div class="popup-container"> <div class="popup-content"> <h2 class="popup-title">公告</h2> <div class="popup"><div class="slide-container"><div class="slide-content"><p class="popup-text"> 您好，仔细欢迎访问的我个人Blog 这里将会记录我的一些生活内容...... 此处省略一万字😂 </font></i></div> </div></div> </p> <button class="popup-button" id="popup-button">我已知晓 </div> </div> <script> var popupContainer = document.querySelector('.popup-container'); var popupButton = document.getElementById('popup-button'); // 显示弹窗 function showPopup() { popupContainer.style.display = 'flex'; } // 隐藏弹窗 function hidePopup() { popupContainer.style.display = 'none'; } // 显示初始弹窗 showPopup(); // 处理关闭按钮点击事件 popupButton.addEventListener('click', hidePopup); </script> </body> 彩色标签效果图 000021图片教程将下面的代码放在自定义CSS 里面即可 CSS代码 - .article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF} .item-tags{margin-bottom: 10px}.item-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.item-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.item-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.item-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.item-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.item-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.item-tags a:hover{background-color: #1B1B1B;color: #FFF} ffffff ffffff 这篇文章📃转自下面的博主星启寒博客 Demius`Blog 圆弧派博客

技术教程 # 美化 # Typecho # 博客 # Joe主题

尋鯨錄 2年前

0 102 6