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

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

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

标签: Typecho优化 Typecho功能增强 伪静态

已有 16 条评论

  1. 很实用的小方法,有些拿去用了,感谢。

  2. 看起来很不错,收下了 daxiao.png

  3. mark了

  4. 博客都长草啦 meng.png

    1. 我又来了QAQ

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

  5. 好久没更新啦

  6. 新年快乐

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

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

  8. tql 可惜我是wp qu.png

  1. 1
  2. 2
选择表情