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

用 Gatsby 创建一个博客

在这篇文章中，我们将深入探讨 Gatsby 和一些新特性，并创建一个静态博客。让我们开始吧！...filesystem源插件将从我们的文件系统中加载文件节点(如 Markdown )，然后 Markdown 转换器将接管并转换为可用的 HTML 。...此外，该转换器还可以选择使用插件来进一步扩展功能，例如通过 gatsby-remark-prismjs来添加语法高亮，通过 gatsby-remark-copy-linked-files 复制在 markdown...创建 React 模板 当 Gatsby 支持服务器端渲染(对字符串)的 React 组件时，我们可以使用 React 编写我们的模板（ 也可以使用Preact ）。...实际的 React 组件是相当琐碎的，需要注意一点，当链接到内部内容时，你应该经常使用 gatsby-link。 如果页面没有通过这个实用工具进行路由，Gatsby 就无法工作。

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

    让小程序支持代码高亮

    在小程序里通过mp-html实现代码高亮方式如下： 1.在小程序里引入mp-html 将mp-html的源码中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为...} } 2.在小程序里使用mp-html 1.在需要使用页面的 wxml 文件中添加 html content="{{html}}">html> 2.在需要使用页面的 js 文件中添加...}) } }) 3.在mp-html里引入代码高亮highlight插件 在mp-html的源代码里tools/config.js 中的 plugins 中启用highlight插件，设置完成后，可通过项目提供的命令行工具生成新的组件包...编辑 plugins/highlight/config.js ，可以选择是否需要以下功能： copyByLongPress 是否需要长按代码块时显示复制代码内容菜单 showLanguageName...，在code 便签里加入data-prismjs-copy 和data-prismjs-copy-success，就可以支持上述三个功能了。

    69330

    前端之变（三）：变革与突破

    一个页面就是一个HTML，甚至在一个HTML中引入另一个HTML中这种简单的事都做不到（不依赖JS） 根本原因在于，浏览器只提供了根据HTML内容渲染出页面展现用户的能力，浏览器并未向HTML提供任何动态能力...由于浏览器提供的能力有限，这就造成了前端始终难以发展现能与其它现代语言相比的语言设计与框架，比如 面向对象的能力特性，继承，封装，多态在前端技术中不知道如何实现 很像将一些设计原则应用到前端，如单例，工厂...理所当然的，包括面向对象的五大基本原则： 单一职责原则 里氏替换原则 开闭原则 依赖倒转原则 接口隔离原则 以及大家熟悉的二十多种设计模式，如工厂模式，观察者模式，命令模式等，在TypeScript都可以没有障碍的使用...": "^2.11.2", "gatsby-plugin-sitemap": "^2.9.0", "gatsby-remark-prismjs": "^3.10.0", "gatsby-source-filesystem...在其它方向都有自己的依赖管理 后端是使用maven或gradle来进行依赖管理 iOS最流行的是cocoapods Android是gradle来管理依赖 看到没，前端终于和其它技术方向站在同一起跑线上了

    2K20

    Vue3(Vite) 通过 prism.js 实现代码高亮并实现Mac风格

    prismjs漂亮的代码语法高亮插件 极致易用：引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！...丰富样式：所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。...完成效果 安装 npm i prismjs -S # vite npm install vite-plugin-prismjs -D 配置vite.config.ts(js) plugins扩展 line-numbers...显示行数 show-language显示语言 copy-to-clipboard显示语言 'inline-color'在代码中显示颜色块 import { prismjsPlugin } from 'vite-plugin-prismjs...(); //切换菜单重新渲染 }) Mac风格 通过修改全局pre的样式完成（可以在公告样式中写） 问题：这里虽然完成了效果，但是感觉代码不太理想 通过before 和after

    2.6K60

    手把手带你10分钟手撸一个简易的Markdown编辑器

    「编辑区」和「展示区」的页面同步滚动 编辑器工具栏中工具的实现 这里先放上我最终实现好了的效果图： ?...真正的html标签 的操作，我们借助了React提供的dangerouslySetInnerHTML属性，详细的使用可以看React 官方文档(opens new window) 此时一个简单的markdown...，免得以后也犯同样的错误 刚开始主要实现思路就是当滚动其中一块区域时，计算滚动比例（scrollTop / scrollHeight），然后使另一块区域当前的滚动距离占总滚动高度的比例等于该滚动比例 import...在我已经发布的markdown-editor-reactjs (opens new window)中，已经完成了其它工具的实现，想要看代码的可以去源码里看 七、补充 为了保证包的体积足够小，我将第三方依赖库...，希望大家多多支持~（其实我已经悄悄发布，但因功能还不是太完善，就不先拿出来给大家使用了，这里简单放个npm包的地址 (opens new window)）

    2.1K10

    如何利用机器学习和Gatsby.js创建假新闻网站​

    Gatsby.js是一个web应用程序生成器。该框架使用一些web资源，如HTML、CSS和JavaScript，通过各种api加载数据，然后将所有这些资源加载到带有预抓取资源的站点中。...当您使用Gatsby.js站点模板时，Gatsby会使用Git的一些功能。基本上，Gatsby.js将帮你创建一个有完整的骨架的网站，你可以调整和重新配置，而不是从头开始构建整个东西。...gatsby-node.js 此文件用于实现api。这些api可以使用GraphQL从数据层中获取数据。在处理程序化页面生成时，我们将更深入地研究这个文件的内容。...Gatsby构建在React之上，而React是一个JavaScript库，它使使用称为“组件”的构建块构建用户界面变得更加容易。...id excerpt } } ` 当您运行gatsby develop或gatsby build时，代码就会自动生成所有内容!

    4.5K60

    React 面试必知必会 Day 6

    如何在 React 中对 props 进行验证？ 当应用程序运行在开发模式时，React 会自动检查我们在组件上设置的所有 props，以确保它们具有正确的类型。...对于大型代码库，建议使用静态类型检查器，如 Flow 或 TypeScript，在编译时进行类型检查并提供自动补全功能。 7. react-dom 包有什么用？...如何在 React 中使用 innerHTML？ dangerouslySetInnerHTML 属性是 React 在浏览器 DOM 中使用 innerHTML 的替代品。...就像 innerHTML 一样，考虑到跨站点脚本 (XSS) 攻击，使用此属性是有风险的。你只需要传递一个 __html 对象作为键和 HTML 文本作为值。...在这个例子中，MyComponent 使用 dangerouslySetInnerHTML 属性来设置 HTML 标记： function createMarkup() { return { __html

    5K30

    手把手带你10分钟手撸一个简易的Markdown编辑器

    「编辑区」和「展示区」的页面同步滚动 编辑器工具栏中工具的实现 这里先放上我最终实现好了的效果图： 我也将本文的代码放在了 Github 仓库 (opens new window)上了，欢迎各位点个...真正的html标签 的操作，我们借助了React提供的dangerouslySetInnerHTML属性，详细的使用可以看React 官方文档(opens new window) 此时一个简单的markdown...，另一块区域也跟着同步的滚动，这样才方便查看 接下来我们来实现一下，我会将我实现时踩的坑也一并列出来，让大家也印象深刻点，免得以后也犯同样的错误 刚开始主要实现思路就是当滚动其中一块区域时，计算滚动比例...在我已经发布的markdown-editor-reactjs (opens new window)中，已经完成了其它工具的实现，想要看代码的可以去源码里看 七、补充 为了保证包的体积足够小，我将第三方依赖库...~（其实我已经悄悄发布，但因功能还不是太完善，就不先拿出来给大家使用了，这里简单放个npm包的地址 (opens new window)）

    1.5K20

    【实战笔记】怎么给自己的博客搭建富文本?

    一.vue-quill-editor回显 我们要在需要回显的页面中添加div,然后使用v-html渲染数据就可以了,特别需要注意的是一定要添加ql-editor类名,否则不会生效 html=""> 二.代码块高亮 1.首先安装prismjs及其依赖 //安装prismjs npm i prismjs //安装prismjs的编译器插件 npm...//由于富文本编辑器生成的代码块只有pre标签,没有code标签,而前端的回显需要code标签,所以需要做处理 let newContent = blogEditerContent.replace(...div> 到这里就大功告成了 看下效果 vue-quill-editor结合elementUI实现图片上传 写文章避免不了要上传图片的,但是这个编辑器默认是用base64编码方式存储的,这样的缺点就是当图片比较大时...，提交后台时参数过长，可能会导致提交失败,并且数据量多起来的话,会对数据库造成很大压力,所以我们就结合elementUI的图片上传组件,将图片上传到我们自己的图片空间,并且返回URL存到数据库中. 1.

    69320

    使用3-hexo主题时无法正常渲染html代码

    问题描述 在hexo框架中使用3-hexo主题时，会遇到这样一个问题：在markdown中嵌入html代码，这些嵌入的html代码无法正常显示。...原因分析 在使用3-hexo主题时，默认使用主题自带的渲染插件（会禁用highlight和prismjs），该插件会把这些嵌入的html代码进行渲染，所以无法正常显示html代码本身。...解决办法 使用hexo框架默认自带的prismjs插件进行渲染，具体实现：编辑项目根目录下的_config.yml文件，启用prismjs插件。...首先， 重新下载prismjs插件对应的css文件和js文件，重命名为：prism.css和prism.js。...【参考】 https://zicowarn.github.io/2020/09/02/hexo-02-embed-html-and-downloads-code/ Hexo 解决嵌入的html被渲染的问题和

    1.4K40

    React 入门手册

    在这段示例代码中，我们导入了一个 JavaScript 库（react npm 包）、一个 SVG 图片和一个 CSS 文件。...当出现语法错误、标签没有正确闭合或者匹配时，浏览器会尽可能的解析 HTML，而不是中断解析过程。 这是 Web 的一个核心特点，它非常宽松。 但是 JSX 并不宽松。...当将函数作为 props 时，子组件就可以调用父组件中定义的函数。...学习如何使用条件渲染，如何在 JSX 中使用循环，如何使用 React 开发者工具 通过 plain CSS 或者 Styled Components 学习如何在 React 应用中使用 CSS。...了解基于 React 构建的应用程序框架，如 Gatsby 或者 Next.js。 当然，最重要的是，请确保在构建应用的过程中实践你所学习的每一个知识点。 结语 非常感谢阅读这篇入门指导。

    6.4K10

    实践 Vue3 组件库-基于 VuePress 开发组件文档

    首先更改 pagePatterns 配置，把组件的文档包含在内。...组件演示 我们需要给文档添加组件演示的功能，你也可以使用社区现有的插件如之前提到的 vmi。如果为了便于扩展也可以自己开发。接下来我们就开发一个这样的插件，先定义期望的用法和语法。...使用 posthtml-parser 解析 demo 的标签 src 属性(使用这个包是为了方便扩展解析)。...这两部分放在那和怎么使用都可以自由发挥了。 下面部分是简单的写的，涉及到的样式和图标就不单独放出来了可以去源码中复制。 <!...""; break; } i++; } // 根据缓存中存储的组件路径导入组件，组件名称和生成节点时的规则一致。

    26310

    几分钟上线一个项目文档网站，这款开源神器实在太香了！

    之前在搭建mall项目的文档网站时，使用过不少工具，比如说Docsify、VuePress、Hexo、语雀等。...安装 使用Docsify仅需安装NodeJs和Docsify的CLI工具即可，非常简单。...代码高亮 如果你想实现代码高亮显示的话，可以在index.html中添加代码高亮的插件； prismjs@1/components...一键复制代码 如果你想实现一键复制代码，Docsify也是有插件可以支持的，直接在index.html中添加如下插件即可； code...时，我们需要把Markdown文件编译成html才能部署，使用Docsify我们无需编译，只需把docs中的文档都拷贝到Nginx的html目录中即可； 此时我们启动Nginx，访问下Nginx服务路径即可查看文档

    2K20

    React源码解析之HostComponent的更新(上)

    前言 接上篇 React源码解析之completeWork和HostText的更新 ，本文讲解下HostComponent多次渲染阶段的更新（下篇讲第一次渲染阶段的更新）。...//https://zh-hans.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml else if (propKey...', ); invariant( typeof props.dangerouslySetInnerHTML === 'object' && HTML in props.dangerouslySetInnerHTML...>、等是不能包含子标签的 ② 判断__html设置的标签内是否有子节点，如：__html:"aaa" ，就会报错 ③ style属性不为null，但不是Object类型的话，报错 ---...的话，比较新老innerHTML的值，并放进updatePayload更新数组中 ③ 如果propKey是children的话 当子节点是文本或数字时，直接将其push进updatePayload数组中

    5.9K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券