前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hexo博客 | 如何让Butterfly主题导航栏居中

Hexo博客 | 如何让Butterfly主题导航栏居中

作者头像
Justlovesmile
发布2022-03-22 11:52:24
1.7K0
发布2022-03-22 11:52:24
举报
文章被收录于专栏:云+分享

最近有很多小伙伴留言问我ButterFly主题的导航栏是怎么居中的,说实话我的博客样式其实都是一点一点从其他博主的博客那模仿来的(如果我没记错的话,导航栏应该是看的Heo大佬的),所以样式修改的时间跨度有点长,我自己也不太清楚具体改了哪些地方,但是鉴于问的小伙伴太多,我决定把导航栏文件全部展示出来,至于CSS可以参考我的css文件第168到434行(当前时间2022/3/15,不排除之后我又改了)……

主题模板文件

index.pug

themes\butterfly\layout\includes\header\index.pug

代码语言:javascript
复制
if !theme.disable_top_img && page.top_img !== false
  if is_post()
    - var top_img = page.top_img || page.cover || page.randomcover
  else if is_page()
    - var top_img = page.top_img || theme.default_top_img
  else if is_tag()
    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag] 
    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
  else if is_category()
    - var top_img = theme.category_per_img && theme.category_per_img[page.category]
    - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
  else if is_home()
    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
  else if is_archive()
    - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
  else
    - var top_img = page.top_img || theme.default_top_img

  if top_img !== false
    - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
    - var bg_img = top_img ? imgSource : ''
    - var site_title = is_archive() ? fragment_cache('findArchivesTitle', function(){return findArchivesTitle(theme.menu);}) : page.title || page.tag || page.category || config.title
    - var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
    - is_post() ? isHomeClass = 'post-bg' : isHomeClass
  else
    - var isHomeClass = 'not-top-img'
else
  - var top_img = false
  - var isHomeClass = 'not-top-img'

header#page-header(class=isHomeClass style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      #coverdiv.coverdiv
        img#post-cover.cover.entered.loading(alt='cover' src=`${top_img}`)
      include ./post-info.pug
    else if is_home() 
      #site-info
        h1#site-title=site_title
        if theme.subtitle.enable
          - var loadSubJs = true
          #site-subtitle
            span#subtitle
        if(theme.social)
          #site_social_icons
            !=fragment_cache('social', function(){return partial('includes/header/social')})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
    else
      #coverdiv.coverdiv
        img#post-cover.cover.entered.loading(alt='cover' src=`${top_img}`)
      #page-site-info
        h1#site-title=site_title

nav.pug

themes\butterfly\layout\includes\header\nav.pug

代码语言:javascript
复制
nav#nav
  #nav-group
    #blog_name
      a#site-name(href=url_for('/')) #[=config.author]

    #menus
      !=partial('includes/header/menu_item', {}, {cache: true})

    #nav-right
      if (theme.algolia_search.enable || theme.local_search.enable)
        #search-button
          a.nav-rightbutton.site-page.social-icon.search
            i.fas.fa-search.fa-fw
      #darkmode_navswitch
        a.nav-rightbutton.site-page.darkmode_switchbutton(onclick="switchDarkMode()")
          i.fas.fa-adjust
      #toggle-menu
        a.nav-rightbutton.site-page
          i.fas.fa-bars.fa-fw

上面提到的switchDarkMode()

代码语言:javascript
复制
function switchDarkMode() { // Switch Between Light And Dark Mode
      const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
      if (nowMode === 'light') {
        activateDarkMode()
        saveToLocal.set('theme', 'dark', 2)
        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
      } else {
        activateLightMode()
        saveToLocal.set('theme', 'light', 2)
        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
      }
      // handle some cases
      typeof utterancesTheme === 'function' && utterancesTheme()
      typeof FB === 'object' && window.loadFBComment()
      window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
    }

CSS

请自行F12查看,截至目前(2022/3/15)导航栏相关css样式是在/css/justlovesmile.css第168到434行….

其他的之后再补充,有问题的欢迎留言提问

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 主题模板文件
    • index.pug
      • nav.pug
      • CSS
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档