更改值的公共用户函数

问题描述

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

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

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

// 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',selector: [
        '.sections-content.dark'
      ],}
  ]
};

创建模板非常简单...

// 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 的值，其中该值只是一个示例，因为我不知道如何在公共会话中存储值，shure 不会那么容易，因为我必须通过 cookie 或 window.localStorage 存储值。

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

解决方法

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

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

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

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

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

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

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