Repository: Bulandent/hexo-theme-bubuzou Branch: master Commit: d4a0674098ac Files: 41 Total size: 79.1 KB Directory structure: gitextract_zv3jf3rg/ ├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── _config.yml ├── doc/ │ └── doc-zh.md ├── gulpfile.js ├── languages/ │ ├── en.yml │ └── zh-cn.yml ├── layout/ │ ├── about.jade │ ├── archive.jade │ ├── categories.jade │ ├── index.jade │ ├── mixins/ │ │ ├── paginator.jade │ │ └── post.jade │ ├── partial/ │ │ ├── comment.jade │ │ ├── copyright.jade │ │ ├── head.jade │ │ ├── layout.jade │ │ ├── nav.jade │ │ ├── scripts.jade │ │ └── timer.jade │ ├── post.jade │ └── widget/ │ ├── catalog.jade │ ├── category.jade │ ├── recent.jade │ └── tagcloud.jade ├── package.json └── source/ ├── css/ │ └── bubuzou.css ├── scripts/ │ ├── articleCatalog.js │ └── main.js └── scss/ ├── _partial/ │ ├── archive-post-list.scss │ ├── base.scss │ ├── copyright.scss │ ├── footer.scss │ ├── header.scss │ ├── home-post-list.scss │ ├── mq.scss │ ├── normalize.scss │ └── post.scss └── bubuzou.scss ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitattributes ================================================ # Auto detect text files and perform LF normalization * text=auto # Custom for Visual Studio *.cs diff=csharp # Standard to msysgit *.doc diff=astextplain *.DOC diff=astextplain *.docx diff=astextplain *.DOCX diff=astextplain *.dot diff=astextplain *.DOT diff=astextplain *.pdf diff=astextplain *.PDF diff=astextplain *.rtf diff=astextplain *.RTF diff=astextplain ================================================ FILE: .gitignore ================================================ # Windows image file caches Thumbs.db ehthumbs.db # Folder config file Desktop.ini # Recycle Bin used on file shares $RECYCLE.BIN/ # Windows Installer files *.cab *.msi *.msm *.msp # Windows shortcuts *.lnk # ========================= # Operating System Files # ========================= # OSX # ========================= .DS_Store .AppleDouble .LSOverride # Thumbnails ._* # Files that might appear in the root of a volume .DocumentRevisions-V100 .fseventsd .Spotlight-V100 .TemporaryItems .Trashes .VolumeIcon.icns # Directories potentially created on remote AFP share .AppleDB .AppleDesktop Network Trash Folder Temporary Items .apdisk ================================================ FILE: LICENSE ================================================ The MIT License (MIT) Copyright (c) 2015 Sean Sun Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ ![hexo-theme-bubuzou](https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202010/theme-bubuzou.png) ## 更新日志 ### 2024-01-23 - 变更站点和文章访问统计脚本为[不蒜子](https://ibruce.info/2015/04/04/busuanzi/) ### 2021-4-4 - 主题更变-暗色系 - 文章页目录支持 3 级 ### 2020-11-06 - 加载优化 - 文章页目录插件重写 ### 2020-08-13 - 文章页目录栏 bug 修复 ### 2019-03-29 - 文章页的右侧去掉“分类归档”、“标签云”和“最新文章”，右侧整块为文章目录 - 文章评论系统和访问统计改成基于 `leancloud` 的 `valine` - 手机端头部菜单精简 - 手机端去掉右侧导航栏 ### 2017-07-21 - bubuzou.css 规范化了`css`文件 ### 2017-07-12 - 评论系统由网易云跟帖改成了畅言 ### 2017-06-25 - 增加了文章访问次数的统计功能 ### 2017-06-07 - 文章目录优化，能够自适应定位 ## 说明 hexo-theme-bubuzou 主题是根据 hexo 里 Apollo 主题改编而来的，[主题效果](http://bubuzou.com/) ## 安装 想要把 hexo 的主题应用到自己的博客上，需要在本地先构建好 hexo 所依赖的环境。[hexo 使用文档](https://hexo.io/zh-cn/docs/index.html) 大致的步骤是这样的： - 安装 git - 安装 node.js - 安装 hexo ``` $ npm install -g hexo-cli ``` - 构建站点 ``` $ hexo init d://Blog $ cd d://Blog $ npm install ``` - clone 主题 这个时候已经构建好了站点，但是使用的主题是 hexo 默认的`landscape`。所以如果需要变更为`bubuzou`主题，就需要从 github 上 clone 到本地，修改文件名为`bubuzou`，并且放到`d://Blog/theme`下 [hexo-theme-bubuzou 主题](https://github.com/Bulandent/hexo-theme-bubuzou) - 修改主题 然后把 blog 目录下的`_config.yml`配置文件里的`theme: landscape`改成`bubuzou`即可 - 安装依赖包 hexo 里每个不同的主题所依赖的包都不尽相同。安装的默认主题已经包含了一些依赖包，但是对于`bubuzou`这个主题来说是不够的，所以还需要安装以下几个: ``` npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive npm install --save hexo-deployer-git hexo-generator-json-content hexo-generator-search ``` ## 主题说明文档 - [中文文档](https://github.com/bulandent/hexo-theme-bubuzou/blob/master/doc/doc-zh.md) ## 协议 [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) ================================================ FILE: _config.yml ================================================ menu: 博文: / 归档: /archives/ 生活: /categories/live/ 读书: /categories/read/ 关于: /about/ widgets: - category - tag - tagcloud - archive # count show_count: true favicon: https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202010/favicon.ico logo: https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202010/logo.png style: https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202010/bubuzou.css # Comment #changyan: bubuzou leancloud: appid: aD8jJBpu4oew3ovNY73z6Rdq-gzGzoHsz # 填写您的appid appkey: FdzS5SOPHdhYQoEUngQ8K2QW # 填写您的appkey comment: true # 是否开启评论系统 timer: false # 是否开启文章统计 # Analytics # google-analytics: ga: UA-65933410-1 # Copyright Infomation startyear: 2016 ================================================ FILE: doc/doc-zh.md ================================================ ## 文章变量 文章变量可以定义在md文件的开头。可以定义文章的标题，时间，归档的标签，归档的分类，文章关键字，文章描述，文章出处以及文章的示例等。 ```md title: background属性 date: 2017-3-10 11:19:04 tags: css desc: css的复合属性background，以及background-repeat,background-position,background-origin等子属性的介绍。 keywords: css background、background-repeat、background-position、background-origin categories: - css from: https://bitsofco.de/the-background-properties/ demo: ../../../demos/201703/background.html ``` ## 标题 实际上，Hexo-theme-bubuzou 只支持两种标题：`h2` 一级标题，`h3` 二级标题，也就是分别使用 `##` 和 `###` 来表示。之所以这么处理，是因为就个人感觉而言，我们不应该为文章设置过多的层级消耗读者的阅读精力。配置了这样的标题的页面会自动生成页面目录。 ![页面目录](https://raw.githubusercontent.com/Bulandent/hexo-theme-bubuzou/master/source/images/cate.png) ## 文章摘要 如果你想创建文章摘要用于向读者展示文章的核心内容，那么需要在文章摘要之后其他内容之前添加 HTML 注释标签 ``，使用方法如下图所示： ![文章摘要](https://raw.githubusercontent.com/Bulandent/hexo-theme-bubuzou/master/source/images/abstract.png) ## 评论插件 Hexo-theme-bubuzou 评论插件由最开始的多说改成网易云跟帖，后面由于8月1号云跟帖暂停服务，所以现在又换成了畅言。请在 `theme/_config.yml` 文件中做如下配置: ```yaml changyan: bubuzou ``` ## 警告块 使用警告块需要 `div` 标签和 `tip` 类名： ```html
在ECMAScript 5的strict模式下，这种情况的`this`已经被规定不会指向全局对象了，而是`undefined`
``` ![alert](https://raw.githubusercontent.com/Bulandent/hexo-theme-bubuzou/master/source/images/alert.png) ## 搜索 使用搜索功能需要在站点的配置文件_config.yml里配置如下： ``` # search search: path: search.xml field: post ``` ## 归档页面显示所有文章 需要安装`hexo-generator-archive`插件支持，然后在全局的`_config.yml`里配置： ``` archive_generator: per_page: 0 yearly: false monthly: false daily: false ``` ## 访问次数统计 引入js脚本： ``` ``` 显示当前页面的访问量： ``` - ``` 显示指定页面的访问量： - 注意这里的链接必须是带协议的完整链接，而且不能带中文的。 更多用法可以参考[这里](http://jerryzou.com/posts/introduction-to-hit-kounter-lc/) ================================================ FILE: gulpfile.js ================================================ var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); // 一次性编译 Sass gulp.task('sass', function() { return gulp.src('./source/scss/*.scss') .pipe(sass({outputStyle: 'compressed'})) .pipe(autoprefixer()) .pipe(gulp.dest('./source/css')); }); // 实时编译 gulp.task('default', ['sass'], function() { gulp.watch('./source/scss/_partial/*.scss', ['sass']); gulp.watch('./source/scss/*.scss', ['sass']); }); ================================================ FILE: languages/en.yml ================================================ prev: PREV next: NEXT prev_post: PREV next_post: NEXT more: ...more ================================================ FILE: languages/zh-cn.yml ================================================ prev: 上一页 next: 下一页 prev_post: 上一篇 next_post: 下一篇 more: ...阅读全文 ================================================ FILE: layout/about.jade ================================================ extends partial/layout .blog 微博 .github github block copyright include partial/copyright ================================================ FILE: layout/archive.jade ================================================ extends partial/layout block container include mixins/post +postList() block pagination include mixins/paginator +home() block copyright include partial/copyright ================================================ FILE: layout/categories.jade ================================================ extends partial/layout block container include mixins/post +postCate() block pagination include mixins/paginator +home() block copyright include partial/copyright ================================================ FILE: layout/index.jade ================================================ extends partial/layout block container include mixins/post +posts() block pagination include mixins/paginator +home() block copyright include partial/copyright ================================================ FILE: layout/mixins/paginator.jade ================================================ mixin home() - var prev = page.prev_link - var next = page.next_link .paginator if page.prev a.prev(href=url_for(prev), title=page.prev.title)!= __('prev') if page.next a.next(href=url_for(next), title=page.next.title)!= __('next') mixin post() - var prev = page.prev ? page.prev.path : false; - var next = page.next ? page.next.path : false; .paginator if prev a.prev(href=url_for(prev), title=page.prev.title)!= __('prev_post') if next a.next(href=url_for(next), title=page.next.title)!= __('next_post') ================================================ FILE: layout/mixins/post.jade ================================================ mixin postInfo(item) .post-info != date(item.date, 'YYYY-MM-DD') p.visit(id="busuanzi_container_page_pv") span(id="busuanzi_value_page_pv") span 次访问 if item.from && (is_home() || is_post()) a.post-from(href=item.from target="_blank" title=item.from) 原文地址 if item.demo && ( is_home() || is_post() ) a.post-demo(href=item.demo target="_blank" title="") 去看示例 // for archive page mixin postInfoAr(item) .post-info != date(item.date, 'MM-DD') if item.from && (is_home() || is_post()) a.post-from(href=item.from target="_blank" title=item.from) 原文地址 if item.demo && ( is_home() || is_post() ) a.post-demo(href=item.demo target="_blank" title="") 去看示例 //- Index Page mixin posts() ul.home.post-list - page.posts.each(function (item) { li.post-list-item article.post-block h2.post-title a.post-title-link(href= url_for(item.path)) != item.title +postInfo(item) .post-content != item.excerpt a.read-more(href= url_for(item.path))!= __('more') - }) //- Archive Page mixin postList() .archive - var year = 0; - var change = false; - page.posts.each(function (item) { - var itemYear = date(item.date, 'YYYY') - 0; - change = year !== itemYear; - year = change ? itemYear : year; if change h2.archive-year!= year .post-item +postInfoAr(item) a.post-title-link(href= url_for(item.path)) != item.title - }) //- Post Page mixin post(item) #postAr.post article.post-block h1.post-title != item.title +postInfo(item) .post-content != item.content //- post category mixin postCate() .archive - var year = 0; - var change = false; - page.posts.each(function (item) { - var itemYear = date(item.date, 'YYYY') - 0; - change = year !== itemYear; - year = change ? itemYear : year; if change h2.archive-year!= year .post-item +postInfo(item) a.post-title-link(href= url_for(item.path)) != item.title - }) //- post live mixin postLive() .archive - var year = 0; - var change = false; - page.posts.each(function (item) { if item.live - var itemYear = date(item.date, 'YYYY') - 0; - change = year !== itemYear; - year = change ? itemYear : year; if change h2.archive-year!= year .post-item +postInfo(item) a.post-title-link(href= url_for(item.path)) != item.title - }) ================================================ FILE: layout/partial/comment.jade ================================================ if theme.leancloud.comment a(href="#comment", class="comment-anchor") div(id="vcomments") script. new Valine({ el: "#vcomments", appId: "!{ theme.leancloud.appid }", appKey: "!{ theme.leancloud.appkey }", notify: false, verify: false, avatar: "robohash", visitor: true, placeholder: "随便说点什么～.～", }); ================================================ FILE: layout/partial/copyright.jade ================================================ .copyright - var hexoURL = "https://hexo.io/"; - var bubuzouURL = "https://github.com/Bulandent/hexo-theme-bubuzou"; - var currentDate = new Date(); - var year = currentDate.getFullYear(); - year = year == theme.startyear ? year : theme.startyear + ' - ' + year; p © #{year} #[a(href=config.weibo, target="_blank")!= config.author], powered by #[a(href=hexoURL, target="_blank") Hexo]
and #[a(href=bubuzouURL, target="_blank") hexo-theme-bubuzou] p span(id="busuanzi_container_site_pv") 本站总访问数： span(id="busuanzi_value_site_pv") span(id="busuanzi_container_site_uv", style="padding-left: 6px;") 访客数： span(id="busuanzi_value_site_uv") p span(style="padding-right: 6px;") 闽ICP备16007301号-2 ================================================ FILE: layout/partial/head.jade ================================================ meta(charset="utf-8") meta(name="X-UA-Compatible", content="IE=edge") meta(name="baidu-site-verification", content="1EB8XoOl0C") meta(name="google-site-verification", content="K7thEgdLm0UfRWJ5MGdF7sCcjClSzAlxFLPv2Oz5CGM") title block site_title = config.title meta(name="viewport", content="width=device-width, initial-scale=1") block description meta(name="description", content= page.desc ? page.desc : config.description) meta(name="keywords", content= page.keywords ? page.keywords : config.keywords) meta(name="author", content= config.author) link(rel="short icon", href=url_for(theme.favicon)) link(rel="stylesheet", href=url_for(theme.style)) - var xml = config.url + '/atom.xml' link(rel="search", type="application/opensearchdescription+xml", href=xml, title=config.title) ================================================ FILE: layout/partial/layout.jade ================================================ doctype html(lang=config.language) head include head body header .header.row a.logo-link(href=url_for()) img(src=theme.logo) include nav .search a#search_btn(href='#search') .nav-btn#nav_btn span span span .row.scroll-con section.container block container .right-container if (is_post()) include ../widget/catalog else include ../widget/category include ../widget/tagcloud include ../widget/recent .right-menu .modal.search-modal .input-field input(type='text', id='search_input') label(for='search-input') 搜索 #search_result.search-result .blog-overlay footer.row .footer-con block pagination block copyright .totop i include scripts if theme.leancloud.timer include timer ================================================ FILE: layout/partial/nav.jade ================================================ ul.nav.nav-list#nav_list each value, key in theme.menu li.nav-list-item - var re = /^(http|https):\/\/*/gi; - var tar = re.test(value) ? "_blank" : "_self" a.nav-list-link( href=value target=tar data-hover= key.toUpperCase()) != key.toUpperCase() ================================================ FILE: layout/partial/scripts.jade ================================================ //- LaTex script(async src="//cdn.bootcss.com/mathjax/2.6.1/MathJax.js?config=TeX-MML-AM_CHTML") script(src=url_for("https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202010/jquery-1.8.2.min.js")) script(src=url_for("https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202010/articleCatalog.js")) script(src=url_for("https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202010/main.js")) //- Analytics tracking - var ga = theme.ga if ga script | (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create', != '"' + ga + '"' | ,'auto');ga('send','pageview'); ================================================ FILE: layout/partial/timer.jade ================================================ script. const valineAPI = (() => { try { AV.init("!{ theme.leancloud.appid }", "!{ theme.leancloud.appkey }"); } catch(error) {} const isExist = (identity) => { identity = identity || getRealPath(); let query = new AV.Query('Timer'); return new Promise((resolve, reject) => { query.equalTo("identity", identity); query.find().then(results => { resolve(results.length > 0); }, error => reject(error)); }) } const _get = (identity) => { let query = null; if(identity && identity instanceof Array){ let querys = []; for(let i = 0; i < identity.length; ++i) { querys[i] = new AV.Query('Timer'); querys[i].equalTo('identity', identity[i]); } query = AV.Query.or.apply(null ,querys); } else { identity = identity || getRealPath(); query = new AV.Query("Timer"); query.equalTo("identity", identity); } return new Promise((resolve, reject) => { query.find() .then(results => resolve(results)) .catch(error => reject(error)) }) } const create = (identity) => { identity = identity || getRealPath(); return new Promise((resolve, reject) => { let Todo = AV.Object.extend('Timer'); let todo = new Todo(); todo.set("times", 1); todo.set("identity", identity); todo.save().then(res => resolve(true), error => reject(error)); }) } const update = (identity) => { identity = identity || getRealPath(); return new Promise((resolve, reject) => { let query = new AV.Query('Timer'); query.equalTo("identity", identity); query.find().then(todos => { todos.forEach(todo => { todo.set("times", todo.attributes.times + 1); }); return AV.Object.saveAll(todos); }).then(todos => resolve(true), error => reject(error)); }) } return { isExist, _get, update, create } })() const calcAndWriteTimes = () => { let isPost = !{ is_post() }; let timerAllDOM = document.querySelectorAll(".article-timer"); if(isPost) { let identity = timerAllDOM[0].getAttribute("data-identity"); valineAPI.isExist(identity) .then(exist => { if(exist) { return valineAPI.update(identity); } return new Promise(resolve => resolve(true)); }) .then( succuess => valineAPI._get(identity)) .then( result => timerAllDOM[0].innerText = result[0].attributes.times) .catch(error => console.log(error.message)) return ; } let timerDOMCache = {}; for(let timerDOM of timerAllDOM) { let identity = timerDOM.getAttribute("data-identity"); if(timerDOMCache.hasOwnProperty(identity)){ timerDOMCache[identity].dom.push(timerDOM); }else{ timerDOMCache[identity] = { dom: [timerDOM], times: undefined }; } } let identities = Object.keys(timerDOMCache); valineAPI._get(identities).then(results => { for(let result of results) { let {identity, times} = result.attributes; timerDOMCache[identity].times = times; timerDOMCache[identity].dom.map(item => item.innerText = times); } for(let identity of identities) { if(timerDOMCache[identity].times){ continue; } timerDOMCache[identity].dom.map(item => item.innerText = 1); valineAPI.create(identity); } }).catch(error => console.log(error.message)) } if(!{ theme.leancloud.timer }){ calcAndWriteTimes(); } ================================================ FILE: layout/post.jade ================================================ extends partial/layout block site_title != page.title + " · " + config.title block description - var desc = page.desc || page.title + ' - ' + config.author; meta(name="description", content=desc) block container include mixins/post +post(page) block pagination include mixins/paginator +post() include partial/comment block copyright include partial/copyright ================================================ FILE: layout/widget/catalog.jade ================================================ .widget #arAnchorBar ================================================ FILE: layout/widget/category.jade ================================================ .widget .category h4 分类归档 != list_categories() ================================================ FILE: layout/widget/recent.jade ================================================ .widget .recent h4 最近文章 != list_posts({amount: 5}) ================================================ FILE: layout/widget/tagcloud.jade ================================================ .widget .tagcloud h4 标签云 != tagcloud() ================================================ FILE: package.json ================================================ { "name": "hexo-theme-bubuzou", "version": "1.0.0", "description": "A hexo theme remoulded by hexo-theme-apollo", "main": "index.js", "scripts": { "sass": "gulp sass" }, "repository": { "type": "git", "url": "https://github.com/bulandent/hexo-theme-bubuzou" }, "keywords": [ "hexo", "theme", "apollo" ], "author": "brandon Sun", "license": "MIT", "bugs": { "url": "https://github.com/pinggod/hexo-theme-apollo/issues" }, "homepage": "https://github.com/pinggod/hexo-theme-apollo#readme", "devDependencies": { "gulp": "^3.9.0", "gulp-autoprefixer": "^3.0.2", "gulp-sass": "^2.0.4", "gulp-sourcemaps": "^1.6.0" } } ================================================ FILE: source/css/bubuzou.css ================================================ @charset "utf-8"; /** * @name: bubuzou.css * @description: hexo-theme-bubuzou的主题样式2 * @author: typeR(zgrlbq@126.com) * @update: 2017-7-21 16:21:02 */ @font-face { font-family: sourcesanspro; src: url(https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202010/sourcesanspro.woff2) format("woff2"), url(https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202010/sourcesanspro.woff) format("woff"); font-weight: 400; font-style: normal; } :root { --theme-bg-color: #24292e; --theme-text-color: #FD7013; } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } body { margin: 0; } .row { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { margin: 0.67em 0; font-size: 2em; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { margin: 0; font: inherit; color: inherit; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } ::-moz-selection { color: #FFFFFF; background-color: var(--theme-text-color); } ::selection { color: #FFFFFF; background-color: var(--theme-text-color); } html, body { width: 100%; height: 100%; } body { margin: 0; font-family: sourcesanspro, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.7; background-color: #fff; color: #333; } ul.nav,ul.post-list { margin: 0; padding: 0; list-style-type: none; } ul { margin: 1rem 0; } ul li + li { margin-top: 4px; } .post-content ul { padding-left: 20px; } .post-content ol { padding-left: 15px; } a, a:active { color: #2c3e50; text-decoration: none; } hr { border: 0; } code { margin: 0 2px; padding: 0px 5px; color: #e96900; border-radius: 2px; white-space: inherit; display: inline-block; } iframe, video { display: block; max-width: 100%; margin: 1rem auto; } table { width: 100%; margin: 1em auto; } table thead { background-color: #f6f8fa; } table thead th { min-width: 80px; padding: 5px; } table tbody tr:nth-child(2n) { background-color: #f6f8fa; } table tbody td { padding: 5px; vertical-align: text-top; } header { background: #24292e; position: fixed; width: 100%; top: 0; z-index: 10; } .header { height: 60px; margin: 0 auto; } header .logo-link { float: left; margin-top: 9px; transform: rotate(0deg); transition: 0.6s ease-in-out; } header .logo-link:hover { transform: rotate(360deg); } header .nav { float: right; left: 80px; height: 25px; padding-top: 12px; padding-right: 50px; } header .nav-btn { display: none; } header .logo-link img { width: 42px; display: block; } header .nav-list-item { display: inline-block; padding: 0 15px; overflow: hidden; position: relative; } header .nav-list-item a { font-size: 16px; font-weight: bold; color: #fff; display: block; font-family: "微软雅黑"; } header .nav-list-item .active { opacity: 0.7; } .home.post-list { margin: 2em 0; } .post-list h2, .post-list h3, .post-list h4 { display: none; } .home.post-list .post-list-item { padding: 1em 0 2em; border-bottom: 1px solid #ddd; } .nav-list-item a { position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .nav-list-item a::before { content: attr(data-hover); position: absolute; top: 100%; font-weight: 700; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .nav-list-item a:hover { webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } .home.post-list .post-list-item:last-child { border-bottom: 0; } .home.post-list .post-content h2:before, .home.post-list .post-content h3:before, .home.post-list .post-content h4:before, .home.post-list .post-content h5:before, .home.post-list .post-content h6:before { content: ""; } .home.post-list .post-content > ul { list-style: initial; } .home.post-list .read-more { color: var(--theme-text-color); } .archive .archive-year { font-family: Georgia, serif; color: #aaa; } .archive .post-item { padding: 2px 0 0 50px; } .archive .post-time, .archive .post-title-link { font-size: 1rem; } .archive .post-title-link { display: block; word-break: break-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; } .archive .post-title-link:hover { color: var(--theme-text-color); } .archive .post-info { float: left; width: 75px; font-family: Georgia, serif; font-size: 16px; color: #aaa; } .post { padding-top: 1em; } .post-block .post-title { display: block; margin: 0.65em 0; font-size: 22px; } .post .post-block .post-title { font-size: 22px; color: var(--theme-text-color); } .post-block .post-title a { color: #333; position: relative; } .post-block .post-title a:hover { color: var(--theme-text-color); animation: slideBorder 0.3s ease-in; } .post-block .post-title a::after { content: ''; width: 0; height: 0; border-bottom: 2px solid #FD7013; position: absolute; left: 0; bottom: -2px; transition: 0.3s ease-in-out; } .post-block .post-title a:hover::after { width: 100%; } .post-block .post-info { margin: 1.2em 0; font-family: Georgia, serif; font-size: 16px; color: #999; } .post-block .post-info span { margin-left: 0.5rem; } .post-block .post-info a { margin-right: 0.5rem; padding: 3px 6px; border-radius: 5px; font-size: 12px; color: #fff; } .post-block .post-info .visit { display: inline-block; margin: 0; padding: 0 10px; } .post-block .post-info .visit i { font-style: normal; } .post-block .post-info .visit span { margin: 0; padding-left: 2px; font-size: 12px; } .post-block .post-info .post-from { background-color: #E36B6B; } .post-block .post-info .post-demo { background-color: var(--theme-text-color); } .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { position: relative; margin: 1em 0; color: #4e4a4a; } .post-content h2 { font-size: 20px; } .post-content h3 { font-size: 18px; } .post-content h4 { font-size: 16px; } .post-content a { word-break: break-all; color: var(--theme-text-color); } .post-content .tip { position: relative; margin: 2em 0; padding: 12px 24px 12px 30px; border-left: 4px solid #f66; border-top-right-radius: 2px; border-bottom-right-radius: 2px; background-color: #f6f8fa; } .post-content .tip:before { content: "!"; position: absolute; top: 14px; left: -12px; width: 20px; height: 20px; border-radius: 100%; font-family: Dosis, "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 20px; font-weight: bold; text-align: center; background-color: #f66; color: #fff; } .post-content blockquote { margin: 0; padding: 8px 10px 8px 15px; border-left: 6px solid var(--theme-text-color); background-color: #f6f8fa; } .post-content blockquote p { margin: 0; } .post-content img { max-width: 100%; } .post-content .tip br { display: none; } #mask { position: fixed; z-index: 10; width: 100%; height: 100%; padding: 1em 0; overflow: scroll; background-color: rgba(0, 0, 0, 0.5); } #mask #mask-image { max-width: 95%; } code, pre { /* font-family: "Source Code Pro", Monaco, Menlo, Consolas, monospace; */ font-family: Menlo, Monaco, Consolas, Courier New, monospace; font-size: 0.9333em; background-color: #f6f8fa; } .highlight { position: relative; margin: 1em 0; overflow-x: auto; border-radius: 2px; line-height: 1.1em; background-color: #f6f8fa; } .highlight table, .highlight tr, .highlight td { width: 100%; margin: 0; padding: 0; border-collapse: collapse; } .highlight .gutter { display: none; } .highlight .code pre { margin: 0; padding: 1.2em 1.4em; /* font-family: "Source Code Pro", Monaco, Menlo, Consolas, monospace; */ font-family: Menlo, Monaco, Consolas, Courier New, monospace; font-size: 14px; line-height: 1.5em; } .highlight.html .code:after, .highlight.js .code:after, .highlight.bash .code:after, .highlight.css .code:after, .highlight.scss .code:after, .highlight.diff .code:after, .highlight.java .code:after, .highlight.xml .code:after, .highlight.python .code:after, .highlight.json .code:after, .highlight.swift .code:after, .highlight.ruby .code:after, .highlight.perl .code:after, .highlight.php .code:after, .highlight.c .code:after, .highlight.cpp .code:after, .highlight.ts .code:after { position: absolute; top: 0; right: 0; height: 15px; padding: 5px 10px 0; font-size: 0.75em; font-weight: 600; line-height: 15px; text-align: right; color: #ccc; } .highlight.html .code:after { content: "HTML"; } .highlight.js .code:after { content: "JS"; } .highlight.bash .code:after { content: "BASH"; } .highlight.css .code:after { content: "CSS"; } .highlight.scss .code:after { content: "SCSS"; } .highlight.diff .code:after { content: "DIFF"; } .highlight.java .code:after { content: "JAVA"; } .highlight.xml .code:after { content: "XML"; } .highlight.python .code:after { content: "PYTHON"; } .highlight.json .code:after { content: "JSON"; } .highlight.swift .code:after { content: "SWIFT"; } .highlight.ruby .code:after { content: "RUBY"; } .highlight.perl .code:after { content: "PERL"; } .highlight.php .code:after { content: "PHP"; } .highlight.c .code:after { content: "C"; } .highlight.java .code:after { content: "JAVA"; } .highlight.cpp .code:after { content: "CPP"; } .highlight.ts .code:after { content: "TS"; } .highlight.cpp .code:after { content: 'C++'; } pre { color: #777; } pre .function .keyword, pre .constant { color: #0092db; } pre .keyword, pre .attribute { color: #e96900; } pre .number, pre .literal { color: #ae81ff; } pre .tag, pre .tag .title, pre .change, pre .winutils, pre .flow, pre .lisp .title, pre .clojure .built_in, pre .nginx .title, pre .tex .special { color: #2973b7; } pre .symbol, pre .symbol .string, pre .value,pre .regexp { color: var(--theme-text-color); } pre .title { color: #83B917; } pre .tag .value, pre .string, pre .subst, pre .haskell .type, pre .preprocessor, pre .ruby .class .parent, pre .built_in, pre .sql .aggregate, pre .django .template_tag, pre .django .variable, pre .smalltalk .class, pre .javadoc, pre .django .filter .argument, pre .smalltalk .localvars, pre .smalltalk .array, pre .attr_selector, pre .pseudo, pre .addition, pre .stream, pre .envvar, pre .apache .tag, pre .apache .cbracket, pre .tex .command, pre .prompt { color: var(--theme-text-color); } pre .comment, pre .java .annotation, pre .python .decorator, pre .template_comment, pre .pi, pre .doctype, pre .shebang, pre .apache .sqbracket, pre .tex .formula { color: #b3b3b3; } pre .deletion { color: #BA4545; } pre .coffeescript .javascript, pre .javascript .xml, pre .tex .formula, pre .xml .javascript, pre .xml .vbscript, pre .xml .css, pre .xml .cdata { opacity: 0.5; } .paginator { margin: 4em 0; text-align: center; } .paginator .prev, .paginator .next { display: inline-block; margin: 0 4px; padding: 4px 12px; border-radius: 4px; font-size: 13px; color: #fff; background-color: var(--theme-text-color); } .ds-thread, #disqus_thread { margin-bottom: 2em; } section.container { max-width: 780px; padding-top: 70px; } footer { padding-bottom: 1px; } footer .copyright { margin: 30px 0; padding-top: 10px; border-top: 1px solid #ddd; text-align: center; font-family: sourcesanspro, "Helvetica Neue", Arial, sans-serif; } footer .copyright p { margin: 0; font-size: 14px; font-weight: 100; color: #aaa; } footer .copyright a { color: #aaa; } footer .copyright a:hover { color: #666; } .footer-con { width: 700px; } .totop { position: fixed; z-index: 999; bottom: 145px; display: none; margin-left: 800px; cursor: pointer; width: 18px; height: 18px; padding: 5px; border-radius: 4px; transition: all 0.1s; } .totop i { display: block; border-left: 9px solid transparent; border-right: 9px solid transparent; border-width: 9px; border-bottom: 9px solid var(--theme-text-color); position: absolute; top: 8px; left: 5px; transition: all 0.1s; } .totop::before { content: ""; width: 18px; height: 2px; background-color: var(--theme-text-color); display: block; transition: all 0.1s; position: absolute; top: 5px; left: 5px; } .totop::after { content: ""; display: block; width: 6px; height: 6px; background-color: var(--theme-text-color); position: absolute; left: 11px; top: 17px; transition: all 0.1s; } .totop:hover { background-color: var(--theme-text-color); } .totop:hover::before { background-color: #fff; } .totop:hover i { border-bottom-color: #fff; } .totop:hover::after { background-color: #fff; } .tags { position: fixed; width: 230px; top: 200px; } .tags a { display: inline-block; height: 28px; margin: 0 5px 8px 0; padding: 0 12px; font-family: "Source Code Pro", Monaco, Menlo, Consolas, monospace; line-height: 28px; border-radius: 20px; background: #f6f8fa; transition: color 0.1s, background-color 0.1s; } .tags a:hover { background: var(--theme-text-color); color: #fff; } .search { position: absolute; right: 0; top: 15px; } .search a { display: block; width: 30px; height: 30px; background: url(https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202010/search_white.png) no-repeat center center; background-size: 20px; } /* model */ .modal { box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); } .modal { position: fixed; left: 0; right: 0; width: 55%; margin: auto; padding: 0; max-height: 70%; overflow: hidden; border-radius: 2px; background-color: #fafafa; will-change: top, opacity; } .search-modal { z-index: 1003; top: 10%; visibility: hidden; max-height: 80%; max-width: 800px; padding: 30px 20px; opacity: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: scale(0.7) -ms-transform: scale(0.7); -webkit-transform: scale(0.7); transform: scale(0.7); -moz-transition: all 0.3s; -ms-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .search-on .search-modal { visibility: visible; opacity: 1; -moz-transform: scale(1) -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .search-modal .search-result li { list-style-type: none; word-break: break-word; } .blog-overlay { position: fixed; z-index: 999; top: -100px; left: 0; bottom: 0; right: 0; display: none; width: 100%; height: 125%; background: #000; will-change: opacity; opacity: 0.5; } .search-on .blog-overlay { display: block; } .search-modal .search-result { max-height: 600px; margin-right: 10px; padding: 10px 15px 10px 25px; overflow-y: auto; } .search-result-list { margin: 0; padding: 0; } .search-result-list a { position: relative; color: var(--theme-text-color); } .search-result li a:before { content: " "; position: absolute; left: -12px; top: 6px; display: block; width: 6px; height: 6px; border-radius: 6px; background: var(--theme-text-color); } .search-result-list .search-keyword { background-color: var(--theme-text-color); } .search-modal .input-field { position: relative; margin-top: 1rem; padding: 0 12px; } .input-field input { width: 100%; height: 3rem; margin: 0 0 15px 0; padding: 0; border: none; border-bottom: 1px solid #9e9e9e; border-radius: 0; font-size: 15px; background-color: transparent; outline: none; color: #666; box-shadow: none; box-sizing: content-box; transition: all 0.3s; } .input-field label { position: absolute; top: 0.8rem; left: 0.75rem; font-size: 1rem; color: #9e9e9e; cursor: text; transition: .2s ease-out; } .input-field.active label { font-size: 0.8rem; -webkit-transform: translateY(-140%); transform: translateY(-140%); } .widget { margin-bottom: 30px; } .widget h4 { color: var(--theme-text-color); margin: 10px 0; font-family: '微软雅黑'; } .widget a { color: #333; } .widget a:hover { color: var(--theme-text-color); } .widget .category-list-count { padding-left: 3px; font-family: Georgia, serif; font-size: 14px; color: #999; } .widget .category-list-count:before { content: "("; } .widget .category-list-count:after { content: ")"; } .tagcloud a { padding-right: 4px; white-space: nowrap; } .recent .post-list li { height: 28px; line-height: 28px; overflow: hidden; } .category-list { margin: 0; padding: 0; } .category-list-item { list-style-type: none; } .right-menu { display: none; } .copyright br { display: none; } /* 文章目录 */ .right-container { position: fixed; z-index: 10; width: 230px; top: 90px; left: 50%; margin-left: 310px; } .arCatalog { position: relative; margin: 20px 0 0 0; } .arCatalog .arCatalog-line { position: absolute; left: 7px; top: -5px; width: 0; border: 1px solid #eaeaea; border-top: 0; border-bottom: 0; background-color: #eaeaea; } .arCatalog .arCatalog-line:before { content: ""; position: absolute; top: -10px; left: -5px; display: block; width: 8px; height: 8px; border: 1px solid #d2d2d2; border-radius: 10px; } .arCatalog .arCatalog-line:after { content: ""; position: absolute; bottom: -10px; left: -5px; display: block; width: 8px; height: 8px; border: 1px solid #d2d2d2; border-radius: 10px; } .arCatalog .arCatalog-body { margin-left: -2px; padding-left: 27px; overflow: hidden; } .arCatalog .arCatalog-body dl { margin: 0; transition: 0.3s all; } .arCatalog-body::-webkit-scrollbar { display: none; } .arCatalog .arCatalog-body dd { position: relative; margin: 0; font-size: 15px; line-height: 28px; } .arCatalog-body .arCatalog-tack1 a { display: block; max-width: 170px; padding-left: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .arCatalog-body dd.on a { color: var(--theme-text-color); } .arCatalog-body .arCatalog-tack1 .arCatalog-index { position: absolute; left: 2px; top: 0; color: #bbb; } .arCatalog-body .arCatalog-tack1 .arCatalog-dot { position: absolute; left: -22px; top: 11px; width: 8px; height: 8px; background-color: #eaeaea; border: 1px solid #fff; border-radius: 2em; } .arCatalog-body dd.on .arCatalog-dot { position: absolute; left: -23px; top: 8px; width: 12px; height: 12px; background-color: #fd7013; box-shadow: 0px 0px 2px 2px rgba(253, 112, 19, 0.5); border-radius: 2em; border-width: 0; } .arCatalog-body .arCatalog-tack2 { padding-left: 17px; } .arCatalog-body .arCatalog-tack2 a { display: block; padding-left: 48px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arCatalog-body .arCatalog-tack2 .arCatalog-index { position: absolute; left: 27px; top: 0; color: #bbb; } .arCatalog-body .arCatalog-tack3 { padding-left: 66px; } .article-box .tag { margin: 15px 0 10px; font-size: 12px; color: #999; } .article-box .tag span { margin: 0px 8px 0 2px; padding: 3px 8px; border-radius: 3px; color: #666; background-color: #e7e7e7; } /* pad端 */ @media screen and (max-width: 768px) { header .logo-link { padding-left: 20px; } .nav-list-item a:hover { webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } .search { right: 20px; } section.container { max-width: 510px; margin: 70px 0 0; padding: 0 20px; } .right-container { left: 50%; width: 180px; margin-left: 180px; } .footer-con { width: 510px; margin-left: 20px; } .home.post-list .post-list-item { padding: 20px 0; border-bottom: 1px solid #ddd; } .post-block .post-title { margin: 0; } .post-block .post-info { margin: 10px 0; } .totop { margin-left: 530px; } } /* phone端 */ @media screen and (max-width: 640px) { .header { padding: 0; height: 50px; } header .logo-link { margin-left: 10px; padding: 0; } header .logo-link img { width: 32px; } header .nav-btn { display: block; position: absolute; right: 10px; top: 16px; } header .nav-btn span { display: block; width: 22px; height: 3px; background-color: #fff; } header .nav-btn span + span { margin-top: 5px; } .home.post-list { margin: 0; } .search { right: 45px; top: 10px; } .search a { background-size: 24px; } header .nav { display: none; position: absolute; top: 50px; left: 0; width: 100%; height: auto; padding: 10px 0; border-bottom: 1px solid #ddd; background-color: #fff; } header .nav-list-item { padding: 0; text-align: left; display: block; } header .nav-list-item a { color: var(--theme-text-color); padding: 3px 20px; } .footer-con { width: 100%; margin: 0; } .search-modal { padding: 0; width: 90%; } .search-modal .input-field { position: relative; margin-top: 1rem; padding: 0 10px; } .input-field.active label { font-size: 0.8rem; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .search-modal .search-result { max-height: 500px; padding: 0 10px; overflow-y: auto; } .search-result-list { margin: 0; } .search-modal .search-result li { padding-left: 12px; } .input-field input { padding-top: 5px; } .scroll-con { padding-top: 50px; } .scroll-con .container { margin: 0; padding: 0 12px; } .totop { right: 10px; bottom: 62px; margin-left: 0; } .right-container { top: 60px; left: auto; right: 0; z-index: 1003; width: 70%; margin: 0; padding: 0 10px 10px 10px; border: 1px solid #ddd; background-color: #fff; box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); transition: 0.25s transform; -moz-transition: 0.25s -moz-transform; -webkit-transition: 0.25s -webkit-transform; -o-transition: 0.25s -o-transform; transform: translateX(110%); -moz-transform: translateX(110%); -webkit-transform: translateX(110%); -o-transform: translateX(110%); } .home.post-list .post-list-item { padding: 10px 0; } .right-on .right-container { transform: translateX(0); -moz-transform: translateX(0); -webkit-transform: translateX(0); -o-transform: translateX(0); } .right-on .blog-overlay { display: block; } .widget { margin: 0; } .right-menu { display: none; position: fixed; top: 50%; right: 8px; z-index: 999; width: 15px; height: 32px; margin-top: 37px; background: url(https://bubuzou.oss-cn-shenzhen.aliyuncs.com/blog/202010/right-menu.png) no-repeat center center; } .archive { padding: 1px 0 20px; } .archive .post-item { padding: 0; } .archive .archive-year { font-size: 16px; margin: 10px 0; } .archive .post-info { width: 54px; overflow: hidden; height: 24px; } .paginator { margin: 0; } .paginator .prev, .paginator .next { margin: 15px 4px; } .highlight .code pre { padding: 0.6em 0.7em; } footer div.copyright { margin: 0; padding: 10px 0; } .copyright br { display: block; } footer .copyright p { margin: 0; } .post-content ul { padding-left: 20px; } .post-content ol { padding-left: 15px; } } @media screen and (max-width: 400px) { .search-modal .search-result { max-height: 450px; } } @media screen and (max-width: 350px) { .search-modal .search-result { max-height: 370px; } } ================================================ FILE: source/scripts/articleCatalog.js ================================================ /* * articleCatalog v2.0 * Copyright(c) 2016 by bulandent * Date: 2017-5-27 16:10:41 * Updated: 2020-10-10 17:40:04 **/ ; let articleCatalog = (function() { if ( !document.getElementById('postAr') || document.querySelectorAll('.headerlink').length === 0 || window.innerWidth < 900 ) { return function(){}; } let DEFAULT = { lineHeight: 28, // 每个菜单的行高是 28 moreHeight: 10, // 菜单左侧的线比菜单多出的高度 surplusHeight: 180, // 除了菜单高度+留白高度 delay: 200, // 防抖的延迟时间 duration: 200, // 滚动的动画持续时间 toTopDistance: 80, // 距离视口顶部多少高度之内时候触发高亮 selector: '.headerlink', // 文章内容中标题标签的 selector } return function(args) { DEFAULT = Object.assign(DEFAULT, args) let arContentAnchor = document.querySelectorAll(DEFAULT.selector), catalogLength = arContentAnchor.length, maxCatalogCount = 0, // 视口内能容纳的最大目录个数 viewPortHeight = 0, // 当前视口的高度 marginTop = 0, // 菜单的初始滚动距离 defaultDirec = 'bottom', // 默认滚动方向 lastSH = 0, // 获取页面初始滚动距离 lastOnIndex = 0, // 上次高亮的目录索引 catalogBody = [], // .arCatalog-body catalogDl = null, // .arCatalog-body dl catalogDd = [], // .arCatalog-body dd initBodyTop = 0, // 目录可视区域的 top initDlBottom = 0, // 目录 dl 的 bottom firstDdTop = 0, // 第一个 dd 的 top bodyMidBottom = 0, // 目录可视区域的中间位置的 dd 的 bottom bodyBCR = null, // 目录可视区域的边界值 hasStopSetHighlight = false; // 在点击目录子项的时候直接高亮当前目录，而不通过 scroll 事件触发 setHighlight 函数 initCatalog() window.addEventListener('scroll', function() { debounce(setHighlight, DEFAULT.delay)() debounce(resetStatus, DEFAULT.delay)() }, false) if (catalogLength > maxCatalogCount) { window.addEventListener('scroll', function() { debounce(scrollCatalog, DEFAULT.delay)() }, false) } window.addEventListener('resize', function(e) { debounce(initCatalog, DEFAULT.delay)() }, false) // 初始化 function initCatalog() { let tempHeight = window.innerHeight if (viewPortHeight !== tempHeight) { viewPortHeight = tempHeight maxCatalogCount = Math.floor((viewPortHeight - DEFAULT.surplusHeight) / DEFAULT.lineHeight) generateCatalog() catalogLength = arContentAnchor.length lastSH = window.pageYOffset catalogBody = document.querySelector('.arCatalog-body') catalogDl = document.querySelector('.arCatalog dl') catalogDd = document.querySelectorAll('.arCatalog dd') bodyBCR = catalogBody.getBoundingClientRect() initBodyTop = bodyBCR.top initDlBottom = initDlBottom || catalogDl.getBoundingClientRect().bottom firstDdTop = firstDdTop || catalogDd[0].getBoundingClientRect().top, bodyMidBottom = initBodyTop + Math.ceil((maxCatalogCount / 2 )) * DEFAULT.lineHeight // 给目录子项绑定事件 catalogDd.forEach((curr, index) => { curr.addEventListener('click', function(e) { e.preventDefault() hasStopSetHighlight = true document.querySelector('.arCatalog .on').classList.remove('on') catalogDd[index].classList.add('on') lastOnIndex = index let currTop = arContentAnchor[index].getBoundingClientRect().top scrollToDest(currTop + window.pageYOffset - DEFAULT.toTopDistance) }, false) }); } } // 防抖：触发高频事件 n 秒后只会执行一次，如果 n 秒内事件再次触发，则会重新计时。 function debounce(fn, delay = 200) { return function(args) { const _this = this clearTimeout(fn.id) fn.id = setTimeout(function() { fn.apply(_this, args) }, delay) } } // 生成目录 function generateCatalog(){ let catalogHeight = arContentAnchor.length > maxCatalogCount ? maxCatalogCount * DEFAULT.lineHeight : arContentAnchor.length * DEFAULT.lineHeight; let retStr = `
` let h2Index = 0, h3Index = 1, acIndex = '', tagName = '', index = 0; for (let currNode of arContentAnchor) { tagName = currNode.parentElement.tagName if ( tagName === 'H2') { acIndex = ++h2Index h3Index = 1 className = 'arCatalog-tack1' } else if (tagName === 'H3') { acIndex = `${h2Index}.${h3Index++}` className = 'arCatalog-tack2' } else { acIndex = '' className = 'arCatalog-tack3' } retStr += `
${acIndex} ${currNode.title}
` }; retStr += `
` document.getElementById('arAnchorBar').innerHTML = retStr } // 自动滚动目录树，使得当前高亮目录在可视范围内 function scrollCatalog() { let currentCatalog = document.querySelector('.arCatalog .on'); let curr = currentCatalog.getBoundingClientRect(), list = catalogDl.getBoundingClientRect(); if (defaultDirec === 'bottom') { // 向下滚动 if (curr.bottom + (maxCatalogCount / 2) * DEFAULT.lineHeight <= bodyBCR.bottom) { // 上半部分 // 不滚动 } else if (curr.bottom - bodyMidBottom < list.bottom - bodyBCR.bottom) { // 中位以下 marginTop += -Math.floor((curr.bottom - bodyMidBottom ) / DEFAULT.lineHeight) * DEFAULT.lineHeight } else if (bodyBCR.bottom <= list.bottom) { // 当剩余滚动距离 marginTop = bodyBCR.bottom - initDlBottom } } else { // 向上滚动 if (bodyBCR.top + (maxCatalogCount / 2) * DEFAULT.lineHeight <= curr.top) { // 不滚动 } else if (bodyMidBottom - curr.top < bodyBCR.top - list.top) { marginTop += Math.floor((bodyMidBottom - curr.top) / DEFAULT.lineHeight) * DEFAULT.lineHeight } else if (list.top <= bodyBCR.top) { marginTop = 0 } } catalogDl.style.marginTop = marginTop + 'px' } // 动画实现滚动到目标位置 function scrollToDest(destScrollTop) { let startTime; let currScrollTop = window.pageYOffset; function step(timestamp) { if (!startTime) { startTime = timestamp } const elapsed = Math.round(timestamp - startTime) const distance = elapsed * ((Math.floor(destScrollTop) - currScrollTop) / DEFAULT.duration) + currScrollTop document.documentElement.scrollTop = document.body.scrollTop = distance if (elapsed < DEFAULT.duration) { window.requestAnimationFrame(step) } } window.requestAnimationFrame(step) } // 高亮当前目录s function setHighlight(){ defaultDirec = getScrollDirection() if (hasStopSetHighlight) { return } let { scrollTop, } = document.scrollingElement; let curr = document.querySelector('.arCatalog .on') let onIndex = [].indexOf.call(catalogDd, curr), // 当前高亮索引 nextOnIndex = onIndex; // 滚动后高亮索引 curr.classList.remove('on') let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight if (arContentAnchor[catalogLength - 1].getBoundingClientRect().top <= DEFAULT.toTopDistance || window.innerHeight + window.pageYOffset === scrollHeight) { // 尾部 lastOnIndex = catalogLength - 1 catalogDd[lastOnIndex].classList.add('on') } else if (scrollTop <= firstDdTop) { // 顶部 catalogDd[0].classList.add('on') lastOnIndex = 0 } else { // 中间：使用缓存，直接从上一次索引（onIndex）位置开始查找 if (defaultDirec === 'bottom') { while (nextOnIndex < catalogLength) { let currTop = arContentAnchor[nextOnIndex].getBoundingClientRect().top if ( currTop > DEFAULT.toTopDistance && nextOnIndex > 0){ nextOnIndex-- break } nextOnIndex++ } } else { while (nextOnIndex >= 0) { let currTop = arContentAnchor[nextOnIndex].getBoundingClientRect().top if ( currTop <= DEFAULT.toTopDistance){ break } nextOnIndex-- } } nextOnIndex = nextOnIndex === catalogLength ? nextOnIndex - 1 : nextOnIndex < 0 ? 0 : nextOnIndex lastOnIndex = nextOnIndex catalogDd[nextOnIndex].classList.add('on') } } // 获取最近一次页面的滚动方向 function getScrollDirection() { let sh = window.pageYOffset, ret = 'bottom' if (sh < lastSH) { ret = 'top' } lastSH = sh return ret } function resetStatus() { if (hasStopSetHighlight) { hasStopSetHighlight = false } } } }()); ================================================ FILE: source/scripts/main.js ================================================ /* * main * Copyright(c) 2016 by brandon * Date: 2016-07-21 */ (function($) { // 回到顶部按钮 $('.scroll-con, window').scroll(function () { var sH = $('.scroll-con').scrollTop() + $('window').scrollTop();; if( sH >= 300 ) { $('.totop').fadeIn("slow"); } else { $('.totop').fadeOut("slow"); } }); $(window).scroll(function () { var sH = $(window).scrollTop() + $('.scroll-con').scrollTop(); if( sH >= 300 ) { $('.totop').fadeIn("slow"); } else { $('.totop').fadeOut("slow"); } }); // 回到顶部 $('.totop').on('click', function() { $('html,body').animate({ scrollTop : 0 }, 200 ); $('.scroll-con').animate({ scrollTop : 0 }, 200 ); }); // 文章目录 articleCatalog(); // phone端，右侧导航 // $('.right-menu').on('click', function() { // $('body').addClass('right-on'); // }); // phone端，右侧导航 $('#nav_btn').on('click', function(e) { e.preventDefault(); $('#nav_list').slideToggle(300); }); $('#search_btn').on('click', function(e) { e.preventDefault(); $('body').addClass('search-on'); $('.input-field').addClass('active'); $('#search_input').focus(); }); $('#search_input').blur(function() { if ( $('#search_input').val() === '' ) { $('.input-field').removeClass('active'); } }); $('.blog-overlay').on('click', function() { $('#search_input').val(''); $('body').removeClass('search-on').removeClass('right-on'); }); var searchXml = "search.xml"; if (searchXml.length == 0) { searchXml = "search.xml"; } var searchPath = "/" + searchXml; initSearch(searchPath, 'search_input', 'search_result'); // 初始化搜索与匹配函数 function initSearch(path, search_id, content_id) { 'use strict'; $.ajax({ url: path, dataType: "xml", success: function(xmlResponse) { // get the contents from search data var datas = $("entry", xmlResponse).map(function() { return { title: $("title", this).text(), content: $("content", this).text(), url: $("url", this).text() }; }).get(); var $input = document.getElementById(search_id); var $resultContent = document.getElementById(content_id); $input.addEventListener('input', function() { var str = '"; $resultContent.innerHTML = str; }); } }); } // 百度统计 var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?47acec2d282c3986f1b600abdc11c7ab"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); })(jQuery); ================================================ FILE: source/scss/_partial/archive-post-list.scss ================================================ .archive { max-width: 500px; margin: 5em auto; .post-item { padding: 2px 0 0 50px; } .post-time, .post-title-link { font-size: 1rem; } .post-title-link { display: block; margin-left: 125px; color: #42b983; word-break: break-all; &:hover { border-bottom: 0; color: #267B54; } } .post-info { float: left; width: 125px; color: #7f8c8d; } } ================================================ FILE: source/scss/_partial/base.scss ================================================ ::selection { color: #FFFFFF; background-color: #42b983; } html, body { width: 100%; height: 100%; } body { margin: 0; color: #34495e; font-size: 15px; line-height: 1.6; background-color: #fff; font-family: 'sourcesanspro', 'Helvetica Neue', Arial, sans-serif; } ul.nav, ul.post-list { margin: 0; padding: 0; list-style-type: none; } ul { margin: 1rem 0; } a, a:active { color: #2c3e50; text-decoration: none; } a.nav-list-link.active, a.nav-list-link:hover, a.post-title-link:hover { border-bottom: 2px solid #42b983; } hr { border: 0; } code { margin: 0 2px; padding: 3px 5px; color: #e96900; border-radius: 2px; white-space: inherit; } iframe, video { max-width: 100%; margin: 1rem auto; display: block; } table { width: 100%; margin: 1em auto; thead { background-color: #ddd; th { padding: 5px; min-width: 80px; } } tbody { tr:nth-child(2n) { background-color: #eee; } td { padding: 5px; vertical-align: text-top; } } } ================================================ FILE: source/scss/_partial/copyright.scss ================================================ footer { padding-bottom: 1px; .copyright { margin: 4em 0; border-top: 1px solid #ddd; text-align: center; p, a { color: #aaa; font-size: 14px; font-weight: 100; } a:hover { color: #888; } } } ================================================ FILE: source/scss/_partial/footer.scss ================================================ .paginator { margin: 4em 0; text-align: center; .prev, .next { display: inline-block; margin: 0 4px; padding: 4px 12px; border-radius: 4px; border-bottom: 4px solid #3aa373; font-size: 14px; color: #fff; background-color: #4fc08d; &:hover { background-color: #22bd77; } } } .ds-thread, #disqus_thread { margin-bottom: 2em; } ================================================ FILE: source/scss/_partial/header.scss ================================================ header { min-height: 60px; .logo-link { float: left; } .nav { float: right; left: 80px; } .logo-link img { height: 60px; } .nav-list-item { display: inline-block; padding: 19px 10px ; a { font-size: 16px; line-height: 1.4; } } } ================================================ FILE: source/scss/_partial/home-post-list.scss ================================================ .home.post-list { margin: 2em 0; .post-list-item { padding: 1em 0 2em; border-bottom: 1px solid #ddd; &:last-child { border-bottom: 0px; } } .post-content{ h2, h3, h4, h5, h6 { &:before { content: ''; } } & > ul { list-style: initial; } } .read-more { color: #42b983; } } ================================================ FILE: source/scss/_partial/mq.scss ================================================ section.container { margin: 2em 10px; } @media screen and (min-width: 700px) { .wrap { width: 700px; margin: 0 auto; } header { padding: 20px 100px; } } @media screen and (max-width: 700px) { .wrap { width: 100%; } header { padding: 20px 0; a.logo-link, ul.nav.nav-list { float: none; display: block; text-align: center; } li.nav-list-item { padding: 10px 10px; } } section.container, .home.post-list, .archive { margin-top: 0; } .archive .post-item { padding-left: 20px; } .post-content { h2, h3, h4, h5, h6 { max-width: 300px; left: 15px; } } .ds-thread, #disqus_thread { margin: 2em 10px; } } ================================================ FILE: source/scss/_partial/normalize.scss ================================================ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability of focused elements when they are also in an * active/hover state. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } ================================================ FILE: source/scss/_partial/post.scss ================================================ .post { padding-top: 1em; } .post-block { .post-title { margin: 0.65em 0; color: #2c3e50; font-size: 1.5em; } .post-info { color: #7f8c8d; margin: 1.2em 0; span { margin-left: 0.5rem; } a.post-from { margin-left: 0.5rem; padding: 3px 6px; border-radius: 5px; font-size: 12px; color: white; background-color: #E36B6B; } } } .post-content { h2, h3, h4, h5, h6 { position: relative; margin: 1em 0; &:before { content: "#"; color: #42b983; position: absolute; left: -0.7em; top: -4px; font-size: 1.2em; font-weight: bold; } } h4, h5, h6 { &:before { content: ""; } } h2, h3 { font-size: 22px; } h4, h5, h6 { font-size: 18px; } a { color: #42b983; word-break: break-all; } blockquote { margin: 2em 0; padding-left: 20px; border-left: 4px solid #42b983; } img { display: block; max-width: 100%; margin: 1em auto; } & > table, & > figure.highlight { box-shadow: 0 1px 2px rgba(0,0,0,0.125); } .tip { position: relative; margin: 2em 0; padding: 12px 24px 12px 30px; border-left: 4px solid #f66; border-top-right-radius: 2px; border-bottom-right-radius: 2px; background-color: #f8f8f8; br { display: none; } } .tip:before { position: absolute; top: 14px; left: -12px; content: "!"; width: 20px; height: 20px; border-radius: 100%; color: #fff; font-size: 14px; line-height: 20px; font-weight: bold; text-align: center; background-color: #f66; font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; } } #mask { position: fixed; overflow: scroll; width: 100%; height: 100%; padding: 1em 0; background-color: rgba(0, 0, 0, 0.5); z-index: 10; #mask-image { max-width: 95%; } } code, pre { font-size: 0.8em; background-color: #f8f8f8; font-family: 'Roboto Mono', Monaco, courier, monospace; } .highlight { position: relative; margin: 1em 0; border-radius: 2px; line-height: 1.1em; background-color: #f8f8f8; overflow-x: auto; table, tr, td { width: 100%; border-collapse: collapse; padding: 0; margin: 0; } .gutter { display: none; } .code pre { padding: 1.2em 1.4em; line-height: 1.5em; margin: 0; } } %code-base { position: absolute; top: 0; right: 0; color: #ccc; text-align: right; font-size: 0.75em; padding: 5px 10px 0; line-height: 15px; height: 15px; font-weight: 600; } @mixin code-signs($keys) { @each $key in $keys { .highlight.#{$key} .code:after { content: to-upper-case($key); @extend %code-base; } } } $signs: ("html", "js", "bash", "css", "scss","diff", "java", "xml", "python", "json", "swift", "ruby", "perl", "php", "c", "java", "cpp", "ts"); @include code-signs($signs); .highlight.cpp .code:after { content: 'C++'; } pre { color: #525252; .function .keyword, .constant { color: #0092db; } .keyword, .attribute { color: #e96900; } .number, .literal { color: #ae81ff; } .tag, .tag .title, .change, .winutils, .flow, .lisp .title, .clojure .built_in, .nginx .title, .tex .special { color: #2973b7; } .symbol, .symbol .string, .value, .regexp { color: #42b983; } .title { color: #83B917; } .tag .value, .string, .subst, .haskell .type, .preprocessor, .ruby .class .parent, .built_in, .sql .aggregate, .django .template_tag, .django .variable, .smalltalk .class, .javadoc, .django .filter .argument, .smalltalk .localvars, .smalltalk .array, .attr_selector, .pseudo, .addition, .stream, .envvar, .apache .tag, .apache .cbracket, .tex .command, .prompt { color: #42b983; } .comment, .java .annotation, .python .decorator, .template_comment, .pi, .doctype, .shebang, .apache .sqbracket, .tex .formula { color: #b3b3b3; } .deletion { color: #BA4545; } .coffeescript .javascript, .javascript .xml, .tex .formula, .xml .javascript, .xml .vbscript, .xml .css, .xml .cdata { opacity: 0.5; } } ================================================ FILE: source/scss/bubuzou.scss ================================================ @charset "utf-8"; @import "_partial/normalize"; @import "_partial/base"; @import "_partial/header"; @import "_partial/home-post-list"; @import "_partial/archive-post-list"; @import "_partial/post"; @import "_partial/footer"; @import "_partial/mq"; @import "_partial/copyright"; @font-face { font-family: 'sourcesanspro'; src: url('/font/sourcesanspro.woff2') format('woff2'), url('/font/sourcesanspro.woff') format('woff'); font-weight: normal; font-style: normal; }