如果你要制作一个全屏的网页，使用这个插件在合适不过，如QQ浏览器官方网站 直接下载 使用方法 1.引入fullpage.css文件 3.初始化...menu (true/false) 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动 navigation (true/false)是否显示项目导航 navigationPosition...是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条 scrollOverflow (true/false)内容超过满屏后是否显示滚动条 css3 (true/false) 是否使用.../jquery.easing.1.3'> --> <script type="text
scrollReveal.js 不依赖其他任何文件。...不支持 IE10 以下 基本方法 1、引入文件 2、HTML dowebok.com... 必须给元素加上 data-scroll-reveal 属性，加上之后会执行默认的动画效果，你也可以自定义改属性以显示不同的动画效果，如： I love you 高级用法 自定义默认值 可以更改 scrollReveal.js3.9K40
网站标题自定义并滚动 // JS 代码实现网站标题自定义 var sTitle = "这句话是网站页面的标题" function TitleMove...document.title = sTitle; status = sTitle; } window.setInterval("TitleMove()", 100); 网站标题滚动显示...// JS 代码实现网站标题滚动显示 var msg = document.title; msg = "………" + msg;pos =...(pos > msg.length) pos = 0 window.setTimeout("scrollMSG()",200); } scrollMSG(); 网站标题闪烁显示...// JS 代码实现网站标题闪烁显示 var step=0; var ftitle=document.title; //获取网页标题 var
不显示滚动条（css） ::-webkit-scrollbar { width: 0px; } 禁止页面滚动条（js） document.body.parentNode.style.overflowY...= "hidden"; $("body").parent().css("overflow-y","hidden"); 启用浏览器滚动条（js） document.body.parentNode.style.overflowY
滚动到要实现动画的元素时(is-inactive)： 其实和上面的意思一样： 在未滚动到该元素时，显示假位置。...当滚动到该元素时，去掉class:is-inactive 而监听滚动事件和判断是否去掉class:is-inactive 使用的是jquery.scrollwx.js插件 二、使用方法 要使用这个...jQuery插件，需要在页面中引入jquery(1.11+)和jquery.scrollex.js文件。..." src="js/jquery.scrollex.js"> 调用插件 在页面DOM元素加载完毕之后，你可以通过scrollex()方法来初始化插件。...$(this).css('background-color', ''); } });}); 事件 jquery.scrollex.js插件支持以下一些事件。
本文由 #公众号：一个正经的程序员 原创 作者：散淡样子 GitHub：https://github.com/LouisLiu00 00 前言 Web 项目经常会用到下拉滚动加载数据的功能，今天就来种草一款...Vue-infinite-loading 插件，讲解一下使用方法！...--infinite-loading这个组件要放在列表的底部，滚动的盒子里面！...该组件会传递一个特殊的事件参数state给事件处理器来改变加载状态， loaded方法用于在每次加载数据后停止播放动画，然后该组件将准备好进行下一次触发； complete方法用于完成完整的无限加载，则该组件将不再处理任何滚动操作...如果在loaded调用complete方法时永远不会调用该方法，则此组件将显示用户的结果消息，如果不是，则将显示不再有用户消息，并且可以按slot设置其它内容； reset方法是将组件返回到原来的状态。
一、Gatsby页面怎么加载图片？ 在编写网站页面时，总是会遇到有图片要显示，那么怎么加载这些图片呢？...插件，转为数据层节点 ImageSharp； 使用 Graphql 查询 ImageSharp 节点数据，传递给 gatsby-plugin-image 插件提供的组件 GatsbyImage...npm install gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-transformer-sharp...gatsby-plugin-image 第二步：修改 gatsby-config.js 中的配置 // gatsby-config.js module.exports = { plugins: [...gatsby-plugin-image 第二步：修改 gatsby-config.js 中的配置 // gatsby-config.js module.exports = { plugins: [
后来基于 Node.js 的 Hexo[4] 横空出世，我便重构了博客[5]对其深入整合，还为其写了一个 emoji 插件[6]。...plugins 配置插件，这个按用到时按该插件文档说明弄即可。 /gatsby-node.js 可以调用 Gatsby node APIs[13] 干一些自动化的东西。.../gatsby-browser.js 可以调用 Gatsby 浏览器 APIs[14]，一般插件才会用到，如滚动到特定位置。 /gatsby-ssr.js 服务器渲染的配置，一般也是插件才用到。...Remark 插件坑 Gatsby 中处理 markdown 最常用也是默认的插件是 gatsby-transformer-remark。...通过实现自定义路径基本上可以了解 Gatsby 页面生成的方式了。下节中我会继续谈谈其它个性化的配置，如草稿模式和显示上下篇博文。 草稿模式 草稿模式即可以将文章保存为草稿而不被渲染出来。
今天要分享的是运用原生JS实现拖拽进度条、滚动鼠标显示相应的内容，实现效果如下： ? 以下是代码实现，欢迎大家复制粘贴。 原生JS...实现拖拽进度条、滚动鼠标显示相应的内容 #parent { width: 400px; height...var scale = l / (oParent.offsetWidth - oDiv.offsetWidth); //让Div3随着滚动的距离上下滑动显示内容...目前主要针对的是javascript培训，同时还提供了css教程、javascript 视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服
所以这次主要是添加了一些功能，更新了基础技术依赖等，更新点包括： •添加了DocSearch文档搜索功能•添加了gittalk评论功能•调整与美化了对Markdown的显示•从Gatsby V2升级最新...调整与美化了对Markdown的显示 博客都是基于Markdown编写的，因此这次调整与美化了对Mardown的渲染与显示样式。整体上来说比以前更简洁与雅致了。...这一次折腾，我在想着要不要从Gatsby迁移至next.js，并且再尝试着换成tailwind css 在经历了一翻尝试后，最终放弃，原因如下： next.js SSG开发体验较差 next.js确实非常不错...对此，官网也有说明：Note: In development mode, getStaticProps runs on each request instead. next.js 插件不丰富 next.js...而Gatsby的优点在于它有非常多的插件。几乎你想要什么，都要现成的插件来帮你处理。而且有相当一部分是官方的插件。
完善的插件库生态：2500多个插件可免费使用，极大缩短网站开发周期。...--- 三、安装 Gatsby 并新建网站 Gatsby 是在 Node.js 的基础上建立，使用 Gatsby 之前必须先安装 Node.js 且版本 ≥ 12.13。...使用 Gatsby CLI 工具，三句命令就可以新建一个静态网站。详情步骤，看这里！ --- 四、怎么新增网站页面？ 浏览器打开的URL是怎么跟项目中的代码页面 (js文件) 对应起来的？...--- 五、其他重要功能 1、Gatsby 怎么加载显示图片？ 详细步骤，看这里！ 2、怎么跳转到其他页面？ 详细步骤，看这里！ --- 3、怎么使用 css ？ 详细步骤，看这里！...使用了插件 react-helmet。 --- 七、部署 怎么部署发布gatsby项目？ 第一步：有一个备案过的域名。可以在阿里云上进行域名注册和备案； 第二步：需要一个服务器。
这些问题，可通过百度统计这个插件完成。...[]; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js...项目 安装插件 npm install --save gatsby-plugin-baidu-analytics 增加配置 // gatsby-config.js plugins: [ ....四、查看流量 回到第二步登录的百度后台 --> 管理页面 --> 点击 首页代码状态 --> 刷新 --> 显示 代码安装正确 表示完成，这样就可以点击 主页查看网站流量信息。...五、参考文档 Gatsby中使用百度统计功能来分析网站流量！
● 异步滚动。可以在Markdown和预览之间进行异步滚动。 ● 列表自动缩进。 ● 语法高亮。...● 无需安装插件，开箱即用，支持 JS、CSS、HTML、file assets 等。...● 内置热模块替换 ● 报错日志友好 - 代码高亮显示有助于查明问题。...由一个核心模块和其它用于选择、操作、上传等功能的插件组成。...十五、Gatsby https://github.com/gatsbyjs/gatsby Star 18245 ? Gatsby 可以使用 React.js 把纯文本转换到动态博客或者网站上。
您通常希望使用 gatsby develop 来启动本地开发服务器，以验证我们在步骤中所完成的功能。 添加必要的插件 Gatsby 支持使用丰富的插件，很多非常有用的插件都是为了完成普通任务而编写的。...在安装了这些功能插件之后，我们将编辑 gatsby-config.js。Gatsby 在构建时加载指定插件的公开功能。...因为博客的大部分内容都使用 Markdown 格式，让我们添加 gatsby-source-filesystem，与我们之前的步骤类似，我们将安装插件，然后将其注入到我们的 gatsby-config.js...现在我们已经创建了一个带有 frontmatter和一些内容的博客文章，我们可以开始编写一些可以显示这些数据的 React 组件。...这个API写在在 gatsby-node.js文件中，在这个文件中发现的每一个导出都将由 Gatsby 分析。Gatsby详细地介绍了它的Node API规范。
MDX 1、安装插件 把 markdown 文件，转为gatsby 数据层节点。...# 安装插件及其依赖库 npm install gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react # 或 yarn...add gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-source-filesystem ：...依赖 gatsby-source-filesystem ，所以两个插件需要同时安装和设置。...2、修改配置 gatsby-config.js 增加下面内容： // gatsby-config.js module.exports = { plugins: [ { resolve
安装插件 npm install --save gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code...配置插件 在 gatsby-config.js 中添加： // In your gatsby-config.js plugins: [ { resolve: `gatsby-transformer-remark...}, ], }, }, ] 运行时加载插件 对于 gatsby-starter-blog，在 src/templates/blog-post.js 的 BlogPostTemplate...deckdeckgoHighlightCodeLoader.defineCustomElements(window); } catch (err) { console.error(err); } } 一般网站中在 index.js...效果：https://aping-dev.com/gatsby-highlight-code/ [image.png] 参考 gatsby-remark-highlight-code
那么如何在构建 Gatsby 网站时避免那些因为大量使用 JS 而带来的固有问题呢？当然，我们应该尽量删掉那些 JavaScript。...如果你想用更激进的方法，可以使用一个插件来从你的 Gatsby 网站删除所有 Gatsby JavaScript。...https://www.gatsbyjs.org/packages/gatsby-plugin-no-javascript/ 你可以继续编写 react 组件和 GraphQL，甚至可以使用 CSS-in-JS...像 Gatsby 一样，Eleventy 也有一个插件生态系统（虽然很小，但增长迅速）。...我挑选了一些不需要添加客户端 JavaScript 也能添加功能的插件： 在帖子中显示代码段时，通常会包含特定于语言的语法高亮显示。
基于 Gatsby React 的框架背后的公司正在加入 Netlify，许多 Gatsby Cloud 功能有望集成到 Netlify 自己的平台中。...www.gatsbyjs.com/blog/gatsby-is-joining-netlify/ 4、你可能不需要 Lodash 或 Underscore 受流行的 《You Might Not Need...philna.sh/blog/2023/02/02/yaml-document-from-hell-javascript-edition/ 作者：PHIL NASH 四、代码与插件 1、FeedbackPlus...：将屏幕截图工具添加到您的反馈表 假设您的应用程序上有一个表单，让用户可以提交错误或反馈，并且您希望鼓励他们也发送屏幕截图——使用这个插件很容易做到。...colonelparrot.github.io/feedbackplus/demos/demo.html 作者：COLONELPARROT 2、ScrollyVideo.js：响应式“可滚动”视频 这是一个有趣的效果
安装插件 npm install yarn -g yarn add gatsby-plugin-tags 配置插件 在 gatsby-config.js 的 plugins 中添加： { resolve...: "gatsby-plugin-tags", options: { templatePath: `${__dirname}/src/templates/tag.js`,...(1) 添加组件 src/components/PostsListCard.js import React from "react" import { Link } from "gatsby" import...build 效果：https://aping-dev.com/gatsby-tags/ [image.png] 参考 gatsby-plugin-tags. https://www.gatsbyjs.org.../packages/gatsby-plugin-tags/?
Gatsby.js (可以说)是目前最好的开源静态站点生成器，所以让我们来看看它。 Gatsby.js是一个基于response .js的用于生成静态网站的开源框架。...使用npm，您可以将Gatsby.js安装到本地机器上。 接下来最好安装git，这是一种非常强大且流行的版本控制系统。当您使用Gatsby.js站点模板时，Gatsby会使用Git的一些功能。...Gatsby附带了许多插件，您可以通过运行在终端npm install中轻松地安装它们。下载插件后，可以将其添加到gatsby-config.js中。 下面是这个项目的文件。 ?...一个重要的插件是Gatsby -source-filesystem，它允许Gatsby从存储在本地文件系统中的文件中提取数据。...其他的插件不太重要，就不介绍了。 gatsby-node.js 此文件用于实现api。这些api可以使用GraphQL从数据层中获取数据。在处理程序化页面生成时，我们将更深入地研究这个文件的内容。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
