search

maxchang3 / hexo-bilibili-card

一个Hexo插件，在你的文章中插入b站的视频卡片，样式模仿和借鉴自b站。A hexo plugin insert a bilibili card into your page or article.
42 stars 2 forks source link

视频卡片会出现文字错位的现象 #2

Closed KotobaSuke closed 3 years ago

KotobaSuke commented 3 years ago

image 如上图所示，这是因为主题的影响吗 🤔

maxchang3 commented 3 years ago

image image 抱歉昨天忘了回了，去你的blog上看了一眼是主题的问题，不过也和这边没对相关属性进行设置所以被覆盖了有关，我简单根据你的页面修改了以下，你可以修改以下css暂时来解决问题，后续版本会进行修复。 bilicard.css: 


.card-label {
    display: inline-block;
    font-weight: 550;
    height: 13px;
    border: 1.5px solid #ffc3d4;
    color: #ffc3d4;
    /* width: 30px;  删除或增大 */
    background-size: 100% 100%;
    position: absolute;
    top: -1px;
    left: 0;
    padding-left: 1px;
}
.bvideo-info .title {
    max-height: 40px;
    min-height: 19px;
    color: #222;
    line-height: 1.4;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 25rem;
    margin: 0; /* 添加这一行 */
}
grape777 commented 2 years ago

我按这个方法改了之后也没有变化hexo三连后又恢复原状，改的地方也被覆盖为原来的样子 视频两字只能显示不完全 image https://grape777.github.io/2021/12/07/%E6%B5%8B%E8%AF%95bilibili%E5%8D%A1%E7%89%87%E6%8F%92%E4%BB%B6/

请问这种情况该怎解决啊

maxchang3 commented 2 years ago

我按这个方法改了之后也没有变化hexo三连后又恢复原状，改的地方也被覆盖为原来的样子 视频两字只能显示不完全

.card-label {
    display: inline-block;
    font-weight: 550;
    width: 30px;
    height: 15px;
    border: 1px solid #ffc3d4;
    color: #ffc3d4;
    background-size: 100% 100%;
    position: absolute;
    top: -1px;
    left: 0;
    padding-left: 1px;
}

我这样修改后效果似乎比较好，请问你是修改的node_modules/hexo-bilibili-card/source/bilicard.css下的文件么？

如果修改后，hexo 三连后又会改回原状，这时候你如果重复修改 md 文件时候有修改呢？没有的话，你可以看看是包管理器如 yarn 自动、更新覆盖了你修改的css文件呢？

如果他又给你改回原样了你可以尝试使用 patch-package 制作一个补丁来自动化这个流程，网上有很多教程可以参考。

grape777 commented 2 years ago

好了！原来是我改错文件了，非常感谢！

maxchang3 commented 2 years ago

好了！原来是我改错文件了，非常感谢！

🤝 解决问题就好啦 ：）