【备忘】Handsome主题修改记录

发布于 2022-01-12  229 次阅读


文章目录



底部版权信息修改

去除内置的底部版权信息

  • 文件路径:/handsome/component/footer.php
  • 源代码
<div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo();
      // 可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解
      ?>
      Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank"
                                                                                                      href="https://www.ihewro.com/archives/489/">handsome</a>
      </span>
        <span class="text-ellipsis">© <?php echo date("Y"); ?> Copyright <?php
            $this->options->BottomleftInfo(); ?></span>
    </div>
  • 修改为
<div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo();
      // 可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解
      ?>
  
      </span>
        <span class="text-ellipsis">
        <?php
            $this->options->BottomleftInfo(); ?></span>
    </div>

使用新的底部版权信息

  • 后台设置-开发者设置-左侧信息
    添加
Copyright © 2021-2022 <a href="https://kanochan.net" target="_blank" rel="noopener noreferrer">kanochan.net</a>
  • 后台设置-开发者设置-右侧信息
    添加
<a href="https://kanochan.net/about.html">关于</a> ✦ <a href="mailto:helloworld@kanochan.net">Email联系我</a> ✦ <a href="http://typecho.org" rel= "noopener noreferrer" target= "_blank"> Typecho </a> ✦ <a href="https://www.ihewro.com/archives/489/" rel= "noopener noreferrer" target= "_blank">handsome </a>

删除一些(个人认为)不必要的元素

删除文章标题旁边的阅读模式、改变字体大小选项

文件:/usr/themes/handsome/libs/Content.php

删除源代码:

if (!$isCustom) {
            $html .= '<a class="plus-font-size" data-toggle="tooltip" data-original-title="' . _mt("点击改变文章字体大小") . '"><i data-feather="type"></i></a>';
        }
if (!$isCustom) {
            $html .= '<a data-morphing style="vertical-align: -1px;" id="morphing" data-src="#morphing-content" href="javascript:;" class="read_mode superscript m-l-sm" 
data-toggle="tooltip" data-placement="right" data-original-title="' . _mt("阅读模式") . '"><i data-feather="book-open"></i></a>';
        }

删除动态页面中的”关于我“

  • 文件路径:/handsome/cross.php
  • 删除
<div class="panel box-shadow-wrap-normal">
                        <h4 class="font-thin padder"><?php _me("关于我") ?></h4>
                        <ul class="list-group">
                            <li class="list-group-item">
                                <p><?php $this->options->about() ?></p>

                            </li>
                        </ul>
                    </div>

删除文章顶部字数统计

  • 文件路径:/handsome/post.php
  • 删除源代码
<!--文字数目-->
<li class="meta-word"><span class="post-icons"><i data-feather="pen-tool"></i></span><span class="meta-value"><?php echo Utils::getWordsOfContentPost($this->text); ?><?php _me('字数'); ?></span></li>

删除首页文章卡片的作者信息

  • 文件路径:/handsome/libs/Content.php
  • 删除源代码
<li><span class="m-r-sm right-small-icons"><i data-feather="user"></i></span><a href="{$parameterArray['authorUrl']}">{$parameterArray['author']}</a></li>

删除首页右上角闲言碎语

  • 文件路径:/handsome/component/headnav.php
  • 删除源代码
<?php if (!$hideTalkItem): ?>
            <!--闲言碎语-->
            <li class="dropdown">
                <a href="#" data-toggle="dropdown" class="feathericons dropdown-toggle">
                    <i data-feather="twitch"></i>
                    <span class="visible-xs-inline">
              <?php _me("闲言碎语") ?>
              </span>
                    <span class="badge badge-sm up bg-danger pull-right-xs"><?php
                        $read_id = Typecho_Cookie::get('user_read_id');
                        $latest_time_id = Typecho_Cookie::get('latest_time_id');
                        //$latest_time_id赋值应该在列表加载的后面
//                        if (empty($latest_time_id)){
//                            $latest_time_id = 999999;
//                        }
                        if (empty($read_id)){
                            $read_id = -1;
                        }
                        if (!empty($read_id) && !empty($latest_time_id)){
                            $not_read = $latest_time_id - $read_id;
                            if ($not_read > 0){
                                _me("新");
                            }
                        }
                        ?></span>
                </a>
                <!-- dropdown -->
                <div class="dropdown-menu w-xl animated fadeInUp">
                    <div class="panel bg-white">
                        <div class="panel-heading b-light bg-light">
                            <strong>
                                <?php _me("闲言碎语") ?>
                            </strong>
                        </div>
                        <div class="list-group" id="smallRecording">
                            <?php
                            $slug = "cross";    //页面缩略名
                            $limit = 3;    //调用数量
                            $length = 140;    //截取长度
                            $ispage = true;    //true 输出slug页面评论,false输出其它所有评论
                            $isGuestbook = $ispage ? " = " : " <> ";

                            $db = $this->db;    //Typecho_Db::get();
                            $options = $this->options;    //Typecho_Widget::widget('Widget_Options');

                            $page = $db->fetchRow($db->select()->from('table.contents')
                                ->where('table.contents.created < ?', $options->gmtTime)
                                ->where('table.contents.slug = ?', $slug));

                            if ($page) {
                                $type = $page['type'];
                                $routeExists = (NULL != Typecho_Router::get($type));
                                $page['pathinfo'] = $routeExists ? Typecho_Router::url($type, $page) : '#';
                                $page['permalink'] = Typecho_Common::url($page['pathinfo'], $options->index);

                                $comments = $db->fetchAll($db->select()->from('table.comments')
                                    ->where('table.comments.status = ?', 'approved')
                                    ->where('table.comments.created < ?', $options->gmtTime)
                                    ->where('table.comments.type = ?', 'comment')
                                    ->where('table.comments.parent = ?', '0')
                                    ->where('table.comments.cid ' . $isGuestbook . ' ?', $page['cid'])
                                    ->order('table.comments.created', Typecho_Db::SORT_DESC)
                                    ->limit($limit));
                                $index = 0;
                                foreach ($comments AS $comment) {
                                    if ($index == 0){
                                        Typecho_Cookie::set('latest_time_id', $comment['coid']);
                                    }
                                    $index ++;
                                    $content = Content::postCommentContent(Markdown::convert($comment['text']),$this->user->hasLogin(),"","","",true);
                                    $content = Content::returnExceptShortCodeContent(trim(strip_tags($content)));
                                    if ($content == ""){
                                        $content = _mt("点击查看详情");
                                    }

                                    echo '<a href="'.BLOG_URL_PHP.'cross.html" class="list-group-item"><span class="clear block m-b-none words_contents">'.Content::excerpt($content,200).'<br><small class="text-muted">'.Utils::formatDate($comments,$comment['created'],
                                            $this->options->commentDateFormat).'</small></span></a>';
                                }
                            } else {
                                echo '<a target="_blank" href="'.BLOG_URL.'admin/write-page.php" class="list-group-item"><span class="clear block m-b-none">这是一条默认的说说,如果你看到这条动态,请去后台新建独立页面,地址填写cross,自定义模板选择时光机。具体说明请参见主题的使用攻略。<br><small class="text-muted">'.date("F jS, Y \a\t h:i a",time()+($this->options->timezone - idate("Z"))).'</small></span></a>';
                            }
                            ?>
                        </div>
                    </div>
                </div>
            </li>
            <!--/闲言碎语-->
        <?php endif; ?>

将搜索框移到右侧

  • 文件路径:/handsome/component/headnav.php
  • 源代码
<form id="searchform1" class="searchform navbar-form navbar-form-sm navbar-left shift" method="post"
        role="search">
  • 修改为
<form id="searchform1" class="searchform navbar-form navbar-form-sm navbar-right shift" method="post"
          role="search">

优化B站视频解析

  • 后台设置-开发者设置-自定义CSS
    添加
.bilivideo {
    position: relative;
    width: 100%;
}
 
@media only screen and (max-width: 767px) {
    .bilivideo {
        height: 15em;
    }
}
 
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bilivideo {
        height: 20em;
    }
}
 
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bilivideo {
        height: 30em;
    }
}
 
@media only screen and (min-width: 1200px) {
    .bilivideo {
        height: 40em;
    }
}
 
.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}
 
.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}
  • 调用方法
    复制B站视频分享的嵌入代码,并添加CSS样式

示例如下

<iframe class="bilivideo" src="//player.bilibili.com/player.html?aid=380392634&bvid=BV1UZ4y1U73L&cid=478658742&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

修复打赏页面不可点击的BUG

  • 后台设置-开发者设置-自定义CSS
    添加
.topButton{top: unset;bottom: 135px;}
.settings{top: unset;bottom: 46px;}
 #goToTop {color: #aaaaaa;background-color: #000000;}
.modal-open #post-panel.gpu-speed{
transform:none;
}

配置CDN静态文件加速

服务使用了使用jsDelivr加速Handsome主题的静态资源最新8.3.0
20220303更新:服务使用了cdn.xxhzm.cn免费的静态文件加速服务,需要联系站长添加白名单才可使用。

vditor静态资源加速

handsome的vditor静态资源使用的是jsdelivr的CDN,但是不久前,jsdelivr失去了中国大陆经营牌照,CDN节点全部转到了国外,速度大大降低。
配置文件:/usr/themes/handsome/libs/CDN.php

https://cdn.jsdelivr.net/npm/vditor@3.8.10

替换为

https://jsd.sorkai.com/web/npm/vditor@3.8.10

handsome静态资源加速

主题后台配置CDN,填入域名:

https://cdn.xxhzm.cn/handsome/8.3.0/

配置Google Analytics

修改文件:/usr/themes/handsome/component/header.php
<head>里面添加谷歌统计代码:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E36S08YB7L"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-E36S08YB7L');
</script>

友链页面优化

修改的部分太多了,直接覆盖源码吧,文件路径:/usr/themes/handsome/links.php

<?php
/**
* 友情链接
*
* @package custom
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('component/header.php');
?>
<style type="text/css">

</style>

    <!-- aside -->
    <?php $this->need('component/aside.php'); ?>
    <!-- / aside -->

<!-- <div id="content" class="app-content"> -->
    <a class="off-screen-toggle hide"></a>
    <main class="app-content-body <?php Content::returnPageAnimateClass($this); ?>">
    <div class="hbox hbox-auto-xs hbox-auto-sm">
        <div class="col center-part" id="post-panel">
        <div class="bg-light lter wrapper-md">
            <h1 class="entry-title m-n font-thin text-black l-h"><span class="title-icons"><i data-feather="link"></i></span><?php _me
                ("海内存知己,天涯若比邻")
                ?></h1>
            <?php if (trim($this->fields->intro) !== ""): ?>
            <div class="entry-meta text-muted  m-b-none small post-head-icon"><?php echo $this->fields->intro; ?></div>
            <?php endif ?>
        </div>
        <div class="wrapper-md">
            <div class="tab-container post_tab">
                <div class="tab-content">
                    <!-- list -->
                    <div id="my-info" class="tab-pane fade in active">
                        <?php echo Content::returnLinkList("ten","tab_4"); ?>
                        <div class="wrapper ng-binding" id="post-content">
                            <?php Content::postContentHtml($this,$this->user->hasLogin()); ?>
                        </div>
                        <!--评论-->
                        <div class="bg-white wrapper border-radius-6">
                            <?php $this->need('component/comments.php') ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <!--首页右侧栏-->
        <?php $this->need('component/sidebar.php') ?>
    </div>
    <!-- /content -->
</main>
    <!-- footer -->
    <?php $this->need('component/footer.php'); ?>
      <!-- / footer -->

适配Chevereto上传插件

修改文件:/usr/themes/handsome/libs/Content.php第2324行

echo '<textarea id="handsome_md_text" class="hide" >' . htmlspecialchars($content) . '</textarea>';

修改为

echo '<div id="handsome_md_text" class="hide" >' . htmlspecialchars($content) . '</div>';

统一动态和评论的图片样式

后台添加自定义CSS:

.comment-content-true img {
    max-width: 60%!important;
        border-radius: 6px
}

修改源码/usr/themes/handsome/libs/Content.php第2396行,将

<figure class="image-thumb" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">

修改为:

<figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">

首页增加右侧边栏网站公告

文件:/usr/themes/handsome/component/sidebar.php第127行左右,在

<?php while ($tags->next()): ?>
                      <a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->name(); ?>" data-toggle="tooltip"><?php $tags->name(); ?></a>
                  <?php endwhile; ?>
              <?php endif; ?>
          </div>
      </section>

下方增加代码

<!--网站公告-->
         <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
          <h5 class="widget-title m-t-none text-md">网站公告</h5>
          <div class="tags l-h-2x">
          <!--在这里写公告的内容--> 
          </div>
         </section>

网站公告内容

IPV6提示

在公告内容写入处写入以下内容

 <p>● 本站已支持IPV6访问!</p>

网站运行时间

在公告内容写入处写入以下内容

<p> ● Kano酱博客的第<span id="site_runtime" style="color: #24a0f0;"></span>天</p>
              <script type="text/javascript">
                 function show_site_runtime(){
                    X=new Date("2021-02-19"); //在这里修改你的建站时间
                    Y=new Date();
                    T=(Y.getTime()-X.getTime()); // 获取当前时间与指定时间之间的时间间隔(ms)
                    i=24*60*60*1000;
                    d=T/i;
                    D=Math.floor(d); // 计算天数并向下取整
                    site_runtime.innerHTML= D
                  }
                show_site_runtime();
              </script>

参考来源:Hexo 博客显示网站运行时间代码

手机端不在下方显示右侧边栏内容.

开发者选项自定义CSS加入

/*手机不显示热门及标签云*/
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}
  

修改首页文章摘要日期显示格式

文件:/usr/themes/handsome/libs/Content.php第861行左右,将

if ($parameterArray['date'] != 0) {
                $dateString = date(I18n::dateFormat(), $parameterArray['date']);
            }

修改为

if ($parameterArray['date'] != 0) {
                $dateString = date("y/n/j", $parameterArray['date']);
            }

注意:这样修改会使主题对日期的翻译功能失效,不过日期的读法在全世界都是通用的,问题不大。

评论日期本土化处理

handsome的日期格式调用的是typecho的日期格式,只需要修改typecho的日期格式即可。

后台-`设置-评论-评论日期格式`

将默认的日期格式修改为:Y年m月d日 H:i:s,更多格式,请参照date

增加编辑器toc目录支持

注:本节的前提是,在handsome插件中启用vditor编辑器,并且前台使用vditor渲染。

插件设置

toc是markdown的扩展语法,在markdown文章的适当位置加入标记#

#(实际使用中请把“#”去掉),即可将文章内的标题自动转换成目录的形式。toc目录分为两个方面,一个是后台渲染,一个是前台渲染,两者引入的文件不同,在vditor默认的配置中,toc目录功能是被关闭的。后台编辑器渲染引入的文件是index.min.js,前台渲染用的是method.min.js。vditor支持丰富的自定义设置,更多信息你可以在README.md上获得支持。

后台渲染toc目录支持

i后台toc目录示意

Handsome对vditor的一些自定义配置存储在/usr/plugins/Handsome/assets/js/origin/editor-js.php中,需要修改它以支持toc目录功能。

修改文件/usr/plugins/Handsome/assets/js/origin/editor-js.php第861行左右

原文:

                 preview: {
                    icon: "material",
                    hljs: {
                        enable: true,
                        style: 'monokai',
                        lineNumber: true
                    },
                    "math": {
                        "engine": "MathJax",
                        "macros": {
                            "bf": "{\\boldsymbol f}",
                            "bu": "{\\boldsymbol u}",
                            "bv": "{\\boldsymbol v}",
                            "bw": "{\\boldsymbol w}"
                        },
                        "inlineDigit": true
                    },

修改为:

                preview: {
                    icon: "material",
                    hljs: {
                        enable: true,
                        style: 'monokai',
                        lineNumber: true
                    },
                    markdown: {
                        toc: true
                    },
                    "math": {
                        "engine": "MathJax",
                        "macros": {
                            "bf": "{\\boldsymbol f}",
                            "bu": "{\\boldsymbol u}",
                            "bv": "{\\boldsymbol v}",
                            "bw": "{\\boldsymbol w}"
                        },
                        "inlineDigit": true
                    },

即增加了一个自定义设置markdown: {toc: true},打开toc目录功能。

前台渲染toc目录支持

虽然一直想尽力避免对vditor源码的修改,就像前面的后台渲染一样,通过修改主题插件实现。但是对于前台渲染,由于不需要编辑功能,直接引入method.min.js即可。理论上,设置method.min.js功能的方法和设置index.min.js类似,但是由于能力有限(我太菜了),暂时只能通过修改vditor源码的方式实现,即修改method.min.js。所以,要想实现前台渲染支持toc目录的,需要将vditor资源本地化或者在github拉取vditor后修改,通过Jsdelivr重新引入。

本地化vditor资源后,修改文件/usr/themes/handsome/assets/libs/vditor/dist/method.min.js第87行左右,将toc: false,修改成toc: true,

源码修改

所有的这一切做完后,理论上前后台都能渲染toc目录了。当然,需要清除一下浏览器的页面缓存,使更改的js生效。

前台渲染toc目录

修改toc目录文字的颜色,便于与正文做出区分。添加自定义css代码:

/*toc目录文字颜色*/
.vditor-toc {
    color: #337ab7;
}
/*toc目录文字颜色结束*/

目录文字颜色效果

常用的一些脚本

老鬼VPS测试脚本

wget -qO- git.io/superbench.sh | bash

Loc论坛BBR脚本

wget -N --no-check-certificate "https://github.000060000.xyz/tcpx.sh" && chmod +x tcpx.sh && ./tcpx.sh

服务器回程测试

wget -qO- git.io/autobesttrace | bash

间接性发奋图强,持续性混吃等死