文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

hexo博客添加到桌面应用程序

这组文档和指南告诉您有关 PWA 的所有信息。 PWA 的优势 PWA 是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。关于这些含义的细节，请参阅 PWA的优势。...PWA插件 npm i hexo-pwa --save 修改博客根目录下配置文件(非主题配置文件) manifest 生成地址： Web App清单生成器,如无法打开直接复制我的即可 # hexo添加PWA...比如 PWA 启动画面上状态栏、内容页中状态栏、地址栏的颜色，会被 theme_color 所影响。 background_color: {Color} css色值 可以指定启动画面的背景颜色。...display: {string} 显示类型 fullscreen 应用的显示界面将占满整个屏幕 standalone 浏览器相关UI（如导航栏、工具栏等）将会被隐藏 minimal-ui 显示形式与...standalone类似，浏览器相关UI会最小化为一个按钮，不同浏览器在实现上略有不同 browser 浏览器模式，与普通网页在浏览器中打开的显示一致 scope: {string} 作用域 scope

74230

Hexo添加PWA支持

比如 PWA 启动画面上状态栏、内容页中状态栏、地址栏的颜色，会被 theme_color 所影响。 background_color: {Color} css色值 可以指定启动画面的背景颜色。...display: {string} 显示类型 fullscreen 应用的显示界面将占满整个屏幕 standalone 浏览器相关UI（如导航栏、工具栏等）将会被隐藏 minimal-ui 显示形式与...standalone类似，浏览器相关UI会最小化为一个按钮，不同浏览器在实现上略有不同 browser 浏览器模式，与普通网页在浏览器中打开的显示一致 scope: {string} 作用域 scope...配置站点配置文件 将下面的配置代码复制到你的站点根目录配置文件_config.yml中 # PWA配置 npm i --save hexo-pwa pwa: manifest: path:...content 对应的是你 manifest.json 中的 theme_color 的值 viewport: 用于针对移动屏幕优化 PWA 应用 详细链接viewport apple-touch-icon

1.2K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Chrome 102：新增两个 HTML 属性、两个 JS API !

    例如，我们想开发一个模态框，你希望在模态框可见时将焦点聚焦在模态框内。或者，对于用户并不总是可见的抽屉，添加 inert 可确保当抽屉不在屏幕上时，键盘用户不会意外与其进行交互。...Navigation API 在很多 Web 开发的场景下，我们需要在没有网页中的导航的情况下去更新页面的 URL，特别是在 SPA 应用里面，我们在切换了导航之后，不希望刷新网页，只更新页面中的内容。...，无论是用户执行了一个动作（例如点击链接、提交表单或返回和前进）还是以代码的方式触发导航。...File Handling API File Handling API 可以让已安装的 PWA 向操作系统注册文件处理程序。注册后，用户就可以单击文件然后使用已安装的 PWA 打开它了。...你需要指定要打开的 URL、MIME 类型、文件类型的图标和启动类型。启动类型定义是否应在单个客户端或多个客户端中打开多个文件。

    1.9K30

    关于状态可见原则

    但状态并不只有操作后才出现，操作前也有状态，如制作一个组件时，通常会把组件的不同状态（正常、鼠标经过、鼠标点击、加载中、报错、禁用等）做出来，其中正常态和禁用态就是操作前的状态，其它都是操作后的反馈。...主要是意思就是在某些场景下，被隐藏的功能可以提供一些提示信息，在不干扰用户的情况下留下便于探索的线索。如 PhotoShop 工具栏里的工具图标右下角的小三角。...尝试着改进后的左侧导航折叠态 链接 虽然文本链接有几种表达自身状态的样式（link、visited、hover、active），但由于实际场景中点击链接时可能会有几个结果： 打开方式\跳转目标 当前站点...默认当前窗口打开时，用户可以通过鼠标右键菜单决定链接的打开方式，也可以通过浏览器的快捷键（如Chrome 键盘快捷键）进行控制；而如果默认为新窗口打开，则无法支持切换为在当前窗口打开链接。...不过，还是不推荐将链接设置为新窗口打开的方式，将选择权留给用户。对于不得不使用新窗口打开时，可以明确告知用户，减少不必要的尝试。

    2.4K30

    不用源码也能改造网站？教你用油猴脚本和浏览器插件玩转界面交互！

    在日常浏览网页时，我们有时会遇到一些不太满意的网站界面交互设计。然而，作为普通用户，我们并没有网站的源码，如何在这种情况下进行界面改造呢？...油猴支持多种浏览器，如Chrome、Firefox、Edge等。 油猴脚本的基本使用 安装油猴插件 首先，我们需要在浏览器中安装油猴插件。...实际案例：动态修改网页内容 假设我们想要在某个网页上添加一个固定的导航栏，以便于快速访问常用链接。...": 3, "name": "固定导航栏", "version": "1.0", "description": "在网页上添加一个固定导航栏", "permissions": [...安装完成后，访问目标网站，网页顶部会出现一个固定的导航栏，包含常用链接。 通过油猴脚本和浏览器插件，我们可以在没有网站源码的情况下，轻松地改造现有网站的界面和交互体验。

    96310

    PWA - 令人惊奇的web用户体验新方法

    渐进式：能确保每个用户都能打开网页，可以运行在不支持 PWA 技术的浏览器里。用户不能离线访问，不过其他功能都像原来一样没有影响。...被打开时，PWA 会展示一个有吸引力的闪屏。chrome 提供了可选选项，可以使 PWA 得到全屏体验。...安全：PWA使用https进行通信加密，防止了被第三方获取数据以及数据被篡改 推送：做到在不打开网页的前提下，推送新的消息 可安装：能够将 Web像 APP 一样添加到桌面,可以在主屏幕上创建图标 为什么是渐进式...接下来看一下sw.js 主要做的这几件事情： 首先安装时会触发 install 事件，监听该事件可执行安装时要做的事情。示例中是缓存用于离线时使用的静态资源，这也是最常见的行为....description display: 定义应用的显示方式，有 4 种显示方式，分别为： fullscreen: （全屏） standalone: 应用 , 浏览器相关UI（如导航栏、工具栏等）将会被隐藏

    2.7K10

    超详细动手搭建一个Vuepress站点及开启PWA与自动部署

    build": "vuepress build docs" } } 写作 yarn docs:dev # 或者：npm run docs:dev 也就是运行开发环境,直接去docs文件下书写文章就可以,打开...description: 'Document library', head: [ ['link', { rel: 'icon', href: `/favicon.ico` }], ], } 导航栏配置...设置基础路径 在config.js设置base module.exports = { base: '/documents/', } base 将会自动地作为前缀插入到所有以 / 开始的其他选项的链接中...将dist文件夹中的内容提交到git上或者上传到服务器就好 yarn docs:build # 或者：npm run docs:build 另外可以弄一个脚本,设置持续集成,在每次 push 代码时自动运行脚本...上/下一篇链接 设置了自动生成侧边栏会把侧边栏分组覆盖掉 设置PWA记得开启SSL

    79240

    超详细动手搭建一个Vuepress站点及开启PWA与自动部署

    build": "vuepress build docs" } } 写作 yarn docs:dev # 或者：npm run docs:dev 也就是运行开发环境,直接去docs文件下书写文章就可以,打开...description: 'Document library', head: [ ['link', { rel: 'icon', href: `/favicon.ico` }], ], } 导航栏配置.../,那么 base 应该被设置成 "/bar/" module.exports = { base: '/documents/', } base 将会自动地作为前缀插入到所有以 / 开始的其他选项的链接中...将dist文件夹中的内容提交到git上或者上传到服务器就好 yarn docs:build # 或者：npm run docs:build 另外可以弄一个脚本,设置持续集成,在每次 push 代码时自动运行脚本...上/下一篇链接 设置了自动生成侧边栏会把侧边栏分组覆盖掉 设置PWA记得开启SSL

    2.5K60

    H5 APP开发的注意事项

    开发H5 APP时，虽然可以借助跨平台框架提高效率，但仍需注意多个关键点，以确保应用的质量和用户体验。以下是开发H5 APP时的主要注意事项。...操作系统差异：处理iOS和Android的差异，如导航栏、滚动行为等。3.用户体验（UX）交互设计：确保交互流畅，避免卡顿。提供清晰的反馈（如加载状态、按钮点击效果）。...导航设计：设计简洁的导航结构，避免用户迷失。支持手势操作（如滑动返回）。离线支持：使用Service Worker实现离线缓存（PWA）。提供离线状态提示。...5.SEO优化搜索引擎友好：使用语义化HTML标签（如、）。为图片添加alt属性，为链接添加title属性。...7.PWA支持渐进式Web应用：使用Service Worker实现离线访问和缓存。添加Manifest文件，支持添加到主屏幕。提供推送通知功能。性能提升：通过PWA技术提升加载速度和用户体验。

    10310

    Adobe dreamweaver CS6小白入门教程「建议收藏」

    导航栏->编辑->首选参数，这里有很多操作可以自行.. 5.1.2直接插入多个连续空格 5.1.3设置是否显示不可见元素 视图中有一些元素仅用来标志元素的位置而在浏览器中是不可见，...9.1.1创建嵌套APDiv（子与父的关系） 插入–布局对象–AP Div 9.1.2.隐藏所有APDiv标签 查看–可视化助理–隐藏所有 9.1.3.性质以及多个层同时操作 可在右侧工具栏...9.2.3.添加APDIV**滚动条* 解释： 溢出：AP元素面板中溢出用于控制当AP元素的内容超出AP元素的指定大小时如何在浏览器显示AP元素。的显示方法。...选项卡式面板：显示或隐藏存储在选项卡式面板中内容 9.4.3.使用Spry折叠式 9.4.4.使用Spry折叠面板（只针对一个导航项） 9.5利用APDiv制作网页下拉菜单 先新建一个APDiv...，确定合适的位置，插入表格（宽度100% 间距…），填好文字 选中导航栏的一个小格子，窗口–行为–“+”来建立导航栏和下拉菜单的关系 （显示–over ；隐藏–out） 10.用CSS修饰美化网页

    7.3K30

    Confluence 6 配置边栏链接 原

    选择图标来显示或者隐藏，页面（pages），博客页面（blogs），快捷键（shortcuts ）或者导航选项（navigation options）。...例如，如果你希望i的这个公开主要用于博客用途，你可以选择隐藏你边栏中的 页面（Pages）链接。...例如使用 Team Calendars for Confluence Server 插件，可能会添加其他的链接到边栏的这个部分，你可以选择显示或者隐藏它们。...选择 添加链接（Add link）来在边栏中添加一个快捷链接。这个链接通常会链接到你项目组中重要的页面，或者外部站点。...通过拖动链接来重新定义这些链接在你空间边栏中的显示顺序（你不能将链接从一个部分到另外一个部分）。 编辑边栏中，添加链接的链接。 ? 打开后添加链接的页面。 ?

    55230

    PWA 那些事儿

    ，用手机带的浏览器打开就可以使用。...可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能 实现了消息推送 它解决了上述提到的问题，这些特性将使得 Web 应用渐进式接近原生...除了使用本地开发环境调试时 (如域名使用 localhost) 运行于浏览器后台，可以控制打开的作用域范围下所有的页面请求 单独的作用域范围，单独的运行环境和执行线程 不能操作页面 DOM。...URL 时，服务器会返回响应的网页。...第 1 步: 当你调用 register() 函数时， Service Worker 开始下载。 第 2 步: 在注册过程中，浏览器会下载、解析并执行 Service Worker ()。

    1.8K00

    H5 手机 App 开发入门：概念篇

    比如，你在浏览器中收发邮件，就是在使用 Web App。 Web App 主要使用网页技术，即 HTML、JavaScript 和 CSS。...3.3 Web App 的劣势 Web App 需要打开浏览器才能使用，这意味着，用户必须记住如何导航到它，要么直接输入网址，要么翻找书签。这使得进入 Web App，远不如原生 App 方便。...缺乏手机状态栏和锁屏时的通知推送能力。 不支持脱机访问（即断网也能使用）。 ?...它可以把网站缓存在手机里面，供离线时使用，还能在手机首屏生成图标，直接点击进入，并且有通知推送能力，也不带有浏览器的地址栏和状态栏，跟原生 App 的使用体验非常接近。...可以理解成，混合 App 里面隐藏了一个浏览器，用户看到的实际上是这个隐藏浏览器渲染出来的网页。 ?

    2.1K51

    Mirages主题帮助文档

    导航栏操作按钮 说明 Mirages 主题在1.6.0版本中添加了侧边栏 Toolbar，你可以在此放置你喜欢的图标，如 RSS、社交账户链接、夜间模式切换等。...示例 enableImageShadow = 1 横向导航栏 Logo 的跳转链接 7.10.0 及以上版本可用 设置名：navbarLogoUrl 说明 设置横向导航栏 Logo 的跳转链接，仅对横向导航栏中的...显示模式可选值： 1 ==> 页面打开时目录树【隐藏】在文章【右侧】，页面仅展示展开按钮，【可通过】页面边缘的展开按钮展开或隐藏目录树。...该选项是默认选项 2 ==> 页面打开时目录树【展示】在文章【右侧】，【可通过】页面边缘的展开按钮展开或隐藏目录树 3 ==> 页面打开时目录树【展示】在文章【左侧】，【可通过】页面边缘的展开按钮展开或隐藏目录树...4 ==> 页面打开时目录树【展示】在文章【右侧】，页面不会展示展开按钮，因此【不可通过】展开按钮展开或隐藏目录树 5 ==> 页面打开时目录树【展示】在文章【左侧】，页面不会展示展开按钮，因此【不可通过

    10.1K20

    Axure实战06:创建一个AppleSymbol图标库网站

    交互动作-侧边导航栏 为了实现单选的效果，我们需要选中一个侧边导航栏菜单时，选中单个。 这里引用“选项组”的概念，选项组中，交互唯一。...这里我们用到的组件叫做“内联框架”，它可以链接展示外部地址网站，也可以链接内部创建好的页面。 我们这里有7个菜单，我们在“页面”工具栏中先创建7个页面。...然后还是在AppleSymbol页面中，拖入一个“内联框架”组件，把它放在侧边导航栏右边，尺寸设置为1350*955。 顺便设置它的样式，勾选“隐藏边框”，设置滚动模式为“从不滚动”。...我们双击侧边导航栏进入内页，选中“导航菜单”，在“交互”工具栏中，在“单击时”下点击“添加动作”，选择“在框架中打开链接”，选择目标为“内联框架”，选择链接到“导航菜单”页面。...选中内联框架，在“样式”工具栏中，设置“添加框架目标”，选择链接目标为“导航菜单”页面。 我们在浏览器中预览下效果。 基础样式-内容 框架搭好了以后，我们来完成了单个页面的图标展示。

    2.6K20

    Android经典面试题之Kotlin中如何隐藏DialogFragment和Dialog的导航栏

    DialogFragment隐藏导航栏 在 Android 中，使用 DialogFragment 显示对话框时，如果您希望隐藏系统导航栏（如状态栏和导航键），可以通过设置相关的系统 UI 标志来实现。...以下是一个完整的例子，展示了如何在 DialogFragment 中隐藏系统导航栏（使用 Kotlin）： import android.os.Bundle import android.view.View...这种方法允许您的 DialogFragment 在显示时全屏，并隐藏状态栏和导航栏。...Dialog中隐藏导航栏 在 Android 中，如果想在 Dialog 中隐藏系统导航栏（包括状态栏和底部的导航键），可以通过设置窗口属性来实现。...systemUiVisibility 属性用于隐藏系统导航栏和状态栏。 通过这些设置，当显示 Dialog 时，它将隐藏系统导航栏和状态栏，实现全屏显示。

    19410

    渐进式Web应用（PWA）入门教程（上）

    在渐进式Web应用中，你不需要使用各种应用商店来分发应用，也不用关心应用发布时奇怪的审核标准以及应用内购的平台抽成。...而在微信这边，凭借庞大的用户基数和体量能否与PWA分庭抗礼乃至笑到最后目前还不得而知。 示例代码 大多数教程都讲述的是如何在Chrome上从零开始制作一个类似原生界面的应用。...打开基于Blink内核的浏览器（Opera，Vivaldi，Chrome），然后在地址栏中输入http://localhost:8888/（注意端口号是否正确），即可访问该示例。...使用USB线缆将你的移动设备连接到电脑上，然后从右上角三个点菜单中打开More tools - Remote devices标签 ?...所以满足 PWA 模型的前端控件，如纯前端表格控件SpreadJS，将逐渐成为移动操作系统的一等公民，并将向Native APP发起挑战。

    92020

    笔记53 | 管理系统UI（一）

    Bar API 指南 Android Design Guide 本课程将教您如何在不同版本的Android下隐藏状态栏。...如果你在Activity的onCreate()方法中隐藏系统栏，当用户按下home键系统栏就会重新显示。当用户再重新打开Activity的时候，onCreate()不会被调用，所以系统栏还会保持可见。...隐藏导航栏 这节课将教您 在4.0及以上版本中隐藏导航栏 让内容显示在导航栏之后 本节课程将教您如何对导航栏进行隐藏，这个特性是Android 4.0（）版本中引入的。...即便本小节仅关注如何隐藏导航栏，但是在实际的开发中，你最好让状态栏与导航栏同时消失。...如果你在Activity的onCreate()方法中隐藏系统栏，当用户按下home键系统栏就会重新显示。当用户再重新打开activity的时候，onCreate()不会被调用，所以系统栏还会保持可见。

    1.4K40
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券