duoshuo / airpub

a pure front-end blog engine powered by duoshuo API
http://airpub.io
MIT License
361 stars 41 forks source link

唔,依然是关于 airpub-dependencies 这个文件 #21

Open banrikun opened 9 years ago

banrikun commented 9 years ago

真的抱歉最后还是不得不删掉这句,然后自己慢慢复制点补充

昨天发现的几个问题慢慢找到了,第一个是.thumbnail这个样式,很多时候都想要自己定义的,昨天我就是样式名撞车了,导致几个自己没定义到的属性被添加上去,比如缩略图变成了圆角

然后就是box-sizing的问题了,作者直接一句 * {} 导致我还得反过来重置一次(但是后面作者又陆续给input等标签设置了另一种,完了我也得重新设置一次……变相增加了工作量

个人的建议是这个云样式文件还可以考虑进一步精简

首先是css reset,基本上会DIY主题的都会注意到,还是交给主题作者自己来吧 然后样式,基础样式里建议就包含文章正文内部的标签样式定义就好啦,这样最省事了

本身多说就带有大量的样式,加上airpub本身自带的大量样式,在后期开发时非常繁琐 既然是DIY主题,很多地方都会有翻天覆地的变化,所以真的很少能用到原本的样式,直接脱干净了就好!

banrikun commented 9 years ago

建议放在云端的基础样式:

1.右上角和顶部的登陆按钮 2.顶部的loading样式 3.正文内容中的排版样式

个人的感觉是除了这三个,别的基本都是会大改的东西...TUT 目前很多地方还没摸透,可能还有落下的。。

guo-yu commented 9 years ago

这个主要问题是 airpub 默认的 chill 主题是基于 bootstrap 的,但是我们比较粗略的打包了整个 bootstrap.min.css 所以看起来有许多没有用到的样式。这也是一个比较粗糙的问题之一,我打算修改一下工作流,只打包你说的几个必要的 less 文件,然后再重新生成 airpub-dependencies.min.css

banrikun commented 9 years ago

感谢回复,另外后台感觉是不需要自己DIY样式的,所以也建议保留一下 我脑补后台DIY基本上只有大框架宽度高度上的改动,别的感觉没了

guo-yu commented 9 years ago

对,因为有后台的样式所有我们才会在 airpub 核心库里添加这个 airpub-dependencies.min.css,按道理所有样式表都应该被拆分到 chill 里才是比较理想的状态 :)

banrikun commented 9 years ago

@turingou 补充遇到的两个很囧的情况,就是关于airpub输出html的问题

1.使用变量输出的html有些自带了不少样式,而且样式名都是比较常用的单词,如article等。在DIY主题的时候很容易撞车,今天遇到好几次,返回去查看莫名蹦出来的样式,然后再改。导致我现在已经不敢用一个单独的常用词作为样式名了……= = 可能熟悉后会好很多,但是对于初次开发以及从其他程序移植主题过来是非常不友好的方式,增加了很多工作量

2.正文的输出格式,我发现airpub.io和guoyu.me的正文段落输出格式不一样,airpub.io和我目前的40行结果一样,p标签外强行被包裹了一圈东西,但是guoyu.me就有非常整齐的p标签输出。个人更倾向于使用后者,感觉代码更具备可读性,也更方便自己对于样式的把握

banrikun commented 9 years ago

因为airpub的变量输出和多说一样,大多采用span xxxxx的方式,所以自己想要自定义变量非常方便,自己在模板中写上class什么的就好,程序输出时自带样式名反而有些不太舒服(尤其是从其它程序移植主题时)

banrikun commented 9 years ago

切换文章页面时,header标签有强制属性(background),建议换为变量。。。为了避免撞车,我已经躲避为id=header了 囧

————————————————

这个发现是我自己的问题 - - 我把chill的less都复制进去了 0v0 ———————————————— 貌似不是我的问题 - - 删掉了less文件夹还是发现被强制加了属性。。。

banrikun commented 9 years ago

关于这个变量:ng-style="{'background-image': 'url(' + article.meta.background + ')'}" 请问是否可以直接精简,把background-image这个属性集成进去。这样如果没有图片,则不会显示出这个style,用户可以再给这个层定义一个默认的背景,没有图片就会读取默认背景,可塑性更大~~

虽然现在可以在外面套个div解决,但是毕竟还是麻烦了点嘛~

guo-yu commented 9 years ago

@banrikun 不好意思,这几天元旦假期回深圳了,不是经常能连接网络。等有时间我统一回复这几个 issue

banrikun commented 9 years ago

@turingou 0v0 我微博上看的到。不急不急,好好玩

guo-yu commented 9 years ago

@banrikun

  1. 命名的问题,这个确实是我没有想到的。当初开发的时候感觉过于理想,觉得主题开发者更愿意 fork Chill 主题出去然后自己从头 build 出新的版本,这样就不会出现部分样式覆盖导致的命名冲突了,我整理一下 Chill 主题的代码命名。尽量加上独特的前缀,这样就不会冲突了。
  2. guoyu.me 这个站点没有定义额外的逻辑,按道理输出的结果应该是一样的。。理论上比较好的方法在另外一个 issue 也有提到,就是真正地在 filters/marked.js 这个文件里解决 p 包裹 img 的输出问题。这应该算是一个 bug。
  3. ng-style="{'background-image': 'url(' + article.meta.background + ')'}" 这种写在模板层的拼合逻辑,确实是我偷懒导致的,这部分的代码会在 v0.4.0 正式版本发布时被当做变量输出到模板层。
guo-yu commented 9 years ago

@banrikun 关于输入的问题,现在 master 分支代码的 filter 已经实现了在模板里传入相应的 DOM结构来渲染正文中的内容,举个例子,现在已经可以在 chill 主题的主干代码中的 single.html 中看到这样的 html:

<section class="content" 
   ng-bind-html="article.content | marked: 'code:.code-section>.container>.row>.col-lg-8 .col-lg-offset-2' : 'all:.container>.row>.col-lg-8 .col-lg-offset-2'">
</section>

在这段代码中,airpub 的 filter 会根据相应的类型(如果没有找到这种类型,就会根据 all 关键词的规则来渲染)进行内容的渲染,如果你对自己的内容有自定义的要求,可以使用这种方式修改 内容渲染出的 dom 结构。

这样设计的原因是我希望能有更灵活的主题,而不是把所有文章的内容都框在一个层里,这样没法发挥出 CSS 的灵活性以设计更另类的主题。

这样修改过后有一个好处,就是这里不会再有硬编码的问题,如果你想按照传统博客的布局一样把所有内容都框在一个 div 里,不需要给 marked filter 传入任何参数,只需要规范好自己外层的 dom 结构即可。

banrikun commented 9 years ago

@turingou 感谢更新!好棒!这样传递参数确实灵活多了