Public 更改值的用户函数

Question

我想添加一个按钮以允许 public 用户在他们的会话中保存简单的 true/false 布尔值并根据这些决定更改模板中的内容。我认为有很多这样的场景适用，比如 light/dark 主题选择，“你是否超过 18 岁”年龄查询或 GDPR/Privacy 东西，其中 google 分析脚本需要仅在用户决定后加载。

例如，当我想为 public 用户添加主题选择时。

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

// 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 %}

但我直到现在才能够添加一个每个人（匿名、用户、管理员）都可以访问的按钮，在这种情况下会更改 data.user.lightTheme 的值，该值只是一个示例因为我不知道如何在 public 会话中存储值，所以它不会那么容易，因为我必须通过 cookie 或 window.localStorage.

存储值

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

Answer 1

Apostrophe 没有偏好 reading/writing 浏览器存储端点，您必须使用 read/write 并维护您的状态的自定义前端脚本来滚动自己的端点。

下面是一些基于您的代码示例的更详细的注释，如果您非常了解当您的原始问题的答案为“否”时该怎么做，您可能不需要这些:)

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

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

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

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

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

Public 更改值的用户函数

Public User Function to change Values

apostrophe-cms