butterfly主题魔改

butterfly主题魔改css

在source目录下新建 css/custom.css 文件，在 _config.butterfly.yml 文件中引入

inject:
  head:
   - <link rel="stylesheet" href="/css/custom.css">

以下样式可以根据自己喜欢随意增删

/* 自定义字体 字体放在source/fonts/目录下 */
@font-face {
    font-family: 'PingFang';
    src: url('../../fonts/PingFang-Bold.ttf');
}

/* 页脚透明 */
#footer {
    background: transparent !important;
}

/*页脚自定义字段字体颜色*/
/* 也就是配置文件里的footer_custom_text */
.footer_custom_text {
    color: #00c4b6;
}

/* 版权链接去掉下划线 */
.layout_post .post-copyright .post-copyright-info a {
    text-decoration: none;
}

/*移动端优化：去除归档、标签、最新文章、公告、、只保留网站统计*/
@media screen and (max-width: 800px) {
    #aside_content div:not(:last-child) {
        display: none;
        font-size: 13px;
    }
}

/* 滚动条 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #e58a8a;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    border-radius: 2em;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-moz-selection {
    color: #fff;
    background-color: #e58a8a;
}

/* 侧边栏天气时钟去掉背景色 */
#aside-content.aside-content > .sticky_layout > .card-widget.card-clock > .card-glass > .card-background {
    background-color: unset;
    box-shadow: unset;
}

/* 透明度修改 */
/* 首页文章卡片 */
#recent-posts > .recent-post-item {
    background: rgba(255, 255, 255, 0.9);
}

/* 首页侧栏卡片 */
.card-widget {
    background: rgba(255, 255, 255, 0.9) !important;
}

/* 文章页面正文背景 */
div#post {
    background: rgba(255, 255, 255, 0.9);
}

/* 分页页面 */
div#page {
    background: rgba(255, 255, 255, 0.9);
}

/* 归档页面 */
div#archive {
    background: rgba(255, 255, 255, 0.9);
}

/* 标签页面 */
div#tag {
    background: rgba(255, 255, 255, 0.9);
}

/* 分类页面 */
div#category {
    background: rgba(255, 255, 255, 0.9);
}

/* 鼠标样式修改 */
body {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
    default;
}

a,
img {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
    default;
}

/* 搜索框圆角 */
.search-dialog {
    border-radius: 10px;
}

更换 Twikoo 评论

https://blog.zhheo.com/p/2e6bbbd0.html

在首页增加今日诗词侧边栏小组件

在node_modules中找到butterfly依赖，然后在 layout\includes\widget\ 下新增 card_poem.pug 文件：

#card-poem.card-widget
    #poem_sentence
    #poem_info
        #poem_dynasty
        #poem_author
script(src='https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/poem/jinrishici.js', charset='utf-8')
script(type='text/javascript').
    jinrishici.load(function(result) {
        var sentence = document.querySelector("#poem_sentence")
        var author = document.querySelector("#poem_author")
        var dynasty = document.querySelector("#poem_dynasty")

        var sentenceText = result.data.content
        sentenceText = sentenceText.substr(0, sentenceText.length - 1);
        sentence.innerHTML = sentenceText
        dynasty.innerHTML = result.data.origin.dynasty
        author.innerHTML = result.data.origin.author + '《' + result.data.origin.title + '》'
    });

在同目录的 index.pug 文件你要想的引入地方引入即可。

!=partial('includes/widget/card_poem', {}, {cache: true})

最后在 _config.butterfly.yml 文件中引入如下 css 链接：

inject:
  head:
  # - <link rel="stylesheet" href="/xxx.css">
   - <link rel="stylesheet" href="/css/custom.css">
   - <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/mainColor/heoMainColor.css">
   - <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/poem/poem.css">

嵌入哔哩哔哩视频

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe src="//player.bilibili.com/player.html?aid=206890880&bvid=BV1Ah411z7Po&cid=378344365&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position:absolute; height: 100%; width: 100%;"> </iframe>
</div>

效果如下：