更改值的公共用户功能

Question

我想添加一个按钮，允许公共用户在他们的会话中保存简单的真/假布尔值，并根据这些决定更改模板中的内容。我认为有很多这样的场景适用，比如浅色/深色主题选择，“你是否超过 18 岁”年龄查询或 GDPR/隐私的东西，只有在用户决定之后才需要加载谷歌分析脚本。

例如我想为公共用户添加主题选择时。

这是我在撇号调色板全局中的字段：

// lib/modules/apostrophe-palette-global
module.exports = {
  paletteFields: [

    {
      name: 'backgroundColorLight',
      label: 'Light Background',
      type: 'color',
      selector: [
        '.sections-content.light'
      ],
      property: 'background-color',
    },
    {
      name: 'backgroundColorDark',
      label: 'Dark Background',
      type: 'color',
      selector: [
        '.sections-content.dark'
      ],
      property: 'background-color',
    }
  ]
};

创建模板非常简单...

// lib/modules/apostrophe-pages/views/pages/home.html

{% extends "layout.html" %}

{% block main %}
  
  <div class="sections-content
// Define data scene only for user?
    {% if data.user.lightTheme %} 
      dark
    {% else %}
      light
    {% endif %}
  ">
    {{ apos.area(data.page, 'sectionArea', {
      limit: 1,
      widgets: {
        'sections': {
          pageShadow: data.page.shadow,
          addLabel: 'Add Sections',
          editLabel: 'Change Sections',
          controls: {
            movable: false,
            removable: true,
            position: 'top-left'
          }
        }
      }
    }) }}
  </div>

{% endblock %}

但是直到现在我才能添加一个所有人都可以访问的按钮（anon、user、admin），在这种情况下会更改 data.user.lightTheme 的值，其中这个值只是一个示例，因为我没有不知道如何在公共会话中存储值，shure 不会那么容易，因为我必须通过 cookie 或 window.localStorage 存储值。

但是有没有一种撇号的方式来做到这一点，如果是的话，你有一些例子吗？那真的很有帮助...

Answer 1

撇号没有读取/写入浏览器存储端点的偏好，您必须使用自定义前端脚本来读取/写入和维护您的状态。

以下是基于您的代码示例的一些更详细的注释，如果您对原始问题的答案为“否”时该怎么做有很好的掌握，则可能不需要它：)

1. 您通过调色板处理主题样式的方式看起来不错，尽管我会更改您的选择器以遵循 DOM 中更高的内容，例如

paletteFields: [
  {
    name: 'backgroundColorLight',
    label: 'Light Background',
    type: 'color',
    selector: [
      '.light .sections-content'
    ],
    property: 'background-color',
  }
]

这样你只需要将你的主题类附加到一些上层包装器上，可能是body

1. 如果您依赖用户的localStorage，服务器不会知道它，因此它不会成为传递给您的 nunjucks 模板的任何内容的一部分。您需要从普通的前端脚本处理此问题。如果您还没有推送自定义脚本quick how-to is here。推送自定义脚本后，您将希望从您选择的存储（cookie、localStorage、sessionStorage）中读取和写入。基本流程可能类似于：

• 读取存储并查找用户的主题偏好。如果未找到任何内容，请设置或假定为默认值。
• 从您的脚本中，将主题设置为 DOM 中某个高级包装器上的一个类，您的所有可样式化组件都将从该类继承。
• 如果最初没有找到偏好，则向用户提供一些自定义 UI，让他们做出选择。 （这部分可以无限具体）
• 将用户的选择写回存储器以供下一个页面加载。