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

两个月没写文了,又到了白色相簿的季节,自从工作后仿佛时间就变得精贵起来,有时间也是忙于学习工作需要的语言和享受生活,抓住周末的尾巴来除除草。自开始为了学习前端而搭建这个博客距今近两年了,期间也整理搜刮了一些,有专门适用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%); /*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.168.1.1;     #禁止某IP
deny  192.168.1.0/24;  #禁止某IP段
deny  all;             #禁止所有
allow 192.168.1.1;     #允许某IP
allow 10.1.1.0/16;     #允许某IP段

(12)外部链接新页面打开
js文件内添加:

 $("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支持,如果主题没有,需要在footer.php引入:

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

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

标签: Typecho优化 Typecho功能增强 禁用滚动条 自定义鼠标样式 垂直水平居中 自动换行 伪静态 评论层数 禁止IP访问 外部链接新页面打开 实时显示时间 二级下拉菜单

已有 14 条评论

  1. mark了

  2. 博客都长草啦 meng.png

    1. 我又来了QAQ

    2. 冬天草都枯萎了,趁春天还没长长赶紧锄锄 gan.png

  3. 好久没更新啦

  4. 新年快乐

  5. 围观吃瓜
    ps:冬天西瓜真贵啊 huaji.png

    1. 春天的瓜便宜了些? meng.png

  6. tql 可惜我是wp qu.png

  7. txh txh

    ma克

  8. CDN 用 cdn.jsdelivr.net 效果更好 huaji.png

    1. Mark,上次bootstrap原来的cdn炸了几天才找到原因 chui.gif

  1. 1
  2. 2
选择表情