小编bju*_*own的帖子

NextJS 针对 SSG/SSR 和 Google Analytics/cookie 的建议

我有一个 NextJS 站点,它是在构建时静态生成的(SSG)。

接下来我需要实现两件事

  1. 谷歌分析
  2. 符合 GDPR 的选择加入 Cookie 选项

第一个很容易做到,但是我正在努力使其符合 GDPR。问题是当我的网站是静态生成时,我无法访问服务器端的 cookie。这意味着,在不知道用户是否同意服务器上的 cookie 的情况下,我无法与页面的其余部分一起提供(或不提供)分析脚本。

可能的解决方案:

  1. 在客户端处理所有事情 - 请求同意,然后动态地将 GA 标签添加到<head>. 然而我担心这会对分析产生负面影响,或者完全破坏它。有人知道吗?

  2. 将我的网站更改为服务器端呈现 (SSR)。如果可能的话我很想避免这种情况。我对 SSG 网站的运行速度感到非常满意。它本质上只是一个基本的博客,因此为了分析而必须进行转换将是一种耻辱。

  3. 还有其他想法吗?...

如果有人有这方面的经验,无论他们使用 Next 还是 Nuxt 等,您的意见将不胜感激!

提前致谢

google-analytics static-site reactjs server-side-rendering next.js

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

Javascript - 从动态创建的数组中删除特定元素

我有一个页面,用户可以在其中创建标签(很像 stackoverflow 中的此处),然后将其发送(POST)到后端以存储在数据库中。用户可以创建标签,也可以在最终点击“提交”之前删除它们。

在 DOM 中,标签是与“x”按钮一起生成的。“x”按钮从 DOM 中删除元素,但从数组中删除时会出现麻烦。我能找到的最接近的解决方案是这个问题,但是我无法让它对我很有用。

这是代码笔

这是 javascript (我正在使用 JQuery)

window.tag_array = [];

$( "#addtag" ).click(function() {

var tag = $("#input-tag").val();

//if tag is empty
if(!$('#input-tag').val()) {

    alert("can't be empty");

    } else {
        //put tag.val into an array         
        tag_array.push(tag);

        //add to DOM
        $( "#tagsbox" )
        .append( "<div class='displaytag'><i>"+tag+"</i><input type='hidden' class='tag' value="+tag+"><button onClick='return false;' class='removetag'>x</button></div>" );

        //reset value in text area to null
        $("#input-tag").val("");

        //remove tag onclick
        $('.removetag').click(function() {
            $(this).parent().remove(); //remove tag from DOM

            //splice from …
Run Code Online (Sandbox Code Playgroud)

javascript arrays jquery dynamic splice

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

PHP/Laravel/eloquent - 将动态数量的行插入数据库

我正在使用Laravel框架,使用eloquent与我的数据库进行交互.

我有一个表格,我发布到我的控制器.此表单包含由用户添加的"标记".用户可以根据需要添加任意数量的标签.

我想POST标签,然后在我的控制器中,将每个标签插入一个新的表行,如下所示:

        $tag = new Tag;
        $tag->user_id   = Input::get('user_id');
        $tag->tag_name = Input::get('tag_name');
        $tag->save();
Run Code Online (Sandbox Code Playgroud)

我该怎么处理?起初我想把每个标签放到一个数组中,POST数组,然后在控制器中我循环遍历每个元素,将它们插入数据库.

看到这里的代码,这实际上是一个先前的堆栈溢出问题

但经过一番搜索,我得出的结论是你不能发布一个数组.

所以另一种方法是将每个数组值作为隐藏表单类型POST.问题在于如何告诉我的控制器要插入多少个标签(以及它们的行).

我希望这很清楚,在此先感谢.


编辑:仍有一些麻烦

编辑2:更改了代码以在javascript中包含'i'变量以及POST时使用的新数组.

这是用户生成的输入标签的样子

$("#tagsbox")
        .append("<div class='displaytag'><i>"+tag+"</i><input type='hidden' name='tags["+i+"]["+user_id+"]' value="+user_id+"><input type='hidden' name='tags["+i+"]["+tag+"]'value="+tag+">")
Run Code Online (Sandbox Code Playgroud)

这是提交后POST数据的样子

Array
(
[user_id] => 12
[lat] => 50.80589
[lng] => -0.02784
[spot_name] => test spot
[tags] => Array
    (
        [1] => Array
            (
                [12] => 12
                [tag1] => tag1
            )

        [2] => Array
            (
                [12] => 12
                [tag2] => tag2
            )

        [3] => Array
            (
                [12] => 12
                [tag3] …
Run Code Online (Sandbox Code Playgroud)

php insert dynamic laravel eloquent

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

React - 输入复选框 onchange 不会第一次触发

复选框输入的行为不是很可靠。

我正在根据商店的状态设置复选框的状态。这很好用。然而,有时选中该复选框不会触发onchange. 第二次选中该框将会触发,但是 UI 将显示错误的状态,因为第一次失败。

我正在使用 NextJS。这通常发生在第一次加载页面或硬刷新时。

import { useDispatch, useSelector } from 'react-redux';
import _cloneDeep from 'lodash/cloneDeep';

export default function Privacy() {
    const consentObj = useSelector((state) => state.cookieOptions);
    const dispatch = useDispatch();

    const analyticsConsent = useSelector(
        (state) => state.cookieOptions.analytics
    );

    function toggleConsentAnalytics() {
        // this function will not fire on first input onchange
        const newSettings = _cloneDeep(consentObj);
        newSettings.analytics = !consentObj.analytics;

        dispatch({ type: 'SET_COOKIE_OPTIONS', payload: newSettings });
    }

    return (
        <div>
            <div className={css.settingContainer}>
                <strong>Analytics cookie</strong>
                <label>
                    <div className={css.switchWrap}> …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs next.js

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