Hexo基于Butterfly的修改公告栏文字样式

发表于2024-11-14|更新于2024-11-14|hexo

|总字数:218|阅读时长:1分钟|浏览量:

效果

教程

如果你想要修改公告栏的文字样式，只需在主题配置文件_config.butterfly.yml 中写入如下配置：

aside:
  card_announcement:
    enable: true
    content: <center><b>--- 竹山一叶 ---<br><a href="https://blog.yazan.top/" title="这里可以显示超链接" class="anno_content"><font color="#5ea6e5">还可以控制链接的颜色</font></a><br><a href="https://blog.yazan.top/xxx.zip" title="点这里可以下载网站的资源" class="anno_content"><font color="#5ea6e5">点此下载</font></a></b></center>

请参考上面的代码，自定义文字的加粗效果、修改文字颜色、增加超链接、以及增加下载资源的地址等，有了上述的方法就可以自由发挥啦!

文章作者: 海伦泽

文章链接: https://blog.yazan.top/post/36383.html

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源海伦软件库！

相关推荐

Butterfly今日诗词侧边栏小组件

组件样式安装教程创建组件主题新建themes/butterfly/layout/includes/widget/card_poem.pug，内容如下 123456789101112131415161718#card-poem.card-widget #poem_sentence #poem_info #poem_dynasty #poem_authorscript(src='https://cdn.jsdelivr.net/npm/[email protected]/poem/jinrishici.js', charset='utf-8')script(type='text/javascript'). jinrishici.load(function(result) { var sentence = document.querySelector("#poem_sentence") var author...

hexo基于butterfly的图流背景与顶部图修改

前言之前使用过 hexo基于butterfly的页脚美化的请注意侧边栏透明化。操作1.设置图片这个是 Butterfly 自带的功能，修改主题的配置文件 _config.butterfly.yml. 编辑 index_img、background、footer_img 选项。设置网站背景，并将主页顶部图和页脚背景改为透明。(需要将以下示例地址替换为自己的图片地址。) 12345678910111213141516# Image (圖片設置)# --------------------------------------# The banner image of home pageindex_img: transparent# Beautify/Effect (美化/效果)# --------------------------------------# Website Background (設置網站背景)# can set it to color or image (可設置圖片或者顔色)# The formal of image:...

Hexo基于butterfly的侧边栏添加微博热搜

示例：教程 1.在\themes\butterfly\layout\includes\widget目录下新建card_weibo.pug文件，并写入如下代码： 12345678if theme.aside.card_weibo.enable .card-widget.card-weibo .card-content .item-headline i.fab.fa-weibo span 微博热搜 #weibo-container .weibo-list 2.在\themes\butterfly\layout\includes\widget\index.pug文件中page项添加如下代码： 12!=partial('includes/widget/card_weibo', {}, {cache:...

给打赏按钮增加投币音效

废话不多说，直接开整 1.修改themes\butterfly\layout\includes\post\reward.pug,整体替换为以下内容： 123456789101112131415161718192021link(rel='stylesheet' href=url_for(theme.CDN.coin_css) media="defer" onload="this.media='all'").post-reward button.tip-button.reward-button span.tip-button__text= _p('donate') .coin-wrapper .coin .coin__middle .coin__back .coin__front .reward-main ul.reward-all each item in...

标签页面增加数量

示例：修改 butterfly\scripts\helpers\page.js 文件：在第 52 行的 ${tag.name} 后增加 (${tag.length})，如下： 1result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name} (${tag.length})</a>`

Hexo基于butterfly文章页透明效果

前言在不妨碍正常阅读的情况下想更好地展示背景或者一些效果，实现文章页透明是一种不错的选择。操作1.在 \themes\butterfly\source\css 路径下创建一个 xxx.css 文件，在文件中添加如下代码： 123456789/* 首页文章栏背景透明 */#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post { background: var(--light_bg_color)}/* 侧边栏透明 */#aside-content .card-widget { background: var(--light_bg_color)} 2.然后将该文件引入到_config.butterfly.yml 文件中 inject 的 head 处： 1-...

数据加载中