lisang
/
vuepress-theme-vdoing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增博客文章

This commit is contained in:
xugaoyi 2020-04-18 16:31:01 +08:00
parent 8a43bf8194
commit d74c3042b5
6 changed files with 82 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vuepress/config/sidebar-auto.js
View File

@ -11,7 +11,7 @@ module.exports = {
"/01.前端/": [{"title":"JavaScript文章","collapsable":false,"children":[["25.JavaScript文章/02.new命令原理.md","new命令原理","/pages/8143cc480faf9a11"],["25.JavaScript文章/03.ES5面向对象.md","ES5面向对象","/pages/b1af5cb8996363c5"],["25.JavaScript文章/04.ES6面向对象.md","ES6面向对象","/pages/1f4123be6f45abcd"],["25.JavaScript文章/06.多种数组去重性能对比.md","多种数组去重性能对比","/pages/e808fba1fa8fbab2"],["25.JavaScript文章/50.JS随机打乱数组.md","JS随机打乱数组","/pages/40b4db2d38ba85f2"],["25.JavaScript文章/60.判断是否为移动端浏览器.md","判断是否为移动端浏览器","/pages/40f623be692cf8bc"],["25.JavaScript文章/70.将一维数组按指定长度转为二维数组.md","将一维数组按指定长度转为二维数组","/pages/f1acb712033ac8da"],["25.JavaScript文章/80.防抖与节流函数.md","防抖与节流函数","/pages/0f6a0ac99b62ede5"],["25.JavaScript文章/90.JS获取和修改url参数.md","JS获取和修改url参数","/pages/7a91be2d502346ce"],["25.JavaScript文章/100.比typeof运算符更准确的类型判断.md","比typeof运算符更准确的类型判断","/pages/fd4a16d56b83c1bc"]]},{"title":"Vue文章","collapsable":false,"children":[["30.Vue文章/10.Vue项目开发前的一些准备工作.md","Vue项目开发前的一些准备工作","/pages/802a1ca6f7b71c59"],["30.Vue文章/20.Vue CLi3 修改webpack配置.md","Vue CLi3 修改webpack配置","/pages/5d463fbdb172d43b"],["30.Vue文章/30.Vue中的scoped和scoped穿透.md","Vue中的scoped和scoped穿透","/pages/c80d2751cf1f4268"],["30.Vue文章/40.Vue项目使用mock数据的几种方式.md","Vue项目使用mock数据的几种方式","/pages/bd1af2f75fd361fc"]]},{"title":"学习笔记","collapsable":false,"children":[["40.学习笔记/00.《JavaScript教程》笔记.md","《JavaScript教程》笔记","/note/javascript"],["40.学习笔记/10.《ES6 教程》笔记.md","《ES6 教程》笔记","/note/es6"],["40.学习笔记/20.《Vue》笔记.md","《Vue》笔记","/note/vue"],["40.学习笔记/30.《TypeScript 从零实现 axios》.md","《TypeScript 从零实现 axios》","/note/typescript-axios"],["40.学习笔记/40.小程序笔记.md","小程序笔记","/note/wx-miniprogram"]]}],
"/02.页面/": [{"title":"HTML","collapsable":false,"children":[["10.HTML/10.常用meta整理.md","常用meta整理","/pages/8309a5b876fc95e3"]]},{"title":"CSS","collapsable":false,"children":[["20.CSS/01.flex布局语法.md","flex布局语法","/pages/0a83b083bdf257cb"],["20.CSS/02.flex布局案例-基础.md","flex布局案例-基础","/pages/ea6db1530c42ad51"],["20.CSS/03.flex布局案例-骰子.md","flex布局案例-骰子","/pages/eff61bc8b4f4695d"],["20.CSS/04.flex布局案例-圣杯布局.md","flex布局案例-圣杯布局","/pages/df9e7c7214fa5046"],["20.CSS/05.flex布局案例-网格布局.md","flex布局案例-网格布局","/pages/85b5a3fe218a34b7"],["20.CSS/06.flex布局案例-输入框布局.md","flex布局案例-输入框布局","/pages/05cc577fb51c7998"],["20.CSS/07.CSS3之transition过渡.md","CSS3之transition过渡","/pages/02d7f59d98d87409"],["20.CSS/08.CSS3之animation动画.md","CSS3之animation动画","/pages/c2c0432138f6e042"],["20.CSS/20.「布局技巧」图片未加载前自动撑开元素高度.md","「布局技巧」图片未加载前自动撑开元素高度","/pages/3d52574260725aea"],["20.CSS/30.文字在一行或两行时超出显示省略号.md","文字在一行或两行时超出显示省略号","/pages/42b66999cc27dc25"],["20.CSS/35.从box-sizing属性入手，了解盒子模型.md","从box-sizing属性入手，了解盒子模型","/pages/20a978023139589d"],["20.CSS/40.水平垂直居中的几种方式-案例.md","水平垂直居中的几种方式-案例","/pages/cb7cb251adba4bf7"],["20.CSS/45.如何根据系统主题自动响应CSS深色模式.md","如何根据系统主题自动响应CSS深色模式","/pages/5dde351274f1e39d"]]},{"title":"stylus","collapsable":false,"children":[["25.stylus/10.混入(Mixins).md","混入(Mixins)","/pages/9f15c1a281d8bedb"]]}],
"/02.页面/": [{"title":"HTML","collapsable":false,"children":[["10.HTML/10.常用meta整理.md","常用meta整理","/pages/8309a5b876fc95e3"]]},{"title":"CSS","collapsable":false,"children":[["20.CSS/01.flex布局语法.md","flex布局语法","/pages/0a83b083bdf257cb"],["20.CSS/02.flex布局案例-基础.md","flex布局案例-基础","/pages/ea6db1530c42ad51"],["20.CSS/03.flex布局案例-骰子.md","flex布局案例-骰子","/pages/eff61bc8b4f4695d"],["20.CSS/04.flex布局案例-圣杯布局.md","flex布局案例-圣杯布局","/pages/df9e7c7214fa5046"],["20.CSS/05.flex布局案例-网格布局.md","flex布局案例-网格布局","/pages/85b5a3fe218a34b7"],["20.CSS/06.flex布局案例-输入框布局.md","flex布局案例-输入框布局","/pages/05cc577fb51c7998"],["20.CSS/07.CSS3之transition过渡.md","CSS3之transition过渡","/pages/02d7f59d98d87409"],["20.CSS/08.CSS3之animation动画.md","CSS3之animation动画","/pages/c2c0432138f6e042"],["20.CSS/20.「布局技巧」图片未加载前自动撑开元素高度.md","「布局技巧」图片未加载前自动撑开元素高度","/pages/3d52574260725aea"],["20.CSS/30.文字在一行或两行时超出显示省略号.md","文字在一行或两行时超出显示省略号","/pages/42b66999cc27dc25"],["20.CSS/35.从box-sizing属性入手，了解盒子模型.md","从box-sizing属性入手，了解盒子模型","/pages/20a978023139589d"],["20.CSS/40.水平垂直居中的几种方式-案例.md","水平垂直居中的几种方式-案例","/pages/cb7cb251adba4bf7"],["20.CSS/45.如何根据系统主题自动响应CSS深色模式.md","如何根据系统主题自动响应CSS深色模式","/pages/5dde351274f1e39d"],["20.CSS/50.「css技巧」使用hover和attr()定制悬浮提示.md","「css技巧」使用hover和attr()定制悬浮提示","/pages/941581927b4a38f8"]]},{"title":"stylus","collapsable":false,"children":[["25.stylus/10.混入(Mixins).md","混入(Mixins)","/pages/9f15c1a281d8bedb"]]}],
"/03.技术/": [{"title":"技术文档","collapsable":false,"children":[["01.技术文档/01.Git使用手册.md","Git使用手册","/pages/9a7ee40fc232253e"],["01.技术文档/02.Markdown使用教程.md","Markdown使用教程","/pages/ad247c4332211551"],["01.技术文档/03.npm常用命令.md","npm常用命令","/pages/61f2f95fd7da14fd"],["01.技术文档/10.npm packageJson属性详解.md","npm packageJson属性详解","/pages/dec4f3f00e71a312"],["01.技术文档/15.yaml语言教程.md","yaml语言教程","/pages/4e8444e2d534d14f"]]},{"title":"GitHub技巧","collapsable":false,"children":[["02.GitHub技巧/01.GitHub高级搜索技巧.md","GitHub高级搜索技巧","/pages/4c778760be26d8b3"],["02.GitHub技巧/02.GitHub Actions 实现自动部署静态博客.md","GitHub Actions 实现自动部署静态博客","/pages/6b9d359ec5aa5019"],["02.GitHub技巧/03.GitHub Actions 定时运行代码：每天定时百度链接推送.md","GitHub Actions 定时运行代码：每天定时百度链接推送","/pages/f44d2f9ad04ab8d3"],["02.GitHub技巧/10.GitHub加速下载项目的方法.md","GitHub加速下载项目的方法","/pages/95331c6a9613faf8"]]},{"title":"Nodejs","collapsable":false,"children":[["03.Nodejs/01.nodejs递归读取所有文件.md","nodejs递归读取所有文件","/pages/117708e0af7f0bd9"]]},{"title":"博客搭建","collapsable":false,"children":[["04.博客搭建/01.解决百度无法收录搭建在GitHub上的个人博客的问题.md","解决百度无法收录搭建在GitHub上的个人博客的问题","/pages/41f87d890d0a02af"],["04.博客搭建/02.使用Gitalk实现静态博客无后台评论系统.md","使用Gitalk实现静态博客无后台评论系统","/pages/1da0bf9a988eafe5"],["04.博客搭建/03.GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床.md","GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床","/pages/a5f73af5185fdf0a"],["04.博客搭建/10.vdoing主题效果图.md","vdoing主题效果图","/pages/d557b9a89a215d2e"]]}],

11
docs/02.页面/20.CSS/50.「css技巧」使用hover和attr()定制悬浮提示.md Normal file
View File

@ -0,0 +1,11 @@
---
title: 「css技巧」使用hover和attr()定制悬浮提示
date: 2020-04-18 12:14:09
permalink: /pages/941581927b4a38f8
---
# 「css技巧」使用hover和attr()定制悬浮提示-demo
<iframe height="400" style="width: 100%;" scrolling="no" title="【CSS：行为】使用:hover和attr()定制悬浮提示" src="https://codepen.io/xugaoyi/embed/vYNKNaq?height=400&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/xugaoyi/pen/vYNKNaq'>【CSS：行为】使用:hover和attr()定制悬浮提示</a> by xugaoyi
(<a href='https://codepen.io/xugaoyi'>@xugaoyi</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

4
docs/06.收藏夹/01.网站和工具.md
View File

@ -17,8 +17,10 @@ article: false
* [现代JavaScript教程](https://zh.javascript.info) 以最新标准为基准的JS教程
* [ES5教程](https://wangdoc.com/javascript/) 阮一峰的JS教程
* [ES6教程](http://es6.ruanyifeng.com/) 阮一峰的ES6教程
* [Bash 脚本教程](https://wangdoc.com/bash/) 阮一峰编写
* [ECMA](https://www.ecma-international.org/) ECMA官网
* [菜鸟教程](https://www.runoob.com/) 涵盖多种语言的初级教程
### 社区
* [Github](https://github.com/) 程序员同性交友社区
* [掘金](https://juejin.im/) 一个帮助开发者成长的社区
@ -33,6 +35,8 @@ article: false
* [阮一峰的网络日志](http://www.ruanyifeng.com/blog/)
* [css-tricks](https://css-tricks.com/) css技巧文章
### 文章
* [灵活运用CSS开发技巧](https://juejin.im/post/5d4d0ec651882549594e7293)
### 视频
* [慕课网](https://www.imooc.com/) 实战视频教程

4
theme-vdoing/components/ArticleInfo.vue
View File

@ -16,7 +16,7 @@
<div class="info">
<div class="author iconfont icon-touxiang" v-if="articleInfo.author">
<a :href="articleInfo.author.href" v-if="articleInfo.author.href" target="_blank" class="beLink" title="作者">{{articleInfo.author.name}}</a>
<a v-else href="javascript:;" title="作者">{{articleInfo.author.name}}</a>
<a v-else href="javascript:;" title="作者">{{articleInfo.author.name}}</a>
</div>
<div class="date iconfont icon-riqi" v-if="articleInfo.date">
<a href="javascript:;" title="创建时间">{{articleInfo.date}}</a>
@ -106,7 +106,7 @@ function zero(d){
float left
padding-right 5px
&:after
content '-'
content '/'
margin-left 5px
color #999
&:last-child

15
theme-vdoing/components/Home改版.vue
View File

@ -74,14 +74,14 @@
<div class="avatar">
<img :src="blogger.avatar" alt="头像" title="我好看吗">
</div>
<div class="icons" v-if="blogger.social">
<div class="icons" v-if="social">
<a
:href="item.link"
:title="item.title"
:class="['iconfont', item.iconClass]"
v-for="(item, index) in blogger.social.icons"
v-for="(item, index) in social.icons"
:key="index"
:style="{width: 100/blogger.social.icons.length + '%'}"
:style="{width: 100/social.icons.length + '%'}"
target="_blank"
>
</a>
@ -119,11 +119,13 @@ export default {
currentPageIndex: 0,
playTimer: 0,
mark: 0,
updateBarConfig: null
updateBarConfig: null,
social: null
}
},
created() {
this.updateBarConfig = this.$themeConfig.updateBar
this.social = this.$themeConfig.social
},
beforeMount(){
this.isMQMobile = window.innerWidth < MOBILE_DESKTOP_BREAKPOINT ? true : false; // vupress在打包时不能在beforeCreate(),created()访问浏览器api（如window）
@ -137,12 +139,13 @@ export default {
},60)
}
})
// 引入图标库
if(this.blogger && this.blogger.social && this.blogger.social.iconfontCssFile ) {
if(this.social && this.social.iconfontCssFile ) {
let linkElm = document.createElement("link")
linkElm.setAttribute('rel', 'stylesheet');
linkElm.setAttribute("type", "text/css")
linkElm.setAttribute("href", this.blogger.social.iconfontCssFile)
linkElm.setAttribute("href", this.social.iconfontCssFile)
document.head.appendChild(linkElm)
}

71
theme-vdoing/styles/index.styl
View File

@ -8,6 +8,18 @@
@require './wrapper'
@require './toc'
html, body
padding 0
margin 0
background-color #fff
body
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
font-size 16px
color $textColor
// 去掉黄色边框
a,input,button
outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);
@ -29,17 +41,50 @@ a,input,button
-webkit-border-radius:3px
html, body
padding 0
margin 0
background-color #fff
/** 部件样式**/
// 卡片
.card-box
border-radius 5px
background var(--bg)
box-shadow 0 1px 3px 0 rgba(0,0,30,.1), 1px 2px 4px 0 rgba(0,0,0,.1)
body
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
font-size 16px
color $textColor
// 提示框
// .hover-tip
// position relative
// &::before,
// &::after
// position absolute
// left 50%
// top 100%
// opacity 0
// visibility hidden
// transform translate3d(0, 20px, 0)
// transition all .3s
// z-index 999
// &::before
// margin 0 0 12px -35px
// border-radius 5px
// width 70px
// height 28px
// background-color rgba(#000, .5)
// line-height 28px
// text-align center
// font-size .8rem
// color #fff!important
// content attr(data-title)
// &::after
// margin -10px 0 0 -5px
// border 5px solid transparent
// border-bottom-color rgba(#000, .5)
// width 0
// height 0
// content ""
// &:hover
// &::before,
// &::after
// opacity 1
// visibility visible
// transform translate3d(0, 12px, 0)
.page
transition padding .2s ease
@ -85,12 +130,6 @@ body
@media (max-width: $MQMobile)
background-color var(--bg)
// 卡片
.card-box
border-radius 5px
background var(--bg)
box-shadow 0 1px 3px 0 rgba(0,0,30,.1), 1px 2px 4px 0 rgba(0,0,0,.1)
{$contentClass}:not(.custom)
word-wrap break-word