某储备粮的“学习笔记” - bootstrap 2012-03-17T23:00:44+08:00 Typecho http://blog.gregwym.info/feed/atom/tag/bootstrap/ <![CDATA[Trapecho - 基于Bootstrap的Typecho主题]]> http://blog.gregwym.info/Trapecho-boostrap-based-typecho-theme.html 2012-03-17T23:00:44+08:00 2012-03-17T23:00:44+08:00 咳嗽di小鱼 http://blog.gregwym.info 之前的浮云主题也用了快一年了, 有些腻味.
主题本身也有很多问题, 比如代码质量不是很好, 主题的CSS对博客文章的Typography没有很规范的支持, 浮云比较吃CPU...

一直想换主题却没有找到好的. 最近对Bootstrap很是痴迷, 又有了点空闲, 就顺手仿着Bootstrap官网风格做了一个Typecho的主题.
自己觉得效果还不错, po出来给喜欢的朋友.

设计风格

  • 黑白灰
  • 简洁明了

特色功能

  • 自动吸附顶端的导航栏
  • 在各种设备上自适应显示 (如: iPhone/iPad)
  • 侧栏的新浪微博展示插件
  • 集成Google Code Prettify

应用的技术

  • Bootstrap + jQuery
  • HTML5 + CSS3
  • Responsive CSS

下载

下载我放在doLast.com上了, 点Download即可

http://dolast.com/pages/trapecho
https://github.com/gregwym/Trapecho/zipball/master


功能详解

新浪微博

  • /admin/options-theme.php主题设置页中填入新浪微博的UID, 侧栏中就会显示新浪微博的插件.
  • 在设置中删除UID号码并保存, 即可关闭插件

根据分辨率自适应布局

  • 如果您在看我的博客, 现在把浏览器缩小就能看出效果.
  • 在iPhone/iPad等移动设备上也能有很好的博客阅读体验
  • 支持iOS的阅读器模式

侧栏可选项

  • 显示最新文章
  • 显示相关文章
  • 显示最近回复
  • 显示标签
  • 显示分类
  • 显示归档
  • 显示友情链接(需要友情链接插件)
  • 显示其它杂项

Google Code Prettify

  • 为了统一主题风格, 也特别定义了代码的高亮方式, 如果有朋友不喜欢, 从footer.php最后删除和pre有关的几行JavaScript即可.
  • 使用很简单, 展示大段的代码, 使用<pre>将代码括住, 就会自动高亮, 语言类型自动识别.



    <pre>
        <!--你的代码放在中间-->
    </pre>
    
  • 比如,



    int main(){
        cout << "Welcome to Trapecho" << endl;
        return 0;
    }
    
  • 更多使用方法请参考, google-code-prettify README

]]>