sidebar | 易学教程

博客园文章自动生成导航目录

文章如果比较长的话，子标题很难找，文章结构没法一目了然，如果有一个导航目录靠在边栏就好了看了很多园子里其他的文章，js和css挺长的，怕用不好，干脆自己尝试写一个一、要实现的功能 1、自动生成不限定某几个h标签，最好h1-h6都可以支持 2、靠在侧边栏我的边栏内容比较少，我就把导航目录直接加在边栏下面了，这样会和原先的风格结构比较搭，如果边栏内容比较多的，可能要改成绝对定位在右下角了这里需要引入 stickUp.js插件，在滚动条下滑的时候将导航栏固定在页面顶端 3、简单的风格不同皮肤显示可以融入的比较好，这里会借用catListPostArchive随笔档案的css类，导航目录的样式会和随笔档案的样式一样，自己就不用加样式了 4、目录滚动监听当页面滑动到某个h标签时，导航目录中需要高亮显示那一条，需要引用bootstrap的 scrollspy.js插件来实现 5、优化最好能平滑的滚动二、实现代码 1、cnblog-scroller.js jQuery(function($) { $(function() { //延迟1秒加载, 等博客园的侧栏加载完毕, 不然导航目录距离顶部的高度会不对 setTimeout(function () {loadScroller();}, 1000); }); //加载导航目录 function loadScroller()

多图预警 | 我为博客园新增了十几个功能

阅读更多关于多图预警 | 我为博客园新增了十几个功能

前置最近写了几篇随笔，大家都不看内容，看博客皮肤 😂，满足你们。以下所有功能都可作为一个插件使用，你可以将它迁移到你的博客，代码仓库地址在文末。或者使用 awescnb 将这些插件集成到你现有的博客园皮肤。若有错误，恳请指点一二，感激不尽。欢迎评论区交流。另外插件还在不断扩充。基本配置属性描述值类型默认值可选值 name 全局主题名称 String 'reacg' 'reacg' 'element' 'gshang' 'acg' color 全局主题色 String '#ffb3cc' 16 进制颜色值 avatar 头像图片链接 String 无 title 网站标题 String 你的博客名 favicon 网站图标链接 String 内置 headerBackground 头部背景，图片链接 String 内置 theme: { name: 'reacg', color: '#FFB3CC', title: '', avatar: '//pic.cnblogs.com/avatar/1501373/20200119190802.png', favicon: 'https://guangzan.gitee.io/imagehost/awescnb/favicon.png', headerBackground: 'https://guangzan.gitee.io

golang连接达梦数据库的一个坑

阅读更多关于 golang连接达梦数据库的一个坑

golang连接达梦数据库的一个坑有一次项目中用到了达梦数据库，后端语言使用的 golang ，达梦官方并未适配专门的 golang 连接方式，正一筹莫展的时候发现达梦提供了 odbc 的连接，这样可以使用类似 mssql 的 odbc 连接方式连接达梦数据库。使用的达梦数据库版本为 DM8 达梦数据库开启 odbc 连接参考博客1 、参考博客2 参照上面两个博客内容配置 odbc 连接 golang 代码一些参考文档： package main import ( "fmt" _ "github.com/alexbrainman/odbc" // google's odbc driver "github.com/go-xorm/xorm" "xorm.io/core" "github.com/axgle/mahonia" ) type Address struct { Addressid int64 `xorm:"addressid"` Address1 string `xorm:"address1"` Address2 string `xorm:"address2"` City string `xorm:"city"` Postalcode string `xorm:"postalcode"` } // 字符串解码函数，处理中文乱码 func

Sublime Text3的安装以及python开发环境的搭建

阅读更多关于 Sublime Text3的安装以及python开发环境的搭建

作者： struct_mooc 博客地址： https://www.cnblogs.com/structmooc/p/12376601.html 目录一. Sublime text3的安装 1.sublime text3下载 2. sublime text3安装二. 搭建python开发环境 1.python运行环境设置 2.插件管理包Package Control 3.插件安装 1）ConvertToUTF8 2）SublimeREPL 3）SideBarEnhancements 4）AutoPep8 5）Alignment 6）FileHeader 7）Anaconda 8）BracketHighlighter 9）ChineseLocalizations 10）Colorsublime 11）TrailingSpaces 4.查询已安装的插件 5.删除已安装的插件附：插件作用说明 1）ConvertToUTF8 2）SublimeREPL 3）SideBarEnhancements 4）AutoPep8 5）Alignment 6）FileHeader 7）Anaconda 8）BracketHighlighter 9）ChineseLocalizations 10）Colorsublime 11）TrailingSpaces 一. Sublime text3的安装 1

Sublime Text3的安装以及python开发环境的搭建

阅读更多关于 Sublime Text3的安装以及python开发环境的搭建

Sublime Text3的安装以及python开发环境的搭建

阅读更多关于 Sublime Text3的安装以及python开发环境的搭建

Bootstrap的基本使用（css、js文件的引入）的示例

阅读更多关于 Bootstrap的基本使用（css、js文件的引入）的示例

Bootstrap的基本使用（css、js文件的引入） <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="keywords" content="javascript,vueJS,Jquery,AngularJS,HTML5,CSS3"> <meta name="author" content=""> <title>Bootstrap3示例</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body>   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss

多图预警 | 我为博客园新增了十几个功能

阅读更多关于多图预警 | 我为博客园新增了十几个功能

让前端走进微时代，微微一弄很哇塞！

阅读更多关于让前端走进微时代，微微一弄很哇塞！

● ● ● 让前端走进微时代，微微一弄很哇塞！微前端这个词这两年很频繁的出现在大家的视野中，主要是把微服务的概念引入到了前端，让前端的多个模块或者应用解耦，做到让前端的子模块独立仓储，独立运行，独立部署。下面是微前端的概念图。为什么需要微前端？ 1. 项目前端是单体应用即负责貌美如花还要赚钱养家，而后端使用微服务只需要负责分家家然后给前端送朵花花。前端单体承担了所有的接口。 2. 系统模块增多，前端单体应用变得肥胖，开发效率低下，构建速度变慢。前端心想：哼，老娘就使劲的吃，浏览器也别想看见我，卡死你。 3. 公司人员扩大，需要多个前端团队独立开发，独立部署，如果都在一个仓储中开发会带来一系列问题，例如：老子辛苦一天写的代码，第二天让别人弄没了。 4. 解决遗留系统问题，新模块需要使用最新的框架和技术，旧系统还继续使用。 5. 单体前端带来的测试问题。前端小姐姐分模块测试，这时正遇到构建发布，多人运动戛然而止。 6. 编不下去了。。。。。。微前端技术选型之路目前关注度和成熟度最高的应该就是 single-spa，但是国内也有很多团队都有自己的微前端框架，像蚂蚁金服的qiankun,phodal 的 mooa,阿里飞冰的icestark，这些都是比较出名的微前端解决方案。但是这些框架都有一定的局限性，像mooa是针对Angular 打造的主从结构的微前端框架

前端CSS必备类名及常用属性总结（让编程更简单）

阅读更多关于前端CSS必备类名及常用属性总结（让编程更简单）

CSS常用类和属性总结 CSS常用类总结页面结构 div+css命名导航功能样式文件命名 CSS常用属性总结字体设置文本属性盒子设置其它常用属性 CSS常用类总结页面结构容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center div+css命名 wrapper 页面外围控制整体布局宽度 container或#content 容器,用于最外层 layout 布局 head, #header 页头部分 foot, #footer 页脚部分导航 nav 导航 subnav 子导航 topnav 头部导航 sidebar 侧边导航 leftsidebar 左边导航 menu 菜单 submenu 子菜单 sideBar 侧边栏 sidebar_left, #sidebar_right 左边栏或右边栏功能 main 页面主体 tag 标签 msg #message 提示信息 tips 小技巧 vote 投票 friendlink 友情连接 title 标题 summary 摘要 loginbar 登录条 searchInput 搜索输入框 hot 热门热点

订阅 sidebar