Lzy's Hobby

  • 首页
  • IT教程
    • 操作系统相关
    • 网络相关
    • 网站运维相关
  • IT资源
    • 建站资源
    • 软件资源
  • IT学习
    • 知识体系
    • 学习笔记
    • 学习资源
  • 关于
    • 博主简介
    • 建设历史
    • 朋友
    • 留言
  • Lzy's Life
Lzy's Hobby
一个关注IT科技的个人独立博客
  1. 首页
  2. IT教程
  3. 正文

在Typecho主题上添加表格样式和热门文章功能

2018年8月18日 1617点热度 0人点赞 0条评论

其实本文所要介绍的这两个功能都是博主本次更新的Lzy Technology 2.5主题的功能,我现在写一篇文章介绍在Typecho主题上增加表格样式和热门文章功能。

Markdown

在Typecho主题上添加表格样式

Typecho内置的Markdown编辑器支持插入表格,但部分主题可能没有设置这个部分的样式。本处代码来自明月登楼博客,添加后的效果如下:

表格样式效果

操作方法:
1.把下面的代码添加到主题style.css(或其他主要CSS文件)即可。除了基本样式必须添加之外,其他部分都可以根据实际需要添加。

/*基本样式*/
table {
    width: 100%; /*表格宽度*/
    max-width: 65em; /*表格最大宽度,避免表格过宽*/
    border: 1px solid #dedede; /*表格外边框设置*/
    margin: 15px auto; /*外边距*/
    border-collapse: collapse; /*使用单一线条的边框*/
    empty-cells: show; /*单元格无内容依旧绘制边框*/
}
table th,
table td {
  height: 35px; /*统一每一行的默认高度*/
  border: 1px solid #dedede; /*内部边框样式*/
  padding: 0 10px; /*内边距*/
}
/*表头样式*/
table th {
  font-weight: bold; /*加粗*/
  text-align: center !important; /*内容居中,加上 !important 避免被 Markdown 样式覆盖*/
  background: rgba(158,188,226,0.2); /*背景色*/
}
/*隔行变色*/
table tbody tr:nth-child(2n) {
  background: rgba(158,188,226,0.12); 
}
/*悬浮变色*/
table tr:hover {
  background: #efefef; 
}
/*自适应优化
1.表头内容强制在一行显示*/
table th {
    white-space: nowrap; 
}
/*2.首列不换行*/
table td:nth-child(1) {
    white-space: nowrap; 
}
/*3.表格滚动条*/
.table-area {
    overflow: auto;
}

2.如果需要在宽度不够长时在表格显示滚动条的话,还需要把下面的代码添加到主题的主要JS文件,下面两种形式选一种即可。
JavaScript原生代码

[].slice.call(document.querySelectorAll('table')).forEach(function(el){
    var wrapper = document.createElement('div');
    wrapper.className = 'table-area';
    el.parentNode.insertBefore(wrapper, el);
    el.parentNode.removeChild(el);
    wrapper.appendChild(el);
})

jQuery代码(使用前请加载jQuery)

$("table").wrap("<div class='table-area'></div>");

3.Typecho的编辑器没有插入表格的功能,Markdown插入表格的语法可以参考:https://www.jianshu.com/p/2df05f279331

在Typecho主题上添加热门文章功能

热门文章即网站中查看次数最多的文章,一般热评文章、热门文章和随机文章是网站常用的排行文章模块。下面介绍一下如何添加热门文章功能。本处代码来自博客吧,原文是热评文章,博主改成了热门文章,如果需要热评文章可到来源查看。
1.首先安装插件,然后在主题function.php文件中添加以下代码:

function getHotView($limit = 10,$hr = 'nodisplay'){
    $db = Typecho_Db::get();
    $result = $db->fetchAll($db->select()->from('table.contents')
        ->where('status = ?','publish')
        ->where('type = ?', 'post')
        ->where('created <= unix_timestamp(now())', 'post') //添加这一句避免未达到时间的文章提前曝光
        ->limit($limit)
        ->order('viewsNum', Typecho_Db::SORT_DESC)
    );
    if($result){
        foreach($result as $val){           
            $val = Typecho_Widget::widget('Widget_Abstract_Contents')->push($val);
            $post_title = htmlspecialchars($val['title']);
            $permalink = $val['permalink'];
            if($hr == 'display'){
                echo '<li><a href="'.$permalink.'" title="'.$post_title.'" target="_blank">'.$post_title.'</a></li><hr id="hr-sidebar" />';                  
            }elseif($hr == 'nodisplay'){
                echo '<li><a href="'.$permalink.'" title="'.$post_title.'" target="_blank">'.$post_title.'</a></li>';
            }
        }
    }
}

2.然后就可以根据实际需要在模板文件添加调用代码了,调用代码:

<?php getHotView('10','nodisplay');?>

'10'表示要调用的文章数量,'nodisplay'表示不显示分割线(显示分割线为'display')。

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
标签: typecho typecho主题 typecho主题开发
最后更新:2018年8月18日

lzy20021010

一个研究了N年IT的博主

打赏 点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

文章目录
  • 在Typecho主题上添加表格样式
  • 在Typecho主题上添加热门文章功能
最新 热点 随机
最新 热点 随机
WordPress屏蔽海外非中文垃圾评论(2023版) Dell Inspiron 15-3541 笔记本折腾记 本站架构由Typecho迁回WordPress 世界,您好! 利用FreshRSS自建RSS在线订阅平台 阿里云国际版日本轻量应用服务器——联通精品线路|$3.5/月|单核|0.5G|20G|1T
《Lzy Tech Space》(本站英语分站)诞生记 腾讯云免费国内CDN和Cloudflare海外CDN的开通和使用 佳能多功能一体机系列:1.佳能多功能一体机(打印机)的安装 利用FreshRSS自建RSS在线订阅平台 域名转移教程(以新网域名转移到西部数码为例) Typecho更新小记
标签聚合
用户 博客 服务器 域名 来源 文件 Windows 网站

COPYRIGHT © 2015-2022 Lzy's Hobby ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

Powered by WordPress

Server by Aliyun

闽ICP备18019376号-1

闽公网安备 35052102000284号