文章61
标签16
分类4

Nexmoe修改记录

就是些随便改的东西啦

前言

自完成折影大佬的 Nexmoe 主题的部分内容移植后我自己又修改了一些,似乎是效果还不错的缘故,已经有好几位博主表示想要了,故今天把整个修改的内容以及代码公布出来,稍后会贴上在 Github 上的完整开源分支。

[tip type="info" title="一些建议"]
个人建议不要直接下载我修改的完整版本,因为其中的 BUG、冗余代码、以及彻底写死的调用可能会影响到您的正常体验,所以建议您参考本文在 Nexmoe 原版的基础上进行修改。
[/tip]

主要内容

首页方面进行了如下修改

  1. 题图 lazyload 以及提前占位
  2. 标题的黑色遮罩
  3. 对文章内容的标签显示进行了美化
  4. 相对好一点的自适应布局
  5. 侧边栏独立页面的图标更改
  6. 使用 png 图标替换 mdui 的字体文件
  7. 说说功能(移植)

独立页面进行了如下修改

  1. 新增了日记功能
  2. 对友链的显示方式进行了优化(但远不及 Hexo 版本)
  3. 文章归档页面的一些细节修复

评论区方面进行了如下修改

  1. 修复了移动端的一些显示问题
  2. 使用 png 图标替换 mdui 的字体文件

文章页面进行了如下修改

  1. 增加了分页,相册功能(但本功能移植自 CATUI 主题,所以并不会开源,有需要可以尝试联系折影大佬购买)
  2. 文字大小、一些图标的修改

其余的都是些小细节的改动了,有些甚至是写了个“全新的 BUG”,因为一开始没打算弄好了发出来,所以很多地方的调用都是写死的。

首页

工程量最大的其实是说说功能,所以我们第一个就直接写说说功能了。
首先进到 functions.php 文件内,在主题自定义字段

function themeFields($layout) {
    
    }

这里添加这样一段内容(其它的不要动,另起一行添加)

$type=new Typecho_Widget_Helper_Form_Element_Select('type',array('0'=>'文章','1'=>'说说'),'0','文章类型');
    $layout->addItem($type);

这样就会在文章底下的自定义字段中出现选择文章/说说的选项了。(默认是文章)

然后进到 Index.php 内,通过对选择的文章类型进行判断来输出两个不同的排版样式,具体实现如下

<?php while ($this->next()): ?>
    
    <?php if ($this->fields->type == '1'): ?> 
         <div class="nexmoe-post">
            <div class="typebox thebg" > 
           <h2 style="margin-bottom: 0px;"> 安和说:</h2>
              <article>
                  <span style="font-size:17px;">
           <?php $this->content('</span>'); ?>
                </article>
              
        <hr><div class="typeafter"> <div class="avatar"> <img src="<?php $this->options->logoUrl(); ?>" alt="安和" width="50" height="50"> </div> <div class="col-md-11 col-xs-10"> <h4 class="type-title"><a href="<?php $this->permalink() ?>" data-pjax=""><?php $this->title() ?></a></h4> 
              
              
              <div class="saying-info"><div class="nexmoe-post-meta">
                        <a><i class="nexmoefont icon-calendar-fill"></i><?php $this->date('Y年n月d日'); ?></a>
                       <a><i class="nexmoefont icon-areachart"></i><?php artCount($this->cid); ?> 字</a>
    </div>  </div>
              </div>
              </div>
              </div>
              </div>
           <br /><br />
    <?php else: ?>
                                <div class="nexmoe-post">
                    <a href="<?php $this->permalink() ?>">
                    
                        <div class="nexmoe-post-cover mdui-ripple" style="padding-bottom:calc(100% * (<?php echo $this->fields->width ?> / <?php echo $this->fields->height ?>)) !important;padding-bottom:<?php echo $this->options->padding ?>%;"> 
                            <?php if ($this->fields->Cover) { ?>
                                <img class="lazyload"  data-src="<?php echo $this->fields->Cover ?>">
                            <?php
            } else { ?>
                                <img class="lazyload" data-src="<?php echo $this->options->background ?>"src="">
                            <?php
            } ?>
                            <h1><?php $this->title() ?></h1>
                        </div>
                    </a>
                <div class="nexmoe-post-meta">
                    <a><i class="nexmoefont icon-calendar-fill"></i><?php $this->date('Y年n月d日'); ?></a>
                    <a><i class="nexmoefont icon-areachart"></i><?php artCount($this->cid); ?> 字</a>
                    
                    <a class=enone><i class="nexmoefont icon-time-circle-fill"></i>约 <?php echo art_time($this->cid); ?> 分钟</a>
                    <span class="cnone nexmoefont">
                    <?php $this->category('</span>'); ?>
                  
                </div>
               
                    <article>
                        <?php $this->content(''); ?>
                               <hr style="FILTER:alpha(opacity=0,finishopacity=100,style=3)" width="95%" size="3" color="#F5F5F5" align="left">
                    </article>
                    
                </div>
         
    <?php endif; ?>
    
    
    
                <?php
    endwhile; ?>

替换的便是 <?php while ($this->next()): ?> 到 <?php endwhile; ?> 中间的内容。

这样一来就可以实现说说功能了,但还没有给它写样式,于是直接在 head.php 或者 index.php 加个 style 标签写上去(可以新建个 css 文件,但我写的时候图方便就直接写在 php 文件内了)

<style>
 .typebox h2::before {
    content:"# ";
    color:rgba(255,78,106,.85);
    font-weight:bold;
}
.typebox {
    box-shadow:0px 1px 6px 4px rgba(48, 48, 48, 0.12);
    padding:15px;
    margin-bottom:40px;
    border-radius:15px;
}
.typebox hr {
    margin-left:-15px;
    margin-right:-15px;
    height:0;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    overflow:visible;
    margin-bottom:20px;
    border:0;
    border-top-color:currentcolor;
    border-top-style:none;
    border-top-width:0px;
    border-top:1px solid #eee;
}
.typeafter {
    margin-right:-15px;
    margin-left:-15px;
    margin-top:-10px;
}
.avatar img {
    border-radius:1000px;
    width:70px;
    height:70px;
}
.avatar {
    float:left;
    position:relative;
    min-height:1px;
}
.type-title {
    font-size:20.5px;
    margin-top:12px;
    margin-bottom:10px;
    font-family:inherit;
    font-weight:500;
    line-height:1.1;
    color:inherit;
}
.type-title a {
    color:black
}
</style>

然后说说功能就完成啦,开始下一部分

标签&布局美化

直接粘贴以下样式到 head.php 即可

<style>
#nexmoe-header .nexmoe-widget-wrap .tagcloud {
    padding:10px;
    padding-bottom:5px
}
#nexmoe-header .nexmoe-widget-wrap .tagcloud a {
    border-radius:10px;
    padding:5px 10px;
    color:#fff;
    font-size:12px!important;
    display:inline-block;
    margin-bottom:5px
}
#nexmoe-header .nexmoe-widget-wrap .tagcloud a:before {
    content:"# "
}
#nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+1) {
    background-color:rgba(255,78,106,.15);
    color:rgba(255,78,106,.8)
}
#nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+2) {
    background-color:rgba(255,170,115,.15);
    color:#ffaa73
}
#nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+3) {
    background-color:rgba(254,212,102,.15);
    color:#fed466
}
#nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+4) {
    background-color:rgba(60,220,130,.15);
    color:#3cdc82
}
#nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+5) {
    background-color:rgba(100,220,240,.15);
    color:#64dcf0
}
#nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+6) {
    background-color:rgba(100,185,255,.15);
    color:#64b9ff
}
#nexmoe-header .nexmoe-widget-wrap .tagcloud a:nth-child(7n+7) {
    background-color:rgba(180,180,255,.15);
    color:#b4b4ff
}
#nexmoe-content .nexmoe-post .nexmoe-post-meta {
    margin:10px 0!important
}
article {
    padding:9px!important
}
#nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    border-radius:10px!important
}
#nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    border-radius:20px;
    padding:10px 18px;
    font-size:14px;
    display:inline-block;
    margin-bottom:5px;
    margin-right:10px
}
#nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+1) {
    background-color:rgba(255,78,106,.15);
    color:#ff4e6a
}
#nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+2) {
    background-color:rgba(255,118,30,.15)!important;
    color:#ff761e
}
#nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+3) {
    background-color:rgba(255,185,0,.15)!important;
    color:#ffb900
}
#nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+3) {
    background-color:rgba(255,185,0,.15)!important;
    color:#ffb900
}
#nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+4) {
    background-color:rgba(51,213,122,.15);
    color:#33d57a
}
#nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+5) {
    background-color:rgba(255,185,0,.15);
    color:#ffb900
}
#nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+6) {
    background-color:rgba(255,118,30,.15);
    color:#ff761e
}
#nexmoe-content .nexmoe-post .nexmoe-post-meta a:nth-child(7n+7) {
    background-color:rgba(255,118,30,.15);
    color:#ff761e
}
#nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    padding:10px 18px!important
}
.cnone a:nth-child(1n+1) {
    background-color:rgba(51,213,122,.15)!important;
    color:#33d57a!important
}
.fl a:nth-child(1n+1) {
    background-color:rgba(255,118,30,.15)!important;
    color:#ff761e!important
}
#nexmoe-content .nexmoe-posts .nexmoe-post {
    margin-bottom:20px!important
}
#nexmoe-content .nexmoe-post .nexmoe-post-cover h1 {
    border-radius:15px;
    background-color:rgba(1,1,1,0.26)
}
.hljs {
    display:block;
    overflow-x:auto;
    padding:.5em;
    color:#abb2bf;
    background:#282c34
}
article h2::before {
    width:90%!important
}
.nexmoe-widget-wrap {
    padding:5px
}
#nexmoe-header .nexmoe-search input {
    padding:15px!important
}
#nexmoe-header .nexmoe-social {
    padding-top:5px!important;
    padding-left:0!important;
    padding-right:0!important;
    padding-bottom:0!important
}
article pre {
    position:relative;
    border:0;
    border-radius:0;
    font-size:100%;
    font-family:Consolas
}
.cnone a::before {
    content:"\e853"
}
.fl a::before {
    content:"\e853"
}
@media only screen and (max-width:940px) {
    #nexmoe-content .nexmoe-post .nexmoe-post-cover h1 {
    font-size: 1.7rem!important;
}
thebg {
    background:radial-gradient(closest-corner circle at 100% 100%,rgba(255,255,255,0),rgba(255,255,255,1)),url(<?php echo $this->options->background ?>) no-repeat center!important
}
}@media only screen and (max-width:590px) {
    #nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    margin-right:5px!important
}
}@media only screen and (max-width:570px) {
    #nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    margin-right:3px!important
}
}@media only screen and (max-width:550px) {
    #nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    padding:10px 16px!important
}
}@media only screen and (max-width:536px) {
    #nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    padding:10px 15px!important
}
}@media only screen and (max-width:528px) {
    #nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    padding:10px 14px!important
}
}@media only screen and (max-width:520px) {
    #nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    padding:10px 13px!important
}
}@media only screen and (max-width:511px) {
    #nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    padding:10px 12px!important
}
}@media only screen and (max-width:508px) {
    #nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    padding:10px 11px!important
}
}@media only screen and (max-width:496px) {
    .cnone {
    display:none!important
}
}#nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    padding:10px 10px!important
}
}@media only screen and (max-width:488px) {
    #nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    padding:10px 9px!important
}
}@media only screen and (max-width:480px) {
    #nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    padding:10px 8px!important
}
}@media only screen and (max-width:473px) {
    #nexmoe-content .nexmoe-post .nexmoe-post-meta a {
    padding:10px 18px!important;
    margin-right:3px!important
}
@media only screen and (max-width:400px) {
    .enone {
    display:none!important;
}
</style>

但添加了样式,还没有引用新的字体文件,于是在 head.php 的 head 标签内添加 css 的引用

<link rel="stylesheet" href="$this->options->themeUrl('iconfont1.css');">

css 文件在这里

[hide]
https://lolicorn.com/usr/uploads/2021/01/iconfont1.css
[/hide]

侧边栏独立页面图标

这个就是我所说的写死了的内容,并没有调用,各位需要改成自己的链接,或者选择直接忽略这一部分。

<ul class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        <a class="<?php if($this->is('index')): ?>active <?php endif; ?>nexmoe-list-item mdui-list-item mdui-ripple" href="<?php $this->options->siteUrl(); ?>" title="回到首页">
            <i class="mdui-list-item-icon nexmoefont icon-home"></i>
            <div class="mdui-list-item-content">回到首页</div>
        </a>
<a class="<?php if($this->is('page', 'archives')): ?>active <?php endif; ?>nexmoe-list-item mdui-list-item mdui-ripple" href="/archives.html" title="文章归档"><i class="mdui-list-item-icon nexmoefont icon-container"></i><div class="mdui-list-item-content">文章归档</div></a>
           <a class="<?php if($this->is('page', 'about')): ?>active <?php endif; ?>nexmoe-list-item mdui-list-item mdui-ripple" href="/about.html" title="关于本站"><i class="mdui-list-item-icon nexmoefont icon-info-circle"></i><div class="mdui-list-item-content">关于本站</div></a>
<a class="<?php if($this->is('page', 'links')): ?>active <?php endif; ?>nexmoe-list-item mdui-list-item mdui-ripple" href="/links.html" title="友情链接"><i class="mdui-list-item-icon nexmoefont icon-unorderedlist"></i><div class="mdui-list-item-content">友情链接</div></a>

<a class="<?php if($this->is('page', 'diary')): ?>active <?php endif; ?>nexmoe-list-item mdui-list-item mdui-ripple" href="/diary.html" title="随心日记"><i class="mdui-list-item-icon nexmoefont icon-coffee"></i><div class="mdui-list-item-content">随心日记</div></a>
    </ul>

这里就是把其中的 ul 到/ul 标签内的部分进行替换,图标来源于上面的样式文件。

标题黑色遮罩

这个顺序其实乱了,在说说功能添加当中那里其实已经添加了我写的黑色遮罩样式,具体实现如下

#nexmoe-content .nexmoe-post .nexmoe-post-cover h1 {
    border-radius:15px;
    background-color:rgba(1,1,1,0.26)
}

就这样 hhh,没什么复杂的东西,如果不需要这个遮罩把这段删了就行

lazyload 以及提前占位

lazyload 没什么好说的,主要是折影大佬的线性动画的提前占位,我当时研究了几个小时才搞懂,主要就是在文章自定义字段中提前设置好题图的大小,然后在 lazyload 图片出来之前先给个元素占着,具体实现如下

$layout->addItem($math);
        $DD = new Typecho_Widget_Helper_Form_Element_Textarea('DD', NULL, NULL, '大的数字', '开启lazyload后填上这里可以预留位置');
    $layout->addItem($XD);
            $XD = new Typecho_Widget_Helper_Form_Element_Textarea('XD', NULL, NULL, '小的数字', '开启lazyload后填上这里可以预留位置');

就是右键图片,详细信息当中可以看到它的分辨率大小,不管高度还是宽度,按大小填进自定义字段当中

然后给默认的题图也弄一个,在主题的设置里加,也就是

function themeConfig($form) {
}

添加以下内容

$padding = new Typecho_Widget_Helper_Form_Element_Text('padding',NULL,'','默认题图的百分比');
    $form->addInput ($padding);

这里需要你自己把那个小的除以大的,然后换算成百分比来,比如小的是 50,大的是 100,用 50 除以 100 得到 0.5,你就写上 50 就行,或者直接写 50,不除也行,主要是影响显示效果。

然后还是跟上面一样,在输出部分的内容已经在说说部分体现出来了,这里再写一遍

<div class="nexmoe-post-cover mdui-ripple" style="padding-bottom:calc(100% * (<?php echo $this->fields->width ?> / <?php echo $this->fields->height ?>)) !important;padding-bottom:<?php echo $this->options->padding ?>%;">

然后就大功告成了,如果你没有设置题图大小的话,默认就会调用给默认题图设置的大小。

独立页面

日记

这个其实看各位自己想不想要了,我觉得用途不是很大...而且如果你的博客有开放用户注册的话也不要添加该功能。
直接在主题根目录里创建一个新文件,命名为 diary.php ,然后在里面粘贴以下代码

<?php 
/**
 * 日记
 * 
 * @package custom 
 * 
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('layout/_partial/head.php'); 
?>
<link rel="stylesheet" href="https://cdn.staticfile.org/mdui/0.4.3/css/mdui.min.css">


<style>#nexmoe-header .nexmoe-social {
    padding: 0px;
}</style>
        <link rel="stylesheet" href="<?php echo $this->options->highlight_css ?>">
        <link rel="stylesheet" href="<?php echo $this->options->fancybox_css ?>">
<body class="mdui-drawer-body-left">
    <?php $this->need('layout/_partial/background.php'); ?>
  <div id="nexmoe-header">
      <?php $this->need('layout/_partial/header.php'); ?>
  </div>
  <div id="nexmoe-content">
    <div class="nexmoe-primary">
            <div id="comments">

                <?php $this->need('comments-diary.php'); ?>
             
            </div>
        </div>
        
        
    </div>
  </div>
     <script src="<?php echo $this->options->jquery_js ?>"></script>
  <?php $this->need('layout/_partial/after-footer.php'); ?>


<?php if (!empty($this->options->function) && in_array('fancybox', $this->options->function)): ?>
<script src="<?php echo $this->options->fancybox_js ?>"></script>
<?php endif; ?>
<?php if (!empty($this->options->function) && in_array('enableMathjax', $this->options->function)): ?>
    <?php if ($this->fields->math != "No"): ?>
        <script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});</script>'
        <script type="text/javascript" src="https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <?php endif; ?>
<?php endif; ?>
<?php if (empty($this->options->function) || !in_array('enableMathjax', $this->options->function)): ?>
    <?php if ($this->fields->math == "Yes"): ?>
        <script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});</script>'
        <script type="text/javascript" src="https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <?php endif; ?>
<?php endif; ?>

<script src="<?php echo $this->options->highlight_js ?>"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>

</html>

然后可以看到其中有一个对 comments-diary.php 的调用,目前原版当中并没有这个文件,所以我们在根目录新建一个 comments-diary.php ,然后添加以下内容

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
                    <style>
    li {list-style-type:none;}article ul{padding-left: 0px!important;}
    article li {
        padding: 5px!important;
    }
    article p {
      font-size:18px;
      margin: 10px 0;
    }
    .typebox h2::before{content:"# ";color:rgba(255,78,106,.85);font-weight:bold;}.typebox{box-shadow:0px 1px 6px 4px rgba(48, 48, 48, 0.12);padding:15px;margin-bottom:40px;border-radius:15px;}.typebox hr{margin-left:-15px;margin-right:-15px;height:0;-webkit-box-sizing:content-box;box-sizing:content-box;overflow:visible;margin-bottom:20px;border:0;border-top-color:currentcolor;border-top-style:none;border-top-width:0px;border-top:1px solid #eee;}.typeafter{margin-right:-15px;margin-left:-15px;margin-top:-10px;}.avatar img{border-radius:1000px;width:70px;height:70px;}.avatar{float:left;position:relative;min-height:1px;padding-right:15px;padding-left:15px;}.type-title{font-size:20.5px;margin-top:12px;margin-bottom:10px;font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}.type-title a{color:black}}
    
              </style>
    <?php
    $textarea = Helper::options()->commentsHTMLTagAllowed;
    function threadedComments($comments, $options) {
        $commentClass = '站外';
        if ($comments->authorId) {
            if($comments->authorId == $comments->ownerId) {
                $commentClass = '作者';
            }elseif($comments->authorId == 1){
                $commentClass = '站长';
            }else{
                $commentClass = '站内';
            }
        }
        $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent';
        $depth = $comments->levels +1;
        if ($comments->url) {
            $author = '<a href="'.$comments->url.'"target="_blank" rel="external nofollow" tooltip="'.$comments->author.'">'.$comments->author.'</a>';
        } else {
            $author = $comments->author;
        }
    ?>
    <li id="li-<?php $comments->theId(); ?>" class="comment-body<?php
    if ($depth > 1 && $depth < 3) {
        echo ' comment-child ';
        $comments->levelsAlt('comment-level-odd', ' comment-level-even');
    }
    else if( $depth > 2){
        echo ' comment-child2';
        $comments->levelsAlt(' comment-level-odd', ' comment-level-even');
    }
    else {
        echo ' comment-parent';
    }
    $comments->alt(' comment-odd', ' comment-even');
    ?>">
        <div id="<?php $comments->theId(); ?>">
             <?php
                $host = '//avatar.dawnlab.me';
                $url = '/gravatar/';
                $size = '100';
                $rating = Helper::options()->commentsAvatarRating;
                $hash = md5(strtolower($comments->mail));
                $email = strtolower($comments->mail);
                $sjtx = Typecho_Widget::widget('Widget_Options')->motx;
                $qq = str_replace('@qq.com','',$email);
                if(strstr($email,"qq.com") && is_numeric($qq)){
                  $avatar = '//avatar.dawnlab.me/qq/'.$qq;
                }else{
                  $avatar = $host.$url.$hash.'?s='.$size.'&r='.$rating.'&d='.$sjtx;
                }
            ?>
            
     <div class="nexmoe-post">
            <div class="typebox" > 
           <h2 style="margin-bottom: 0px;"> 安和说:</h2>
              <article>
                               
                                          <?php 
                comment_at($comments->coid);
                $cos = preg_replace('#\@\((.*?)\)#','<img src="//cdn.lolicorn.com/usr/themes/catui/newpaopao/$1.png" class="biaoqing">',$comments->content);
                $cos1 = preg_replace('#<p>#','',$cos);
                $cos2 = preg_replace('#</p>#','',$cos1);
                echo $cos2;
                ?>
                                
    
               
                </article>
     <hr>
    
        <div class="typeafter"> <div class="avatar"> <img src="<?php $this->options->logoUrl();?>" alt="安和" width="65" height="65"> </div> <div class="col-md-11 col-xs-10"> <h4 class="type-title">安和の碎碎念</h4> 
              
              
              <div class="saying-info"><div class="nexmoe-post-meta">
                        <a><i class="nexmoefont icon-calendar-fill "></i><?php $comments->date('Y年n月j日'); ?></a>
                <span class="nexmoefont fl"><a>碎碎念</a></span>
                </div>  </div>
    
                </div>
            </div>
        </div>
        <?php if ($comments->children) { ?>
            <div class="comment-children">
                <?php $comments->threadedComments($options); ?>
            </div>
        <?php } ?>
    </li>
    <?php } ?>
    
    
    <div class="comment">
        
        <?php $this->comments()->to($comments); ?>
        <?php if($this->allow('comment')): ?>
        <div class="comment-respond" id="<?php $this->respondId(); ?>">
            <div class="cancel-comment-reply" data-no-instant>
            <?php $comments->cancelReply(); ?>
            </div>
                            <?php if($this->user->hasLogin()):?>
            <form class="comment-form"  method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
                <textarea name="text" id="textarea" placeholder='允许使用的HTML标签:<?php echo $textarea; ?>'><?php $this->remember('text'); ?></textarea>
                <div class="comment-form-tab">
                    <a class="mdui-ripple icon icon-emotsmile" onclick="get_sider_catui_item_fixed('OwO');"></a>
                    <button class="mdui-ripple" type="submit" id="comment-btn"><img style="height:20px; width:32px;" src="https://cdn.lolicorn.com/plane.png">send</button>
                </div>
                <?php if($this->user->hasLogin()): ?>
                <?php else: ?>
                <input type="text" name="author" id="author" class="text" placeholder="称呼" value="<?php $this->remember('author'); ?>">
                
                <?php if ($this->options->commentsRequireMail): ?>
                <input type="email" name="mail" id="mail" class="text" placeholder="Email" value="<?php $this->remember('mail'); ?>">
                <?php endif; ?>
                
                <?php if ($this->options->commentsRequireURL): ?>
                <input type="url" name="url" id="url" class="text" placeholder="http://" value="<?php $this->remember('url'); ?>">
                <?php endif; ?>
                <?php endif;?>
                <?php endif; ?>
            </form>
        </div>
        
        <?php else: ?>
        <h1><?php _e('评论已关闭'); ?></h1>
        <?php endif; ?>
        <?php $this->comments()->to($comments); ?>
        <?php if ($comments->have()): ?>
        
        <?php $comments->listComments(); ?>
    </div>
        <?php $comments->pageNav('<', '>', 2, '...', array('wrapTag' => 'nav', 'wrapClass' => 'nexmoe-page-nav', 'itemTag' => '', 'textTag' => 'span', 'currentClass' => 'page-number current', 'prevClass' => 'extend prev', 'nextClass' => 'extend next',)); ?>
        
        <?php endif; ?>
    </div><!-- .comment -->
    
    <script>
    (function () {
        window.TypechoComment = {
            dom : function (id) {
                return document.getElementById(id);
            },
            create : function (tag, attr) {
                var el = document.createElement(tag);
                for (var key in attr) {
                    el.setAttribute(key, attr[key]);
                }
                return el;
            },
            reply : function (cid, coid) {
                var comment = this.dom(cid), parent = comment.parentNode,
                    response = this.dom('<?php echo $this->respondId(); ?>'),
                    input = this.dom('comment-parent'),
                    form = 'form' == response.tagName ? response : response.getElementsByTagName('form')[0],
                    textarea = response.getElementsByTagName('textarea')[0];
                if (null == input) {
                    input = this.create('input', {
                        'type' : 'hidden',
                        'name' : 'parent',
                        'id'   : 'comment-parent'
                    });
                    form.appendChild(input);
                }
                input.setAttribute('value', coid);
                if (null == this.dom('comment-form-place-holder')) {
                    var holder = this.create('div', {
                        'id' : 'comment-form-place-holder'
                    });
                    response.parentNode.insertBefore(holder, response);
                }
                comment.appendChild(response);
                this.dom('cancel-comment-reply-link').style.display = '';
                if (null != textarea && 'text' == textarea.name 
    
    ) {
                    textarea.focus();
                }
                return false;
            },
            cancelReply : function () {
                var response = this.dom('<?php echo $this->respondId(); ?>'),
                holder = this.dom('comment-form-place-holder'),
                input = this.dom('comment-parent');
                if (null != input) {
                    input.parentNode.removeChild(input);
                }
                if (null == holder) {
                    return true;
                }
                this.dom('cancel-comment-reply-link').style.display = 'none';
                holder.parentNode.insertBefore(response, holder);
                return false;
            }
        };
    })();
    </script>
    
    <style>
    #comments .comment h1 {
        text-align:center;
        color:#7a7b7c;
        margin:35px
    }
    #comments .comment h1::before {
        margin-top:-9px;
        vertical-align:middle;
        display:inline-block
    }
    #comments .comment .comment-respond .comment-form {
        font-size:0;
        overflow:hidden;
        box-shadow:0 0 0 1px #f5f6f9;
        position:relative
    }
    #comments .comment .comment-respond .comment-form textarea {
        transition:all .35s;
        resize:none;
        border:none;
        padding:10px;
        padding-bottom:40px;
        font-size:15px;
        width:100%;
        height:100px;
        color:#5b6064;
        box-sizing:border-box
    }
    #comments .comment .comment-respond .comment-form .comment-form-tab {
        height:30px;
        position:absolute;
        right:0;
        top:69px;
        box-sizing:border-box
    }
    #comments .comment .comment-respond .comment-form .comment-form-tab a {
        height:26px;
        line-height:26px;
        text-align:center;
        margin:2px 5px;
        width:26px;
        border-radius:100%;
        display:inline-block;
        font-size:16px;
        color:#5a5f69
    }
    #comments .comment .comment-respond .comment-form .comment-form-tab a:first-child {
        margin-left:10px
    }
    #comments .comment .comment-respond .comment-form .comment-form-tab button {
        position:absolute;
        height:50px;
        border-radius:100%;
        width:50px;
        border:none;
        background:#f4a7b9;
        color:#fff;
        right:15px;
        top:-25px;
        box-shadow:0 2px 6px rgba(0, 64, 128, .2);
        display: -webkit-box!important;
        display: -ms-flexbox!important;
        display: flex!important;
        -webkit-box-align: center!important;
        -ms-flex-align: center!important;
        align-items: center!important;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    #comments .comment .comment-respond .comment-form .comment-form-tab button .mdui-spinner-layer {
        border-color:#fff
    }
    #comments .comment .comment-respond .comment-form input {
        background:#fff;
        padding:8px 10px;
        border:none;
        font-size:14px;
        width:33.33333333333333%;
        box-sizing:border-box;
        border-right:1px solid #f5f6f9;
        border-top:1px solid #f5f6f9
    }
    #comments .comment .comment-respond .comment-form input:last-child {
        border-right:none
    }
    #comments .comment .comment-list {
        list-style:none;
        margin:0;
        background:#fff;
        padding:0
    }
    #comments .comment .comment-list .comment-list {
        margin-top:15px
    }
    
    #comments .comment .comment-list li:last-child {
        border-bottom:none
    }
    #comments .comment .comment-list li:last-child .comment-time::after {
        display:none
    }
    #comments .comment .comment-list .comment-children {
        margin-left: 64px;
    }
    #comments .comment .comment-list .comment-children .comment-children {
        margin-left:0!important;
        padding-left: 0!important;
    }
    #comments .comment .comment-list .comment-children li {
        border-right:none;
        padding:0;
        padding-top:15px;
        margin-top:0;
        border:none
    }
    #comments .comment .comment-list .comment-children li:first-child {
        padding-top: 0;
        margin-top: 0;
        padding-bottom: 0;
    }
    #comments .comment .comment-view {
        position:relative
    }
    #comments .comment .comment-view .comment-header {
        float:left;
        font-size:0;
        display:block
    }
    #comments .comment .comment-view .comment-header img {
        height:55px;
        width:55px;
        border-radius:100%;
        box-sizing:border-box;
        background:#fff;
        box-shadow:0 0 0 1px #f5f6f9
    }
    #comments .comment .comment-content {
        display:inline-block;
        min-height:50px;
        margin-left:8px;
        max-width:calc(100% - 63px)
    }
    #comments .comment .comment-content .comment-text {
        margin:0;
        font-size:16px;
        word-wrap:break-word;
        float: left;
        width: 100%;
        margin-bottom: 10px;
    }
    #comments .comment .comment-content .comment-text .catui-gallery {
        font-size: 0;
    }
    #comments .comment .comment-content .comment-text .catui-gallery a {
        margin-right: 10px;
    }
    #comments .comment .comment-content .comment-text .catui-gallery a:nth-child(4n+4) {
        margin-right: 0;
    }
    #comments .comment .comment-content .comment-text img {
        border-radius: 10px;
        max-width: 100%;
        border: 1px solid #eee;
        box-sizing: border-box;
    
        margin-top: 10px;
    }
    #comments .comment .comment-content .at {
        transition:all .35s;
        color:#999
    }
    #comments .comment .comment-content .at:hover {
        color:#f4a7b9
    }
    #comments .comment .comment-content .comment-meta {
        font-size:15px;
        margin-bottom:8px;
        height:26px;
        line-height:30px;
    }
    #comments .comment .comment-content .comment-meta span {
        float:left;
        border-radius:10px;
        padding:2px 8px;
        color:#fff;
        display:inline-block;
        line-height:22px;
        margin-bottom:4px;
        margin-right:8px
    }
    #comments .comment .comment-content .comment-author a, #comments .comment .comment-content .comment-meta span a {
        color:#fff
    }
    #comments .comment .comment-content .comment-meta .comment-author {
        background:#f4a7b9
    }
    #comments .comment .comment-content .comment-meta .comment-class {
        background:#72afeb
    }
    #comments .comment .comment-content .comment-meta .comment-time {
        background:#fed466
    }
    #comments .comment .comment-content .comment-meta .comment-time p {
        margin:0;
        display:inline-block
    }
    #comments .comment .comment-content .comment-meta .comment-os {
        background:#64b9ff
    }
    #comments .comment .comment-content .comment-meta .comment-browser {
        background:#ffaa73
    }
    #comments .comment .comment-content .comment-meta .comment-reply {
        background:#fa6c6f
    }
    #comments .comment .comment-list .cancel-comment-reply {
        text-align:right;
        margin-bottom:10px;
        margin-top:-20px
    }
    #comments .comment .comment-list .cancel-comment-reply #cancel-comment-reply-link {
        border-radius:3px;
        padding:4px 20px;
        color:#fff;
        font-size:12px;
        background:#fa6c6f;
        position:relative
    }
    #comments .page-navigator {
        padding:10px;
        border-top:1px solid #eee
    }
    #comments.diary {
        overflow:hidden;
        padding:0 10px
    }
    #comments.diary .comment h1, #comments.diary .comment .comment-respond {
        display:none
    }
    #comments.diary .comment .comment-list .comment-respond, #catui-content .haslogin #comments .comment .comment-respond {
        display:block
    }
    #comments.diary .comment .comment-view .comment-header, #comments.diary .comment .comment-content .comment-meta .comment-author {
        display:none
    }
    #comments.diary .comment .comment-children .comment-view .comment-header, #comments.diary .comment .comment-children .comment-content .comment-meta .comment-author {
        display:inline-block
    }
    #comments.diary .comment .comment-list {
        background-color:transparent;
        margin-top:0
    }
    #comments.diary .comment .comment-list li {
        margin-top:20px;
        border:none;
        padding:0;
        padding-bottom:13px
    }
    #comments.diary .comment .comment-list .comment-children li {
        box-shadow:none
    }
    #comments.diary .comment .comment-respond .comment-form {
        overflow:hidden;
        border-radius:10px;
        background-color:#fff;
        border:none;
        margin-top:10px
    }
    #comments.diary .comment .comment-respond .comment-form textarea {
        height:260px
    }
    #comments.diary .comment .comment-list .comment-respond .comment-form textarea {
        height:100px
    }
    #comments.diary .comment .comment-form .comment-form-tab {
        top:229px
    }
    #comments.diary .comment .comment-list .comment-form .comment-form-tab {
        top:69px
    }
    #comments.diary .comment .comment-content .comment-meta .comment-time {
        width:60px;
        height:60px;
        padding:0;
        border-radius:10px;
        position: unset;
        border:3px solid #fff;
        overflow:hidden;
        box-shadow:0 0 0 1px #fed466;
    }
    #comments.diary .comment .comment-content .comment-meta .comment-time::after {
        content:"";
        height:100vh;
        width:2px;
        background-color:#fed466;
        position:absolute;
        left:32px;
        top:67px
    }
    #comments.diary .comment .comment-content .comment-meta .comment-time p {
        width:100%;
        line-height:30px;
        text-align:center
    }
    #comments.diary .comment .comment-content .comment-meta .comment-time p:last-child {
        background:#fff0c9;
        color:#8e8b8b
    }
    #comments.diary .comment .comment-children .comment-content .comment-meta .comment-time {
        width: auto;
        height: auto;
        border-radius: 10px;
        padding: 2px 8px;
        border: none;
        overflow: hidden;
        box-shadow: none;
    }
    #comments.diary .comment .comment-children .comment-content .comment-meta .comment-time::after {
        display:none
    }
    #comments.diary .comment .comment-children .comment-content .comment-meta .comment-time p {
        width:auto;
        line-height:normal
    }
    #comments.diary .comment .comment-children .comment-content .comment-meta .comment-time p:last-child {
        background:0 0;
        color:#fff
    }
    #comments.diary .comment .comment-content .comment-text {
        margin-left:73px;
        border-radius:10px;
        background-color:#f7f7f7;
        padding:12px;
        float: unset;
    }
    #comments.diary .comment .comment-children .comment-content .comment-text {
        margin-left:0;
        box-shadow:none;
        padding:0;
        float: left;
        margin-bottom: 10px;
    }
    #comments.diary .page-navigator {
        border:none
    }
    #comments.diary .comment .comment-content {
        margin-left:0;
        max-width:100%;
        width:100%;
        position:relative;
        margin-bottom:-12px
    }
    #comments.diary .comment .comment-children .comment-content {
        margin-left:8px;
        max-width:calc(100% - 63px)
    }
    #comments.diary .comment .comment-list .comment-children {
        border-radius:10px;
        padding:15px;
        background-color:#f7f7f7;
        margin-left: 73px;
        margin-top: 10px;
    }
    </style>

注意,其中的名字我是写的我的,请自行修改成自己的,因为还需要再做一个调用太麻烦了....各位理解下 hhh,头像的话也没有调用邮箱的,而是直接使用的站点头像。

友情链接

关于友情链接的这个样式我也重写了好多次了,这个版本是我目前在用的。
打开 links.php 文件,然后替换成以下内容

<?php 
/**
 * 友情链接
 * 
 * @package custom 
 * 
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('layout/_partial/head.php'); 
?>
<style>
#nexmoe-header .nexmoe-social {
    padding: 0px;
}
.content img{border-radius:15px!important;box-shadow:0 0 3px 2px rgba(0,0,0,.2);}article ul li{transition:all .03s;width:calc(12.5% - 10px);margin:5px;border-radius:4px;}article ul{list-style-type:none;padding:0;display:flex;flex-direction:row;flex-wrap:wrap;margin:-5px;}article ul li img{width:100%;border-radius:0;border:none;display:block;border-radius:15px;}article ul li a{top:10px;background-color:#fff;font-size:15px;color:#606266;-webkit-transition:none;transition:none;margin-bottom:5px;display:block;position:relative;width:100%;border:none;padding:2px;box-shadow:0 0 3px 2px rgba(0,0,0,.2);border-radius:10px;margin-top:-5px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}@media screen and (max-width:768px){article ul li{width:calc(33.3333333333% - 10px);}
</style>
        <link rel="stylesheet" href="<?php echo $this->options->highlight_css ?>">
        <link rel="stylesheet" href="<?php echo $this->options->fancybox_css ?>">
<body class="mdui-drawer-body-left">
    <?php $this->need('layout/_partial/background.php'); ?>
  <div id="nexmoe-header">
      <?php $this->need('layout/_partial/header.php'); ?>
  </div>
  <div id="nexmoe-content">
    <div class="nexmoe-primary">

        <div class="nexmoe-post">
           
            <article>
                            <?php
                            $str = preg_replace('#<li><a href="$1"target="_blank" >(.*?)</a></li>#','<li><a href="$1"target="_blank" >$1</a></li>', $this->content);

                            $str = preg_replace('#<ul>#','<ul>', $str);
                            $str = preg_replace('#</ul>#','</ul>', $str);
                            $str = preg_replace('#<a href="(.*?)">(.*?)</a>#','<a href="$1"target="_blank" >$2</a>',$str);
                            echo $str;
                            ?>
            </article>
            <div id="comments">
                <?php $this->need('comments.php'); ?>
            </div>
        </div>
        
        
    </div>
  </div>
  <?php $this->need('layout/_partial/after-footer.php'); ?>
   <script src="<?php echo $this->options->jquery_js ?>"></script>

<?php if (!empty($this->options->function) && in_array('fancybox', $this->options->function)): ?>
<script src="<?php echo $this->options->fancybox_js ?>"></script>
<?php endif; ?>
<?php if (!empty($this->options->function) && in_array('enableMathjax', $this->options->function)): ?>
    <?php if ($this->fields->math != "No"): ?>
        <script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});</script>'
        <script type="text/javascript" src="https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <?php endif; ?>
<?php endif; ?>
<?php if (empty($this->options->function) || !in_array('enableMathjax', $this->options->function)): ?>
    <?php if ($this->fields->math == "Yes"): ?>
        <script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});</script>'
        <script type="text/javascript" src="https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <?php endif; ?>
<?php endif; ?>

<script src="<?php echo $this->options->highlight_js ?>"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>

</html>

然后就 OK 辣

其它内容

至于上面提到的主要内容当中的一些样式细节的修复,其实已经包含在我所给的 css 文件当中了,所以没必要单独列出来了。

一些问题

如果你按照本文内容设置之后出现了样式文件的缺失或者错位等问题,可以将本 CSS 文件添加到主题内(需要手动引用)。
[hide]
https://lolicorn.com/stylenexmoe.css
请保存到本地后上传服务器
[/hide]

代码报错&懒人包

如果出现代码报错的问题,且确定和我写的内容一致的话,请试试直接使用我的文件进行替换。(如果懒得弄,这其实也是个懒人包)
[hide]
https://lolicorn.com/usr/uploads/2021/01/Nexmoego2.zip
下载后请直接把里面的内容和 Nexmoe 主题文件夹的内容进行替换
[/hide]

结语

因为写的匆忙,所以很多地方可能会出现问题,所以如果有问题希望您可以及时反馈给我,我会第一时间给您答复。

本文作者:安和
本文链接:https://nekocoffee.com/552.html
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可

31 评论

  1. SECPLUS 2021年6月9日 回复
    样式不错,资瓷一下,个人感觉用不惯Hexo,还是typecho更习惯一些
    1. 安和 2021年6月10日 回复
      回复 SECPLUS: 还是Typecho吼啊,带个后台还是方便些
  2. hydrostic 2021年5月30日 回复
    主题不错啦
  3. 闪耀堪比星辰 2021年5月7日 回复
    主题评论数量
  4. 闪耀堪比星辰 2021年5月7日 回复
    主题不错
  5. yuno 2021年4月18日 回复
    主题很棒,之前hexo的时候就是用的这个,现在都有typecho版本啦
    1. 安和 2021年4月18日 回复
      回复 yuno: typecho版本已经发布一年多啦,就是功能和样式比不过hexo版本
  6. 幺零贰 2021年4月14日 回复
    大佬有没有最新版的懒人包啊~~~~求求了!
    1. 安和 2021年4月18日 回复
      回复 幺零贰: 因为懒人包实际上就是我自己在用的版本,有一些是折影大佬付费主题的代码,所以没法发出来
  7. 2021年4月8日 回复
    晕死,伪静态忘记设了
  8. 2021年4月8日 回复
    其他页面搜索显示 域名/index.php/search/关键字/ 可以正常搜索,但是首页搜索直接显示 域名/search 然后就报错是什么地方的设置问题?
  9. 安和 2021年4月4日 回复
    无刷新评论测试
  10. Yuri-Zero 2021年3月25日 回复
    大佬这个首页显示截取内容后的虚线是怎么做到的呀
    1. 安和 2021年3月26日 回复
      回复 Yuri-Zero: css实现的,你直接用F12审查元素把那段copy走就行了
      1. Yuri-Zero 2021年3月31日 回复
        回复 安和: 谢谢大佬!!
        1. 安和 2021年4月3日 回复
          回复 Yuri-Zero: 不客气
  11. cshannon 2021年2月14日 回复
    见过最好看的主题
    1. 安和 2021年2月16日 回复
      回复 cshannon: Hexo版本的现在应该更好看啦,只不过Typecho版本的折影大佬一直没有更新
  12. 本本 2021年2月14日 回复
    吼吼,我觉得这个主题确实好看,我也试试,嘻嘻
    1. 安和 2021年2月16日 回复
      回复 本本: 我也觉得蛮好看的,但手机端还是有提升的空间...有问题的话可以随时留言,我看到会回复的
  13. 寒喵 2021年2月8日 回复
    https://dl.mwulu.com/Static/0208230008.png
    代码被吞了,这是代码图
    1. 安和 2021年2月9日 回复
      回复 寒喵: 另外我的样式文件里应该没有包含文章归档这个小部件的样式,需要的话可以加回来,但我感觉这个蛮鸡肋的,只要发的文章一多那就变成一长串了
    2. 安和 2021年2月9日 回复
      回复 寒喵: 如果你这么写的话调用的是网站根目录下的这个文件,如果懒得改的话直接把source文件夹放在根目录下就可以了
    3. 安和 2021年2月9日 回复
      回复 寒喵: Typecho如果要调用主题文件夹下的内容是这样的<link rel="stylesheet" href="$this->options->themeUrl('iconfont1.css');">
    4. 安和 2021年2月9日 回复
      回复 寒喵: 不是这么用的鸭(
  14. 寒喵 2021年2月8日 回复
    我直接使用懒人包将
    head.php改为
    <link rel="stylesheet" href="source/css/iconfont1.css">
    links.php改为
    <link rel="stylesheet" href="source/css/stylenexmoe.css">
    之后就直接页面变形了。233
    https://moe.nayuli.com
  15. 寒喵 2021年2月2日 回复
    ٩(ˊᗜˋ*)و 谢谢
    1. 安和 2021年2月3日 回复
      回复 寒喵: 不客气#(赞一个)
  16. abigmiu 2021年2月2日 回复
    写的真详细, 花了不少功夫吧
    1. 安和 2021年2月3日 回复
      回复 abigmiu: 代码其实都是以前写好的,只是加了些简单的说明,不过前前后后还是花了两个多小时hhh#(喜极而泣)
  17. 安和 2021年1月31日 回复
    哈哈哈,最后发布的时候给我逗笑了,我那个评论文件的代码不知道为什么在文章编辑器内居然能加载,它没把我的代码识别到代码框里,直接执行了,最后发布的时候提醒我输入邮箱hhhhh