文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Butterfly主题的PWA实现方案

装配了PWA以后，用户可以将网站作为WEB APP安装到自己的设备上，以原生应用般的方式浏览博客，同时借助PWA的缓存机制，能够更快速的浏览。本文讨论的是使用两种方案实现PWA。...图标设计 在使用PWA之前，我们最好先行设计一个符合网站主题的图标。 本站使用的是brandmark图标设计网站，访问 brandmark进行图标设计。下载需要收费，不过可以截图。...获取图标文件和 manifest 配置PWA 实现PWA的方式有许多种，本帖基于Butterfly主题文档进行详细拓展，所以只讨论两种方案。...打开主题配置文件[Blogroot]/_config.butterfly.yml,找到PWA配置项。添加图标路径。...打开主题配置文件[Blogroot]/_config.butterfly.yml,找到PWA配置项。添加图标路径。

1.9K20

Vue.js最佳静态站点生成器对比

https://nuxtjs.org/ 名单上的第一个是 Nuxt.js，这是一个基于 Vue.js 构建的开源高级框架。...这些模块提供了内置支持，以将 PWA 特性和标准功能（例如 Google Analytics）引入你的应用程序。 Nuxt.js 的最大优势之一是 nuxt generate 命令。...根据他们的官方文档，VuePress 包含两个主要部分： 带有基于 Vue.js 主题系统的静态站点生成器。 插件 API，用于添加全局级别的功能，还有一个针对文档优化的默认主题。...Saber 将其文件系统用作路由 API（这和 Nuxt.js 非常像），并且具有高度可扩展性。尽管 Saber 目前仅支持 Vue.js，但它的团队也计划扩展对 React 的支持。...对比基于 Vue.js 的和基于 React 的静态站点生成器，我们可以看到 Nuxt.js、VuePress 和 Gridsome 等框架具有与 Gatsby 和 NextJS 竞争的实力。

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

    关于-文章搭建

    (opens new window)和插件 API (opens new window)，另一个部分是为书写技术文档而优化的默认主题 (opens new window)，它的诞生初衷是为了支持 Vue...这种做法的灵感来源于 Nuxt (opens new window)的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby (opens new window)。...) 多语言支持(opens new window) 博客主题 文档(opens new window) 在线案例(opens new window) Plugin 强大的 Plugin API(opens...#Nuxt VuePress 能做的事情，Nuxt 理论上确实能够胜任，但 Nuxt 是为构建应用程序而生的，而 VuePress 则专注在以内容为中心的静态网站上，同时提供了一些为技术文档定制的开箱即用的特性...#Docsify / Docute 这两个项目同样都是基于 Vue，然而它们都是完全的运行时驱动，因此对 SEO 不够友好。如果你并不关注 SEO，同时也不想安装大量依赖，它们仍然是非常好的选择！

    1.7K30

    TypeScript 在 Nuxt.js 的入门实现与一些奇妙的新知识

    Nuxt 也提供了基于它的依赖 nuxt-property-decorator (https://github.com/nuxt-community/nuxt-property-decorator)，使用样例如下...例如直接使用： cursor: pointer 即可使一个元素「可点击」了，真是神奇 X 轴长内容滚动 Tony 主题群里又有人反馈无触控板的电脑端标签段无法滑动，之前因为美观并没有默认展示滚动条也就是...效果见博客首页，之后会完善好加入 Tony 主题......渐进式应用程式 Nuxt 提供了 @nuxtjs/pwa 模块，可以快速简单地增加 PWA (https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps..."] ↑ nuxt.config.js 本地开发环境如果没有配置 https 是不可以安装 PWA 应用的，重新部署至生产环境并刷新缓存即可安装了。

    3.3K10

    7个实用的 Vue.js 工具和库

    我的选择是基于实用性、有效性和独特性等原则——而不是它们的 GitHub 受欢迎程度或星级评分。...1: Nuxt.js Github stars: 28.9k 网站：https://nuxtjs.org/ Github：https://github.com/nuxt/nuxt.js Nuxt 是一个简单而直接的框架...它也是模块化的，所以你只需使用程序所需的那些模块即可。Nuxt 使你不必纠结于构建和优化程序的工作。Nuxt.js 具有模块化架构，有50多个模块可供选择。...vue.js开发的开源的前端框架, 只写一次代码的情况下发布到多个平台 website, PWA ,Mobile App 和 Electron App ，用起来表示十分满意。...它有一个默认主题（适用于技术文档），但你也可以构建自定义主题或使用社区中的预制主题。

    4K52

    pwa+webpack，初探与踩坑0.前言1.webpack2.pwa3.基于webpack的pwa

    0.前言 我们都知道pwa是一个新技术.，依靠缓存，离线了还能正常跑，而且秒开。我把以前原生写的小游戏迁移到react，再迁移到webpack+react，最后再升级到pwa。...+webpack的效果，那我们eslint、test就不写了 2.pwa 我们就拿百度到的那些例子说吧，一个正常的pwa，由index.html、一个css、一个manifest.json、一个sw.js...我们要启动一个pwa，这是必备的。 其实，是不是看起来有点像谷歌浏览器的扩展？有没有试过自己写谷歌浏览器插件，比如屏蔽广告的、个人工具的、某些网站收藏夹等等插件。毕竟一家人，所以看起来也有点像。...，就是一些关于名字、样式、logo的配置 { "name": "PWA", "short_name": "p", "display": "standalone", "start_url"...3.基于webpack的pwa 文档见官网 我们不用配置就可以跑起来，但是配置里面有些地方需要注意的而且不能乱改，自行看文档。

    86220

    十款热门的Vue.js工具和库

    02 VuePress https://v1.vuepress.vuejs.org/ VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题...05 Nuxt https://nuxtjs.org/ Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性...它提供了大量基于Material Design规范精心制作的组件（80+），足以满足任何应用程序的需求。 您可以使用它来构建SSR应用程序，SPA，PWA和移动应用程序。...07 Quasar https://quasar.dev/ Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建： 响应式网站 PWA（Progressive...、PWA、Mobile App和Electron App。

    3.7K20

    这 8 个超赞的 Vue 开源项目你一定要知道

    相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 小师妹收集了几个你应该了解的最重要的工具和库，请仔细阅读，肯定对你有用呢！...而对于文档开发者来说，一切皆 vue 组件，这样就可以用已有技能做更多的事情了。比如自定义主题等。 现在它也是一个小型、功能强大的 CMS，还没有搭建博客的你，不妨来试一试！...Nuxt.js Nuxt.js 是一个基于 Vue.js 的通用应用框架，一个用于Vue.js 开发SSR应用的一站式解决方案。...快速创建定义默认主题。...特点 系统自定义 易定制 支持Markdown 事件报告 渐进式Web应用程序（PWA）支持 内置谷歌分析 多语言支持 默认主题：响应式布局轻松定制美观设计 SEO友好 部署灵活 Github Star

    3.2K30

    💰手把手教你用VuePress如何快速搭建个人免费网站？

    Nuxt: Nuxt: VuePress 能做的事情，Nuxt 理论上确实能够胜任，但Nuxt 是为构建应用程序而生的 VuePress: 专注在以内容为中心的静态网站上，同时提供了一些为技术文档定制的开箱即用的特性...Docsify / Docute: 同样都是基于 Vue，然而它们都是完全的运行时驱动，因此对 SEO 不够友好 ③. Hexo: 主题系统太过于静态以及过度地依赖纯字符串, 而不是基于Vue。...footer: 前端投资小达人的个人博客 --- 效果如下： 8. 变更主题（可选） ① 更换主题： 对默认主题不满意，想换个别的主题？安排！...- 开头的主题是官方维护的主题： ② 开发主题： npm上也没有合适的主题？...PWA（可选） PWA，即progressive web apps，以web的形式给你原生app的体验。

    2.1K21

    十款值得你关注的Vue.js工具和库

    从WordPress，Contentful，本地Markdown或任何其他无头CMS或API中提取数据。 首先只加载关键的HTML，CSS和JavaScript。...官方网址：https://vuex.vuejs.org/ 5、 Nuxt Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用...它提供了大量基于Material Design规范精心制作的组件（80+），足以满足任何应用程序的需求。 您可以使用它来构建SSR应用程序，SPA，PWA和移动应用程序。...，然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。...它支持动画、主题、互动小部件（用于网络演示），并且可以轻松地在演示文稿之间重用组件、幻灯片和样式。

    3.6K20

    wordpress 主题，作者，版本信息的修改

    用到的函数： get_theme_data( ) 信息存放的文件 style.css 内容展示图： 图片 遵循规则：  默认WordPress的样式表需要遵从 第一行是主题的名字； 第二行是主题的地址...get_theme_data 函数分析 该函数将主题文件内的style.css文件中的主题相关信息（也就是每个wordpress的主题样式页头必须遵守的主题描述格式）通过数组返回，需要说明的是该函数没有默认参数...该函数能够返回的主题信息： 主题的URI Description–wordpress格式的主题描述内容 AuthorURI–主题作者的URI Template–主题的主模板名称（在wordpress中属于可选填的内容...获取主题模板信息 需要获取其他信息仅仅需要替换方括号内的内容即可。.../style.css'); echo$theme_data['Title']; echo$theme_data['Author']; 获取主题信息实例： 一般主题开发者对于自己开发的主题都有版本跟踪，或者你是个某个付费主题的使用者

    1.1K30

    手把手教你用vuepress搭建自己的网站(1)

    ,凡是不被自己吸收,为自己所用的,都只能称作为做信息,而不能视作为知识....特点:比Jekyll要先进一点,先生成文件,在部署 基于Node.js的静态网站生成器 主题很丰富,在vuepress之前很多博客,文档网站都是基于Hexo搭建的,是用jekyll还是Hexo搭建的,基本上做...,更加的灵活,可定制化 可以自定义开发主题,任意修改,网站风格不在千篇一律 支持 PWA(自动生成 Service Worker),像 app 应用一样添加到手机桌面上 集成了 Google Analytics...琳郎满目,对于新手小白,的确眼花缭乱,不知从何看起,配着配着就晕了的 而很多博客,大佬,基本上都是基于一个模板,有很多坑并没有提及 官方文档只适合查阅,也并不适合从头看到尾,不用每个 API 都熟记于心...先把官方默认的主题,玩熟悉了,在去玩自定义主题,以及进行二次开发,都是可以的 口说无凭,话说多了,都是故事,下面一步步带你从零开始,到域名部署等,搭建属于自己的网站,开始自己的记录之旅.

    1.5K20

    Onecircle基于Typecho的圈子主题

    主题下载： 在线演示：OneCircle (ijkxs.com)   此处内容已隐藏，请评论后刷新页面查看....插件推荐：Typecho 又拍云插件 主题文档 更多请查看OneCircle 主题说明 (￢_￢) 目前特色有： 前端仿推特 支持前台直接提交，支持图文混合和链接、视频 支持用户关注和取关，支持关注圈子并只显示关注的内容...原始的background显示方式迁移至src显示 v3.0 支持博客页 ... v4.3 支持私聊，支持 joe 主题编辑器（已获得作者授权），xxx 一系列更新 v4.6 修复登录bug，添加十年之约...（更新，插件、主题） 关于文章类型 目前文章有一个自定义字段： articleType： default：默认解析 link： 解析为前台链接形式 video or bilibili：视频 repost...： 每次修改的时候都把所有字段修改了，因为只修改某一个，其他字段还是用的某次的缓存 修复bug：很简单，方法如下： 找到源码的 var/Widget/Users/Profile.php 中的personalForm

    1.3K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券