关于typecho博客主题handsome的一些美化

wloveyang

April 13, 2020

454views

No comments

299字数

杂集

不是原创,只是在一些代码上进行的美化以及某些改进

添加鼠标点击文字特效
----------
在原有的基础上添加了随机颜色，更加骚包了的说
效果演示的话，就看我主题吧
```JS
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) {
    	var getRandomColor = function(){
			return '#'+('00000'+ (Math.random()*0x1000000<<0).toString(16)).substr(-6); 
		}
        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": getRandomColor 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>
```

一键评论打卡功能
----------
改自[Xcnte's Blog][1],在原有的基础上解决了原版修改后时光机私密评论位置不对的问题
效果演示的话，看评论位置
1、首先在后台-->设置外观-->开发者设置-->自定义JavaScript加入以下代码:
```JS
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}
```
2、打开主题目录的component/comments.php 替换里面的126行到141行（大概位置，看相似替换）：
```php
<div class="comment-form-comment form-group">
	<label for="comment"><?php _me("评论") ?>
		<span class="required text-danger">（请使用真实邮箱地址，方便接收评论回复）</span>
		<span class="required text-danger"></span></label>
	<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
	<div class="OwO" style="display: inline;"></div><div class="OwO" style="display: inline;"><a href="javascript:addNumber('滴！访客卡！请上车的乘客系好安全带，现在是：')" class="OwO-logo"><i class="fontello fontello-user face"></i><span class="OwOlogotext">打卡</span></a></div>
	<div class="secret_comment secret_comment_article" id="secret_comment" data-toggle="tooltip" data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
		<label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
		<div class="secret_comment_check">
			<label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
				<input type="checkbox" id="secret_comment_checkbox">
				<i></i>
			</label>
		</div>
	</div>
</div>
```
3、在后台-->设置外观-->开发者设置-->自定义CSS加入以下代码:
```css
.secret_comment_article {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}
```

[1]: https://www.xcnte.com/archives/527/

Last modification：May 8th, 2020 at 05:55 pm

如果觉得对你有用，请随意赞赏

关于typecho博客主题handsome的一些美化

wloveyang • 2020 年 04 月 13 日

Leave a Comment Cancel reply

关于typecho博客主题handsome的一些美化