构建一个简约博皮的过程 (2)

header/index.js

import './index.scss' import { pageName, userAgent } from '@tools' // header右侧按钮容器 const buildHeader = () => { const gitee = window.opts.gitee $('#navList').after(`<div></div>`) $('#blog_nav_newpost').appendTo('.navbar-end') $( `<a href="http://guangzan.gitee.io/awescnb-docs/">构建新皮肤</a>`, ).appendTo('.navbar-end') $(`<a href="http://www.likecs.com/${gitee.url}">开源主页</a>`).appendTo( '.navbar-end', ) } // 构建header昵称 const headerNickname = () => { $('#Header1_HeaderTitle').text($('#profile_block a:first').text()) } // header头像 const buildAva = () => { const { avatar } = window.opts.theme $('#blogLogo').attr('src', `${avatar}`) } // 随笔页构建文章题目 const headerInnerPostTitle = () => { if (pageName() !== 'post') return if (userAgent() !== 'pc') return let title = $('.post .postTitle') .text() .replace(/\s*/g, '') const titleLength = title.length let offset = '' if (0 <= titleLength && titleLength < 10) offset = '-180%' if (10 <= titleLength && titleLength < 15) offset = '-140%' if (15 <= titleLength && titleLength < 20) offset = '-100%' if (20 <= titleLength && titleLength < 25) offset = '-65%' if (25 <= titleLength && titleLength < 28) offset = '-60%' if (titleLength >= 28) { title = title.substring(0, 28) + '...' offset = '-60%' } $('#navList').append(`<span>${title}</span>`) $('head').append( `<style> .header-posttitle {transform: translate3d(${offset}, 300%, 0);} #header.is-active .header-posttitle {transform: translate3d(${offset}, 0, 0);} </style>`, ) } // header移动端菜单 const headerBtn = () => { const ele = `<div data-target="navMenuMore"> <span></span> <span></span> <span></span> </div>` $('#blogTitle').append(ele) $('#navbarBurger').click(function() { $(this).toggleClass('is-active') $('#navigator').toggleClass('is-active') }) } // 创建自定义图标容器及其图标 const customLinks = () => { const github = window.opts.github // wrap $('.navbar-end').prepend(`<div></div>`) $('#blogTitle h2').after(`<div></div>`) // github icon if (github.enable) { $('.custom-links').append(`<a href="http://www.likecs.com/${github.url}"></a>`) } // qq // $('.custom-links').append(`<a></a>`) // 知乎 $('.custom-links').append(`<a></a>`) } // 首页 header 不要上下翻滚 const preventHeaderChange = () => { if (pageName() !== 'index') return $('#header').addClass('navlist-fix') } const header = () => { headerNickname() buildHeader() buildAva() headerBtn() customLinks() headerInnerPostTitle() preventHeaderChange() } module.exports = header

scroll/index.js

// import './index.scss' import { userAgent } from '@tools' // 只触发一次向上或向下 // 如果又重新反向滚动则再触发一次 function scrollOnce() { function scrollFunc() { let scrollDirection if (!scrollAction) { scrollAction = window.pageYOffset } let diff = scrollAction - window.pageYOffset if (diff < 0) { scrollDirection = 'down' } else if (diff > 0) { scrollDirection = 'up' } else { // First scroll event } scrollAction = window.pageYOffset return scrollDirection } let scrollAction, originalDir $(window).scroll(function() { if (userAgent() !== 'pc') return let direction = scrollFunc() if (direction && originalDir != direction) { if (direction == 'down') { $('#header').addClass('is-active') $('#catalog').addClass('catalog-scroll-up') $('#catalog').removeClass('catalog-scroll-down') } else { $('#header').removeClass('is-active') $('#catalog').removeClass('catalog-scroll-up') $('#catalog').addClass('catalog-scroll-down') } originalDir = direction } }) } function scroll() { scrollOnce() // ... } module.exports = scroll

side/index.js

import './index.scss' import { poll } from '@tools' import { actions } from '@constants/element' const sideItemToggle = () => { for (const { title, content } of actions) { if (!title.length) continue $(title).click(function() { $(content).toggle('fast', 'linear', function() { $(this).css('display') === 'none' ? $(title).removeClass('is-active') : $(title).addClass('is-active') }) }) } } const addCalendarTitle = () => { $('#blog-calendar').prepend(`<div>博客日历</div>`) } const side = () => { addCalendarTitle() setTimeout(() => { poll($('#blog-sidecolumn').length, sideItemToggle) }, 0) } module.exports = side

simple/index.js