目的地-Destination目的地-Destination
·烂笔头Web端 21 3898

Akina For Typecho主题修改记录分享

## 前序说明

大多数博主，基本都换过各种类型的博客程序，WordPress、Typecho、hexo、Z-Blog等等太多了，最后选择Typecho，就是因为小巧不臃肿。本人一共使用过两款：Cactus来自仙岛驿站和Akina来自子虚之人。

特别说明：子虚之人是typecho移植版作者，原作者是WordPress版FUIDESIGN

两款其实都很喜欢，只不过仙人掌主题是纯黑风格，时间久了，眼睛有点花了。所以搜寻了很久，找到了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'); ?>
![iShot_2023-09-18_09.56.31.png][7]

(三)如果游客曾经有过评论，再次访问时，左下角会显示自己的第一条Say Hi信息 这个是使用了插件，来自于Lopwon的Say Hi插件，可评论获取该插件。

![iShot_2023-09-18_10.06.10.png][8]

(四)首页文章标题前增加文章分类显示 模板文件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文件)** 见历史文章-> [如何让文章显示用户评论时所用的设备是什么][9]

**(六)增加说说/时光机页面** 去网站模板目录，创建一个php文件，命名为：talk.php，也可自定义名称。代码如下： ``` need('header.php'); ?>
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('

'.GetHitokoto().'

'); } ?> options->menu) && in_array('transparent', $this->options->menu) ): ?>
title() ?> 
<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>
need('commentsByTalk.php'); ?> need('footer.php'); ?> ``` 新建commentsByTalk.php文件，代码如下： ``` 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);

?>

  • <?php $comments->author(false); ?>
    mail); ?>

    <?php $comments->author(false); ?> author(false); ?>

    dateWord(); ?> ip); ?> returnTimeUa()['title'];?>
    回复

    			<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 } ?>
    commentsNum(_t('添加评论'), _t('谁是沙发'), _t('%d条说说')); ?>

    发布 commentsNum('%d'); ?> 条说说 & 围观 次

    comments()->to($comments); ?> listComments(); ?>
    have()): ?> pageNav('←','→','1','...'); ?> allow('comment')): ?>
    cancelReply(); ?>
    user->hasLogin()): ?>

    登录者： user->screenName(); ?>  [ 退出 ] →

    Welcome back , remember('author'); ?> [ 修改 ] ↓
    					<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">&#xe61a;</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>
    ``` 上面有个调用方法：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();
    }); 
}
    • #Typecho #主题模板 #Akina #魔改记录
    19 个赞
    本文最后更新于 2023年9月20日

    评论 (21)

    暂无评论，快来抢沙发吧！

    发表评论

    支持 Markdown 语法