根据用户点击将样式表添加到所有页面

时间:2019-03-03 00:07:34

标签: javascript jquery html css

这个想法是网站上有一个设置页面,可以普遍更改主题。因此设置页面将包含此链接;

<a href="">Click here to enable dark mode</a>

单击此按钮,然后会向每个页面添加另一个样式表。

<?php echo "<link rel='stylesheet' type='text/css' href='darkmode.css'>"; >

无论如何,这是一个主意,网站已经建立,然后将darkmode.css<link rel="stylesheet" href="https://example.com/darkmode.css">添加在一起,然后会在页面上显示暗模式。

我愿意接受其他想法,例如设置简单的cookie以及仅在true时才激活样式表。我不想在每个页面上都进行切换,因为这意味着手动编辑所有页面,并且只对某些用户可用。

我认为必须在设置页面上将变量设置为true,但它需要在整个网站上使用,所以

<?php
if ($darkmode = $true)
  echo "<link rel="stylesheet" href="https://example.com/darkmode.css">";
?>

我假设需要将类似的内容添加到每个页面,然后在样式正确的情况下仅回显样式?

我们将不胜感激,在此先感谢您。

UPDATE 1

此代码均无效,但仅作为示例。管理员会选择一个复选框,如果勾选了该复选框,则页面将以“是/否”读取文件,然后将链接回显到其他样式表。

<form action="preference.php" method="post">
 <input type="checkbox" id="preference" name="preference">
 </form>

<?php
$preference = $_POST["preference"];
$file = fopen("./preference.html","w");
fwrite($file, $preference);
fclose($file);
?>

<?php
echo readfile("http://example.com/admin/preference.html"); ?>

Update 2 Flow

这就是应该发生的情况。 1用户打开了暗模式。 2已存储暗模式。 3如果暗模式为true,则每个页面都会检查样式表,然后使用PHP echo。

Update 3

<form action="preference.php" method="post">
 <input type="checkbox" id="preference" name="preference">
 <input type="submit" id="update" name="update" placeholder="Update Preference">
 </form>
 
 

<?php
if (isset($_COOKIE['darkmode'])) {
   if ($_COOKIE['darkmode'] == "true") {
    echo '<link rel="stylesheet" href="https://example.com/admin/darkmode.css">';
   }
   else {
   echo '<!--Not Enabled-->';
   }
   }
?>

我为表单添加了代码,该代码将更新首选项和要添加到每个页面的echo函数。我只需要能够将其保存到Cookie中即可。

Update 4

设置页面:

<form action="preference.php" method="post">
 <input type="checkbox" id="preference" name="preference">
 <input type="submit" id="update" name="update" placeholder="Update Preference">
 </form>

Preference.php:

<?php
if (isset($_POST['preference']) {
  // If a checkbox is checked in the form, set a cookie
  setcookie('isDarkMode', '1');
} else {
  // Otherwise -- delete cookie
  setcookie('isDarkMode', '', time() - 3600);
}
?>

添加到每个页面:

<? if (isset($_COOKIE['isDarkMode']) && $_COOKIE['isDarkMode']) { ?>
<link rel='stylesheet' type='text/css' href='https://example.com/stylesheet.css'>
<link rel='stylesheet' type='text/css' href='https://example.com/darkmode.css'>
  <? } else { ?>
<link rel='stylesheet' type='text/css' href='https://example.com/stylesheet.css'>
  <? } ?>

提交表单时,首选项页面显示500错误。知道为什么会这样吗?

1 个答案:

答案 0 :(得分:2)

preference.php中:

<?
if (isset($_POST['preference'])) {
  // If a checkbox is checked in the form, set a cookie
  setcookie('isDarkMode', '1');
} else {
  // Otherwise -- delete cookie
  setcookie('isDarkMode', '', time() - 3600);
}

在每个页面的头文件中:

<html>
<head>
  ...
  <? if (isset($_COOKIE['isDarkMode']) && $_COOKIE['isDarkMode']) { ?>
    <link rel='stylesheet' type='text/css' href='darkmode.css'>
  <? } else { ?>
    <link rel='stylesheet' type='text/css' href='normal.css'>
  <? } ?>
  ...
</head>