作者： 清朝云

共计 519 个字符，预计需要花费 2 分钟才能阅读完成。

sentinel 是阿里中间件团队开源的，面向分布式服务架构的轻量级高可用流量控制组件，主要以流量为切入点，从流量控制、熔断降级、系统负载保护等多个维度来帮助用户保护服务的稳定性。

docker 搭建方式如下：

docker run -d \
--name sentinel \
-p 8858:8858 \
--restart always \
bladex/sentinel-dashboard

默认账号密码：sentinel/sentinel，登录后可进行查看各链路的情况：

/>

阿里的 Sentinel 和奈飞得 Hystrix 对比：

提醒：本文发布于603天前，文中所关联的信息可能已发生改变，请知悉！

共计 465 个字符，预计需要花费 2 分钟才能阅读完成。

要让图片悬浮，添加如下 css 即可。因为清朝云觉得图片具体文字太近，加了一个 margin 属性，不需要的可以去掉。

/*文章图片悬浮效果*/
.post-content-content img {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
    margin: 10px 0;
}
.post-content-content img:hover {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    box-shadow:5px 5px 10px gray;   
}

提醒：本文发布于602天前，文中所关联的信息可能已发生改变，请知悉！

共计 451 个字符，预计需要花费 2 分钟才能阅读完成。

之前写过 WordPresss 主题美化-给代码块添加 mac 风格的背景图片，这方式虽然能实现，但是由于使用了背景图片，操作还是稍微有点麻烦。

今天这个代码直接插入代码即可实现美化代码块，清朝云现在用的就是这个，css 代码如下：

.post-content-post pre::before {
    content: "";
    display: block;
    background: #fc625d;
    top: 9px;
    left: 15px;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
    margin: 0px 2px -7px;
    z-index: 1000;
    position: absolute;
}

.post-content-post pre {
    max-height: unset;
    padding: 0 0.5em 0 0.5em;
    background: #2d3748;
}

.post-content-post pre code {
    margin-top: 16px;
}

提醒：本文发布于602天前，文中所关联的信息可能已发生改变，请知悉！

共计 694 个字符，预计需要花费 2 分钟才能阅读完成。

鼠标悬停时头像旋转和放大的 css 代码如下：

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

.widget-admin-author-avatar img: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;
    }
}

如果想让鼠标悬停时评论的小工具的头像旋转，添加如下 css 代码：

/** 评论头像旋转 */
.widger-avatar img {
    border-radius: 50%; 
    transition: 1s;
}

.widger-avatar img: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;
    }
}

提醒：本文发布于601天前，文中所关联的信息可能已发生改变，请知悉！

共计 174 个字符，预计需要花费 1 分钟才能阅读完成。

Corepress 主题中，如果不做处理，随着标题长度的增长，就会变成这个样子。

/>

添加以下 css 代码可解决问题：

.post-turn-page-main a {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

修改 css 样式后，效果如图：

提醒：本文发布于600天前，文中所关联的信息可能已发生改变，请知悉！

/>

共计 601 个字符，预计需要花费 2 分钟才能阅读完成。

添加如下 css，可给评论框添加背景图：

/*评论背景图*/
textarea#comment {
    background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(/wp-content/uploads/2023/03/comment.png) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;
}
textarea#comment:focus {
    background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;
}

背景图链接需要替换为自己的，效果如下：

提醒：本文发布于600天前，文中所关联的信息可能已发生改变，请知悉！

/>

共计 354 个字符，预计需要花费 1 分钟才能阅读完成。

原主题文章下面的点赞、分享和打赏图标都是单色图标，可以对这些图标进行替换，下载图标后放在 /wp-content/themes/CorePress-Pro/static/img/ 文件夹下。

想要给图标添加鼠标悬停放大效果添加如下 css 即可：

/** 文章下图标放大效果 */
.post-end-tool-btn-item svg:hover {
    transform: scale(1.2); 
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
}

下载地址

图标：https://pan.baidu.com/s/1dXWM1Tu3kFUv7OaVst_pUA?pwd=akak

提醒：本文发布于600天前，文中所关联的信息可能已发生改变，请知悉！