标签: astrojs
如何在 astro 中将服务器变量传递给客户端 JS？
我找到了这个（github） google auth 的 html 起始页，我想将其制作成 astro 组件。我想将其转换为.astro文件，并能够从后端传递 CLIENT_ID 和 API_KEY 的变量。我
这是来自谷歌的 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Google Calendar API Quickstart</title>
<meta charset="utf-8" />
</head>
<body>
<p>Google Calendar API Quickstart</p>
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
<button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>
<pre id="content" style="white-space: pre-wrap;"></pre>
<script type="text/javascript">
/* exported gapiLoaded */
/* exported gisLoaded */
/* exported handleAuthClick */
/* exported handleSignoutClick */
// TODO(developer): Set to …推荐指数
解决办法
查看次数
如何将 astro 组件渲染为 HTML 字符串？
我希望能够在 Astro 中拥有一个动态页面来呈现 Astro 组件。我深入研究了文档和代码，但找不到像下面这样的函数（Astro.render）。理想情况下，我可以将属性传递给它。我正在寻找类似的东西react.renderToString。
import Example from './components/Example.astro'
export async function get() {
return {
body: Astro.render(Example)
};
}
更新：我认为这里的每个答案都是错误的。给定一个 astro 文件，我想要一个node独立于运行时 astro 框架的函数，它可以接受 astro 文件并简单地返回一个Response（因为我知道 astro 文件可以返回来自 front-matter 的响应）和/或HTML字符串？我认为它可以是像这样的元组[res, htmlString]。就像可以转换 Markdown 文件一样，astro 文件也应该能够被处理。
推荐指数
解决办法
查看次数
如何使用 Astro 获取查询字符串参数
我正在使用一种名为 Astro ( https://astro.build/ ) 的新技术来构建一个完全静态的服务器端渲染页面，交付零 JS。
我有一个带有简单文本输入表单的页面，当用户填写该表单并单击提交按钮时，它会向 astro 页面发送 GET 请求。网址看起来像这样......
/?搜索=1234
我想要做的是访问该查询字符串参数，以便将我的用户重定向到另一个静态页面 /1234。
我尝试使用 Astro.request 访问 quesrystring 参数，但该对象（包括参数属性）完全为空。
是否有办法从 .astro 页面/文件访问查询字符串参数？
推荐指数
解决办法
查看次数
如何使用 Astro 组件自定义 Markdown？
md vs mdx
md import pipeline 渲染为 html，mdx import pipeline 渲染为 .js/.ts/.jsx...，这允许使用 Astro 组件自定义 html 标签。
目标
我想利用 Astro 的 .md 文件中的 mdx 功能
我尝试过什么
尝试在 Astro 中配置 mdx 集成，但不幸的是它排除了 .md 扩展名以允许默认的 md rehype 管道
我将所有 .md 文件重命名为 .mdx 的解决方法非常具有侵入性（更改文件元数据）我想找到一种不同的方法
分叉 mdx 集成很难维护
我启动了一个 vite 插件，它更改 .md ids 以添加 x 作为 .mdx，然后我必须编写自己的加载程序，然后它变得太复杂
astro-remote 仅采用一些默认组件，并且允许替换任何自定义组件
例子
我想避免
- (-) 在配置文件中嵌入 svg 资源，例如在标题元素中添加链接图标（示例https://github.com/withastro/docs/blob/52bf88ec74e3d01d212808d678320f190be64f76/astro.config.ts#L16）
更确切地说
- (+) 允许用 html 编写高级增强功能，例如 .astro，而不是 rehype js 格式。（示例仅供 mdx 参考而不是 md https://github.com/MicroWebStacks/astro-big-doc/blob/9d4215e86c020bf72f28ce83d8e494df23e0ff7d/src/components/headings/H1.astro#L15）
任何实现这一目标的最佳方法的想法，感觉就像缺少释放 Astro 对 Markdow …
推荐指数
解决办法
查看次数
如何在astro JS中使用文档和窗口元素？
我想使用窗口或文档返回当前页面的路径默认 Astro.site.pathname 无法正常工作或没有正确的文档。
我的问题是如何在 Astro JS 中正确使用文档或窗口？
提前致谢！
推荐指数
解决办法
查看次数
无法使用 babel/preset-env 填充 `Object.fromEntries`
我是否误解或配置错误babel/preset-env？我使用 babel 配置用于 vite using vitejs/plugin-legacy，但用于 AstroJS 项目。
plugins: [
legacy({
targets: ['defaults', 'not IE 11', 'ios_saf > 10']
})
]
根据我的理解，简单地指定 browserslist 查询应该足以让 babel 生成适当的 polyfill：
我们利用这些数据源来维护我们支持的目标环境版本获得了 JavaScript 语法或浏览器功能支持的映射，以及这些语法和功能到 Babel 转换插件和 core-js polyfill 的映射。
如果ECMA 2019Object.fromEntries不支持ios_saf < 12该功能，但它是 ECMA 2019 的一部分，为什么我的测试浏览器（ios_saf 11）会针对此功能引发错误？
推荐指数
解决办法
查看次数
在 Astro 中导入 Bootstrap
我目前正在开发 Astro (astro.build)，并希望将其与最新的 Bootstrap 版本一起使用。
有谁了解 Astro 并且可以向我解释如何正确集成 Bootstrap 吗？
在互联网上或论坛上没有找到任何内容，至少没有明确的答案。
非常感谢！
推荐指数
解决办法
查看次数
为什么我的 Astro 项目未加载 Vercel Web Vitals？
我使用 Astro 和 Tailwind CSS 创建了一个登陆页面。目前它托管在 Vercel 上。我想尝试 Vercel 提供的分析服务。我已经能够利用 Vercel 提供的受众分析服务。但是，我无法使用 Web Vitals 服务。启用服务并重新部署我的项目后，我陷入了这个屏幕（提供了屏幕截图）。
请注意，我确实关闭了广告拦截器，但这并没有解决问题。我还添加了以下元标记来解决任何 CSP 问题
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' vitals.vercel-insights.com"/>
但这并没有解决问题。这就是为什么我想知道 Vercel 是否支持 Astro 项目的分析，如果支持，那么我做错了什么？谢谢。
推荐指数
解决办法
查看次数
OnClick 事件不适用于 Astro 中的 React 组件
我正在为我的 astro 项目使用 React 组件，但 onclick 事件没有被调用。我只是想打印link clicked何时按下链接，但我看不到任何事件被调用。这是我的反应组件 -
import { useState } from "react"
import '../styles/components/tabs.css';
export function Tabs({headings=[], contents=[]}) {
const [selectedHeading, setSelectedHeading] = useState((headings.length) ? 0 : -1);
const handleClick = (index) => {
setSelectedHeading(index);
}
return (
<div class="tabs" onClick={handleClick}>
<ul class="tabs-header">
{headings.map((heading, index) => {
return <li
id={index}
style={
(selectedHeading === index) ? {color: '#A741FF'} : null
}
onClick={() => console.log('link clicked')}
>
{heading}
</li>
})}
</ul>
<ul class="tabs-content">
{
(selectedHeading === -1) …推荐指数
解决办法
查看次数
如何将 Vuetify 添加到 astro？
使用 Vue 集成时，我在将 Vuetify 3 添加到 Astro 时遇到问题。这是我到目前为止所拥有的：
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
import vuetify from 'vite-plugin-vuetify';
// https://astro.build/config
export default defineConfig({
integrations: [vue()],
vite: {
ssr: {
noExternal: ['vuetify'],
},
plugins: [vuetify()],
},
});
我收到'Vuetify plugin must be loaded after the vue plugin'错误了。不知道如何从这里继续前进。我愿意接受所有建议。
推荐指数
解决办法
查看次数
标签 统计
astrojs ×10
javascript ×4
reactjs ×3
node.js ×2
vite ×2
babeljs ×1
bootstrap-5 ×1
integration ×1
jsx ×1
markdown ×1
vercel ×1
vue.js ×1
vuejs3 ×1
vuetify.js ×1