【教程】基于Handsome主题百度熊掌号页面改造
由于原八七娱乐网数据丢失，我改名为爱好者，为了站点收录，于是接入百度熊掌号，以便百度熊掌号对原创文章的收录和搜索结果以及熊掌号页面的展现效果借助网上搜到的一些代码进行了简单的更改以便更加适配当前使用的 Typecho 主题，终于完成了 Typecho 熊掌号的页面改造。首先我们需要修改当前主题的 header.php 和 footer.php 文件，在里面分别添加代码，以实现熊掌号的页面改造，具体如下：1、header.php文件的修改由于 Typecho 默认是没 Canonical 标签的，所以我们要在 Header 中加入 Canonical 标签。以handsome主题为例，修改：/usr/themes/handsome/component/header.php 文件加入：
说明：本站博客Typecho程序，主题使用的Handsome,用了这么久，觉得非常适合个人站点。加上后台能方便的自定义css和js，优先级的问题完全不用担心。教程1、首页文章版式圆角化本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS。#圆角大小可修改15px数值 /*首页文章版式圆角化*/ .panel{ border: none; border-radius: 15px; } .panel-small{ border: none; border-radius: 15px; } .item-thumb{ border-radius: 15px; }2、首页文章图片获取焦点放大本项修改的是首页文章图片，将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置 自定义CSS。#放大的时间和大小自行修改以下数值 /*首页文章图片获取焦点放大*/ .item-thumb{ cursor: pointer; transition: all 0.6s; } .item-thumb:hover{ transform: scale(1.05); } .item-thumb-small{ cursor: pointer; transition: all 0.6s; } .item-thumb-small:hover{ transform: scale(1.05); }3、首页头像转动并放大本项修改的是首页头像，将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置 自定义CSS。#转动快慢和头像大小自行修改数值 /*首页头像自动旋转*/ .thumb-lg{ width:130px; } .avatar{ -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; } .avatar:hover{ transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); } #aside-user span.avatar{ animation-timing-function:cubic-bezier(0,0,.07,1)!important; border:0 solid } #aside-user span.avatar:hover{ transform:rotate(360deg) scale(1.2); border-width:5px; animation:avatar .5s }4、首页头像放大并自动旋转本项修改的是首页头像，效果就是将首页头像放大，并使其自动旋转。将以下代码添加至后台主题设置 自定义CSS。#旋转速度请修改3s数值 /*首页头像放大并自动旋转*/ .thumb-lg{ width:130px; } @-webkit-keyframes rotation{ from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .img-full{ -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite; }5、文章标题居中本项修改的是文章标题，使其居中。将以下代码添加至后台主题设置 自定义CSS。/*文章标题居中*/ .panel h2{ text-align: center; } .post-item-foot-icon{ text-align: center; }6、首页文章版式阴影化本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置 自定义CSS。#阴影颜色修改rgba后面的值 /*panel阴影*/ .panel{ box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); } .panel:hover{ box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); } .panel-small{ box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); } .panel-small:hover{ box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); } #如果也想使盒子四周也有阴影，加上以下代码 .app.container { box-shadow: 0 0 30px rgba(255, 112, 173, 0.35); }7、自定义滚动条滑块本项修改针对浏览器最右边的滚动条滑块，使其改变样式。将以下代码添加至后台主题设置 自定义CSS。/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar{ width: 3px; height: 16px; background-color: rgba(255,255,255,0); } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: rgba(255,255,255,0); } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; }8、鼠标点击特效将以下代码放在主题的handsome/component/footer.php中的之前即可。如果不是本主题，可以放在你想拥有效果的页面的之前即可，最好是全局引用的文件。#字体自行修改 文章来源：初学者