Bitcron NexT 主题设置

Bitcron系统推送的NexT主题一些问题

  • 导航栏没法像其它主题那样直接在Navigation Panel那边添加,需手动在template里面进行改动。比如需要添加“关于”导航,则在template/include/header.jade 文件里 .site-nav 部分仿照系统已有的例子添加如下代码:

          li.menu-item.menu-item-about
              a(href='/about', rel='section')
                  i.menu-item-icon.fa.fa-fw.fa-user
                  span 关于
    

    其中“关于”前面的图标 fa-user 可参考 http://fontawesome.io/icons/ 。然后在博客根目录下添加个about.md即可。非常感谢 @角落里 的详细解答。

  • 关于”页面如果用Markdown渲染,则会带上评论系统,甚至有目录,此时可在文件metadata那边声明 comment: no TOC: false。感谢 @Hepo 提供的答案。

  • Clone主题的时候要注意node的统一,在current node和main node 不一致时可能会出现主题并没被应用的问题。

待解决

  • site favicon 没法显示 好吧,在 template/base.jade 头部添加了这么一句 link(rel="shortcut icon", href='/favicon.ico', type="image/x-icon"),注意是/favicon.ico 而不是favicon.ico,然后把favicon.ico放到根目录里,就work了。另推荐比特虫用于制作ico图标 1

  • 添加搜索框

            li.menu-item.menu-item-search           
                section.search
                    +posts.search_in_html(base_url="/search")
    
    • 添加搜索结果页面,参考你好呀 主题里 result.jade 文件
    extends base
    
    block title
        title= request.args.s + " 的搜索结果 - " + site.title
    
    block content
        main
            section.content
                h1= "包含 " + request.args.s + " 关键字的文章"
                .meta= "共搜索到%s篇文章" %(d.get_data(types="post", keywords=request.args.s, return_count=true, with_page=false))
    
                search_posts = posts.search(keywords=request.args.s, limit=30)
                ul: for post in search_posts: li
                    time(datetime= post.date.format("%Y-%m-%d"))= post.date.format("%Y.%m.%d")
                    a(href=post.url)= post.title
                    if post.category
                        span= post.category.title
                    //span= "%s度" %(post.visits or 0)
    
            section.pager
    +h.paginator(style="auto")
    
    • 修改搜索框的背景颜色,参考你好呀 主题里 style.scss 文件
    /* Search bar ----------------------------------*/
    section.search {
        input {
            width: 100%;
            font-size: 1em;
            outline: none;
            display: inline-block;
            border-top: 0;
            border-right: 0;
            border-left: 0;
            border-bottom: 1px solid #eee;
            text-align: center;
            padding: 0.8em 0;
    /*--        background-color: #f5f5f5;--*/
            @include transition(0.5s);
            &:hover, &:focus {
    /*            background-color: inherit; */
                background-color: #f5f5f5;
            }
        }
    }
    
    • 虽然很丑,总算有了个搜索框-_-!2
  • 点击导航栏时,整个页面包括导航栏都重新刷新了。希望实现导航栏其它内容刷新,导航栏不动,参见 伤心凉粉 的效果。 Bitcron/.bitcron.com/configs/site.json 里把 "next_motion":true 改成 "next_motion":false即可3

看来还是很必要了解一下模版的写法。


2017年7月13日补充:想要控制页面是否显示评论数、阅读数、评论系统等,可通过markdown文件的metadata来实现,在代码里获取metadata的方式为post.metadata.xxx,其中xxx 可以是自己定义的任何参数,然后就可以用这个metadata在代码里用if-else 之类的控制内容的呈现了 。


2017年7月28日补充

  • 各种风格修改:鼠标右键 inspect element, 然后再在相应css文件里面改就是
  • 识别外链新窗口打开,参见 识别外链并新窗口打开, 其中click function 部分按如下修改

      $('.post-body a:not(:has(img),:has(.btn),[rel="footnote"],[rev="footnote"]),.author-name a:not([class="reply"]), .footer a').click (function() {
          var click_href = $(this).attr('href').replace(parse_url,'$3');
          if ( location_href != click_href )
              $(this).attr('target','_blank'); 
      }); 
    


  1. updated on 2017.07.06  

  2. updated on 2017.07.13  

  3. updated on 2017.07.05  

Comments
Write a Comment
  • 哈喽,你这个模板也许直接这么写就行了:

    +posts.search_in_html()

    result.jade 和 css 就不用写了~

    • @水八口 多谢,确实可行。有个小问题,这个会自动分页吗?

    • @水八口 inspect了下搜索页面,有pagination,应该会自动分页。现在想要在搜索页面顶部给出一行提示,搜到多少个结果。不知搜索页面的控制文件是哪个?

    • @水八口 已搞定,参考了 Casper 主题 https://github.com/CaiJimmy/Casper-Bitcron/tree/766e98638ab1a4e583f89f5daa1347849f8d330a

  • 小白有一个十分在意的问题……在这个主题下要如何像这样顺利显示出【上/下篇】导航呢……?

    • sci707 reply

      @S君 在template/mixins/post.jade 里面,将 next_one 改成 posts.next_one, pre_one 改成 posts.previous_one 即可。

      • @sci707 非常感谢!o(*////▽////*)q