本博客之Typecho Handsome主题美化记录

2022-11-08 16:07:42 浏览数 (1)

文章中嵌入网页

代码语言:javascript复制
<iframe align="center" width="100%" height="740px" src="链接地址"  frameborder="no" border="0"  scrolling="no" marginwidth="0" marginheight="0" ></iframe>
时光机栏目增添额外内容
代码语言:javascript复制
使用方法
    将以下代码按照需求自行修改后放到主题后台-时光机配置-RSS动态内容配置内即可
    
{"id":"iciba","name":"每日一句","url":"https://proxy.attainment.cn/https://rss.attainment.cn/iciba/7/poster"},
{"id":"oschina","name":"开源中国","url":"https://proxy.attainment.cn/https://rss.attainment.cn/oschina/news"},
{"id":"bing","name":"Bing 壁纸","url":"https://proxy.attainment.cn/https://rss.attainment.cn/bing"},
{"id":"sspai","name":"少数派","url":"https://proxy.attainment.cn/https://sspai.com/feed"},
{"id":"DailyArt","name":"每日艺术","url":"https://proxy.attainment.cn/https://rss.attainment.cn/dailyart/zh"}

美化记录

自定义CSS

文章标题居中
代码语言:javascript复制
/*文章标题居中*/
      header.bg-light.lter.wrapper-md {
      text-align: center;
    }
首页标题文字居中
代码语言:javascript复制
 /*首页标题文字居中*/
    .m-t-none.text-ellipsis.index-post-title.text-title
    {
      text-align:center !important;
    }
左上角博客LOGO/博客名称的扫光效果
代码语言:javascript复制
 /* logo扫光 */
    .navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
左上角博主信息羽毛背景

background:url后面括号里的网址就是羽毛动画的网址,你也可以把它保存下来放到自己网站的根目录的某个位置内,然后将网址改为自己的博客,防止该效果失效(也就是做了个备份的意思,当然如果你嫌麻烦也可以不做)

代码语言:javascript复制
/* 羽毛_css */
    .dropdown.wrapper {
    background:url(https://您的博客网址/yumao.webp) right bottom no-repeat;
    }

0 人点赞