基于Hexo和Butterfly创建个人技术博客,(8) 博客网站butterfly主题UI框架美化,基于hexo、butterfly、node.js、aws云、阿里云搭建专业的个人/公司级技术博客网站。保姆级教学从零开始一步步深入,详细记录了个人建站全过程。系列专题-博客网站主体butterfly主题UI框架美化
gitclone-b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly //这个是stylus,主题的依赖,必须安装 npm install hexo-renderer-pug hexo-renderer-stylus 然后在hexo的_config.yaml(记住是你博客的配置文件,不是刚下载的主题配置文件)更改theme:butterfly,保存,重启hexo server,就可...
在搭建好 Hexo 博客后,我们可以通过修改主题配置文件来实现文章的美化。 选择Butterfly 主题后,我们可以通过修改主题配置文件对文章进行美化。具体来说,可以对以下几个方面进行调整: 1.修改标题样式:我们可以通过修改 CSS 样式表,调整标题的字体、大小和颜色,使其更加突出和美观。 2.调整段落间距:为了让文章阅读起来...
第一步,在themes/Butterfly/layout/flink.pug文件内加入如下代码: h4= i.cdescr 具体位置,请参考如下: 第二步,此后我们在source/_data/link.yml中就可以多加一栏变量了,例如: 跳过hexo 的渲染 或许你会问这个到底有啥用呢?来两张图你就知道了:
1.hexo-butterfly样式美化 基本配置信息可参考“博客项目基本操作”文档说明进行配置,此处针对一些个性化设置做简单配置说明 具体配置详情可参考官方文档说明:https://butterfly.js.org/posts/4aa8abbe/ 主题页面 Front-matter概念 Front-matter 是 markdown 文件最上方以 —- 分隔的區域,用於指定個別檔案...
第二步,在source/_data/butterfly.yml 内加入如下代码(位置随意): 这里提供我的模板,当然你需要修改成为你自己的风格。 # 友链界面美化 PS: PS:欢迎交换友链,以下是相关注意事项。 require_headline: A Few Requirements requirement1: 本站不参与商业性网站、下载站、视频站等 ...
我个人博客安装的是butterfly这个主题,使用live2d插件右下角加了个白猫。这个白猫嘛就是大锤,由于我家大锤是白色而且是鸳鸯眼,于是有了改模这步。 不废话直接上步骤: 1.安装模块: npm install --save hexo-helper-live2d 2.安装模型: npm install live2d-widget-model-tororo ...
Hexo + Fluid 美化 本博客的主题已由 Fluid 改为 Butterfly, 部分功能可能失效,请注意! Hexo + Fluid 美化 Fluid 简介 Fluid 是基于 Hexo 的一款 Material Design 风格的主题,由Fluid-dev负责开发与维护。 主题GitHub:https://github.com/fluid-dev/hexo-theme-fluid...
编辑_config.butterfly.yml 文件在`inject->bottom` 下面添加如下内容: - 然后hexo clean && hexo g 即可。 2.14 添加鼠标点击烟花爆炸效果 在/themes/matery/source/js 新建文件 fireworks.js,并添加如下代码 Download Now 然后在 /themes/matery/layout/_partial/footer.ejs 中添加如下代码: <% if (theme...