基本信息 项目已开源至 Github：Cesirdy/next-blog 首先使用了如下项目： Next.js Tailwind CSS React 设计理念之没有设计就是最好的设计，毕竟本质是写文章的地方...也就是不用每次访问其他页面都加载一整个 HTML 以及其包含的需要加载的 JS 和 CSS。 生成的 HTML 中，首页展示最新 5 篇。...next-mdx-remote 默认会将图片和超链接直接解析为 HTML，但是可以通过 components 将其解析为 Next.js 自带的图片和链接优化组件。这部分还是挺简单的。...在功能方面，Atomic CSS 支持媒体查询和状态处理，而行内样式缺少这些功能。...像 RSS 和 Sitemap 这两个，只有 RSS 的通过文件生成感觉还算比较优雅。
最基本的，你可以在.astro文件中定义 HTML、CSS 和 JS，这是一个 HTML 模板文件(但不仅仅是模板)。...这个文件在构建时或每次请求时都会渲染成一个 HTML 文件，具体取决于你的渲染策略。 --- const message = "Hello, world!"...使用 Astro 相当愉快。 强大的客户端 JS 支持 Astro 允许你在.astro文件中导入大多数主流框架的组件。...支持 内置代码块和语法高亮 Tailwind 插件 强大的插件 API 动态设置 HTML 类的指令 RSS 包 图片优化 极好的社区 Astro 社区可能是 Web 开发中最冷静、最友好的社区之一。...参考来源：pilcrow.vercel.app/blog/astro
基本介绍 新文档地址在 https://github.com/reactjs/reactjs.org/ 中的 beta 目录下，外层代码是目前的文档代码，那么我们可以直接 git clone 并且拷贝.../analyze/server.html' : '....MDX MDX 让 markdown 支持 jsx，我们一起来看看如何使用 import React from 'react'; import ReactDom from 'react-dom'; import...components 传入自定义组件，在 markdown 中就可以使用了。..., 可以直接再网页中渲染一个 https://codesandbox.io/ 并且文件可以引用文件，这就比较你牛了 我们发现 Sandpack 里面使用了 "@codesandbox/sandpack-react
功能强大，与 Gatsby 相似（React）dumi - 一款 UmiJS 生态中的组件开发文档工具（React）Nextra - 一个基于 Next.js 的静态站点生成器。... init -ynpm i -D vitepressyarn init -yyarn add -D vitepress将 vitepress 执行命令添加到执行脚本中"scripts": { "dev...', //网站描述 base: '/', // 部署时的路径 默认 / 可以使用二级地址 /base/ // lang: 'en-US', //语言 // 网页头部配置，引入需要图标，css，...此外，每一个子目录中包含的每一个 index.md 都将自动转换为 index.html，并带有相应的 URL/。...docs/.vitepress/theme/index.ts 中写入如下代码，其中 register-components.js 不需要自己创建，在 package.json 中注入脚本，执行脚本自动生成在
title: 使用docusaurus快速搭建静态博客站点 description: 使用docusaurus快速搭建静态博客站点 slug: use-docusaurus-to-deploy-blog...│ ├── 2019-05-28-first-blog-post.md │ ├── 2019-05-29-long-blog-post.md │ ├── 2021-08-01-mdx-blog-post.mdx.../blog目录中已经存在一些文件，它们是官方给出的模板，可以看看了解博客md的书写格式，后面如果不需要这些文件，可以把它们全部删除。 在..../blog目录创建一个md文件，因为今天是2022年4月16日，所以将文件命名为2022-04-16-my-first-blog.md。...├── img ├── index.html ├── long-blog-post ├── markdown-page ├── mdx-blog-post ├── rss.xml ├── sitemap.xml
在本教程中，我们主要使用.astro和.md文件来创建页面。注意，如果你使用.html页面，一些关键的Astro特性在HTML组件中不被支持。 现在让我们来创建第二个页面，看看它是如何工作的。...--- // The code fence area --- 例如，在上一节中，我在我的代码栅栏中添加了一个导入行，将Header组件添加到我的页面。我们将继续讨论我们在代码栅栏中还能做什么。...，你可以在代码栅栏内定义本地JavaScript变量，然后使用类似JSX的表达式将变量注入HTML模板中。...现在你可以以任何方式将这些属性添加到你的模板中。 另外，注意插槽元素。这是内容出现在最终HTML页面上的地方。 还有一步。...那么问题来了，如何将React组件添加到你的项目中。 首先，你需要将React添加到你的项目中。
Astro 仍然使用 HTML、CSS和JavaScript(或TypeScript)。...高性能 在许多 Web框架 中，在开发过程中很容易构建一个看起来很棒的网站，但是在部署后加载速度会非常慢。...Astro 将实时监听 src 目录文件的更改，因此你在开发过程中进行更改时无需重新启动服务器。...路由 Astro 的路由基于文件，它根据项目的 src/pages 目录中的文件结构来生成你的构建链接。当一个文件被添加到 src/pages 目录中，它将自动基于文件名生成与之对应的路由。.../blog/*.md"); --- <link rel="icon
中的 img 标签，可以在页面中直接使用。... 在 gatsby 中的使用实例： import React from "react" import logo from "....bainian.jpg" alt="百念牙膏" imgStyle={{border: 'solid 1px #ddd', borderRadius: 10}}/> 三、加载数据层图片节点 数据层图片节点称之为动态图片，在项目启动时...，gatsby会自动从源数据中下载图片，并转换为数据层中图片节点，下面详解 图片文件 -> 数据层图片节点 的过程。...文件转换为 MDX 数据节点，安装下面插件 npm install gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
Vue构建聊天应用 你将学到什么内容： 在这个教程中，你将学习如何从头开始设置一款Vue应用，创建组件、处理状态、创建路由、连接到第三方服务，甚至处理身份验证。...04 使用Next.js构建电子商务购物车 你将学到什么： 在这个项目中，你将学习如何设置Next.js开发环境、创建新页面和组件、获取数据和样式并部署一个next应用程序。...技术栈和功能： Next.js 组件和页面 数据获取 样式 部署 SSR和SPA 教程：https://snipcart.com/blog/next-js-ecommerce-tutorial 05 使用...06 使用Gatsby建立博客 你将学到什么内容： 在本教程中，你将学习如何利用Gatsby构建出色的博客，可以很好地用来撰写自己的文章，同时利用React和GraphQL的能力。...技术栈和功能： Gatsby React GraphQL 插件和主题 MDX/Markdown 引导CSS 教程：https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc
它“默认情况下无 JS”——这意味着 Astro 组件不会在客户端渲染，而是“在构建时或按需使用服务器端渲染 (SSR) 渲染为 HTML”。...在 The New Stack 的教程 中，Paul Scanlon 解释了他如何将他的个人网站从 React 框架迁移到 Astro，“并加入了一点 JavaScript”。...Astro 的文档 将“岛屿”定义为“页面上的任何交互式 UI 组件”，并邀请开发者将岛屿视为“漂浮在一片静态、轻量级、服务器渲染的 HTML 海洋中的交互式小部件”。...他的个人博客之前在 Gatsby 上，他开始将其迁移到 Next.js，这是他在工作中花费大量时间使用的框架。但在此过程中，他试用了 Astro，并很快被开发者体验所吸引。...你可以使用 Astro 采用 HTML 和 CSS 优先的方法，但“轻松地”在 Astro 中“点缀”JavaScript（正如 Scanlon 所说）。 Astro 的创建者 Fred K.
默认无 JavaScript：Astro 默认将页面渲染为100%静态HTML，默认移除了最终构建中的JavaScript，这有助于提升页面加载速度和用户体验。...内置SEO功能：为了简化SEO和网站内容的分发，Astro内置了自动生成站点地图、RSS源、分页和集合的功能，帮助开发者更轻松地优化网站在搜索引擎中的排名和可见性。...尽管岛屿在不同的组件环境中运作，但它们之间仍然能够共享状态并相互通信，保持了高度的灵活性和交互性。...这些处理程序基于Web Fetch API，因此能在多种Node.js及非Node.js环境中运行。...只需向脚本或HTML文件添加一行代码即可开始编码。任何使用VanJS的代码都可以直接粘贴并在浏览器的 Devtools 中执行。VanJS 允许专注于应用程序的业务逻辑，而不是陷入框架和工具中。
是PowerBI上可以轻松还原BW的多维模型，但因BW是传统的多维模型，且它是标准化的模型，将整个财务数据都建立在一个模型中，如财务里面的资产负债、收入、利润、成本、现金流量等，不再像我们日常面对的每个事实主题是独立的...其他所有金额类的数据统一放到一个科目指标维里，就会出现，拉出一个科目维，里面有收入、成本、利润等不同主题的分类，如果硬着头皮，将各种指标在PowerBI建模上重构回度量值，就会出现交互分析时，一个科目维拉出来...所以就有必要通过MDX查询的方式，在其一个巨大的模型中精确地切割出自己想要的部分数据，再重新建模，并且理想情况下，可以调用其成员公式，将指标的计算也拿到手，不需要再重新摸黑构建。...但遗憾地是MDX语言的资料非常稀缺和小众。DAX查询可以在Excel用户群体中流行，而MDX估计只能在专业BI人员群体中使用到。...以前笔记分享过将英文的pdf转换为html，再用谷歌浏览器来查看，调用谷歌翻译来完成中文化的阅读体验，这一次，有所改进，直接用EDGE浏览器来打开pdf文件，再调用一个浏览器插件【Edge Translate
使用 MDX 引用导入 stories Storybook 7 鼓励所有用户在 CSF3 中定义 stories，然后在 MDX 中引用它们。...这样，你既可以在编写 stories 时进行类型检查和自动完成，又可以使用 markdown 方便地编写内容。...你可以使用下面的 Storybook 7 迁移脚本将现有的 MDX story 文件拆分为单独的 MDX 和 CSF 文件。...然后，使用 Testing-Library 和 Jest 中熟悉的语法来模拟事件和断言 DOM 结构。 这在测试复杂的 UI 交互（例如表单控件或其他有状态组件）时特别有帮助。...你可以在浏览器中调试事件流，并使用我们的测试运行器从命令行并行执行所有测试。
DAX查询可以完全在存储于内存的模型上运行，也可以完全由原始数据源运行，还可以混合使用这两种方式。 在报表端可以使用DAX或MDX语言向表格模型发送查询。...存储引擎有两种形式： 图1展示了执行DAX查询或MDX查询的架构体系。 VertiPaq 将数据副本托管到内存中，该副本定期在数据源中被刷新。...公式引擎将DAX或MDX查询转换为查询计划（Query Plan），其内容是将要执行的物理步骤的列表。查询计划中的每个步骤都对应于公式引擎执行的特定操作。...公式引擎可以处理DAX或MDX函数请求的所有操作，并解析复杂的DAX和MDX表达式。但是，当公式引擎必须从底层表中检索数据时，它会将部分请求转发到存储引擎中。...双（Dual）：数据可以使用VertiPaq和DirectQuery查询。在刷新数据期间，表被加载到内存中，但是在查询时，表也可以通过DirectQuery模式读取包含最新信息的数据。
vite 采用浏览器支持 ES 模块来解决开发时构建缓慢的问题，使用 esbuild 预构建依赖（开发时不会变动的纯 JavaScript 代码，一般是 node_modules 中的第三方包）。...创建 gatsby 应用 npm init gatsby 在命令行中选择开发语言，是否使用 CMS、是否支持、md、mdx 等 创建完成后，在命令行运行 npm run dev，打开 http://localhost...例如，在 Next.js 中，可以使用 getServerSideProps 方法获取数据，并在服务端渲染页面，提升首屏加载速度。 支持静态导出，可以提升 SEO。...例如，在 Next.js 中，可以使用 next export 命令，将项目打包为静态文件，并发布到 CDN 上，让搜索引擎更容易抓取页面。...例如，在 Next.js 中，可以使用 dynamic 导入组件，实现代码拆分； 可以使用 next/link 组件，实现客户端路由跳转，提升用户体验等。
前言 前面的文章中，我们配置好了编辑器，实现了 css、html、js 的编辑，并且可以在浏览器端编译代码，接下来我们需要实现数据存储的功能。再次提一下我的技术栈主要是 Next.js。...ok: true, id: result.id, } } return { ok: false, msg: '异常错误', } } 在这段代码中我将查询和添加的逻辑都写在一个云函数中...将云函数的域名设置到环境变量中，方便以后迁移和部署。...我们使用 react-use 中的 useAsyncFn, 这个 hook 将请求状态和返回结果保存在 state 中，点击保存按钮，执行 handleSave 就可以提交数据。...查询数据 我们可以使用同样的方法查询数据。为了体现 next.js 服务端优势，对 SEO 更友好，我们可以在 getServerSideProps 中获取数据。
本文告诉大家如何将 docx 的 Word 文档在 WPF 中显示内容 本文源代码请看 ArtMalykhin/wpf-embedded-docx 在 Office 文档解析 文档格式和协议 咱可以了解到...Word 文档只是一个压缩文件里面的文件使用 xml 表示 因此需要做的是将 xml 转 FlowDocument 在 WPF 界面显示，大概做到的效果就是丢失很多样式和特效，然后文本形式加超链接在...86-docx-%E7%9A%84-Word-%E6%96%87%E4%BB%B6%E8%BD%AC%E6%8D%A2%E4%B8%BA-FlowDocument-%E6%98%BE%E7%A4%BA.html...如果你想持续阅读我的最新博客，请点击 RSS 订阅，推荐使用RSS Stalker订阅博客，或者前往 CSDN 关注我的主页 本作品采用 知识共享署名-非商业性使用-相同方式共享...欢迎转载、使用、重新发布，但务必保留文章署名林德熙（包含链接： https://blog.lindexi.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。
有效的企业级前端架构的指导原则 在为企业级应用构建前端解决方案时，有一个明确定义的原则集可以作为指导你的发展方向的罗盘。在此节中，我会分享在企业环境中使用 Next.js 所积累的原则。...在设计前端架构时就考虑到可扩展性。这意味着选择能适应流量、数据量和功能复杂性增长的模式和工具。Next.js 的面向可扩展性的设计可以成为这项努力中的宝贵帮手。...在以下章节中，我们将深入探讨这些原则如何转化为可执行的策略和最佳实践。 文件夹和文件结构 在 React 中，使用经过深思熟虑的文件夹结构组织项目对于维护性和可扩展性至关重要。...src/lib： 这个文件夹可能包含后期可以转换为在多个应用中使用的包的实用工具函数。它不同于 src/utils，后者可能包含不适合后期转为包的工具函数。...语义化 HTML 为你的按钮组件使用语义化 HTML 元素(例如 )。这增强了可访问性和 SEO，并确保在不同设备上表现出正确的行为。
例如，Next.js官方提供了一个名为"next-mdx-blog"的插件，可以轻松地创建基于Markdown的博客网站。...Eleventy 基于 JavaScript 实现，是一个简单、灵活、快速的静态站点生成器，可以将各种模板语言（如 Markdown、Pug、Liquid、Handlebars 等）转换为 HTML、CSS...Pelican 的主要特点包括： 静态网站生成：Pelican 将输入的文本文件转换为静态HTML文件，不需要使用数据库或其他后端技术。...Middleman 是一个用 Ruby 编写的静态站点生成器，它可以将 Markdown、ERB 模板和 YAML 配置文件转换为静态 HTML 文件。...不同的工具都有各自的优缺点，适用于不同的需求和技能水平，因此在选择时需要根据自己的情况进行考虑。例如，如果您想要一个快速而简单的解决方案，那么 Jekyll 或 Hexo 可能是不错的选择。
你可以将它们想象成在一片由静态（不可交互）的 HTML 页面中的动态岛屿。 从上面这句话的定义中可以提炼一些要点： 静态 HTML。 交互性的 UI 组件。 多个岛屿，支持独立呈现。...Astro 宣称自己是 ‘zero-JS frontend architecture’，即 Astro 在服务端渲染静态 HTML，客户端中不需要加载额外的 JS 就能完整呈现内容。...---- 有了‘岛屿’赋能的 Astro 架构： Astro 在服务端渲染完整的 HTML 树，然后在客户端中按需加载岛屿代码，并进行水合。看起来有点像微前端、或者 iframe 这样的机制。...在 Astro 的定位非常清晰，它把站点类型分为两种： 内容为中心 → 也称为 网站 → Astro 擅长 交互为中心的 → 也称为 Web 应用程序 → 应该使用 Next.js 或者 Nuxt.js...SPA (Next.js) – 65% 网络使用减少 Astro vs.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
