[整理]为博客做一些优化和功能增强（一）

两个月没写文了，又到了白色相簿的季节，自从工作后仿佛时间就变得精贵起来，有时间也是忙于学习工作需要的语言和享受生活，抓住周末的尾巴来除除草。自开始为了学习前端而搭建这个博客距今近两年了，期间也整理搜刮了一些，有专门适用typecho的，也有全适用的，有需自取。

（1）评论处默认输出头像模糊问题
默认输出头像只有32x32，原生评论或者一些模板未有重载，可到/var/Widget/Comments/archive.php的413行左右把默认的32改大即可；

（2）默认方形头像改成圆形，鼠标经过旋转
在css文件内添加：

.avatar {
    border: 2px solid #FFF;   /*外白环*/
    box-shadow: 0 0 1px #888;   /*外光晕*/  
    border-radius: 50%;
    -webkit-border-radius: 50%;
    margin: .5rem 1rem 0 0;
    width: 46px;   /*显示的尺寸宽*/
    height: 46px;  /*显示的尺寸高*/
    position: relative;
    transition: all .4s ease;
}
.avatar:hover{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    transform:rotate(360deg)
}

（3）自定义鼠标样式，可自找喜欢的鼠标样式
在css文件内添加：

html{cursor: url(https://xxx/default.cur),default;}    /*url()内是你的鼠标样式文件cur路径*/
a button{cursor: url(https://xxx/pointer.cur), pointer;}  /*鼠标经过链接、按钮等情况显示另外的样式*/

（4）垂直水平居中某图片某类，如class="qwq"
在css文件内添加：

.qwq{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);  
}

（5）滚动条对火狐、IE浏览器无效
自定义纵向滚动条：

html::-webkit-scrollbar{width: 5px;} /*轨道宽度*/
html::-webkit-scrollbar-track-piece {background-color: #f1f1f1;}/*轨道颜色*/
html::-webkit-scrollbar-thumb:vertical{background-color: #1cb799; border-radius:10px;}/*滚动条颜色、圆角*/

自定义横向滚动条：

html::-webkit-scrollbar{height: 5px;} /*轨道高度*/
html::-webkit-scrollbar-track-piece {background-color: #f1f1f1;}/*轨道颜色*/
html::-webkit-scrollbar-thumb:horizontal {background-color: #1cb799; border-radius:10px;}/*滚动条颜色、圆角*/

禁用滚动条：

html{
    overflow-x:hidden;/*禁用横向*/
    overflow-y:hidden;/*禁用纵向*/
}

（6）单行输出，超过边框用省略号代替如id="qvq"

#qvq{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}

（9）超出边框自动换行如class="www"

.www{
     word-wrap:break-word;
     word-break: break-all;}

（8）更改复制区背景默认的蓝色

::selection{background:#10a98c;color:#FFF;}
::-moz-selection{background:#10a98c;color:#FFF;}

（9）开启伪静态，静态化博客，隐藏index.php
如果是Nginx，需要在Nginx配置文件server{}内添加

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

是Apache，需在Apache配置文件添加

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteBase /

    RewriteCond %{REQUEST_FILENAME} !-f

    RewriteCond %{REQUEST_FILENAME} !-d

    RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]

</IfModule>

最后，在博客后台的设置开启使用地址重写功能，自定义文章路径建议使用wordpress风格，保存。

（10）改评论楼中楼层数，无限嵌套
在typecho后台设置改是没用的，上限是7层，需在function.php添加

function themeInit($archive)
{
 Helper::options()->commentsMaxNestingLevels = 20; /*指定楼层上限为20*/
}

（11）Nginx禁用或允许IP访问网站
在Nginx配置文件server{}内添加例如：

deny  192.1.1.1;     #禁止 192.1.1.1 这个IP访问
deny  192.1.1.0/24;  #禁止 192.1.1.* 这一网段的所有IP的访问
deny  all;             #禁止所有IP访问，此项谨慎添加，否则自己也访问不了网站
allow 192.1.1.1;     #允许 192.1.1.1，可与上一项配合只让某些IP访问
allow 192.1.1.1/16;     #允许 192.1.*.* 这一网段的所有IP访问

（12）外部链接新页面打开
js文件内添加：

jQuery(function($){
$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])").addClass("external").attr("target","_blank");
});

（13）网页窗口改离开显示图标、文字
js文件内添加：

$(function(){
   var OriginTitile = document.title, titleTime; 
   document.addEventListener("visibilitychange", function() { 
      if (document.hidden) { $('[rel="shortcut icon"]').attr("href", "离开时要显示的图片网址"); 
          document.title = "离开时要显示的文字"; clearTimeout(titleTime) 
   }
      else { $('[rel="shortcut icon"]').attr("href", "回来时要显示的图片网址"); document.title = "回来时 
          要显示的文字" + OriginTitile; titleTime = setTimeout(function() { document.title = 
          OriginTitile }, 5000) } });
});

（14）博客实时显示已运行时间
在需要显示的地方加上 已运行<span id="htime">
然后在footer.php加上

<script>
function show_date_time(){window.setTimeout("show_date_time()",1e3);
var BirthDay=new Date("2016/11/9 12:00:00"),  //修改为自己的建站时间
today=new Date,
timeold=today.getTime()-BirthDay.getTime(),
msPerDay=864e5,
e_daysold=timeold/msPerDay,
daysold=Math.floor(e_daysold),
e_hrsold=24*(e_daysold-daysold),
hrsold=Math.floor(e_hrsold),
e_minsold=60*(e_hrsold-hrsold),
minsold=Math.floor(60*(e_hrsold-hrsold)),
seconds=Math.floor(60*(e_minsold-minsold));
htime.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";}
show_date_time();
</script>

（15）是否手机平板设备、某些浏览器访问并加载对应css、js等

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    include("https://xxx/phone.js") //手机设备访问需要加载的css、js路径，判定一些浏览器自己找对应userAgent
}
else{
    include("https://xxx/pc.js")  //非手机...
}

（16）简单实现电脑、平板、手机自适应页面css可使用媒体查询

/*小于300px宽度使用此样式*/
@media screen and (max-width: 300px) {
    body { background-color:blue;}
 }

/*大于300px而小于900px宽度使用此样式*/
@media screen and (max-width: 300px) and (min-width: 900px) {
    body {background-color:red;}
 }

（17）某div的背景透明，上边文字不透明，如class="vvv"
不使用opacity这种方式即可，在css文件内添加：

.vvv{
    background-color:rgba(44, 48, 47, 0.8); /*0.8即80%透明度*/
    filter: alpha(opacity: 80); /*如果要兼容IE浏览器加上这行，80即80%透明度*/
    }

（18）子分类改二级下拉菜单适用于大部分具有顶部导航栏的主题
①在header.php中找到输出导航栏部分 Widget_Metas_Category_List

改成以下的代码：

 <?php $this->widget('Widget_Metas_Category_List')->to($categorys); ?>
 <?php while($categorys->next()): ?>
     <?php if ($categorys->levels === 0): ?>
         <?php $children = $categorys->getAllChildren($categorys->mid); ?>
         <?php if (empty($children)) { ?>
         <li <?php if($this->is('category', $categorys->slug)): ?> class="active"<?php endif; ?>>
             <a id="category" href="<?php $categorys->permalink(); ?>" title="<?php $categorys->name(); ?>"><?php $categorys->name(); ?></a>
         </li>
         <?php } else { ?>
         <li class="dropdown">
             <a class="dropdown-toggle"  href="<?php $categorys->permalink(); ?>" title="<?php $categorys->name(); ?>"><?php $categorys->name(); ?></a>
             <ul class="dropdown-menu">
                 <?php foreach ($children as $mid) { ?>
                 <?php $child = $categorys->getCategory($mid); ?>
                 <li <?php if($this->is('category', $mid)): ?> class="active"<?php endif; ?>>
                     <a href="<?php echo $child['permalink'] ?>" title="<?php echo $child['name']; ?>"><?php echo $child['name']; ?></a>
                 </li>
                 <?php } ?>
             </ul>
         </li>
         <?php } ?>
     <?php endif; ?>
 <?php endwhile; ?>

②在css文件加入自定义样式（仅作为参考，具体还需自己微调）：

.dropdown-menu>li>a {color: #666;padding: 8px 22px;border-radius: 0px}
.dropdown-menu {background-color: rgba(255,255,255,0.85);min-width: 95px;padding: 0;top: 32px;left: 0px;font-size: 15px;}
.dropdown:hover .dropdown-menu {display: block;}
.dropdown-menu li a:hover {background-color: rgba(69,188,249,0.8);color: #fff}

③如果主题没有引入Bootstrap，需要在header.php引入：

 <link href="https://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

注意：
有些js需要jQuery支持，比如（12）（13）项，如果主题没有，可以在footer.php引入：

<script type='text/javascript' src='https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js'></script>

此文章推荐的代码均来源于网络收集和改编，若有侵权，请联系我删除

已有 16 条评论

心灵博客

2019-07-13 15:38:28

很实用的小方法，有些拿去用了，感谢。
Mikusa

2019-04-29 19:29:53

看起来很不错，收下了
Sakura

2019-03-25 14:18:53

mark了
Xinger

2019-02-22 23:05:04

博客都长草啦
1. Xinger
  
  2019-03-10 11:10:57
  
  我又来了QAQ
2. Waxxh
  
  2019-03-04 08:56:41
  
  冬天草都枯萎了，趁春天还没长长赶紧锄锄
Xinger

2019-02-10 23:34:06

好久没更新啦
追光者

2019-02-05 09:35:24

新年快乐
追光者

2019-01-29 16:38:55

围观吃瓜
ps：冬天西瓜真贵啊
1. Waxxh
  
  2019-03-04 08:55:30
  
  春天的瓜便宜了些？
Xinger

2019-01-22 17:43:54

tql 可惜我是wp