阿七
Joe主题美化教程
12/20
一:添加互动读者及读者等级
一:添加互动读者及读者等级

这个框框呢就是评论用户的另一种形式吧
1. 我们先在function.php
里面添加一个开关吧~
$JactiveUsers = new Typecho_Widget_Helper_Form_Element_Radio(
'JactiveUsers',
array(
1 => '开启',
0 => '关闭',
),0,'是否开启互动读者','介绍:显示评论相关用户'
);
$JactiveUsers->setAttribute('class', 'j-setting-content j-setting-aside');
$form->addInput($JactiveUsers);
2. 然后我们可以给侧栏加代码了
aside.php
里面对应位置添加,位置和其他啥广告位的一级不多说
<!--互动读者-->
<?php if ($this->options->JactiveUsers and $this->is('index')): ?>
<section class="aside aside-hunter-authors">
<h3 class="aside-title"><i class="icon iconfont icon-wodeguanzhu"></i>
<span><?php _e('互动读者'); ?></span></h3>
<div class="hunter-cont">
<ul class="hunter-authors">
<?php
$period = time() - 2592000; // 单位: 秒, 时间范围: 30天
$counts = Typecho_Db::get()->fetchAll(Typecho_Db::get()
->select('COUNT(author) AS cnt', 'author', 'max(authorId) authorId', 'max(mail) mail')
->from('table.comments')
->where('created > ?', $period)
->where('status = ?', 'approved')
->where('type = ?', 'comment')
->group('author')
3. 我们在functions.php
或者core.php
添加一些辅助函数
/**
* 显示用户等级,按邮箱
*/
function autvip($i){
$db=Typecho_Db::get();
$mail=$db->fetchAll($db->select(array('COUNT(cid)'=>'rbq'))->from('table.comments')->where('mail = ?', $i)/**->where('authorId = ?','0')**/);
foreach ($mail as $sl){
$rbq=$sl['rbq'];}
if($rbq<1){
echo '<span class="autlv aut-0">Lv.0</span>';
}elseif ($rbq<10 && $rbq>0) {
echo '<span class="autlv aut-1">Lv.1</span>';
}elseif ($rbq<20 && $rbq>=10) {
echo '<span class="autlv aut-2">Lv.2</span>';
}elseif ($rbq<40 && $rbq>=20) {
echo '<span class="autlv aut-3">Lv.3</span>';
}elseif ($rbq<80 && $rbq>=40) {
echo '<span class="autlv aut-4">Lv.4</span>';
}elseif ($rbq<100 && $rbq>=80) {
echo '<span class="autlv aut-5">Lv.5</span>';
}elseif ($rbq>=100) {
echo '<span class="autlv aut-6">Lv.6</span>';
}
}
/**输出作者文章总数,可以指定*/
function allpostnum($id){
$db = Typecho_Db::get();
$postnum=$db->fetchRow($db->select(array('COUNT(authorId)'=>'allpostnum'))->from ('table.contents')->where ('table.contents.authorId=?',$id)->where('table.contents.type=?', 'post'));
$postnum = $postnum['allpostnum'];
if($postnum=='0')
{
return '暂无文章';
}
else{
return '文章 '.$postnum.' 篇';
}
}
4. 最后就是添加样式了
css
样式如下,需要css
的可以自己转一下,或者在我的网站用开发者工具扣也行 = =
.autlv {
font-size: 10px;
color: #fff;
display: inline-block;
vertical-align: text-top;
font-weight: normal;
border-radius: 2px;
line-height: 1.4;
padding: 0 4px;
margin-left: 5px;
letter-spacing: 0px;
}
.aut-0 {
background: #d1d5dc;
}
.aut-1 {
background: #448EF6;
}
.aut-2 {
background: #f6b044;
}
.aut-3 {
background: #c444f6;
}
.aut-4 {
background: #f69644;
}
.aut-5 {
background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
}
.aut-6 {
background: #f64444;
}
.aside-hunter-authors{
background: var(--background);
.vs {
border-radius: 100%;
}
ul{
padding: 14px;
list-style: none;
line-height: 2.5;
}
.item{
border-bottom: 1px dashed #eee;
margin-bottom: 0px;
position: relative;
padding-bottom: 4px;
.hunter-avatar{
float: left;
line-height: 55px;
.vatar{
position: relative;
img{
width: 45px;
border-radius: 100%;
}
.va_v_honor{
position: absolute;
bottom: 3px;
right: 0px;
width: 18px;
height: 18px;
}
}
}
.item-main{
min-height: 60px;
margin-left: 60px;
color: #393939;
h4{
font-size: 12px;
line-height: 1;
margin-bottom: 7px;
font-weight: normal;
color: #999;
i{
font-style: normal;
color: #aaa;
margin: 0 5px;
}
}
}
}
}
二:浏览文章时隐藏header
并显示标题
浏览文章时隐藏
header
并显示标题1.直接上代码
我们要在header.php
中显示我们的标题,将header
文件中网站logo
和链接的代码块换成下面的:结构如下:
|<!-- post title -->
这里是显示标题的
|<div class="above-nav">
|------|<!-- 网站 logo -->
|------|<!-- 链接 -->
|</div>
<!-- post title -->
<?php if ($this->is('post')): ?>
<div class="top-bar-title post_no" id="post_top_title"><?php $this->title(); ?></div>
<?php endif; ?>
<div class="above-nav">
<!-- 网站 logo -->
<h1 class="logo j-hover-music" title="<?php $this->options->title(); ?>">
<?php $this->options->title(); ?>
<a href="<?php $this->options->siteUrl(); ?>">
<?php if ($this->options->JLogo) : ?>
<img src="<?php $this->options->JLogo() ?>" />
<?php else : ?>
<img src="https://cdn.jsdelivr.net/npm/typecho_joe_theme@4.3.5/assets/img/logo.png" />
<?php endif; ?>
</a>
</h1>
<!-- 链接 -->
<nav class="nav j-nav">
<a class="link <?php if ($this->is('index')) : ?>active<?php endif; ?>" href="<?php $this->options->siteUrl(); ?>">首页</a>
<?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
<!-- 循环4个之前的 -->
<?php $i = 0; ?>
<?php while ($pages->next()) : ?>
<?php $i++; ?>
<?php if ($i <= $this->options->JNavMaxNum) : ?>
<a class="link <?php if ($this->is('page', $pages->slug)) : ?>active<?php endif; ?>" href="<?php $pages->permalink(); ?>"><?php $pages->title(); ?></a>
<?php endif; ?>
<?php endwhile; ?>
<!-- 超过4个则显示更多 -->
<?php if ($i > $this->options->JNavMaxNum) : ?>
<div class="link drops">
<div class="j-drop">
<span>更多</span>
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M825.728 390.144L521.056 702.336 217.152 390.144c-16.576-16.576-43.744-16.576-60.32 0s-16.576 43.744 0 60.32L483.36 778.496c10.56 9.056 23.392 19.616 36.96 17.344 13.568 3.008 27.904-6.784 38.464-17.344L886.08 450.464a42.816 42.816 0 0 0 0-60.32 42.784 42.784 0 0 0-60.352 0z"></path>
</svg>
</div>
<nav class="j-dropdown">
<?php $current = 0 ?>
<?php while ($pages->next()) : ?>
<?php $current++; ?>
<?php if ($current > $this->options->JNavMaxNum) : ?>
<a class="<?php if ($this->is('page', $pages->slug)) : ?>active<?php endif; ?>" href="<?php $pages->permalink(); ?>"><?php $pages->title(); ?></a>
<?php endif; ?>
<?php endwhile; ?>
</nav>
</div>
<?php endif; ?>
</nav>
</div>
2. 添加js
/*顶部自动隐藏*/
$(document).ready(function() {
if(screen.width < 768) return
let header = $("header.j-header")
let above_nav = $(".row.above .above-nav")
let below = $(".row.below")
let post_title = $("#post_top_title")
let navOffw = header.width();
if (post_title.length > 0 && navOffw > 750) {
$(window).scroll(function() {
let scrollPos = $(window).scrollTop(); //得到滚动的距离
if (scrollPos > 400 && scrollPos < 500) return // 防止nav出现触发再次scroll
if (scrollPos >= 450) { //比较判断是否fixed
below.slideUp()
post_title.removeClass("post_no");
above_nav.addClass("post_no")
} else {
below.slideDown()
post_title.addClass("post_no");
above_nav.removeClass("post_no")
}
})
}
})
3.添加样式
.above-nav {
display: flex;
width: 100%;
}
.top-bar-title {
font-size: 16px;
line-height: 50px;
font-weight: 600;
animation: hideIndex 0.6s;
-moz-animation: hideIndex 0.6s;
-webkit-animation: hideIndex 0.6s;
-o-animation: hideIndex 0.6s;
}
.post_no {
display: none !important;
}
三: 添加author page
三: 添加author page
为每位作者添加一个独立的author page
废话不多说,直接
1.上代码
在joe主题同级目录下添加一个author.php
,代码在下面
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php
if (empty($this->uid)) {
$str = $_SERVER["REQUEST_URI"];
if (preg_match('/\d+/', $str, $arr)) {
$id = $arr[0];
if ($this->user->hasLogin() && $this->user->uid == $id) {
$lock = 0;
} else {
$lock = 1;
}
$info = userok($id);
$this->user->uid = $id;
$this->user->screenName = $info['screenName'];
$this->user->mail = $info['mail'];
$this->user->group = $info['group'];
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php $this->need('public/head.php'); ?>
</head>
<body>
<?php $this->options->JCustomBodyStart() ?>
<section id="joe">
<!-- 头部 -->
<?php $this->need('public/header.php'); ?>
<!-- 主体 -->
<section class="container j-index j-author">
<section class="j-adaption">
<div class="col-md-12">
<!--创作中心s-->
<header class="page-header">
<div class="author-header-meta">
<?php $email = $this->user->mail;
$imgUrl = ParseAvatar($email, 1);
echo '<img src="' . $imgUrl . '" class="avatar avatar-120 photo" height="50" width="50">'; ?>
<div class="name"><?php $this->user->screenName(); ?></div>
<div class="desc"><?php autvip($this->user->mail); ?></div>
<div class="desc">
<svg t="1608204283958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3189" width="1em" height="1em"><path d="M826.46929 339.76682s19.698076 58.094327-94.090811 133.586954c0 0 55.19461-291.571526-302.170491-473.353774 0 0 99.090323 228.177717-108.089445 377.063177 0 0-78.792305-102.390001-226.677863-117.488526 0 0 61.394004 95.290694 56.394492 188.081633s-80.292159 196.880773-38.896201 328.567913c34.19666 108.789376 116.588614 214.879016 274.373206 247.775803-21.597891-54.894639-32.396836-112.589005 5.399472-261.774436 0 0 1.399863 123.587931 226.177913 255.275071 216.978811-57.494385 447.656284-264.574163 207.579728-677.733815z" p-id="3190" fill="#7a7b7c"></path></svg>
<?php echo allviewnum($this->user->uid); ?>
</div>
</div>
</header>
</div>
<section class="main <?php $this->options->JListType() ?>">
<div class="row author-page">
<div class="col-md-12">
<!--创作中心e-->
<section class="j-index-article article">
<!-- 列表 -->
<?php $this->need('component/index.list.php'); ?>
</section>
</div>
</section>
</section>
</section>
<!-- 尾部 -->
<?php $this->need('public/footer.php'); ?>
</section>
<!-- 配置文件 -->
<?php $this->need('public/config.php'); ?>
</body>
</html>
2. 添加辅助函数
functions.php
或者core.php
// 会员页判断是否会员id
function userok($id){
$db = Typecho_Db::get();
$userinfo=$db->fetchRow($db->select()->from ('table.users')->where ('table.users.uid=?',$id));
return $userinfo;
}
/**输出作者人气*/
function allviewnum($id){
$db = Typecho_Db::get();
$postnum=$db->fetchRow($db->select(array('Sum(views)'=>'allviewnum'))->from ('table.contents')->where ('table.contents.authorId=?',$id)->where('table.contents.type=?', 'post'));
$postnum = $postnum['allviewnum'];
if($postnum=='0')
{
return '暂无访问';
}
elseif ($postnum>=10000) {
return ' 1万+访问';
}
elseif ($postnum<10000 && $postnum>5000) {
return ' 5K+访问';
}
else{
return ' '.$postnum.' °c 访问';
}
}
3. 添加一点样式
.j-author{
.author-header-meta{
text-align: center;
margin: 50px 0;
.avatar { border-radius: 100%; margin-top: -10px; margin-bottom: 10px; position: relative; }
.name { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.desc { color: var(--routine); font-size: 14px; margin-bottom: 10px; }
}
}
四: 移动样式下添加二级分类
四: 移动样式下添加二级分类
joe 主题在移动样式下,目录分类居然不支持多级,所有分类并排成一列,让人欲哭无泪(主要是分类太多了),于是决定做个小手术,支持一下二级分类。
1.代码
修改header.php
相关j-sidebar-xs
中的部分,主要是替换下面这一部分
<div class="card">
<div class="title">类目归类</div>
<ul class="category-nav">
<?php while ($categorys->next()) : ?>
<?php $children = $categorys->getAllChildren($categorys->mid); ?>
<?php if ($categorys->levels === 0): ?>
<?php if (empty($children)): ?>
<li class='<?php if ($this->is('category', $categorys->slug)) _e("active"); ?>'>
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path>
</svg>
<a href="<?php $categorys->permalink(); ?>"><?php $categorys->name(); ?></a>
</li>
<?php else: ?>
<li class='<?php if ($this->is('category', $categorys->slug)) _e("active"); ?>'>
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path>
</svg>
<a href="<?php $categorys->permalink(); ?>"><?php $categorys->name(); ?>
<span><i class="icon iconfont icon-Chevronrighticon text-right"></i><i class="icon iconfont icon-Chevrondownicon text-down"></i></span>
</a>
<ul>
<?php foreach ($children as $mid):?>
<?php $child = $categorys->getCategory($mid); ?>
<li <?php if($this->is('category', $child['slug'])): ?> class="active"<?php endif; ?>>
<a href="<?php echo $child['permalink'] ?>" title="<?php echo $child['name']; ?>"><?php echo $child['name']; ?></a>
</li>
<?php endforeach; ?>
</ul>
</li>
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
</ul>
</div>
2. 添加js
控制
$('.j-sidebar-xs .item.category ul li a').unbind().bind('click',function (ev) {
let c = $(this);
c.parent().siblings(".active").toggleClass("active")
if(c.next().is("ul") && c.parent().toggleClass("active") && ev.preventDefault()) return false;
})
3. 添加css
以下为css
样式
.item.category{
ul.category-nav li ul{
display: none;
padding-left: 2.5em;
opacity: 0;
height: 0;
overflow: auto;
-webkit-transition: all .2s ease-in-out 0s;
transition: all .2s ease-in-out 0s;
li:last-child{
border-bottom: none;
}
}
ul.category-nav li a {
span{
float: right;
}
.text-down{
display: none;
}
}
ul.category-nav li.active {
ul {
display: block;
opacity: 1;
height: auto;
}
a .text-right{
display: none;
}
a .text-down{
display: block;
}
}
}
.j-sidebar-xs .content .item .card ul li {
display: block; <!--将原来的flex改为block-->
}
声明
本插件使用到的所有图片均来自互联网,版权归原作者所有。
经本人测试可以正常使用该插件,如果你在使用中发现问题,请在github里提交issue或者本文下直接留言,我看到后会第一时间回复。
作者:即刻学长
原文链接:https://geekscholar.net/
版权声明:文章转载已注明来源,如有侵权请联系博主删除!