新主题的琐事链

564字 62阅

现在自由时间少,写主题都断断续续的,更别提写完主题之后各种琐碎的相关事宜,每次重启都要花费大量时间思考上一步做到了哪里、下一步又要做什么。因此我决定做个笔记,供今后参照使用。

截图、找mockup、做效果图

  1. 截图

    用Chrome内嵌的自适应截图功能和FireShot应用把不同宽度的设备——一般就是电脑、iPad、iPhone——截图保存下来。每个页面都来一份。

  2. 找mockup

    Lstore Graphics上看看有没有新的free mockups,没有合适的就谷歌关键词。

  3. 做效果图

    最长边3000px,加主题名字和个人logo。

上传至GitHub

  1. 新建文件夹,命名为序号 主题名
  2. 放入整个template文件夹、上一个主题复制过来的README.md、截图screenshot.jpg;
  3. 更新bitcron-themes中的README.md,加入新主题信息;
  4. 使用桌面客户端同步至GitHub。

更新demo站

  1. 复制template文件夹demo,改名为序号 主题名
  2. 所有主题文件里的a链接改为a.prefix
  3. index.jade最下方添加js:

    // for demo
    // 链接加参数
    var prefix = window.location.href.replace(/^.*prefix=(.*)$/,'$1')
    $(document).ready (function() {
        $("body").on("click", '.site_nav a,a.prefix', function(){
            var this_href = $(this).attr('href').replace(/^(.*)\?template_prefix.*$/,'$1')
            var prefix_href = this_href +'?template_prefix='+prefix;
            $(this).attr('href',prefix_href);
        });
    
        // 搜索部分
        var search_posts_dom = $('#search_posts_keywords');
        var search_posts = function(){
            var keywords = search_posts_dom.val();
            var url_to_jump = location.protocol + '//' + location.host + '/search' + '?s=' + keywords + '&template_prefix='+prefix;
            location.href = url_to_jump;
            return false
        };
        search_posts_dom.keyup(function(event) {
            if (event.which === 13) {search_posts()}
            return false;
        });
        $('.search_in_html_button').click(search_posts);
    });
    
  4. 更新demo/template中的index.jade,加入新主题信息;

  5. 测试。

备份

  1. 「设计」 > 新建文件夹,放入主题效果图原图
  2. 「设计」 > 「Personal Branding」 > 「Website」 > 新建文件夹,放入个人网站截图
  3. 将个人网站截图上传至谷歌相册

更新博文

  1. 新主题博文
  2. 更新 「Bitcron」
  3. 更新 「Bitcron主题」
  4. 更新 「设计」
  5. 更新 「博客主题历史」
  6. 更新「关于」
点击加载Disqus