TypechoJoeTheme

赵墨轩部落格

[建站教程]墨轩部落格基于Typecho搭建的博客handsome主题的魔改美化教程分享

[scode type="green"]前言:墨轩部落格用Handsome主题已经有一段时间了,体验很不错,鉴于经常有小伙伴问墨轩修改方法,这里就在博客里说一下,顺便做个记录方便以后使用,同时也给同样使用Handsome主题的各位小伙伴做个参考。[/scode]


首页添加翻转动画
[post cid="1.html" /]
一个GoTop(返回顶部)按钮+动画
[post cid="24.html" /]
文章底部添清新的加版权说明
[post cid="13.html" /]


首页文章版式圆角化

本项修改的是首页文章版式,包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置自定义css

#圆角大小可修改15px数值
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}

首页文章图片获取焦点放大

本项修改的是首页文章图片,将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置自定义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);
}

首页头像转动并放大

本项修改的是首页头像,将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置自定义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
}

首页头像放大并自动旋转

本项修改的是首页头像,效果就是将首页头像放大,并使其自动旋转。将以下代码添加至后台主题设置自定义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;
}

文章标题居中

本项修改的是文章标题,使其居中。将以下代码添加至后台主题设置自定义CSS

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

首页文章版式阴影化

本项修改的是首页文章版式,包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置自定义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);
}

彩色标签云

打开后台-更改外观-设置外观-开发者设置-选择好需要的颜色粘贴至自定义JavaScript即可颜色也可以自行设定,修改代码中的十六进制颜色值即可

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

[scode type="yellow"]如果主题中启用了pjax,还需要将上面代码添加到pjax-pjax回调函数中[/scode]


博客介绍打字效果

后台-设置外观-初级设置-博客介绍添加以下代码

<span class="text-muted text-xs block"><div id="chakhsu"></div> <script> var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} function e() {return String.fromCharCode(94 * Math.random() + 33)} function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n}function i() {var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l = "❤", o = ["不要假装很努力,因为结局不会陪你演戏" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>

右侧文章图标和评论头像鼠标悬停旋转

本项修改的是右侧文章图标和评论头像,鼠标悬停旋转。将以下代码添加至后台主题设置自定义CSS

/*右侧文章图标和评论头像鼠标悬停旋转*/
.img-circle {
    transition: all 0.3s;
}

.img-circle:hover {
    transform: rotate(360deg);
}

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

右侧列表导航栏图标颜色

本项修改的是右侧列表导航栏图标颜色。将以下代码添加至后台主题设置自定义CSS

/*右侧列表导航栏图标颜色*/
.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}

头像呼吸光环和鼠标悬停旋转放大

本项修改的是首页头像,效果就是将首页头像放大,并使其自动旋转和呼吸灯效果。将以下代码添加至后台主题设置自定义CSS

/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}

首页下方版权美化

本项修改的是首页下方版权颜色样式的美化。将以下代码添加至后台主题设置-开发者设置-博客底部右侧信息。根据自己信息修改

<div class="github-badge">
<a rel="license" href="http://beian.miit.gov.cn/" target="_blank" title="京ICP备14042203号">
<span class="badge-subject">京ICP备</span><span class="badge-value bg-black">14042203号</span></a>
</div>
&nbsp;|&nbsp; <div class="github-badge">
<a rel="license" href="http://www.typecho.org" target="_blank" title="由Typecho强力驱动">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span></a>
</div>
&nbsp;|&nbsp; <div class="github-badge">
<a rel="license" href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span></a>
</div>

[scode type="share"]原文转自:https://www.lxzzz.cn/533.html[/scode]

赞(0)
评论 (309)
  1. HenryMap 作者
    Windows 7 · Google Chrome

    Even a child knows how to make money. Do you? Link - http://1004tour.kr/1search/linker2_0/jump.php?url=https://profit-strategy.life/?u=bdlkd0x&o=x7t8nng

    2020-12-15 回复
  2. Сloudcibly 作者
    Windows 8.1 · Google Chrome

    You will get a 200% return on the day of new players! + $ 500 to the account.
    <font color=red>* Register and play for free + $ BONUSES</font>
    Do you want to spend an interesting time, as well as earn on your pleasure?
    Do you like Sports, ESports, Casino, or Poker, or do you like Live roulette in which you yourself follow all the actions online, via an IP camera.
    We have regular promotions, and the opportunity to play for FREE!

    Get a bonus of 100 euros after registration. (Conditions are available after registration.)Win casino tournaments and get from 1,000 to 50,000 euros.Do not miss the opportunity to participate in the new Year's drawing "goodbye 2020!" and win 60 euros.20% cashback!Also get 5000 Bonuses when you register!

    *Luxury Vacation is:
    *Sports betting.
    *Virtual-sports.
    *cybersport eSport.
    *The battle of the rates.
    *Poker.
    *Casino.
    *Live Casino.
    *And much more…
    Lots of BONUSES for every taste and color.
    The most generous and profitable bookmaker with a built-in profitable casino.
    Try it for free and win cash prizes!

    <font color=red>* Register and play for free + $ BONUSES</font>
    <font color=red>* Mobile app play for free + $ BONUSES</font>
    <font color=red>* Registered and try out for free + $ 25 BONUS</font>
    <font color=red>* Registered and try out for free + $ 500 BONUS + Free spin</font>
    <font color=red>* Registered and try out for free + $ 3 000 BONUS</font>
    <font color=red>* 2 Registered and try out for free + $ 3 000 BONUS</font>
    <font color=red>* Register and play for free + $ BONUSES RUS</font>

    If it doesn't go to the site, use a free VPN for your browser!

    2020-12-15 回复
  3. Jameskal 作者
    Windows 8.1 · Google Chrome

    САмое эффективное для продаж - Pinterest. Сотни Продаж на Etsy, amazon, ebay, shopify за 2 месяца при ср.цене чека 300 usd https://youtu.be/GNOZtXGGM-I

    2020-12-15 回复
  4. leolawc11 作者
    Windows 10 · Google Chrome

    Enjoy our scandal amateur galleries that looks incredibly dirty
    http://lesbiancougars.hotblognetwork.com/?melina

    free porn gall porn star jasper free parody porn teen titins porn star sandy porn madison monroe

    2020-12-15 回复
  5. Ordcew 作者
    Windows 8.1 · Google Chrome

    Brand
    cialis effectiveness rate cialis sales no prescription drugs generic cialis legal

    2020-12-15 回复
  6. Robertrob 作者
    Windows 10 · Google Chrome

    第一借錢網擁有全台最多的借錢資訊

    https://168cash.com.tw/

    2020-12-14 回复
  7. SimonGlota 作者
    Windows 10 · Google Chrome
    2020-12-14 回复
  8. Edwardbrilm 作者
    Windows 7 · Google Chrome

    Приветствую!
    Нашел русскую информацию на этом сайте: http://okaybro.ru :
    девушки красивые с рождения http://okaybro.ru/krasivye_devushki/
    Ежегодная Историческая Регата в Венеции http://okaybro.ru/11803-ezhegodnaya-istoricheskaya-regata-v-venecii.html
    «Каменный лес» на Мадагаскаре «Каменный лес» на Мадагаскаре
    http://okaybro.ru/7754-pobedit-ili-umeret-o-samom-agressivnom-i-bezbashennom-zvere-v-rossii.html

    2020-12-14 回复
  9. anniWew 作者
    Windows 10 · Google Chrome

    комплексный ремонт воронеж

    характеристика рабочего по комплексному обслуживанию и ремонту зданий
    комплексный ремонт квартир цены киев
    рабочий по комплексному обслуживанию и ремонту зданий еткс 2017
    комплексный ремонт квартир самара
    комплексный ремонт квартиры

    2020-12-14 回复