由用户(PHP)从多个主题中动态选择主题

Question

我想添加动态主题到我的php网站，这将从用户的数据库中存储，下次当用户使用该网站时，主题应显示已被用户选择并保存到数据库。我到处搜索，但没有得到逻辑和解决方案，因为我是新的php。请帮帮我。

Answer 1

下面的代码段会抛出一个错误，因为代码段的沙箱，但如果复制到你自己的文档中就会正常工作。

不同主题的选择机制可以是超链接、按钮、单选按钮或下拉菜单，如图所示。当然，事件侦听器需要修改以适应所选择的任何机制。

当用户进行选择时，关联的值使用setItem保存到localStorage。加载页面时，检查localStorage，并为样式表分配正确的url。

const _STORE = 'site_SHEET';
const oSelect = document.querySelector('select[name="theme"]');
// function that saves the selected value to localStorage
const eventhandler = function(e) {
localStorage.setItem( _STORE, this.value );
setsheet( this.value );
};
// function to return the full path to the actual stylesheet. Change path to suit...
const setpath=( theme )=>`css/${theme}.css`;
// method to assign the new style
const setsheet=( theme )=>document.getElementById('theme').setAttribute('href', setpath( theme ) );
// Set the dropdown to the stored theme when the page loads...
const setoption=(theme)=>oSelect.value=theme;
// assign the event listener to whatever selection mechanism you use to select themes
oSelect.addEventListener('change', eventhandler );
// if the localStorage contains a selected theme, load it...
if( localStorage.getItem( _STORE )!=null ){
setsheet( localStorage.getItem( _STORE ) );
setoption( localStorage.getItem( _STORE ) )
}

<link rel='stylesheet' type='text/css' id='theme' />
<select name='theme'>
<option disabled hidden selected>Select Theme
<option value='modern'>Modern
<option value='standard'>Standard
<option value='dark'>Dark
<option value='visually-impaired'>Visually-Impaired
</select>

我忘了说明上面的代码使用了四个样式表，它们按照select菜单中的选项命名——例如:modern.css&dark.css等等。样式表目录的路径是用简单的setpath函数设置的，该函数将路径硬编码到返回字符串中(更改以适应自己的环境)