Question

我有一个显示博客文章列表的网页。我需要一种方法，使该页面具有不同的主题（html结构和样式），用户可以使用设置页面进行设置。选择主题后，整个页面结构以及样式都会更改为当前主题。我想使用Nodejs或Php来实现。

Answer 1

如果我要尝试完成此任务，请使用PHP：

将其主题首选项存储在数据库中，并指出在注销并重新登录后所做的更改将可用。
每当他们再次登录时，请在您编写的任何登录/验证功能中将首选项设置为会话变量。
创建一个php函数，以检查其主题首选项并回显相应的CSS链接。
将您刚刚创建的函数放在其主题应适用的每个.php文件的开头（如果使用MVC，则为模板）。

只是一个简短的例子：

数据库至少应具备的条件

mysql> select * from _users;
+----+-------+-------+--------+
| id | _user | _pass | _theme |
+----+-------+-------+--------+
|  1 |  john | ***** | dkblue |
|  2 |  jane | ***** | redgld |
|  3 |  bill | ***** | blkwht |
+----+-------+-------+--------+

主题首选项作为会话变量

  function authenticate($username, $password) {
    # authenticate
      //
      // code to authenticate...
    # retrieve user's theme (can also be a separate function)
      $stmt = $sql->prepare("SELECT _theme FROM _users WHERE _user = '$username'");
      $stmt->execute();
      $results = $stmt->fetch(PDO::FETCH_ASSOC);
    # establish session variables
      $_SESSION['theme'] = $results['_theme'];
      //
      // other session variable code...
  }

用于检查主题的功能

  function checkTheme($theme) {
    # remember to place function between <head> tags
    switch ($theme) {
      case 'dkblue':
        $stylesheet = '/inc/css/darkblue.css';
        break;
      case 'redgld':
        $stylesheet = '/inc/css/red-gold.css';
        break;
      case 'blkwht':
        $stylesheet = '/inc/css/black-white.css';
        break;
      default:
        # will default to this theme if no preference has been chosen
        $stylesheet = '/inc/css/default.css';
        break;
    }
    echo '<link rel="stylesheet" href="' . $stylesheet . '">';
  }

blog.php

<?=session_start();?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Blog</title>

    <?=checkTheme($_SESSION['theme']);?>
  </head>

如何为HTML页面实现主题/模板加载

1 个答案: