butterfly主题 cover 尺寸

2024-11-09

Hexo博客美化之蝴蝶(butterfly)主题魔改

Hexo是轻量级的极客博客,因为它简便,轻巧,扩展性强,搭建部署方便深受广大人们的喜爱.各种琳琅满路的Hexo主题也是被各种大佬开发出来,十分钦佩,向大佬仰望,大声称赞:流批!!! 我在翻看各种主题后,便选择了蝴蝶这个主题,蝴蝶主题是由大佬Jerry制作的,其简洁,具有现代风格,扩展强,配置简单明了将我所吸引. 效果图: 蝴蝶主题github 于是我按照主题的文档完成主题配置,参照其他butterfly使用者,又添加了一点魔改.为了方便大家,减少配置上花的时间,我就把脚手架代码放到gitee

给博客使用Butterfly主题并部署到GitHub服务器

目录前言一.安装Butterfly主题二.将本地博客部署到GitHub服务器三.将个人域名与GitHub绑定前言安装完Hexo框架后,自带的主题在thems文件夹下可以查看,应用后界面: Hexo提供了290+主题,点击可前往官网访问:Hexo主题我选择的主题是 Butterfly ,安装后的界面如下: 图源:Butterfly官方Github 我的个人博客:XJHui'S BLOG 一.安装Butterfly主题 1.可供选择的版本注意:两个版本供使用者选择,我首次安装的是

Hexo+Butterfly主题美化

前言本博客基于Hexo框架搭建,用到 hexo-theme-butterfly 主题(本人博客Butterfly版本3.4.0),hexo-theme-butterfly是基于Molunerfinn的hexo-theme-melody的基础上进行开发的. Butterfly 已经更新到 3.6.2 ,请先参考这系列文档 Butterfly教程进行基本配置 .如果这篇文章帮到了你,请在留言板写下您的评语吧,感谢您的大力支持! 主题特点: 1. 简单漂亮,文章内容美观易读 2.Materia

Butterfly美化

Butterfly美化首先提示,本文量特别大哦!基本上有所有的美化,还在持续更新ing,谨慎入坑......... 主题配置文件修改基础配置最最最开始的,好不容易搭建了自己的个人博客,当然要写上自己的名字.签名......,证明身份.而且身为一个Chinese,还是中文舒服,所以主目录下_config.yml的配置文件: # Site title: FATE #标题名字 subtitle: '' description: '' #签名 keywords: author: MoYu-zc #

短短1天我学会了如何修改Butterfly的配置文件

目录一.修改默认语言二.创建标签.分类.关于和留言版页面三.添加搜索框四.飘带背景五.使用Valine添加评论功能并支持邮箱提醒六.收录谷歌.百度一.修改默认语言说明:安装Butterfly主题后,在浏览器显示的是英文,可以修改_config.yml配置文件变为中文. cd blog/ //进入安装Hexo框架的目录 vim _config.yml 找到language并将其修改为 zh-CN 修改后使用命令:hexo clean.hexo g.hexo d 上传主题,验证是否修

手摸手带你用Hexo撸博客(二)之配置主题

在上一篇博客手摸手带你用Hexo撸博客(一)中主要介绍了博客的初步搭建今天我们继续讲如何在Hexo搭建的博客中应用主题官网选择自己喜欢的主题点击这里Hexo主题进入官网主题页面然后选择自己喜欢的一个我这里选择的是Butterfly主题,也是我目前仍在使用的安装目前有三种安装方式Gitee.GitHub.npm Gitee安装 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git theme

Hexo之更换背景及透明度

Hexo之更换背景及透明度引入方式首先,介绍一下引入方式,外部导入css文件,不影响内部配置. 1.创建css文件创建一个css文件移动到\themes\butterfly\source\css目录下. 2.引入 inject在\source\_data的butterfly.yml中: (如果没有,可以创建一个_data文件夹,将\themes\butterfly中的 _config.yml复制过去,重命名为butterfly.yml) 按以下方式引入css文件. <link rel=&quo

Layui动画、按钮、表单

Layui动画.按钮.表单在实用价值的前提之下,我们并没有内置过多花俏的动画.而他们同样在 layui 的许多交互元素中,发挥着重要的作用.layui 的动画全部采用 CSS3,因此不支持ie8和部分不支持ie9(即ie8/9无动画). <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HelloWorld</title> </head&

Ubuntu18.04下使用Hexo框架搭建个人博客

一.安装node.js 说明:安装node.js的原因:Hexo框架是基于node.js. 1.推荐使用nvm安装速度快,也可自行百度其它方法. wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash 注意:回车后等待安装完成,不要提前退出. 感谢:yaxx 2.安装node.js后就可以通过npm包管理器安装Hexo框架了,由于npm的服务器在国外速度较慢,可以使用cnpm(淘宝)

Hexo博客框架攻略

前言前天无意在b站看到up主CodeSheep上传的博客搭建教程,引起了我这个有需求但苦于没学过什么博客框架的小白的兴趣.于是花了两天时间终于终于把自己的博客搭建好了,踩了无数的坑,走偏了无数的路,百度(谷歌)了无数次,但真的很有成就感. 注意:Hexo是个很成熟(使用人数多)的博客框架,你遇到的问题别人基本都能遇到,沉住气总能找到解决方法. 说明 1.为了避免以后再搭建的时候踩到这些坑,并且我也有写博客的习惯,决定把教程和问题的解决方法总结在以后的四篇文章中,等文章发布后链接会在下面给出.

手摸手带你用Hexo撸博客(三)之添加评论系统

原文地址注: 笔者采用的是butterfly主题, 主题内置集成评论系统 butterfly主题开启评论开启评论需要在comments-use中填写你需要的评论. 以Valine为例 comments: use: - Valine # 是否显示服务商 text: true # 懒加载开启之后无法计数 lazyload: false # 评论计数 count: true 配置你的 LeanCloud 应用遵循 Valine的指示去配置你的 LeanCloud 应用.以及查看相应的配置説明.

【原】为什么选择iPhone5的分辨率作为H5视觉稿尺寸

[20160105更新:可以用iPhone6分辨率为视觉稿尺寸啦] 又是一年的520网络情人节,深圳这边却下了大雨,这雨只能是单身汉的泪,而对于我来说这一天具有特别的意义,一来怀念父亲,二来对我这种结婚人士来说还可勉强表达对老婆的爱,so,本文的图片宽均以520像素来设计. 回到主题,在微信朋友圈经常看到的H5页面(滑屏页面),除了炫酷的动画效果之外,细心的你会发现有些H5页面在不同的移动设备上适配效果良好,页面的元素适配你的设备屏幕,并且展示完整的信息,如下图,页面在iPhone 6和iPho

博客博客vno主题(我正在用的这个博客主题)

将你自己博客园博客的主题设置为lessismore, #divRefreshComments { text-align: right; margin-right: 10px; margin-bottom: 5px; font-size: 9pt } .topicListFooter { text-align: right; margin-right: 10px; margin-top: 10px } * { margin: 0; padding: 0 } body { font-family:

CSS实现背景图尺寸不随浏览器缩放而变化

方法一. 把图片作为background,方法二使用img标签.同时要有一张足够大尺寸的图片. 方法一. 把图片作为background 有几个CSS的属性要提一下:background-size:cover,这个CSS3的属性作用是把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中,如果不使用这个属性,在IE11和FireFox中缩放浏览器,背景图片会随之缩小,同时使用-webkit-background-size: cover和-o-back

iPhone / iPad UI界面设计与图标设计的尺寸设计规范+安卓+网页

①iPhone的设计尺寸 iPhone界面尺寸: 设备分辨率状态栏高度导航栏高度标签栏(工具栏)高度 iPhone6 plus设计版 1242 × 2208 60px 132px 146px iOS APP设计一稿支持iPhone5/iPhone6/Plus设计流程一套完整的UI设计规范手册(IOS版) 移动端界面设计之尺寸篇(淘宝版) 图说: iPhone 6 (plus) 没那么容易搞定设计尺寸回顾:iOS设计规范整理汇总 iPhone6 plus物理版 1080 × 1920

(视频) 《快速创建网站》3.4 网站改版3分钟搞定－ WordPress主题安装和备份

本文是<快速创建网站>系列的第8篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag/wordpress-on-azure/ 1. 网站管理平台WordPress和云计算平台Azure简介 (6分钟视频 )2.1 在Azure上创建网站及网站运行机制 (13分钟视频)2.2 域名绑定操作和Azure负载均衡机制 (12分钟视频)2.3 WordPress 初始化和网站管理功能 (11分钟视频

React Native中设计主题机制

昨天和同事讨论组件隔离性的时候讨论到关于默认样式的问题:很多情况下我们希望能够把组件设计为通用的,然后在具体项目中给他们指定一些通用的样式,譬如:背景颜色.默认字体等等.这听起来在CSS下运作起来就很简单了,我们只要在创建组件的时候指定好className,然后可以用一个独立的theme.css来为某些className绑定样式. 然而,在React Native中我们做不到这一点.甚至,我们还可以在官方文档中的某些部分看到一些这样的讨论: React组件在概念上被设计为强隔离性的:你应当可以在

discuz个人空间主题列表图片模式实现方法

discuz X3空间主题列表图片展现模式,discuz实现个人空间主题列表调用图片模式,discuz home图片列表如果需要实现该呈现方式,我们需要首先了解discuz封面图片存储原理:discuz没有将主题列表封面路径存在数据表中,只是在pre_forum_thread表中存了一个cover标识.然后用getthreadcover 函数调取,diy调用的图片也会产生缩略图,可以设置缩略图的质量.封面图片存储路径格式:data/attachment/forum/threadcover/4

background-size的两个属性：cover和contain

两种都不会造成图片失真,其中: (1)cover:相当于宽度等于元素的宽度,高度设为auto: (2)contain:相当于高度等于元素的高度,宽度设为auto: 例如:设置一个高度和宽度都为300px的容器,然后将一张1600px*1200px尺寸的图片设为为图片的背景,这个时候就应该想到设置下background-size

CSS3 background-size 属性值：cover

当设置值为cover,可以呈现出图片铺满浏览器内容的视觉效果实例规定背景图像的尺寸: div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; } 定义和用法 background-size 属性规定背景图像的尺寸. 默认值: auto 继承性: no 版本: CSS3 JavaScript 语法: object.style.backgroundSize="60px

butterfly主题 cover 尺寸

热门专题