javascript - GHOST 想实现一种前端效果求大拿技术指点。-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - GHOST 想实现一种前端效果求大拿技术指点。

大家讲道理 2017-04-10 14:26:33

[JavaScript讨论组]

733

用了ghost系统有几个月，感觉发文章，markdown用起来很方便，很小清新，blog的初衷就是写文字的地方。

回到正题，这是我的博客，使用的主题是magnum，在上面做了小小的修改，加了社交应用链接的icon，通过less改变了主题颜色，现在是淡雅蓝，现在有一个想法，就是根据用户的访问日期是星期几，就对应于使用一种主题color，一共是7种主题color。现在主题颜色是以变量的形式存在于less文件中，而我用grunt命令很轻易的就可以将他打包链接为css，即可改变所有与之相关的标签的颜色。

个人的想法：
ghost采用.hbs作为其前端markdown，可以用后台变量。我为所有涉及主题颜色的标签增加class为{{color}}的变量，对应css中有7种颜色的.xx_color 通过后台的render来改变，这种方法可行么？还有更好的方法么？判断用户访问日期该如何实现？

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(1)

高洛峰2017-04-10 14:28:33 1楼

你可以把所有想要改变颜色的元素加了一个类叫 color-change,body(最好还是你整个网站的容器)设为 display: none 你周一到周五的颜色保存在名为 sun,mon..etc 的css 类中，执行以下函数，不同的日期加载不同的类，当加载完毕，显示你的整个网站。

function addColor(){
      var d=new Date().getDay();
        switch (d)
          {
          case 0:
            $('.color-change').addClass('sun');

            break;
          case 1:
            $('.color-change').addClass('mon');
            break;
          case 2:
            $('.color-change').addClass('tue');
            break;
          case 3:
            $('.color-change').addClass('wed');
            break;
          case 4:
            $('.color-change').addClass('thu');
            break;
          case 5:
            $('.color-change').addClass('fri');
            break;
          case 6:
            $('.color-change').addClass('sat');
            break;
          }
        addColor.trigger('done');
    }
function showBody(){
        $('body').show();
}
addColor.on('done', showBody); // 当 addColor()操作完毕 完成显示你的网站

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>