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"}
]
}
评论 (0)