基于Handsome主题的站点页脚美化教程
导读
很多基于Typecho平台的主题,在页脚信息展示方面,其样式都过于单调,对于追求美观的人来说,这是难以接受的。
下面以 Handsome 主题为例,讲解一下如何美化页脚,话不多说,直接看前后效果对比:
魔改步骤
Step1: 将以下内容添加至 外观设置
>> 开发者设置
>> 博客底部左侧信息
下:
注意:内容需根据个人站点稍作调整。
<div class="github-badge"><span class="badge-subject">Copyright</span><a href="./" target="_blank"><span class="badge-value bg-blue">©2017 WQT's Blog</span></a>
</div> |
<div class="github-badge"><span class="badge-subject">粤ICP备</span><a href="http://beian.miit.gov.cn/" target="_blank"><span class="badge-value bg-green">17098080号</span></a>
</div>
Step2: 将以下内容添加至 外观设置
>> 开发者设置
>> 博客底部右侧信息
下:
<div class="github-badge"><span class="badge-subject">Powered by</span><a href="http://www.typecho.org" target="_blank"><span class="badge-value bg-blue">Typecho</span></a>
</div> |
<div class="github-badge"><span class="badge-subject">Theme by</span><a href="https://www.ihewro.com/" target="_blank"><span class="badge-value bg-orange">Handsome</span></a>
</div>
Step3: 将以下内容添加至 外观设置
>> 开发者设置
>> 自定义 CSS
下:
/*底部页脚css*/
.github-badge {display: inline-block;border-radius: 4px;text-shadow: none;font-size: 12px;color: #fff;line-height: 15px;background-color: #abbac3;margin-bottom: 5px
}.github-badge .badge-subject {display: inline-block;background-color: #4d4d4d;padding: 4px 4px 4px 6px;border-top-left-radius: 4px;border-bottom-left-radius: 4px
}.github-badge .badge-value {display: inline-block;padding: 4px 6px 4px 4px;border-top-right-radius: 4px;border-bottom-right-radius: 4px
}.github-badge .bg-blue {background-color: #007ec6
}.github-badge .bg-orange {background-color: #ffa500
}.github-badge .bg-green {background-color: #3bca6e
}
Step4: 修改footer.php文件
通过 ssh
登录网站服务器,找到主题目录,修改 handsome\component\footer.php 文件。
提示: 修改前应注意提前备份该文件,以便操作失误可还原。
在 footer.php
文件中,找到以下框选的2处内容,将其删除即可:
删除内容:
内容一: Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank" href="https://www.ihewro.com/archives/489/">handsome</a>
内容二: © <?php echo date("Y"); ?> Copyright
修改完毕后,再次访问网站,即可看到修改后的效果啦!
基于Handsome主题的站点页脚美化教程相关推荐
- 奥斯汀页眉怎么设置_编辑页眉页脚怎么样每页不相同(编辑页眉页脚设置教程分享)...
除分享删除方法外,还分享页眉横线的本质.接下来看它们具体的操作方法,操作所用 Word 版本为 Word 2016. 一.Word 页眉基本操作 (一)Word 插入页眉 1.选中"插入&q ...
- Word控件Spire.Doc 【页眉页脚】教程(7): 添加不同的首页页眉和页脚
Spire.DOC是一款专门对 Word 文档进行操作的 .NET 类库.在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建.编辑.转换和打印 Microsoft Wor ...
- Word控件Spire.Doc 【页眉页脚】教程(1):用C#/VB.NET:在 Word 文档中添加页眉和页脚
Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库.在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建.编辑.转换和打印 Micr ...
- Word控件Spire.Doc 【页眉页脚】教程(4): 从C#中的word文档中删除标题
Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库.在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建.编辑.转换和打印 Micr ...
- Word2010页眉页脚设置教程
http://wenku.baidu.com/view/62391c21a5e9856a56126009.html
- 怎么在PDF文件中添加页脚
在PDF文件中除了页眉还有页脚,页眉可以很好的让读者迅速关注到你的文章内容主题,而页脚则可以给读者在读完文章后再次加深影响.怎么在PDF文件中添加页脚呢? 步骤如下: 1.在百度中关键词搜索迅捷PDF ...
- handsome主题美化(二)- 底部页脚版权美化
原文链接 1.将以下添加至自定义CSS中 /*底部页脚*/ .github-badge {display: inline-block;border-radius: 4px;text-shadow: n ...
- python使用fpdf生成pdf文件章节(chapter),包含:页眉、页脚、章节主题、数据排版等;
python使用fpdf生成pdf文件章节(chapter),包含:页眉.页脚.章节主题.数据排版等: #仿真数据 The year 1866 was marked by a bizarre deve ...
- [ 2022年4月8日更新 ]Typecho Handsome主题美化教程
首页标题居中 主题设置-开发者设置-自定义CSS /*主题标题居中开始*/ header.bg-light.lter.wrapper-md {text-align: center; } /*主题标题居 ...
- Axure RP 基于母版实现页面框架/页眉/页脚/导航栏
文章目录 一.前言 二.添加母版 三.添加到页面中 四.效果演示 一.前言 不管是做个App设计,还是Web设计,N个界面中总有一小部分是一模一样的. 要么是页眉.要么是页脚.要么是侧边导航栏.要么是 ...
最新文章
- Python学习札记(二十三) 函数式编程4 sorted
- mac下完全卸载postgresql的方法
- python利器app怎么查文献-科研人必备:一个工具搞定文献查阅、数据分析、模型搭建...
- 异步/同步、阻塞/非阻塞的理解
- 标准C++中的string类的用法总结(转)
- PHP与MySQL外文文献译文和原文_读懂外文文献的秘诀在这里丨49周新闻
- php正则表达式2,php正则表达式基本语法(2)
- php镂空窗,木窗镂空的雕刻象征着什么?黑色在彝族人民心中有何寓意?陆川猪为何是著名“陆川三宝”之一?...
- Ubuntu12.04上编译PlateGatewayQt
- S32K MCAL03-如何使用EB工具配置FlexCAN的波特率
- Windows xp多国语言包
- 使用Python实现子区域数据分类统计
- 大学生面试20个经典问题及回答思路!
- Cisco switchport trunk encapsulation dot1q 详解
- 现实迷途 第二章 借酒买醉
- C++ 视频播放开源库
- 如何将小车标注在百度地图上并且设置车头方向
- 揭秘Facebook官方底层C++底层函数Folly
- 【一句日历】2019年4月
- [转]如何在Windows下使用WebMatrix+IIS开发PHP程序
热门文章
- MapperReducer
- MapReduce学习笔记(二)——Mapper、Reducer和Driver
- 网络延迟到底是什么东西?
- 游戏王计算机兽,召唤兽(游戏王卡组系列)_百度百科
- kf.qq.com.lol.html,英雄联盟安全信用星级,英雄联盟封号查询中心
- LLS1000智能线路控制器
- 前装车载大屏娱乐系统去年增速超六成,德赛西威“霸榜”主机份额
- 信息服务器在哪里打开,internet信息服务(lls)管理器在哪里打开
- 怎样用计算机制作思维导图,思维导图怎样画?分享电脑绘制思维导图方法
- Ubuntu VirtualBox 安装问题解决