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

发布于 2022-08-28 22:48:16 字数 476 浏览 19 评论 0

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

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一口甜 2022-09-04 22:48:16

通过 Grunt 的确可以向 Less/Sass 之类的 pre-processor 传递变量，但问题是你的要求是每天都变，难道你每天 build 一遍？

这倒不是不行，你可以在服务器上跑一个定时任务，比如用 Cron Job，每隔 24 小时执行 Grunt 传递一个新值去 build，但是这个时间是以你本地时区为准的，而访客可能来自世界各地，时差的问题解决不了依然不够完美。

一个可行的办法是通过客户端获取 Local Date，然后根据星期几来输出一个 class，这个 class 要作用在全局的层次，比如 <body> 甚至 <html> 上。在此基础上你要改写一下样式的结构，把所有和颜色有关的定义放在之前那个全局 class 之下（把它当成一个命名空间）。

所以说，你需要定义至少 7 个用做命名空间的 class，每一个下面对应一整套颜色，当这个 class 变化的时候，所有的颜色就自然跟着变了。听起来似乎比较复杂，实际上用 Less 的话，写一个循环就可以了。

没有用过 Ghost，以上只是一点个人想法，仅供参考。通过 Grunt 向 Less 传递变量的插件见此：https://www.npmjs.org/package/assemble-less-variables。

回复收藏 0

四叶草在未来唯美盛开 2022-09-04 22:48:16

你可以把所有想要改变颜色的元素加了一个类叫 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

~没有更多了~