JavaScript 多语言方案) (参阅 项目文档 > 国际化) 修复 软件语言切换后可能导致的页面文字闪变及部分页面按钮功能异常 修复 工作路径为一个项目时软件启动后不显示项目工具栏的问题 修复...工作路径可能跟随软件语言切换而自动改变的问题 issue #19 修复 定时任务启动延时显著 (试修) issue #21 修复 JavaScript 模块名被覆盖声明时导致存在依赖关系的内部模块无法正常使用的问题...修复 使用悬浮窗菜单关闭悬浮窗后重启应用时悬浮窗依然开启的问题 修复 布局层次分析时长按列表项可能导致弹出菜单溢出下方屏幕的问题 修复 安卓 7.x 系统在夜间模式关闭时导航栏按钮难以辨识的问题...优化 主页搜索框的提示文本颜色适配夜间模式 优化 对话框 / 文本 /Fab/AppBar/ 列表项等部件适配夜间模式 优化 文档 / 设置 / 关于 / 主题色 / 布局分析等页面及悬浮窗适配夜间模式...优化 提升悬浮窗点击响应速度 优化 点击悬浮窗布局分析按钮直接进行布局范围分析 优化 布局分析主题自适应 (悬浮窗跟随应用主题, 快速设置面板跟随系统主题) 优化 布局控件信息列表按可能的使用频率重新排序
-- 优化页面重构代码及自适应显示代码。 -- 优化繁简转换js代码。 -- 修复404页面部分功能未更新细节的问题。 -- 侧栏最新发布文章样式代码重写,更新后请清空缓存编译,前端强制刷新。...V 2.6.3 (22/08/10) -- 新增页面繁体简体转换功能,主题设置,功能设置中开启。 -- 优化页面登录背景色。 -- 优化评论区头像代码。...-- 修复文章页面部分表格没有样式的问题。 -- 优化文章页汉字及英文字符强制换行的代码。 -- 文章显示时间可自定义选择,可设置三种形式,主题设置,功能设置中选择,默认是友好显示时间。...-- 主题模板新增单页展示功能,页面管理,新建页面,右侧模板选择“showpage”,正文按如下规则添加: 我是标题1,我是副标题,我是下载文字,我是链接,/zb_users/theme/winlee...更新日志:2021/06/23 -- 优化导航栏背景色透明度,减少logo颜色和轮播图颜色模糊的问题。 -- 主题配置新增快捷保存代码(Ctrl+s)。 -- 优化后台授权校验代码。
既是使用进行限制,页面加载是自上而下,但是onMounted的生命周期,发生在DOM元素加载完毕;所以也会造成闪烁问题。...信息,进行强制模式切换。...所以,我们在定义路由或者页面时候,就可以添加强制选项: # 使用路由配置的话 { // 简体字、繁体字 互相转换 path: '/zhConvertTradSimp', name...dark' // 如果首选颜色模式无法使用,则会使用回退颜色模式 // 默认值为 'light' fallback: 'light', // 存储颜色模式的键名,用于在本地存储中存储颜色模式的值...然后直接操作 document.documentElement 加入主题类名 这个时机早于页面元素的渲染 图片 所以页面渲染时已经应用了正确的主题类名,避免了主题延迟导致的闪屏。
下面是正文~~ 深色模式是一种设计趋势,网站的配色方案被更改为深色背景,配以浅色文字和元素。它也被称为夜间模式或黑暗主题。...注意:系统颜色可以被强制颜色覆盖(尽管很少使用)——所以不要过分依赖这种技术。 我们继续学习另一种技巧,这将使我们能够精细控制我们的暗黑模式颜色。...这是通过 JavaScript 完成的: 创建颜色方案切换器 如果你用过 TailwindCSS ,你会注意到当你从 color-scheme-toggler 中选择“dark”时,会在 html -节点上添加一个...--nav-icon: var(--gray-5); /* etc */ } 使用 Css 使用一些全新的CSS技术,我们可以在不使用JavaScript的情况下创建一个切换器。...现在,在选择“Dark”之后,我们的切换器(和页面)看起来是这样的: 存储状态 如果我们想要存储用户的选择,就需要一点JavaScript!
,这里是颜色 inherits: false, // 子元素是否继承该属性 initialValue: '#ff5722' // 默认值 }); 代码:在CSS中使用 :root...initialValue:为变量提供一个默认值,防止变量未定义时页面崩溃。 效果 设计师可以随时更改品牌色 ,整个网站的背景色会自动更新,无需在每个元素上手动修改。...ctx.fillRect:绘制矩形背景填充。 ctx.arc:通过循环生成多个圆点,形成点阵背景。 registerPaint:将自定义绘图逻辑注册为一个可供CSS调用的名称dotted-bg。...实现方式 用JavaScript定义布局逻辑,然后在CSS中使用。...效果 div的背景色会在红色和蓝色之间平滑切换,炫酷十足! 总结:CSS Houdini到底有什么用? 提升页面体验:自定义背景、布局和动画,让你的页面与众不同。
我们可以使用自定义属性设置色相值,以及通过调整饱和度和亮度来设置更亮和更暗的阴影: :root { --brand-hue: 270deg; /* purple */ --brand-hue-alt...以下面的页面样式为例,我们可以在:root中为相应的颜色定义了自定义属性后,用变量替换不同选择器中所有的HSL颜色: :root{ /*...*/ --nav-bg-color: hsl(var...现在我们可以手动操作这些变量值,通过减少HSL颜色的亮度值来提供一个深色主题。...具有不同程度深色的深色主题: dark-theme.png 使用JavaScript切换主题 现在,当用户点击深色/浅色按钮时,我们使用JavaScript来切换深色和浅色主题。...default */ color: #fff; border: none; } 在该示例中,我们使用自定义属性--button-bg-color作为按钮的背景颜色,同时伴随着默认颜色,
如果本主题中的诸多功能和主题色彩你不满意,可以在主题中自定义修改,很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成,需要修改源代码才来完成。...以下列出了可能对你有用的地方: 修改主题颜色 在主题文件的 /source/css/matery.css 文件中,搜索 .bg-color 来修改背景颜色: /* 整体背景颜色,包括导航、移动端的导航、...页尾、标签页等的背景颜色. */ .bg-color { background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%...); } @-webkit-keyframes rainbow { /* 动态切换背景颜色. */ } @keyframes rainbow { /* 动态切换背景颜色. */ } 修改...如果你会 JavaScript 代码,可以修改成你自己喜欢切换逻辑,如:随机切换等,banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <
这篇文章将告诉你如何实现一个自动的 CSS 暗模式,根据你的访客的主题来改变。 我在自己的博客页面我的小铺页面实践了一下用 CSS变量 和 @media查询 实现暗黑模式。 ?...--border: #e6e6e6; --bg: #ffffff; } 如果你想在你的样式表中使用这些变量,你可以这样做: p { color: var(--main); } 这样,如果您想更改主题的颜色...如果有人使用深色操作系统主题并访问您的网站,您的网站现在将自动切换到黑暗模式。 下面是我博客博客小码页面,效果,支持手动切换和自动切换两种。...为此,您可以简单地在操作系统上启用一个 dark 主题,例如 iOS dark 主题。 或者,如果你不想在你的操作系统主题上浪费时间,你可以在 Firefox 中强制执行这个测试。...回到您的网站,主题应该已自动更新为黑暗模式。 如果您想要测试它是否切换回来,请将值更改为 0。 完成测试后,单击垃圾桶删除该选项。
PS:表情图标可以随意更换,为防止下次更新修改之后的图标被覆盖,所以仅限0521主题包自带表情图标,以后更新的主题无图标文件。...,如果开启首页TAB切换则首页置顶功效无法使用!...---、删除商品页面banner顶部信息接口,直接调用该分类名称及SEO描述,背景图调用第一篇文章的第一张图片(选取图片逻辑跟列表统一) ---、修改商品模板排列样式(更新之后需要强制刷新Ctrl+F5...BUG,优化三级菜单背景颜色。...新窗口链接(点击任意链接都是在新窗口打开,默认关闭) 其他的看页面预览吧:主题永久免费更新维护,确保每个人都能正常使用。 首页截图: 分类模板图(默认): 文章、留言展示效果图:
UI更新 (App启动白屏优化、适配Android10.0深色模式) 前言 正文 一、启动白屏优化 1. 样式文件 2. 修改页面 二、适配深色模式 1. 颜色 2. 样式 3....颜色 深色模式下最重要的一点就是设置颜色和主题样式,当前我们是给了一个green的色值作为主题颜色,下面我们改一下,这将是一个比较繁琐的工作,但是做完之后,你会觉得很Nice… 我改是直接拿这个...修改背景 就拿登录页面的xml来说明,现在是这样的。 我们在设置页面的背景颜色的时候就要想到它在默认情况下和在深色模式的区别。...将鼠标悬停在这个颜色值上会出现一个弹窗,告诉你这个页面在默认和深色模式下的背景颜色的色值,通过这个你就知道你的改动有没有效果。...FloatingActionButton 浮动按钮的改动有一点特殊,如果你的样式主题中是NoActionBar,那么你直接通过tint去改变图标颜色是不行的,而是通过页面的样式的colorOnSecondary
其中:定制风格,可以通过颜色选择器选择一种颜色,从而改变主题颜色风格,可以在下面的自定义样式中输入样式代码,逐一详细调整主题各部分颜色及样式属性,改变外观样式,从而实现个性化主题,不过需要有一定的DIV...第7条:自动缩略图改为使用timthumb.php裁剪本地图片 建议大家使用特色图像或者自定义栏目,制作单独的缩略图,调用尺寸比较小的图片,尽量不要使用自动获取文章中大图片作为缩略图,会严重影响页面加载速度...4、注册页面与上面相同,需要新建页面,选择“新用户注册”(动态视频背景)或者“用户注册”(图片背景)模板发表后,将链接添加到主题选项 → 基本设置 → 注册按钮中。...打开这个新建的代码高亮页面,通过转换工具,将代码转换为HTML代码。 编辑文章时切换到文本(HTML)模式,将转换后的代码复制粘贴到文章中。...begin主题使用说明(详解教程) 正确显示评论楼层号 需进入WP后台---设置---讨论,在讨论设置页面,勾选”分页显示评论“ 文字折叠隐藏 通过添加短代码可实现文字折叠效果。
大家好,我是飞哥,重新温习一下Markdown的语法,并记录一下,写一个简单的教程。 这里使用的软件是Typora1.1版,主题是Dyzj-light(推荐一款适合中文博客书写的Typora主题)。...教程格式 在代码块中写原始的markdown 通过截图的形式,展示Typora的结果 用的风格是:Dyzj-light 1....正文 正文,就是正文,不用操作,直接写就对了。 3. 分割线 三个减号号(-),或者三个星号(*) --- *** 4. 引用 > ok,这是引用 5....公式 6.1 正文中的公式 或者语句中加入,比如$\sigma$,$\beta$这两个是公式中常用的字母,我们可以说$\mu + \beta = a$,这样写。...字体闪烁 12.4 彩虹字体 字体闪烁 12.5 背景字体 <span alt="modern
可以在themes 文件夹下使用Git clone命令来下载: git clone https://github.com/blinkfox/hexo-theme-matery.git 切换主题 下载完后...修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中,包括站点、使用的主题、访问量等。...文件中修改 /* 整体背景颜色,包括导航、移动端的导航、页尾、标签页等的背景颜色. */ .bg-color { background-image: linear-gradient(to right...{ /* 动态切换背景颜色. */ } @keyframes rainbow { /* 动态切换背景颜色. */ } 修改 banner 图和文章特色图 在 /source/medias...如果你会 JavaScript 代码,可以修改成你自己喜欢切换逻辑,如:随机切换等,banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 代码中
(插件我都已经汉化过了,发现并不好用,遂放弃)----正文开始,实现的方法并不难,难的是适配和整合。首先简单的思路就是给主题样式表适配写一套黑色模板的css,主要是背景,图片和文字等适配。...css是最复杂工程量最大的。日主题的暗黑模式css我写了一下午(第一次写都有写注释)然后使用js控制切换,当切换至暗黑模式后class 调用适配暗黑的css,由于css层级优先关系就达到了暗黑的效果。...页头的body加入php判断,检测到cookie相关字段直接输出body class为night,防止页面闪烁。...,你也可以用下面的代码来弄一个按钮在页面上,方便随时切换。...>)">由于我们引用了zmki_footer_logo这个css类,在切换回暗黑模式后,会自动使用body.night .zmki_footer_logo这个类,我们只需要给body.night
最后更新版本的修改,就摘几条重要的地方来说下吧…… 主题修改 任何页面背景头图可以选择使用随机图片API显示,比如 漫月API PC 端首页的博主描述,可以选择使用“一言”代替,由 Hitokoto...集成 Live2D 看板娘,支持刷新换装 加深文章内容文字颜色和增大字体,阅读不费眼了 收窄 PC 端正文显示区域的最大宽度和评论列表的最大宽度 简化评论 UA 信息,显示效果修改为划过评论才显示 评论者的连接添加了页面跳转...功能介绍 背景图API 网页背景图、文章列表、文章顶部特色图,均支持随机图片API,并使用 MD5 8 位随机数载入,大几率减少重复图片的现象; 网页背景图显示顺序: 默认显示主题自带随机图,如果填写...微信推送 添加图片放大功能,在文章页设置中开启 修正 卡片式风格 在没有正文内容时的显示效果 2018.03.21 尝试修复评论表情框在某些主机无法加载的问题 2018.04.07 新增一个 “高斯模糊...,在后台选择使用,仅限 PC 端 2019.04.19 修复评论翻页按钮在“白色简约”网页背景风格下不居中的问题 修复主页个人头像和评论头像变形的问题 说说页面跟文章页面一样可以点赞了,仅 PC 端可见
重力的模拟:在二维作品中,通过不同的视觉重量体现; 封闭区域是由颜色和材质组成的; 物体的体积是由长宽高组成的; 如果字体设置了bold、italic或者oblique等属性,浏览器一般都会首先尝试选择真实存在的衍生字体...字色 褐色作为正文字体,可以使页面显得更加柔和清晰。 蓝色用于链接则提高作品整体的对比,增加视觉冲击力。 字号 使用不同大小的字体,可以增加文字区块间的对比。...} ###使用样式切换方法 要精确控制屏幕上文字的大小,px是最为可靠的单位。可是因为ie的缘故,我们不能依赖px,但可通过另行制作显示打好文字的样式表来解决IE中的这个问题。...标题问题 标题中使用的颜色必须是整个设计中较为强势的色彩。 标题的色彩必须鲜明。在标题中亮色所带来的影响不如暗色。越是接近黑色的标题,越是能对浏览者产生强的冲击力。...段落之间的距离不宜过大。 避免在正文种使用鲜艳的色彩。应该只在重点文字和链接上使用鲜艳色彩。 重要文字 一般来说,重点文字指的是侧栏、引用和说明部分的文字。
在最近的 Google 开发者大会上,介绍了最新的七大功能,它们分别是: 支援css-in-js的框架的样式编辑 模拟时区功能 Lighthouse 量化使用者体验 Issues 面板 媒体面板 一件修复文字的色彩对比...没错,但是原本支持的是「 普通的css 」, 不是 「css-in-js」. ? 现在,“样式”窗格对编辑使用CSS对象模型(CSSOM)API创建的样式提供了更好的支持 。...因为它是css-in-js的代码。 但是现在可以在“样式”窗格中进行编辑了: ? 动态演示: ? 2....新的 Issues 标签 的主要目的是:整合浏览器, javascript 库, 框架的各种警告与异常信息, 给大家一些修复建议。...你甚至可以下载视频,更方便的去排查问题: ? 6. 一件修复文字的色彩对比 devtool 会根据你的背景与字体颜色,自动提供文字的色彩对比建议, 比如: ?
'c0 ' : 'c1 ') + 'c2 '} />; } (生成的JavaScript) 用于主题设计的CSS变量(暗夜模式) 在旧网站上,我们曾经尝试通过在body元素中添加一个类名来应用主题,然后用这个类名来覆盖现有的样式...这种方法有问题,它不再适用于我们新的原子化的CSS-in-JavaScript方法,所以我们改用CSS变量来进行主题切换。...这让我们可以将主题组合成一个单一的样式表,这意味着切换不同的主题不需要重新加载页面,不同的页面可以有不同的主题而不需要下载额外的CSS,不同的产品可以在同一个页面上并排使用不同的主题。...(--card-bg); } 在JavaScript中使用SVG,实现快速、单一渲染的性能 为了防止图标在其他内容之后出现闪烁,我们使用 React 将 SVG 内联到 HTML 中,而不是将 SVG...使用JavaScript预算来防止代码蠕变 分层和条件依赖关系可以帮助我们交付每个阶段所需的代码,但我们还需要确保每个层的规模随着时间的推移保持在可控范围内。
领取专属 10元无门槛券
手把手带您无忧上云