首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用 Gatsby 创建一个博客

添加必要的插件 Gatsby 支持使用丰富的插件,很多非常有用的插件都是为了完成普通任务而编写的。...这个API写在在 gatsby-node.js文件中,在这个文件中发现的每一个导出都将由 Gatsby 分析。Gatsby详细地介绍了它的Node API规范。...每一次我们构建 Gatsby 时, createPage 将被调用,Gatsby 将会创建一个静态的 HTML 文件路径根据我们在帖子的前面专门写的 frontmatter。...我们不能期望用户猜测每个帖子的路径,我们需要有一个索引或列表页面来展示每个博客文章,简短的介绍,以及一个完整的博客文章的链接。...CLI,用于在预定义的 Gatsby 结构和 frontmatter、日期、路径等方面搭建一个博客帖子。

2.5K30

你的博客用不着什么JavaScript框架

当我决定使用静态站点生成器和 JavaScript(排除了 Jekyll 和 Hugo)后,就只剩下两个差别颇大的选项了: “我听说 Gatsby 很好用” 根据官方网站的说法,“Gatsby 是一个基于...我挑选了一些不需要添加客户端 JavaScript 也能添加功能的插件: 在帖子中显示代码段时,通常会包含特定于语言的语法高亮显示。...有一些 JavaScript 库可以做到这一点,其中最流行的似乎是 Prism——你可以在客户端中运行它,但由于我们使用的是 JavaScript SSG,因此可以在构建时运行它,并将语法高亮显示所需的...相比之下,Gatsby 中出色的 gatsby-image 插件可以生成延迟加载和响应式的图片元素,并能在加载全分辨率文件后在低分辨率或 SVG 版本的图像间平滑切换。...Eleventry 还有一些让我感到困惑的事情:我有一阵子一直搞不懂它的分页功能,认为它只是将帖子分页到指定大小的一些组中,之后才意识到它可以动态生成全新的页面;我还发现自己在同一文件中混用了模板语言:

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

    2018 年前端开发五大趋势

    让我们举个具体的列子。想象一下,你需要在正在构建的社交网络框架中显示帖子列表,以及用户的喜好(点赞、收藏等)。在实现方面,这个例子很简单,你只需从下一个数据库端点发出请求。...但是,由于这些数据可能来自不同的来源(例如,如果帖子存储在 MongoDB或Redis中),生成的应用将比舒适的工作慢得多。...Gatsby 如果你的预算比较紧张,但是同时又希望在你的项目中只使用高级技术,那么你一定要尝试 Gatsby。Gatsby 是 Kyle Matthews 为静态网站的创建而构建的新型解决方案。...与 Jekyll,Hugo 或 Hexo 等流行解决方案不同,这个静态生成器不使用模板,而是信赖于 Webpack 和 React 组件(注意 React 官网本身也是在 Gatsby 的帮助下编写的)...从1.0版本开始,Gatsby 使用了上面提到的 GraphQL。因此,在构建过程,它可以从多个 GraphQL API 中获得数据,然后使用它们创建一个完全静态的 React 客户端应用程序。

    2.9K40

    开源社区系统 Echo 超全文档助力春招

    “管理员” 可以看到帖子的删除按钮并执行相应操作 “普通用户” 无法看到帖子的置顶、加精、删除按钮,也无法执行相应操作 支持按照 “发帖时间” 显示 支持按照 “热度排行” 显示(Spring Quartz...) 发布帖子(过滤敏感词),将其存入 MySQL 分页显示所有的帖子 查看帖子详情 权限管理(Spring Security + Thymeleaf Security) 「评论模块」 未登录用户无法使用评论功能...发布对帖子的评论(过滤敏感词),将其存入 MySQL 分页显示评论 发布对评论的回复(过滤敏感词) 权限管理(Spring Security) 「私信模块」 未登录用户无法使用私信功能 查询某个会话所包含的所有私信...本地运行 各位如果需要将项目部署在本地进行测试,以下环境请提前备好: Java 8 MySQL 5.7 Redis Kafka 2.13-2.7.0 Elasticsearch 6.4.3 然后「修改配置文件中的信息为你自己的本地环境...双向绿色箭头:表示 Controller 和前端模板之间进行参数的相互传递或使用 单向蓝色箭头:A -> B,表示 A 方法调用了 B 方法 单向红色箭头:数据库或缓存操作 ❞ 注册 用户注册成功,将用户信息存入

    2.4K20

    独立开发 一个社交 APP 的架构分享 (已实现)

    ,点击某一条,都会跳转进入对应帖子或文章 我的帖子模块,显示所有发过的帖子 我的评论,显示所有发过的评论,包含回复 我喜欢的模块,显示所有点过赞的帖子或评论 我的收藏模块,显示所有收藏过的帖子或文章 我的设置模块...搜索历史记录 搜索用户 搜索文章 说实话,这个项目的文件夹已达1.5G,安装包混淆编译后27M,我在写之前,就在想要怎么把它摊开来讲,想想真的很复杂,脑子东西东西太多。...富文本编辑器        这个在一个月前还有使用,基于gitHub 安卓开源项目-richEditor二次开发而来,原作者的项目,bug比较多,且兼容性非常差,在我修改完之后,最后一次发现bug是在红米手机上面...VlcDemo 网页 基于javaScript播放器 这个是我最初的尝试,在使用原生播放器的时候,通过正则替换文章内容的video标签,提取 src,然后组合 js 的播放器里面,能够自定义很多功能...内容过滤 要过滤掉某些敏感词,防止色情或其他内容出现 用户位置获取 使用百度地图API 图片部分 选择 张数的限制 模仿了微信的图片选择器,采用GirdView加载,可以多张一起选择

    4.9K101

    校园论坛(Java)—— 用户管理系统模块

    :管理员查看用户的普通帖子 MdeleteUserForumServlet:管理员删除用户普通帖子 MdeleteUserServlet:管理员删除用户 deleteUserAck.jsp:管理员删除用户后提示删除成功...3、管理员管理用户功能 3.1 管理员查看普通用户的所有帖子 在userlist.jsp页面为每一个用户都设置了一个“查看发帖”按钮,通过该按钮可以查看展示的对应用户的所有发帖。...在userforumlist.jsp页面中,对于每一个用户的每一条普通帖子都设置了一个“删帖”按钮用于删除帖子,在此页面获得两个参数uid和fid。...在studyReply.jsp页面中,如果当前浏览的学习专帖发表者是当前登录用户或者当前登录用户是管理员身份,则设置有一个「删除本帖」的按钮,在此页面获得两个参数uid和sid。...学习专帖的删除需要判断当前登录用户是否为管理员,如果是,会有「删除本帖」的按钮,否则不会显示此按钮 判断用户代码如下: javascript"> function

    1K20

    5个最佳WordPress广告插件

    帖子内容的顶部/底部在任何段落或标题之后(包括随机化)在特定的HTML元素处侧边栏/小部件使用简码或PHP函数手动放置页脚还有bbPress、BuddyBoss和BuddyPress集成,以便您可以轻松地在社区的特定位置插入广告...广告权重——让一些广告比其他广告更频繁地出现。有条件的用户角色显示-您可以根据网站访问者的用户角色隐藏广告。例如,您可以向匿名访问者展示广告,但为付费会员隐藏广告。...延迟显示/隐藏广告——例如,在用户在页面上停留10秒后显示广告。广告上限–设置每个用户会话显示的最大广告数量。例如,使用户在访问期间不会看到超过20个广告。...通过添加到HTML编辑帖子子面板的附加快速标签按钮,可以轻松地将上述标签插入帖子中。...您所做的就是将您的广告添加到插件中,然后将该广告的短代码或块包含在您要显示广告的帖子中。如何在WordPress上的帖子之间放置广告?

    8.6K20

    WordPress 初学者词汇表(术语解释)

    jQuery是一个 JavaScript 库 – 旨在让开发人员更轻松地操作网页元素的软件。...在 WordPress 中,您可以非常轻松地创建菜单,并且有内置设置可以将菜单分配到特定位置(例如,主菜单、侧边栏菜单、页脚菜单等)。...仪表板的小部件部分 小部件也可以是特定主题的,或者通过使用小部件插件进行扩展。 Siderbar(侧边栏) 侧边栏显示帖子或页面上的支持内容。...例如,Elementor主题包括在各种设备上隐藏或显示行的选项。这是一项独特的响应功能,您可以使用它在桌面上显示滑块但在移动设备上隐藏(因为滑块在小屏幕上很难看到,您可以选择显示照片)。...在 WordPress 博客中,一些主题包含可用于格式化内容的简码,例如,添加按钮。而一些插件使用简码插入特殊内容,例如使用插件构建的联系表单。

    7.2K20

    Astro 从静态网站生成器到 Next.js 劲敌的旅程

    在 Netlify 最近的开发者调查中,Astro 是 增长最快的 Web 框架,无论是使用率还是满意度。...正如 Scanlon 在他的帖子中所说,“React 很棒,但你的网站每一页都需要它吗,还是只需要在网站周围的几个“岛屿”中?”...在 1 月份的Modern Web播客的 一集中,Quick 解释了 Astro 如何成为一种下一代 Gatsby。...他的个人博客之前在 Gatsby 上,他开始将其迁移到 Next.js,这是他在工作中花费大量时间使用的框架。但在此过程中,他试用了 Astro,并很快被开发者体验所吸引。...你可以使用 Astro 采用 HTML 和 CSS 优先的方法,但“轻松地”在 Astro 中“点缀”JavaScript(正如 Scanlon 所说)。 Astro 的创建者 Fred K.

    52210

    java基于springboot外卖系统在线订餐系统app源码厨艺论坛APP

    简介本项目主要包括了外卖订餐系统(在线订餐和外卖配送)、厨艺论坛系统、管理员后台、用户中心等功能。用户注册后可以选择餐桌在线点餐支付,也可以选择外卖配送到家的方式。...图2.3游客的用例图1.2.1 普通用户用例分析如图2.4所示,普通用户进入系统登录后,可实现的主要功能如下:(1)订餐普通用户可以在订餐模块对菜品进行选择并订购。...(2)查看订单普通用户可以在订单模块查看自己的订单详细信息,还包括有提醒发货或申请退款功能。(3)评价普通用户可以在确认收货后选择评价订单。...(6)使用论坛普通用户可以发布帖子、查看帖子、点赞以及关注其他用户。...前台模块设计的使用对象主要是普通用户,而后台模设计的使用对象则是超级管理员。

    2.1K00

    详解越权漏洞

    攻击者通过利用这些漏洞,访问其他用户拥有的资源或执行与其权限级别不符的操作。1.2.2. 垂直越权发生在具有多个权限级别的系统中。攻击者通过利用这些漏洞,从一个低权限级别跳转到一个更高的权限级别。...例如,攻击者从普通用户身份成功跃迁为管理员。1.3. 漏洞举例1.3.1. 水平越权假设一个在线论坛应用程序,每个用户都有一个唯一的用户ID,并且用户可以通过URL访问他们自己的帖子。...应用程序的某个页面的URL结构如下:https://example.com/forum/posts?userId=应用程序使用userId参数来标识要显示的用户的帖子。...userId=1如果应用程序没有正确实施访问控制机制,没有验证用户的身份和权限,那么Bob将成功地通过URL参数访问到Alice的帖子。1.3.2....在正常情况下,只有管理员可以访问和执行与商品管理相关的操作。然而,如果应用程序没有正确实施访问控制和权限验证,那么普通用户可能尝试利用垂直越权漏洞提升为管理员角色,并执行未经授权的操作。

    97420

    022.基于IT论坛案例学习Elasticsearch(一):Filter相关知识

    ID搜索帖子(无结果) # text类型的field,建立倒排索引的时候,就会进行分词 # 分词以后,原本的articleID就没有了,只有分词后的各个单词存在于倒排索引中(qqpx、r、3956、ad8...bitset,使用找到的doc list,构建一个bitset,就是一个二进制的数组,数组每个元素都是0或1,用来标识一个doc对一个filter条件是否匹配,如果匹配就是1,不匹配就是0,例如为上述filter..., 0, 1] 可以看到,同事满足这两个条件的doc为doc4(下标为3),于是返回doc4给客户端 bitset的缓存:在最近256个query中超过一定次数的过滤条件,就会缓存其bitset...就不用重新扫描倒排索引,而是直接从缓存中获取满足条件的doc list,这样可以大幅度提升性能,在最近的256个filter中,有某个filter被查询超过了一定的次数(次数不固定),就会自动缓存这个filter...query之前执行,这样可以先过滤掉尽可能多的数据 如果document有新增或修改,那么缓存的bitset会被自动更新 后续只要是相同的filter条件,都会直接使用这个过滤条件的缓存bitset来进行查询

    48830

    使用Python Dash,主题分析和Reddit Praw API自动生成常见问题解答

    这些Reddit帖子显示了一个论坛可能会在几天不活动的情况下带来多大的混乱 在本文中,将更多地了解如何从Reddit等论坛中提取信息更容易,更直观。...实现此目的的一种方法是构建一个仪表板页面,用于从论坛中提取关键主题并将其打包在可过滤的仪表板中以便快速浏览 - 将称之为自动生成的常见问题,因为它通过文本语料库并提取主题以形成创建常见问题(FAQ)/帖子的趋势和模式...Reddit Code获得某个subreddit频道 接下来使用以下元数据将hot_python导出到topics.csv 从Reddit Praw中提取帖子后检索的元数据 主题提取 本节说明如何在...这将是在本地进行可视化和部署的基础。请查看演示文稿和演示,以获得更加动画的应用程序视图。 通过应用程序,用户将能够选择最近最重要的主题,过滤它们并显示时间线。此外下表将根据所选主题展示最相关的帖子。...应用程序的实用性 建议的改进 演示 计算机科学教育技术在线硕士自动生成常见问题解答 结论和未来的工作 这个项目有机会解决许多人似乎在Reddit或教育论坛等典型论坛上遇到的实际和相关问题。

    2.3K20

    吧友们, 昨天的「百度贴吧」还差一个用户界面, 代码都在这儿了...

    我们需要为项目中的所有组件创建一个文件夹: mkdir app/js/components 接下来,我们需要为根组件创建一个文件,我们简单地把根组件命名为 App 并使用相同的文件名: touch app...为了在帖子组件 Post 的视图中展示数据,我们将对刚才获取的数据进行解析并相应地使用设置状态函数 setState()。...render() 中创建的变量可以任意地添加数据,所以我们不需要让它们在 props (React 用来在组件之间传递值的一种对象)或状态对象 state 上可用。...或差评 DOWNVOTE,但问题在于 JavaScript 中不支持枚举数据结构,因此在前端组件中我们需要使用哈希对象作为替代: const BALLOT = { NONE: 0, UPVOTE...我们需要通过帖子的 props 对象获取帖子的好评差评投票并相应地渲染它们。但是,如果在接收到投票后立刻更新这些值就好了。

    3.4K00

    React学习笔记(二)—— JSX、组件与生命周期

    我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言,但它具有 JavaScript 的全部功能。...JSX列表渲染 1.4.1、map函数 map()方法定义在JavaScript的Array中,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。...支持多行(换行),如果需要换行,需使用() 包裹,防止bug出现 1.8、JSX 也是一个表达式 在编译之后,JSX 表达式会被转为普通 JavaScript 函数调用,并且对其取值后得到 JavaScript...使用create-react-app新建一个简易BBS项目,在这个项目中定义一个组件PostList,用于展示BBS 的帖子列表。...3.1、定义一个组件,当文本框中输入内容时在文本框后显示输入的值,双向绑定。 3.2、请完成课程中的所有示例。

    5.7K20

    使用Python对Instagram进行数据分析

    我推荐使用Jupyter笔记本和IPython。普通的python运行良好,但可能没有显示图像的功能。...comments] – 发表评论 [image_versions] – 包含实际JPG文件的链接,我们可以在Jupyter笔记本上显示它。...功能 Get_posts_from_list()和Get_url()将循环访问帖子列表,找到每个帖子的URL并将其添加到空列表中: 完成后,我们应该有如下的URL列表: ?...我们可以使用Ipython.display模块查看图片,显示如下 ? ? 在笔记本中查看图像是非常有用的,我们稍后将使用这些函数来查看我们的结果,正如你将看到的那样。...(top_posts) display_images_from_url(image_urls) 过滤照片 我们可能想把一些过滤器应用到我们的帖子列表中。

    2.8K40

    【Vue.js——关键字匹配】搜一搜呀(蓝桥杯真题-1762)【合集】

    这意味着当用户在输入框中输入文本时,输入的内容会自动更新 search 的值,反之亦然。 2....data: search:存储用户在输入框中输入的搜索关键字。 postList:存储一个 Post 对象的数组,每个 Post 对象包含一个帖子的信息。...else:如果 search 不为空,使用 filter 方法对 postList 进行过滤。...最终,v-for="post in filteredList" 会根据 filteredList 计算属性的结果更新页面显示,只显示符合搜索关键字的帖子。 4....用户输入的关键字会触发 Vue 实例中数据的更新,进而触发计算属性的重新计算,最终更新页面上显示的帖子列表,仅显示那些标题中包含用户输入关键字的帖子。

    2500

    Reddit 如何实现大规模的帖子浏览计数

    到目前为止,投票得分和评论数量是特定的帖子活动的主要指标。然而,Reddit 有许多访问者在没有投票或评论的情况下阅读内容。我们希望建立一个能够捕捉到帖子阅读数量的系统。...然后将该数量展示给内容创建者和版主,以便他们更好地了解特定帖子上的活动。 在这篇文章中,我们将讨论我们如何大规模地实现计数。 计数方法 对浏览计数有四个主要要求: ◈ 计数必须是实时的或接近实时的。...不是每天或每小时的总量。 ◈ 每个用户在短时间内只能计数一次。 ◈ 显示的数量与实际的误差在百分之几。 ◈ 系统必须能够在生产环境运行,并在事件发生后几秒内处理事件。...如果计数器还没有在 Redis 中,那么 Abacus 向 Cassandra 集群发出请求,我们用这个集群来持久化 HLL 计数器和原始计数,并向 Redis 发出一个SET [10] 请求来添加过滤器...为了保持对可能从 Redis 删除的旧帖子的维护,Abacus 定期将 Redis 的完整 HLL 过滤器以及每个帖子的计数记录到 Cassandra 集群中。

    1.3K90

    数据“厨师”ETL竞赛:今天的数据能做些什么?

    Slashdot数据集收集许多子论坛的帖子和评论,如科幻小说,Linux,天文等。大多数用户使用他们的用户名发文或评论,也有些用户匿名参与。...种子帖子是线程中的第一个项目。线程的标题是种子帖子的标题。在图1中,您可以在左侧看到种子发布的数据,在右侧看到相应评论的数据。请注意,一个种子帖子可能会对应多条评论。...我们将从他们的结果中得出我们自己的结论。 在分析中,考虑所有非匿名用户。因此,第一步是删除“用户”是“匿名家伙”或“匿名读者”的所有数据行,其中用户名太长,或者没有帖子ID。...图2中工作流程的下半部分为每个论坛用户创建文档列表,从他/她编写的帖子或评论中获得。同时,根据MPQA主观词汇从英语词典中收集两个词汇表:消极词和积极词。...点击关闭按钮并选择将目前的选择点保留为新的默认设置后,选定的作者d将移动到下一个可视化包裹元节点,提取所有他/她的帖子并显示文字云(图5)。

    1.8K50

    Node.js 最佳实践:改善你的应用程序设计 | 开源日报 No.191

    通过遵循这些最佳实践,您可以改善自己在使用 Node.js 时所做的应用程序或系统设计。...它可以帮助您确保在代码中正确使用变量和函数。通过为 Python 程序添加类型提示 (PEP 484),当您错误地使用这些类型时,mypy 会发出警告。...渐进式编程:允许逐步向代码库中添加类似注释的方式来引入静态 typing,并且在不方便进行静态 typing 时始终可以回退到动态 typing。...它没有任何广告,具有清晰的用户界面和流畅的浏览体验。 自动滚动帖子:自动滚动帖子使您可以在不移开拇指的情况下享受精彩内容。...无需设置或配置 可以查看任何格式的日志文件,也可以使用 tail 命令来实时跟踪最新内容 高亮显示数字、日期、IP 地址、UUIDs 和 URL 等信息 所有高亮组都可自定义 易于与其他命令集成 使用

    21910
    领券