Typecho 博客和Joe 主题相关修改

博主： wszx01
发布时间：2025 年 07 月 30 日
9 次浏览
暂无评论
1045字数
分类：学习技术

Typecho 博客Joe 主题相关修改
[主题站点](https://78.al/) 
[Git 仓库](https://github.com/HaoOuBa/Joe) 
一、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主题自定义导航页面
 [原文章](https://www.wrz521.top/archives/121/) 
背景: 就想要一个导航页面，用来存放自己的常用链接网站，方便自己使用
目标: 可以在后台设置导航的链接，导航页面响应式，支持设置网站名称、网站链接、图标
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="<?php $this->options->themeUrl('cyThemeBin/assets/css/prism.min.css'); ?>">
    <?php endif; ?>

    <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>

```
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"}
]
}

```

最后修改：2025 年 07 月 30 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Typecho 博客和Joe 主题相关修改

wszx01 • 2025 年 07 月 30 日

Typecho 博客Joe 主题相关修改
[主题站点](https://78.al/) 
[Git 仓库](https://github.com/HaoOuBa/Joe) 
一、Typecho 博客Joe 主题背景修改为格子

格子背景，在自定义css中填写以下代码

/**
 * 导航
 * 
 * @package custom 
 * 
 **/

<!DOCTYPE html>
<html lang="zh-CN">

</style>
</head>

```
3、新建页面选择 *导航模板* 即可
新建导航页面，设置页面路径
选择自定义模板，选择自己创建的导航模板
发布即可生效

```

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Typecho 博客和Joe 主题相关修改

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款