开发者社区> 问答> 正文

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

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

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

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

展开
收起
a123456678 2016-03-25 16:03:40 2333 0
1 条回答
写回答
取消 提交回答
  • 通过 Grunt 的确可以向 Less/Sass 之类的 pre-processor 传递变量,但问题是你的要求是每天都变,难道你每天 build 一遍?

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

    一个可行的办法是通过客户端获取 Local Date,然后根据星期几来输出一个 class,这个 class 要作用在全局的层次,比如

    甚至 上。在此基础上你要改写一下样式的结构,把所有和颜色有关的定义放在之前那个全局 class 之下(把它当成一个命名空间)。

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

    2019-07-17 19:14:35
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
阿里文娱大前端技术实践 立即下载
前端代码是怎样智能生成的 立即下载