小编Ben*_*nji的帖子

当黑暗模式切换时,有什么方法可以更改 tailwindcss 中的图像吗?

我环顾四周,但找不到任何相关的问答。我正在使用 tailwindCSS 在 ReactJS 中构建一个项目,并在网站上实现暗模式。一切正常,但现在我的背景图像遇到了一些问题。我已将两个图像设置为tailwind.config.js

  darkMode: 'class',
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'code': "url('/src/components/About/coding-bg-dark.png')",
        'light-code': "url('/src/components/About/lightcode.png')",
       })
    },
  },
Run Code Online (Sandbox Code Playgroud)

并将类名放在合适的部分

<section id='introduction' className="bg-code dark:bg-light-code bg-cover bg-fixed flex flex-wrap content-center w-full md:h-screen">
Run Code Online (Sandbox Code Playgroud)

但是当我切换深色模式时,图像不会改变,深色图像保持在浅色模式。知道我该怎么走吗?

javascript reactjs tailwind-css react-hooks darkmode

5
推荐指数
1
解决办法
8045
查看次数

使用 React Router 6v 渲染具有不同样式的 React 组件(例如导航栏)的正确方法是什么?

我遇到以下问题。

设计简介包含 3 个不同的页面。2 的NavbarFooter具有相同的布局,但第三个页面的这些组件具有不同的样式。我使用的是最新的react-router-dom v6,它与旧版本相比发生了很大的变化。

所以我的目标是渲染没有页脚和导航栏的第三页,并使用新组件为其赋予自己的样式。尽管在我的 App.js 中,我为每个页面渲染了这 2 个组件,以使其更加高效并避免重复代码。

应用程序.js

import React from "react";
import { Routes, Route } from "react-router-dom";

import Navigation from "./Components/Navigation/Navigation.components";
import Footer from "./Components/Footer/Footer.components";

import HomePage from "./Pages/HomePage/Home.pages";
import Portfolio from "./Pages/PortfolioPage/Portfolio.pages";
import Contact from "./Pages/ContactPage/Contact.pages";

import './App.scss';

function App() {
  return (
    <div className="App">
      <Navigation />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="portfolio" element={<Portfolio />} /> // this page needs different components
        <Route path="contact" element={<Contact …
Run Code Online (Sandbox Code Playgroud)

reactjs react-router react-router-dom

2
推荐指数
1
解决办法
1813
查看次数

将 NextJS 13 与 Langchain 推荐的向量库一起使用,出现错误:HNSWLib 未安装

我正在 Langchain 和 OpenAI 的帮助下创建一个应用程序。我正在加载数据并JSONLoader希望将其存储在矢量存储中,以便我可以根据用户请求进行检索以回答特定于我的数据的问题。Langchain 文档将 HNSWLib 描述为仅 Node.js 应用程序的可能存储。根据我的理解,NEXT 是建立在 Node.js 之上的,因此它可以运行 SS javascript,所以我应该能够使用它。我还应该提到JSONLoader也只能在 NodeJS 上运行,它运行得很好,所以我认为它应该已经全部设置完毕。

我按照新路由处理程序的文档在 app/api/llm/route.ts 中创建了一个 API 路由,并安装了该hnswlib-node包。

import { NextRequest } from 'next/server';
import { OpenAI } from 'langchain/llms/openai';
import { RetrievalQAChain } from 'langchain/chains';
import { JSONLoader } from 'langchain/document_loaders/fs/json';
import { HNSWLib } from 'langchain/vectorstores/hnswlib';
import { OpenAIEmbeddings } from 'langchain/embeddings/openai';
import path from 'path';

// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
export const GET = async (req: …
Run Code Online (Sandbox Code Playgroud)

npm typescript reactjs next.js langchain

2
推荐指数
1
解决办法
1257
查看次数