Akina For Typecho主题修改记录分享
Akina For Typecho主题修改记录分享
目的地-Destination
发布于 2023-10-12 15:48:00
发布于 2023-10-12 15:48:00
文章被收录于专栏：目的地-Destination
前序说明
大多数博主，基本都换过各种类型的博客程序，WordPress、Typecho、hexo、Z-Blog等等太多了，最后选择Typecho，就是因为小巧不臃肿。本人一共使用过两款：Cactus来自仙岛驿站和Akina来自子虚之人。
两款其实都很喜欢，只不过仙人掌主题是纯黑风格，时间久了，眼睛有点花了。所以搜寻了很久，找到了Akina的typecho移植版，风格比较清爽，所以目前在用的就是这款主题了。
另外大多数博主，都很喜欢折腾自己的站，修修改改，添加一些自己喜欢的或者需要的功能。正好一直有一些博友来经常来询问，修改了哪些，怎么修改的，之前也发布过一些文章，但没有专门整理汇总，又因为是陆陆续续的修改，前后有一段时间了，我自己也很难想起来具体修改了哪些。所以就靠着博友的提问，持续更新此文档！
主题魔改记录
(一)站内图标
站内所有的图标，均来自iconfont-阿里巴巴矢量图标库，使用方法很简单，具体可以看官方文档。
(二)游客曾经留下过信息，再次访问时，会显示欢迎字样，点击名称可进入访客页面
1.打开编辑主题目录下的index.php文件，搜索注释行“简介”的位置，将下方代码替换为：
<div class="header-info">
<p>
<?php if($this->user->hasLogin()): ?>
欢迎回来「<a href="<?php $this->options ->siteUrl(); ?>visitor.html" target="_blank"><?php echo $this->user->screenName(); ?></a>」
<?php else : ?>
<?php if($this->remember('author',true)): ?>
欢迎回来「<a href="<?php $this->options ->siteUrl(); ?>visitor.html" target="_blank"><?php echo $this->remember('author',true); ?></a>」
<?php else : ?>
~你好~
<?php endif; ?>
<?php endif; ?>
</p>
<p><?php $this->options->headerinfo() ?></p>
</div>2.访客页面，其实可以自己随意设计一个单页，想要放什么，就放什么。
先去网站模板目录，创建一个html文件，添加自己设计的页面代码，也可以使用我的。
然后后台创建单页，选择自己创建的单页模板，
最后修改上面代码中‘visitor.html’为你自己的设置的单页名称。
<?php
/**
* visitor
*
* @package custom
*/
require_once 'other/UA.php';
$this->need('header.php');
?>
<!-- 访客中心 -->
<div class="blank"></div>
<div class="headertop"></div>
<?php
$bgImgUrl = '';
if ( $this->fields->radioPostImg != 'none' && $this->fields->radioPostImg != null ) {
switch ( $this->fields->radioPostImg ) {
case 'custom':
$bgImgUrl = $this->fields->thumbnail;
break;
case 'random':
$bgImgUrl = theurl.'images/postbg/'.mt_rand(1,3).'.jpg';
break;
}
echo('
<div class="pattern-center">
<div class="pattern-attachment-img" style="background-image: url('.$bgImgUrl.')"></div>
<header class="pattern-header">
<h1 class="entry-title">'.GetHitokoto().'</h1>
</header>
</div>
');
}
?>
<!-- 透明导航栏后调整间距 -->
<?php if (strlen($bgImgUrl) <= 4 && !empty($this->options->menu) && in_array('transparent', $this->options->menu) ): ?>
<style>
.site-content {
padding: 80px 0 0;
}
@media (max-width: 860px){
.site-content {
padding: 50px 0 0;
}
}
</style>
<?php endif ?>
<div id="content" class="site-content">
<!--因为上面有随机图+一言，这里显示标题-->
<span class="linkss-title">
<?php if($this->user->hasLogin()): ?>
<?php
$userMail = $this->user->mail;
$userName = $this->user->screenName;
$commentNum = commentNumByMail($userMail);
?>
<?php else : ?>
<?php if($this->remember('author',true)): ?>
<?php
$userMail = $this->remember('mail',true);
$userName = $this->remember('author',true);
$commentNum = commentNumByMail($userMail);
?>
<?php endif; ?>
<?php endif; ?>
哈喽，<?php echo $userName ; ?><br>✌️你已向目的地前进<?php echo $commentNum ; ?>步✌️
</span>
<article class="hentry">
<div class="entry-content">
<?php
$pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
$replacement = '<a href="$1" alt="'.$this->title.'" title="点击放大图片"><img class="aligncenter" src="$1" title="'.$this->title.'"></a>';
echo preg_replace($pattern, $replacement, $this->content);
?>
</div>
</article>
</div>
<!--近期的回复-->
<section id="comments" class="comments">
<div class="comments-main2">
<h3 id="comments-list-title">
<?php _e('您近期的回复：'); ?>
</h3>
<div id="comments-ajax">
<?php
$cu = 'https://cravatar.cn/avatar/';
$avatar = $cu . md5(strtolower($userMail)) . '.png?s=80&r=X&d=mm';
$avatar2x = $cu . md5(strtolower($userMail)) . '.png?s=160&r=X&d=mm';
?>
<ol class="comment-list">
<?php $this->widget('Widget_Comments_RecentPlus', 'pageSize=10&mail='.$userMail)->to($comments);
$ua = new UA($comments->agent);
?>
<?php while($comments->next()): ?>
<li class="comment <?php $comments->alt('comment-odd', 'comment-even');?> depth-1" id="li-<?php $comments->theId(); ?>">
<div id="<?php $comments->theId(); ?>" class="comment_body contents">
<div class="profile">
<a href="<?php $comments->url(); ?>"><img alt="<?php $comments->author(false); ?>" src="<?php echo $avatar ?>" srcset="<?php echo $avatar2x ?> 2x" class="avatar avatar-50 photo" height="50" width="50"></a>
</div>
<section class="commeta">
<div class="left">
<h4 class="author">
<a href="<?php $comments->permalink(); ?>"><?php $comments->title(); ?></a>
</h4>
</div>
<div class="right">
<div class="info">
<time datetime="<?php $comments->date('Y-m-d H:i'); ?>"><?php $comments->dateWord(); ?></time>
<span><?php echo ip2regionFull($comments->ip); ?></span>
<span><?php echo "发自" . $ua->returnTimeUa()['title'];?></span>
</div>
</div>
</section>
<div class="body">
<p>
<?php get_commentReply_at_and_url($comments->coid); ?> <!-- 评论@ -->
<?php $cos = preg_replace('#</?[p|P][^>]*>#','',$comments->content);echo $cos;?> <!-- 评论内容 -->
</p>
</div>
</div>
<!--<?php if ($comments->children){ ?>-->
<!-- 嵌套评论代码 -->
<!--<div class="children">-->
<!-- <?php $comments->threadedComments($options); ?>-->
<!--</div>-->
<!--<?php } ?>-->
</li>
<?php endwhile; ?>
</ol>
</div>
</div>
</section>
</div>
</section>
<?php $this->need('footer.php'); ?>
(三)如果游客曾经有过评论，再次访问时，左下角会显示自己的第一条Say Hi信息
这个是使用了插件，来自于Lopwon的Say Hi插件，可评论获取该插件。
(四)首页文章标题前增加文章分类显示
模板文件index.php文件，搜索‘文章下碎碎念’注释，上面有个h1标签，替换为下方代码：
<h1 class="entry-title">
<?php $this->sticky() ?> [<?php $this->category() ?>]<a href="<?php $this->permalink() ?>" target="_blank"><?php $this->title() ?></a>
</h1>(五)如何让文章显示用户评论时所用的设备是什么(UA.php文件)
见历史文章-> 如何让文章显示用户评论时所用的设备是什么
(六)增加说说/时光机页面
去网站模板目录，创建一个php文件，命名为：talk.php，也可自定义名称。代码如下：
<?php
/**
* talk
*
* @package custom
*/
$this->need('header.php');
?>
<!-- 说说 -->
<div class="blank"></div>
<div class="headertop"></div>
<?php
$bgImgUrl = '';
if ( $this->fields->radioPostImg != 'none' && $this->fields->radioPostImg != null ) {
switch ( $this->fields->radioPostImg ) {
case 'custom':
$bgImgUrl = $this->fields->thumbnail;
break;
case 'random':
$bgImgUrl = theurl.'images/postbg/'.mt_rand(1,3).'.jpg';
break;
}
echo('
<div class="pattern-center">
<div class="pattern-attachment-img" style="background-image: url('.$bgImgUrl.')"></div>
<header class="pattern-header">
<h1 class="entry-title">'.GetHitokoto().'</h1>
</header>
</div>
');
}
?>
<!-- 透明导航栏后调整间距 -->
<?php if (strlen($bgImgUrl) <= 4 && !empty($this->options->menu) && in_array('transparent', $this->options->menu) ): ?>
<style>
.site-content {
padding: 80px 0 0;
}
@media (max-width: 860px){
.site-content {
padding: 50px 0 0;
}
}
</style>
<?php endif ?>
<div id="content" class="site-content">
<!--因为上面有随机图+一言，这里显示标题-->
<span class="linkss-title"><?php $this->title() ?></span>
<article class="hentry">
<div class="entry-content">
<?php
$pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
$replacement = '<a href="$1" alt="'.$this->title.'" title="点击放大图片"><img class="aligncenter" src="$1" title="'.$this->title.'"></a>';
echo preg_replace($pattern, $replacement, $this->content);
?>
</div>
</article>
</div>
<?php $this->need('commentsByTalk.php'); ?>
</div>
</section>
<script>
$("#comments-ajax").on('click', "a[id^='commentLikeOpt']", function() {
//$(".commentLikeOpt").click(function(){
var coid = $(this).data("coid");
var recording = $(this).attr("data-recording");
if(recording){
alert("你已经点过赞啦！感谢你的喜爱！");
return;
}
$.ajax({
url: "<?php Helper::options()->index("/getComment/dz"); ?>",
type: "POST",
data: {
coid:coid,
behavior:'dz'
},
async: true,
dataType: "json",
success: function(data) {
if (data == null) {} else {
console.log(data);
if(data.state == 'success'){
alert("点赞成功");
//修改点赞数量
$('#commentLikeSpan-'+coid).html(data.num);
//变更点赞图标样式
$('#commentLikeI-'+coid).removeAttr("class","st fa-regular fa-heart")
$('#commentLikeI-'+coid).attr("class","st fa-solid fa-heart")
//设置recording的属性值
$('#commentLikeI-'+coid).parent().attr("data-recording","1");
}
}
},
error: function(err) {}
});
})
</script>
<?php $this->need('footer.php'); ?>新建commentsByTalk.php文件，代码如下：
<?php
require_once 'other/UA.php';
?>
<?php function threadedComments($comments, $options) {
$commentClass = '';
if ($comments->authorId) {
if ($comments->authorId == $comments->ownerId) {
//如果是文章作者的评论添加 .comment-by-author 样式
$commentClass .= 'comment-by-author';
} else {
//如果是评论作者的添加 .comment-by-user 样式
$commentClass .= 'comment-by-user';
}
}
//评论层数大于0为子级，否则是父级
$commentLevelClass = $comments->_levels > 0 ? ' comment-child' : ' comment-parent';
$depth = $comments->levels +1;
//判断博主头像
if($commentClass=='comment-by-author'){
$avatar = $avatar2x = theprofile;
}else{
$email = $comments->mail;
//判断邮箱类型选取头像地址
if(preg_match('|^[1-9]\d{4,10}@qq\.com$|i',$email)){
$qqnumber = explode("@",$email);
$avatar = '//q.qlogo.cn/g?b=qq&nk=' . $qqnumber[0]. '&s=100';
$avatar2x = '//q.qlogo.cn/g?b=qq&nk=' . $qqnumber[0]. '&s=160';
}else{
$cu = 'https://cravatar.cn/avatar/';
//$cu = 'https://gravatar.loli.net/avatar/';
$avatar = $cu . md5(strtolower($comments->mail)) . '.png?s=80&r=X&d=retro';
$avatar2x = $cu . md5(strtolower($comments->mail)) . '.png?s=160&r=X&d=retro';
}
$commentClass = 'comment-by-author';
}
$ua = new UA($comments->agent);
?>
<li class="comment <?php echo $commentClass ?> <?php $comments->alt('comment-odd', 'comment-even');?> depth-<?php echo $depth ?>" id="li-<?php $comments->theId(); ?>">
<div id="<?php $comments->theId(); ?>" class="comment_body contents">
<div class="profile">
<a href="<?php $comments->url(); ?>"><img alt="<?php $comments->author(false); ?>" src="<?php echo $avatar ?>" srcset="<?php echo $avatar2x ?> 2x" class="avatar avatar-50 photo" height="50" width="50"></a>
</div>
<section class="commeta">
<div class="left">
<?php $commentApprove = commentApprove($comments, $comments->mail); ?>
<h4 class="author" title="<?php echo $commentApprove['userDesc'] ?>">
<a href="<?php $comments->url(); ?>">
<img alt="<?php $comments->author(false); ?>" src="<?php echo $avatar ?>" srcset="<?php echo $avatar2x ?> 2x" class="avatar avatar-50 photo" height="50" width="50"/>
<?php $comments->author(false); ?>
<span class="isauthor" title="Author">
<span title="<?php echo $commentApprove['userDesc'] ?>" style="background:<?php echo $commentApprove['bgColor'] ?>;"><?php echo $commentApprove['userLevel'] ?></span>
<?php if ($commentApprove['isAuthor'] == 1){ ?>
<i title="<?php echo $commentApprove['userDesc'] ?>" class="iconfont"></i>
<?php } ?>
</span>
</a>
</h4>
<div class="info">
<time datetime="<?php $comments->date('Y-m-d H:i'); ?>"><?php $comments->dateWord(); ?></time>
<span><?php echo ip2regionFull($comments->ip); ?></span>
<span><?php echo "发自" . $ua->returnTimeUa()['title'];?></span>
</div>
</div>
<a rel='nofollow' class='comment-reply-link' href='<?php $comments->responseUrl(); ?>' onclick="return TypechoComment.reply('<?php $comments->theId(); ?>', <?php $comments->coid();?>);" aria-label='回复给<?php $comments->author(false); ?>'>回复</a>
<div class="right">
<!-- 评论点赞次数 -->
<?php
$commentLikes =commentLikesNum($comments->coid);
$commentLikesNum = $commentLikes['likes'];
$commentLikesRecording= $commentLikes['recording'];
?>
<div class="commentLike">
<a class="commentLikeOpt" id="commentLikeOpt-<?php $comments->coid(); ?>" href="javascript:;" data-coid="<?php $comments->coid() ?>" data-recording="<?php echo $commentLikesRecording; ?>">
<i id="commentLikeI-<?php $comments->coid(); ?>" class="<?php echo $commentLikesRecording?'st fa-solid fa-heart':'st fa-regular fa-heart'; ?>"></i>
<span id="commentLikeSpan-<?php $comments->coid(); ?>"><?php echo $commentLikesNum ?></span>
</a>
</div>
</div>
</section>
<div class="body">
<p>
<?php get_commentReply_at($comments->coid); ?> <!-- 评论@ -->
<?php $cos = preg_replace('#</?[p|P][^>]*>#','',$comments->content);echo $cos;?> <!-- 评论内容 -->
</p>
</div>
</div>
<?php if ($comments->children){ ?>
<!-- 嵌套评论代码 -->
<div class="children">
<?php $comments->threadedComments($options); ?>
</div>
<?php } ?>
</li>
<?php } ?>
<section id="comments" class="comments">
<!-- 隐藏评论 -->
<div class="commentwrap comments-hidden">
<div class="notification"><i class="iconfont"></i><?php $this->commentsNum(_t('添加评论'), _t('谁是沙发'), _t('%d条说说')); ?></div>
</div>
<!-- 输出评论信息 -->
<div class="comments-main">
<h3 id="comments-list-title">
发布<a class="num"> <?php $this->commentsNum('%d'); ?> </a></span>条说说<a class="num"> & </a>围观<a class="num"> <?php echo Postviews($this); ?> </a></span>次
</h3>
<div id="loading-comments"><span></span></div>
<!-- 评论内容 -->
<div id="comments-ajax">
<?php $this->comments()->to($comments); ?>
<?php $comments->listComments(); ?>
</div>
<?php if ($comments->have()): ?>
<!-- 评论翻页 -->
<nav id="comments-navi">
<?php $comments->pageNav('←','→','1','...'); ?>
</nav>
<?php endif; ?>
<!--评论框-->
<!-- 判断设置是否允许对当前文章进行评论 -->
<?php if($this->allow('comment')): ?>
<div id="respond_box">
<div id="<?php $this->respondId(); ?>" class="comment-respond">
<div class="cancel-comment-reply">
<?php $comments->cancelReply(); ?>
</div>
<!-- 输入表单开始 -->
<form action="<?php $this->commentUrl() ?>" method="post" id="commentform">
<!-- 如果当前用户已经登录 -->
<?php if($this->user->hasLogin()): ?>
<p>登录者： <a href="<?php $this->options->adminUrl(); ?>"><?php $this->user->screenName(); ?></a> <a href="<?php $this->options->logoutUrl(); ?>"title="退出">[ 退出 ] →</a></p>
<!-- 若当前用户未登录 -->
<?php else: ?>
<div class="author-updown">Welcome back , <?php $this->remember('author'); ?> <a id="toggle-comment-info">[ 修改 ] ↓</a></div>
<div id="comment-author-info">
<input type="text" name="author" id="author" class="commenttext" placeholder="Name" value="<?php $this->remember('author'); ?>" size="22" tabindex="1" placeholder="Name" />
<label for="author"></label>
<input type="text" name="mail" id="mail" class="commenttext" value="<?php $this->remember('mail'); ?>" size="22" placeholder="Email" tabindex="2" />
<label for="mail"></label>
<input type="text" name="url" id="url" class="commenttext" value="<?php $this->remember('url'); ?>" size="22"placeholder="http://" tabindex="3" />
<label for="url"></label>
</div>
<div class="clear"></div>
<?php endif; ?>
<p><textarea name="text" id="comment" class="OwO-textarea" placeholder="come on baby !" tabindex="4" cols="50" rows="5"></textarea></p>
<div class="com-footer">
<input class="submit" name="submit" type="submit" id="submit" tabindex="5" value="发表评论" />
<input type='hidden' name='comment_post_ID' value='58' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
<!--表情-->
<div class="OwO"></div>
<script type="text/javascript" src="<?php echo theurl; ?>js/OwO.js" defer="defer"></script>
</div>
</form>
<?php else: ?>
<style>
.comment-reply-link {
display: none !important;
}
</style>
<section class="author-profile">
<p><i class="iconfont"></i>该文章已经关闭评论</p>
</section>
<!-- google谷歌广告插件 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3581984245653698"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block;background: none;"
data-ad-format="fluid"
data-ad-layout-key="-gr-11-g-20+e1"
data-ad-client="ca-pub-3581984245653698"
data-ad-slot="4374030093"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<?php endif; ?>
<div class="clear"></div>
</div>
</div>
</div>
</section>
<script>
//if(document.referrer.indexOf("foreverblog") != -1)
//{
//tip("欢迎从“十年之约”访问而来的小伙伴~", "1");
//}
</script>上面有个调用方法：GetHitokoto(),调用文件是fuctions.php，代码如下：
//一言
function GetHitokoto(){
$url = 'https://v1.hitokoto.cn/?encode=json';
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 6);
$response = curl_exec($ch);
if($error=curl_error($ch)){
return '隔着屏幕轻易产生感情的你，肯定很孤独吧。';
}
curl_close($ch);
$array_data = json_decode($response,true);
$Emu_content = $array_data['hitokoto'].' ——《'.$array_data['from'].'》';
return $Emu_content;
}最后，登录后台，创建单页，选择talk模板，然后网站调用该单页网址即可。
(七)让评论区域默认展开显示
主题模板下js文件夹下/usr/themes/Akina/js,打开global.js文件，大约309行左右：
// Show & hide comments
// 修改为默认打开评论
// $('.comments-hidden').show();
// $('.comments-main').hide();
$('.comments-hidden').hide();
$('.comments-main').show();
$('.comments-hidden').click(function(){
$('.comments-main').slideDown(500);
$('.comments-hidden').hide();
});
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-09-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
