搜索到
1
篇与
的结果
-
Typecho 博客和Joe 主题相关修改 Typecho 博客Joe 主题相关修改主题站点 Git 仓库 一、Typecho 博客Joe 主题背景修改为格子格子背景，在自定义css中填写以下代码#Joe { background-image: linear-gradient(#d4d4d4 1px, transparent 0), /* 格子线颜色 */ linear-gradient(90deg, #d4d4d4 1px, transparent 0); background-size: 28px 28px; /* 格子大小 */ background-color: #fffcf8; /* 背景底色#fffcf8或#EBEBEB */ } /* 夜间模式 */ html[data-night="night"] #Joe { background-image: linear-gradient(#333 1px, transparent 0), linear-gradient(90deg, #333 1px, transparent 0); background-size: 28px 28px; background-color: #1a1a1a; } 二、修改首页显示文章数量的方法如下登录你的 Typecho 博客后台；点击左侧菜单栏的 “设置” → “阅读”；找到选项：“每页文章数” 或 “在主页每页显示的文章数”；修改默认的 5 为你想要的，比如 8 或 10；保存设置；刷新前台页面查看效果。三、自定义侧边栏模块PC，播放竖屏视频<div style="width: 450px; max-height: 400px; overflow: hidden; position: relative;"> <iframe src="播放的竖屏视频网址" frameborder="0" allow="autoplay; fullscreen" scrolling="no" allowfullscreen style="width: 100%; height: 640px; transform: scale(0.56); transform-origin: top left; border: none;"> </iframe> </div> 四、joe主题自定义导航页面 原文章 背景: 就想要一个导航页面，用来存放自己的常用链接网站，方便自己使用目标: 可以在后台设置导航的链接，导航页面响应式，支持设置网站名称、网站链接、图标1、创建导航模板在joe主题下创建 mynav.php 文件<?php /** * 导航 * * @package custom * **/ ?> <!DOCTYPE html> <html lang="zh-CN"> <head> <?php $this->need('public/include.php'); ?> <?php if ($this->options->JPrismTheme) : ?> <link rel="stylesheet" href="<?php $this->options->JPrismTheme() ?>"> <?php else : ?> <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism.min.css"> --> <link rel="stylesheet" href="<?php $this->options->themeUrl('cyThemeBin/assets/css/prism.min.css'); ?>"> <?php endif; ?> <!-- <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.2.4/plugin/prism/prism.min.js"></script> --> <script src="<?php $this->options->themeUrl('cyThemeBin/assets/js/clipboard.min.js'); ?>"></script> <script src="<?php $this->options->themeUrl('cyThemeBin/assets/js/prism.min.js'); ?>"></script> <script src="<?php $this->options->themeUrl('cyThemeBin/assets/js/joe.post_page.min.js?v=20210525'); ?>"></script> <style> .nav-clist { display: flex; flex-wrap: wrap; } .nav-clist .nav-citem { position: relative; top: 0; background: #f2f2f2; margin-bottom: 10px; border-radius: 5px; transition: 0.3s; } .nav-clist .nav-citem:hover { box-shadow: 0px 0px 5px rgba(0,0,0,0.5); top: -8px; } .nav-clist .nav-citem:hover a { color: var(--theme); } .nav-clist .nav-citem:hover a .right_icon { filter: drop-shadow(var(--theme) 25px 0); } .nav-clist .nav-citem a { color: #252525; padding: 10px 5px; display: flex; align-items: center; } .nav-clist .nav-citem a img { width: 25px; height: 25px; vertical-align: middle; } .nav-clist .nav-citem a span { flex: 0.9; } .nav-clist .nav-citem a .nav-icon { margin-right: 8px; } .nav-citem .r_icon_box { overflow: hidden; } .nav-clist .nav-citem a .right_icon { position: relative; left: -24px; filter: drop-shadow(#ccc 25px 0); } @media screen and (min-width: 1201px) { .nav-clist .nav-citem { width: 24%; margin-right: 1%; } } @media screen and (max-width: 1200px) { .nav-clist .nav-citem { width: 32%; margin-right: 1.3%; } } @media screen and (max-width: 768px) { .nav-clist .nav-citem { width: 100%; } } </style> </head> <body> <div id="Joe"> <?php $this->need('public/header.php'); ?> <div class="joe_container"> <div class="joe_main"> <div class="joe_detail" data-cid="<?php echo $this->cid ?>"> <?php $this->need('public/batten.php'); ?> <?php $this->need('public/article.php'); ?> <?php $JFnav_str = $this->options->JFnav; $JFnav_arr = json_decode($JFnav_str, true); ?> <?php foreach($JFnav_arr as $t => $v) : ?> <div class="joe_detail__article nav-title"> <h3><?php echo $t ?></h3> </div> <div class="nav-clist"> <?php foreach($v as $a => $item) : ?> <div class="nav-citem"> <a href="<?php echo trim($item['url'])?>" target="_blank"> <img class="nav-icon" src="<?php echo trim($item['icon'])?>" alt=""> <span><?php echo trim($item['name'])?></span> <div class="r_icon_box"> <img class="right_icon" src="<?php $this->options->themeUrl('cyThemeBin/assets/img/right_icon.svg') ?>" alt=""> </div> </a> </div> <?php endforeach; ?> </div> <?php endforeach; ?> <?php $this->need('public/handle.php'); ?> <?php $this->need('public/copyright.php'); ?> </div> <?php $this->need('public/comment.php'); ?> </div> <?php $this->need('public/aside.php'); ?> </div> <?php $this->need('public/footer.php'); ?> </div> </body> <script> // console.log($, 'jquery'); </script> </html> 2、修改主题目录下 functions.php 文件在 适当位置 新增以下代码，此时后台即可设置导航链接$JFnav = new Typecho_Widget_Helper_Form_Element_Textarea( 'JFnav', NULL, '{"视频直播": [{"name": "腾讯视频", "url": "https://v.qq.com", "icon": ""}]}', '个人导航（非必填）', '介绍：用于填写导航链接 <br /> 注意：需要先添加导航页面（新增独立页面-右侧模板选择友链），该项才会生效 <br /> 格式：{"视频直播": [{"name": "腾讯视频", "url": "https://v.qq.com", "icon": ""}]}<br /> 其他：JSON对象的形式添加' ); $JFnav->setAttribute('class', 'joe_content joe_other'); $form->addInput($JFnav); 3、新建页面选择 导航模板 即可新建导航页面，设置页面路径选择自定义模板，选择自己创建的导航模板发布即可生效4、后台中的这种形式的json数据，其它自己研究{ "常用站点" : [ {"name": "辰漪博客", "url": "https://www.wrz521.top", "icon":"https://thirdqq.qlogo.cn/g?b=qq&nk=1447047194&s=100"} ], "视频直播" : [ {"name" : "腾讯视频", "url" : "https://v.qq.com", "icon" : "https://v.qq.com/favicon.ico"}, {"name" : "爱奇艺", "url" : "https://www.iqiyi.com", "icon" : "https://www.iqiyi.com/favicon.ico"} ], "实用工具" : [ {"name" : "辰漪支付", "url" : "https://pay.wrz521.top", "icon" : "https://pay.wrz521.top/favicon.ico"} ] }
您是第 75752 位访客