就是些随便改的东西啦
前言
自完成折影大佬的 Nexmoe 主题的部分内容移植后我自己又修改了一些，似乎是效果还不错的缘故，已经有好几位博主表示想要了，故今天把整个修改的内容以及代码公布出来，稍后会贴上在 Github 上的完整开源分支。
[tip type=“info” title=“一些建议”] 个人建议不要直接下载我修改的完整版本，因为其中的 BUG、冗余代码、以及彻底写死的调用可能会影响到您的正常体验，所以建议您参考本文在 Nexmoe 原版的基础上进行修改。 [/tip]
主要内容
首页方面进行了如下修改
- 题图 lazyload 以及提前占位
- 标题的黑色遮罩
- 对文章内容的标签显示进行了美化
- 相对好一点的自适应布局
- 侧边栏独立页面的图标更改
- 使用 png 图标替换 mdui 的字体文件
- 说说功能（移植）
独立页面进行了如下修改
- 新增了日记功能
- 对友链的显示方式进行了优化（但远不及 Hexo 版本）
- 文章归档页面的一些细节修复
评论区方面进行了如下修改
- 修复了移动端的一些显示问题
- 使用 png 图标替换 mdui 的字体文件
文章页面进行了如下修改
- 增加了分页，相册功能（但本功能移植自 CATUI 主题，所以并不会开源，有需要可以尝试联系折影大佬购买）
- 文字大小、一些图标的修改
其余的都是些小细节的改动了，有些甚至是写了个“全新的 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; ?>
替换的便是 next()): ?> 到 中间的内容。
这样一来就可以实现说说功能了，但还没有给它写样式，于是直接在 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]
代码报错&懒人包
如果出现代码报错的问题，且确定和我写的内容一致的话，请试试直接使用我的文件进行替换。（如果懒得弄，这其实也是个懒人包）
下载后请直接把里面的内容和 Nexmoe 主题文件夹的内容进行替换
目前不再提供下载
结语
因为写的匆忙，所以很多地方可能会出现问题，所以如果有问题希望您可以及时反馈给我，我会第一时间给您答复。