小编use*_*344的帖子

Nextjs 13 app目录如何为主页指定路由文件夹

在带有实验性应用程序目录的 Nextjs 中,我想为整个应用程序指定布局、错误、加载等,然后为主页独有的布局、错误、加载等页。只需创建一个文件夹,然后将这些文件放入其中,即可轻松地对应用程序中的每个其他页面完成此操作。但我似乎无法弄清楚如何为主页指定文件夹。主页的所有内容都位于应用程序目录的根目录中,整个应用程序以及主页都使用该目录。似乎您应该能够指定一个索引目录并将其像应用程序中的任何其他页面一样对待,但事实并非如此。我似乎找不到任何有关如何处理此问题的文档。这只是Next13的一个功能吗?如果是这样,那么您可以为应用程序中的每个页面指定路由特定页面、布局、错误等,但不能为主页指定,这似乎有点奇怪。

那么如何使用应用程序目录文件结构为 Nextjs 13 中的主页指定目录呢?

javascript next.js

9
推荐指数
1
解决办法
5763
查看次数

输入自动完成,使内容跳转

我有一个输入,在Chrome中,当自动完成菜单弹出时,您将鼠标悬停在其中一个选项上,输入下方的内容会跳转。就像自动完成选择一样,由于某种原因,它会添加垂直填充。我该如何停止这很烦人。这是一个例子:

小提琴演示

您可能不得不摆弄小提琴,因为在代码段中,由于某些原因自动完成功能被禁用。但是,如果单击输入并将鼠标悬停在自动完成条目上,您会看到绿色框移动。为什么会发生这种情况,以及如何禁用此行为。

div{
  width:300px;
  height:200px;
  background: green;
}
Run Code Online (Sandbox Code Playgroud)
<input type="text" name="q" />
<div></div>
Run Code Online (Sandbox Code Playgroud)

html css

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

有没有办法在应用 css 变换矩阵之前计算元素的结束位置?

transform: matrix()我需要在应用css 转换之前计算出元素的结束边界矩形。我不知道从哪里开始,也找不到任何解决这个问题的好文章。

因此,假设您拥有元素的原始位置,getBoundingClientRect()如果您拥有应该应用的矩阵,是否有可靠的方法来找到结束位置。

我已经构建了一个滚动控制器,我正在尝试在屏幕上映射元素进度,但我需要元素的开始和结束位置。因此,我需要应用 css 转换后元素的位置来确定元素何时离开屏幕。现在我只是应用矩阵然后getBoundingClientRect()再次运行。但这似乎有点老套。

因此,假设您有原始矩阵和结束矩阵。getBoundingClientRect()然后在元素上运行来找到它的位置。有没有数学方法来计算新的边界矩形?

因此,对于本示例,我们将仅使用 6 值矩阵。但如果将它应用到完整的 16 值矩阵也会很好:

const boundingRect = element.getBoundingClientRect();
const startingMatrix = [1, 0, 0, 1, 0, 0];
const endingMatrix = [2, 1, -1, 2, 200, 400];

// Now calculate the new bounding rect of element after ending matrix is applied.
Run Code Online (Sandbox Code Playgroud)

我根据下面的评论推荐的这篇文章https://dev.opera.com/articles/understanding-the-css-transforms-matrix/尝试了以下操作。我显然缺少或不明白一些东西。这是我的尝试:

const boundingRect = element.getBoundingClientRect();
const startingMatrix = [1, 0, 0, 1, 0, 0];
const endingMatrix = [2, 1, -1, 2, 200, …
Run Code Online (Sandbox Code Playgroud)

javascript css algorithm transform matrix

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

Nginx 与 WordPress 的权限

我正在尝试使用 nginx 在 digitalocean 上设置 wordpress。不过我遇到了权限问题。当我上传文件或尝试安装插件时,我收到“无法在目录中创建”警告。所以我看到了这篇文章Here说我需要给 nginx 访问该文件夹的权限。所以我执行了以下操作:

sudo chown -R www-data:www-data /path/to/folder
sudo chmod -R 755 /path/to/folder
Run Code Online (Sandbox Code Playgroud)

这有效,但现在我无法使用 filezilla 添加和删除文件。显然,因为该文件夹的权限不再属于我,所以他们现在拥有 www-data。

所以我的问题是配置 nginx 与 wordpress 一起使用并仍然允许我使用 ftp 上传和删除文件的正确方法是什么。

wordpress nginx

3
推荐指数
1
解决办法
3825
查看次数

创建一个函数来获取像jquery这样的选择器和纯javascript

我厌倦了在简单的项目中包含jquery,但我已经习惯了它,我正试图打破自由形式对它的依赖.我正在尝试创建一个函数,它将获得类似于类和标记的选择器的相同感觉.示例:$('selector').innerHTML = ".something";.我一个接一个地循环遍历它们:

var classElements = document.querySelectorAll('.something');
for (var i = classElements.length - 1; i >= 0; i--) {
   classElements[i].innerHTML = "This Is A Div";
} 
Run Code Online (Sandbox Code Playgroud)

但我想创建一个函数,我可以循环选择器而不必为我想要找到的所有内容写出for循环.所以我可以像上面那样写它$('.something').innerHTML = "something";

到目前为止,这是我所拥有的,但它只会获得每个选择器的第一个,并且不会获得所有选择器.毋庸置疑,我非常困难,而且我对这个主题的阅读越多,我就越困惑.我想知道是否有人可以指出我正确的方向,我的想法有缺陷或解释jquery如何做到这一点.这是我的代码:

window.getElements = function(selector) {
    var selectors = document.querySelectorAll(selector);
    for (var i = selectors.length - 1; i >= 0; i--) {
        var elements = selectors[i];
    }
    return elements;
};

getElements(".something").innerHTML = "something";
Run Code Online (Sandbox Code Playgroud)

这是一个小提琴小提琴

javascript loops nodelist

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

React 全局状态没有上下文或 redux?

我最近阅读了以下文章State Management with React Hooks \xe2\x80\x94 No Redux or Context API。自 Reacts 诞生以来,最受关注的问题始终是状态管理和全局状态。Redux 一直是流行的选择,最近又成为上下文 API。但这种方法似乎更简单,代码更少并且更具可扩展性。

\n

我的问题是,任何人都可以看到使用我可能忽略的这种类型的状态管理方法的缺点。我对代码进行了一些调整以支持 SSR,它可以在 Nextjs 中运行,并且还使其使用操作和状态变量的设置更加友好。

\n

useGlobalState.js

\n
import React, { useState, useEffect, useLayoutEffect } from \'react\';\n\nconst effect = typeof window === \'undefined\' ? useEffect : useLayoutEffect;\n\nfunction setState(newState) {\n    if (newState === this.state) return;\n    this.state = newState;\n    this.listeners.forEach((listener) => {\n        listener(this.state);\n    });\n}\n\nfunction useCustom() {\n    const newListener = useState()[1];\n    effect(() => {\n        this.listeners.push(newListener);\n        return () => {\n            this.listeners = this.listeners.filter((listener) => listener !== newListener);\n …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux react-state-management

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