对于handsome到目前为止所做的优化

说明: 使用这个主题有几个月了，之前使用的一直都是别人的博客，虽然早就买了域名和服务器但是一直没玩。想搭博客的时候朋友介绍了 typecho ，然后就在朋友的帮助下买了主题~搭了博客。下面是在各个大佬的博客上学到的一些改动的方法。

1. 2233娘插件

唔， 第一个感觉好玩的就是 2233 了，当时在 SimpleZero 的博客上看见了觉得超好玩，于是就下载过来了。

2233娘插件传送门

附上大佬传送门 。SimpleZero

2. 悬挂猫咪置顶插件

右边的那个猫咪置顶插件也是在 SimpleZero 大佬的博客上发现的，点击一下就可以返回最顶端啦~

悬挂猫咪插件传送门

附上大佬传送门 。SimpleZero

3. 下雪特效插件

这个插件是在 Rat`s Blog 的博客上找到的,安装插件后可以实现有飘落雪花的效果，觉得挺好看就下载过来了~具体的操作在插件安装后可以看到~

下雪特效插件传送门

附上 Rat`s Bolg 大佬传送门

4. 点击头像后放大并旋转

这个是在 Rat`s Blog 大佬的博客上找到的，具体代码如下，将代码加到后台的自定义 CSS 中即可。

#转动快慢和头像大小自行修改数值
/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}
.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}
.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}
#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}
#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

附上 Rat`s Bolg 大佬传送门

5. 首页文章版式圆角化

这个也是在 Rat`s Blog 大佬的博客上找到的，这个修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS 即可启用~

#圆角大小可修改15px数值
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 16px;
}
.panel-small{
    border: none;
    border-radius: 16px;
}
.item-thumb{
    border-radius: 16px;  
}

附上 Rat`s Bolg 大佬传送门

6. 首页文章图片获取焦点放大

这个也是在 Rat`s Blog 大佬的博客上找到的，这一个修改的是首页文章图片，将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置 自定义CSS 即可启用


#放大的时间和大小自行修改以下数值
/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

附上 Rat`s Bolg 大佬传送门

7. 文章标题居中

这一个修改的是文章标题，使其居中。将以下代码添加至后台主题设置 自定义CSS 即可启用 ， 仍然是在 Rat`s Blog 博客上找到的 ~

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

附上 Rat`s Bolg 大佬传送门

8. 首页文章版式阴影化

这一个修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置 自定义CSS 即可启用 ， 也是在 Rat`s Blog 大佬的博客上找到的~

#阴影颜色修改rgba后面的值
/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

#如果也想使盒子四周也有阴影，加上以下代码
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

附上 Rat`s Bolg 大佬传送门

9. 自定义滚动条滑块

这个修改针对浏览器最右边的滚动条滑块，使其改变样式。将以下代码添加至后台主题设置 自定义CSS 就可以使用了，也是在 Rat`s Blog 大佬的博客上找到的~
参数可以自行修改，比如滑块、滑轨颜色大小宽度什么的~ 附上代码


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;

附上 Rat`s Bolg 大佬传送门

10. 鼠标点击特效

鼠标点击的特效有很多，我用的是点击出现爱心~
下面附上4种点击特效，将喜欢的特效代码复制到后台的自定义 JavaScript 即可启用，还有一种方式是 将以下代码放在主题的handsome/component/footer.php中的之前即可 同是从 Rat`s Blog 大佬的博客上看到的~

1. 鼠标点击出现文字
#字体自行修改
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>
2. 点击出现跳动的心

$("html,body").click(function(e) {
    var gcd = new Array("♥", "♥", "♥");
    var n = Math.floor(Math.random() * gcd.length);
    var $i = $("<b/>").text(gcd[n]);
    var x = e.pageX,
        y = e.pageY;
    $i.css({
        "z-index": 99999,
        "top": y - 20,
        "left": x - 8,
        "position": "absolute",
        "color": "#FF706C",
        "animation": 'heartbeat .25s infinite .15s'
    });
    $("body").append($i);
    $i.animate({
        "opacity": 0
    }, 1500, function() {
        $i.remove()
    });
    e.stopPropagation()
});
3. 点击出现向上飘动的心

(function(window,document,undefined){
    var hearts = [];
    window.requestAnimationFrame = (function(){
            return window.requestAnimationFrame ||
                       window.webkitRequestAnimationFrame ||
                       window.mozRequestAnimationFrame ||
                       window.oRequestAnimationFrame ||
                       window.msRequestAnimationFrame ||
                       function (callback){
                               setTimeout(callback,1000/60);
                       }
    })();
    init();
    function init(){
            css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
            attachEvent();
            gameloop();
    }
    function gameloop(){
            for(var i=0;i<hearts.length;i++){
                if(hearts[i].alpha <=0){
                        document.body.removeChild(hearts[i].el);
                        hearts.splice(i,1);
                        continue;
                }
                hearts[i].y--;
                hearts[i].scale += 0.004;
                hearts[i].alpha -= 0.013;
                hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
        }
        requestAnimationFrame(gameloop);
    }
    function attachEvent(){
            var old = typeof window.onclick==="function" && window.onclick;
            window.onclick = function(event){
                    old && old();
                    createHeart(event);
            }
    }
    function createHeart(event){
        var d = document.createElement("div");
        d.className = "heart";
        hearts.push({
                el : d,
                x : event.clientX - 5,
                y : event.clientY - 5,
                scale : 1,
                alpha : 1,
                color : randomColor()
        });
        document.body.appendChild(d);
}
function css(css){
        var style = document.createElement("style");
            style.type="text/css";
            try{
                style.appendChild(document.createTextNode(css));
            }catch(ex){
                style.styleSheet.cssText = css;
            }
            document.getElementsByTagName('head')[0].appendChild(style);
}
    function randomColor(){
            return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
    }})(window,document);
4. 给博客网站添加鼠标点击水波动画效果

下载特效JS文件：ripple.js，将其放在网站目录某个地方，然后编辑主题文件footer.php：

#在</body>后面添加如下一句代码
<script type="text/javascript" src="(这个脚本的路径)"></script>

ps: typecho博客可以使用，其它博客暂未测试，感谢 Rat`s Blog大佬~

附上大佬传送门 Rat`s Blog

11. 修改首页标题栏及自定义文字

此处位于首页站点公告下方，文章上方，修改方法如下：

  1. 后台“设置外观” → “主题增强功能” → “增强功能开关” → 勾选“首页的标题栏下启用一言接口”。
  2. 接着去除此处的标题显示，修改方法为将下框中的代码在主题的handsome/index.php中删除。

  3. 代码如下

    options->title(); ?>

附上大佬传送门 许建华

12. 评论框特效

下载特效 JS 文件：commentTyping.js，将其放在网站目录某个地方，然后编辑主题文件 handsome/component/footer.php ，在</body>后面添加以下代码就可以啦~

附上大佬传送门 Rat``s Blog

13. Typecho博客首页显示文章摘要的方法

ps：Typecho 博客默认没有自动摘要的功能，博客首页和分类归档页面显示的文章都是全文输出的，对于内容文字很多的文章，会把页面拉伸得很长，显示得也不怎么美观。但博主可以在发表文章的时候手动摘要。

方法:
在发表文章的时候，在文章内容中添加<!–more–>标签即可。

比如内容一共有五段，要显示前三段，就在第三段结束处添加<!–more–>标签代码

同样来自 Rat`s Blog 大佬的博客~ ，附上大佬传送门

Rat`s Blog

14. Typecho中去除URL中的index.php

在默认情况下，Typecho能够正常工作后，所有文章的URL都会是类似

https://www.murongmengjie.cn/index.php/archives/37.xxx

这里的 index.php对于强迫症患者影响还是挺大的，其实这里只需要进入Typecho后台控制面板
点击 设置->永久链接
将 是否使用地址重写功能 改为 启用 ，这里可能系统提示不支持地址重写，选择强制开启之类的就行了。
再在 自定义文章路径 中选择自己喜欢的URL格式，保存设置后马上就生效了。

ps: 如果修改之后发现点击文章出现 404 ，那就是 nginx 或者 Apache 的伪静态的原因了，因为个人用的是 nginx ，所以下面附上修改 nginx 配置文件的代码：

首先打开服务器上的 /usr/local/nginx/conf/vhost 路径下的 www.yourdomain.com.conf 文件 ，在其中添加如下代码


         if (!-e $request_filename) {
            rewrite ^(.*)$ /index.php$1 last;
        }

        location ~ .*\.php(\/.*)*$ {
            include fastcgi.conf;
            fastcgi_pass  127.0.0.1:9000;
        }

改完后重启下 nginx 服务器 ， 就可以开启伪静态啦~
之后再按照前面说的重新设置地址重写功能，然后再刷新下页面就可以看到效果了。

彩色标签云

彩色标签云是在曦语大佬的博客中学到的。
对于typecho下的彩色标签云实现方式，handsome主题适用 改动不大 修改的有3个文件：

  1. component/sidebar.php
  2. 新增CSS文件
  3. component/header.php
1. 用以下这段代码替换原有的 sidebar.php 文件下的标签云

<?php if (!($this->is('post'))) : ?>
      <section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">   
            <h3 id="tag-cloud-title" class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3>          
            <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?>
            <?php if($tags->have()): ?>
                <?php while ($tags->next()): ?>
                <span id="tag-clould-color"  style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,
                    <?php echo(rand(0,255)); ?>)">
                    <a  href="<?php $tags->permalink();?>">
                    <?php $tags->name(); ?></a>
                </span>
               <?php endwhile; ?>
        <?php endif; ?>
      </section>
    <?php else: ?>
</section>

这里简单解释一下：
实现方式主要是加一个span标签,让它的背景颜色采用RGB方式随机，从而达到不同颜色的标签效果

此处放一张实现的效果图

彩色标签云.png

2. 增加CSS文件

新增一个CSS文件 起什么名字都可以，我起的名字是 tag-clould-color.css ，刚好和文价内容相同
文件放置位置在 /assets/css 目录下
用 CDN 的小伙伴也可以同步上传
然后添加如下内容
以后如果是对主题做什么样式上的修改也可以直接写在此文件中

#tag-clould-color {
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
    color: #FFFFFF;
    margin: 3px 3px 3px 0;
    display: inline-block;
}
3. 在头文件中引用该CSS文件

在header.php中增加这行代码（表示在页面引用你新添加的CSS式文件）
filename.css为你自己的文件名
注意要加载在主题样式文件后（因为在html页面中是按顺序加载的，避免你以后写的样式不生效）

  <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/filename.css" type="text/css">

下面是具体位置：

  <!--引入英文字体文件-->
    <?php if (!empty($this->options->featuresetup) && in_array('laodthefont', $this->options->featuresetup)): ?>
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/font.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />
    <?php endif; ?>

    <!-- 修改部分主体样式，添加css文件，主要是彩色标签云 -->
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/filename.css" type="text/css">
   
   
    <style type="text/css">
        <?php echo Content::exportCss($this) ?>
    </style>

然后就可以看到效果了
个别用户可能需要清除一下浏览器缓存才有效果~~

附上曦语大佬传送门 彩色标签云

ps: 暂时就想到这些了，日后有新的会在添加上去~~

最后修改：2020 年 08 月 28 日
© 允许规范转载
哇卡哇卡