如何快速获取一个免费又好看的个人博客网站?看这里!

原文：https://blog.csdn.net/qq_27525611/article/details/105568721

1 概述博客这种东西,怎么说呢,多点写写吧,总会有好处的.国内有很多这种类似的博客平台,比如CSDN,博客园,掘金,开源中国,SegmentFault,51CTO,简书等等.还有一些个人博客客户端,比如Leanote(跨平台,开源,Github目前9.3k,个人免费一个月,有不少主题),还有利用Github Pages搭建博客的客户端,比如Gridea(免费,一个静态博客写作客户端,Github目前5.3k,主题还算不上很多,搭建教程可以看这篇笔者的文章).

当然还可以自己从WordPress开始搭建,WordPress是PHP开发的博客平台,非常强大,不过需要自己购买服务器,买域名,买证书,步骤比较繁琐.

好了,说了这么多,好像还没进入正题.这篇文章主要是教你如何"快速"获取"免费"+"好看"的个人博客网站.

快速:利用别人已搭建好的框架免费:不需要买服务器,买域名等等,当然也离不开万能的Github好看:利用别人做好的主题,当然你自己可以魔改,emmmm…这里用的是博客园提供的自定义主题功能的博客,先上图,这是原博主的博客:

可能静态图看的有点单调,那就来几张gif:

2 实现由于这个大佬已经把主题的代码开源了,Github这里,所以直接按文档拿来用就行.

2.1 博客园设置首先去博客园注册一个账号,然后在博客设置里开通js权限:

把皮肤改成SimpleMemory:

禁用模板默认的CSS:

然后开启选项中的公告:

2.2 复制去github上面复制代码,切换到最新的标签,目前是1.2.9:

复制src/style下的base.min.css到自己的页面定制CSS中:

复制以下代码到博客侧边栏公告中:

window.cnblogsConfig = { GhVersions : 'v1.2.9', // 版本 blogUser : "userName", // 用户名 blogAvatar : "https://xxxx.png", // 用户头像 blogStartDate : "2016-11-17", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间 }123456789

2.3 测试可以打开自己的网站看看了,比如没修改过任何东西的:

3 个性化好吧,这个才是文章的重点.(以下是文档的教程,官方文档可以戳这里)

3.1 基础信息在window.cnblogsConfig中:

用户名:blogUser用户头像:blogAvatar入园时间:blogStartDate

3.2 标签失去焦点标签文字:webpageTitleOnBlur失去焦点变化延时:webpageTitleOnBlurTimeOut获取焦点标签文字:webpageTitleFocus获取焦点变化延时:webpageTitleFocusTimeOut标签图标:webpageIcon直接在上面的cnblogsConfig中加上即可:

window.cnblogsConfig={ webpageTitleOnblur: '(oﾟvﾟ)ノ Hi', webpageTitleOnblurTimeOut: 500, webpageTitleFocus: '(*´∇｀*) 欢迎回来！', webpageTitleFocusTimeOut: 1000, webpageIcon: "https://xxxxx.xxxx"};12345673.3 日夜模式window.cnblogsConfig={ switchDayNight: { enable:true,//开启切换按钮 auto: { enable:true//开启自动切换 dayHour:5//日间模式开始时间,整数,24小时制 nightHout:19//类似上面,夜间 } }};1234567891011123.4 图标这个主题用的是Iconfont上的图标,可以使用自己自定义扩展的图标,先进入Iconfont,选中自己喜欢的图标进行收藏,然后没有项目的话新建项目,有项目的话添加到项目:

然后点击自己的收藏:

新建/添加到项目:

选中Font class,查看并生成链接:

添加到fontIconExtend即可:

window.cnblogsConfig={ fontIconExtend:"//at.alicdn.com/t/xxxx.css",};1233.5 菜单使用menuCustomList包含:

window.cnblogsConfig={ menuCustomList: { "标题": { "data": [ ["name1","url1"], ["name2","url2"] ], }, "icon":"Fonticon中的icon名字,需要前一步引入" },};1234567891011121314比如笔者的:

menuCustomList:{ "知乎": { "data": [ ["氷泠酒","https://www.zhihu.com/people/blue-69-47"], ], "icon":"icon-zhihu" }, "Github": { "data": [ ["bingling","https://github.com/2293736867"] ], "icon":"icon-Github1" }},12345678910111213141516171819菜单导航用menuNavList:

window.cnblogsConfig = { menuNavList: [ ['name1', 'url1'], ['name2', 'url2'], ],}123456默认在"管理"的下面:

背景用:

window.cnblogsConfig = { menuUserInfoBgImg: 'https://xxx,jpg',}123不过好像有点…

3.6 进度条window.cnblogsConfig = { progressBar: { color : '#77b6ff', height : '2px', duration: 0.2,//单位s,是页面滑动后进度条移动到相应位置的时间,比如页面从0滑动到50%,进度条花0.2s从0到达50% },}12345673.7 Loading这里是页面刚进去的图形旋转的配置.

loading:{ rebound: {//以下两项控制旋转速度 tension: 16, friction: 5, }, spinner: { id: 'spinner', radius: 90,//图形半径,控制图形大小 sides: 3,//边数,3是三角形,4是正方形 depth: 4,//深度,也就是有多少图形堆叠在一起旋转 colors: { background: '#f0f0f0',//整个页面的背景 stroke: '#272633',//旋转图形边缘颜色 base: null,//原始位置的颜色,比如如果设成红色,未开始旋转的位置对应的有一个红色的图形(取决于上面的sides,n边形),不过看起来效果... child: '#272633',//旋转图形的颜色 }, alwaysForward: true, // false的话会加一点看起来回旋的效果,由于速度太快这个设为true/false看起来差别不大 restAt: 0.5, //0.1-0.9,null为完全旋转 renderBase: false,//如果上面设置了base的颜色要把这个设为true }}12345678910111213141516171819202122默认loading:

window.cnblogsConfig = { loading: { rebound: { tension: 16, }, spinner: { id: 'spinner', radius: 90, } },}12345678910113.8 动效3.8.1 主页(气泡效果)开启:

window.cnblogsConfig = { homeTopAnimationRendered: true,//默认true}123设置:

window.cnblogsConfig = { homeTopAnimation: { radius: 15,//半径 density: 0.2,//密度,越大越密 color: 'rgba(255,255,255, .2)', // 颜色设置，“random” 为随机颜色 clearOffset: 0.3,//移动到距离页面底部百分比多少就消除 },}123456783.8.2 文章页开启:

window.cnblogsConfig = { essayTopAnimationRendered: true,}123设置:

window.cnblogsConfig = { essayTopAnimation: { triW : 14,//三角形宽 triH : 20,//高 neighbours: ["side", "top", "bottom"],//随机邻居三角形的位置,三角形竖直放置 speedTrailAppear : .1,//路径出现速度 speedTrailDisappear : .1,//路径消失速度 speedTriOpen : 1,//三角形打开的时间,时间快的话打开得很快,慢的话可能没有完全打开路径就消失 trailMaxLength : 30,//路径最大长度 trailIntervalCreation : 100,//路径创建的时间间隔,单位ms delayBeforeDisappear : 2,//消失之前延迟2s colorsRandom: false, //是否开启随机颜色,其实开启随机色的话笔者觉得效果不怎么好(不信可以自己试试...) colors: [ //三角形的颜色从这八种颜色中随机取值,若自定义的颜色不满八种会使用默认值填满八种颜色 //也可以直接在八种的基础上增加自己的颜色,建议配合背景设置 '#96EDA6', '#5BC6A9', '#38668C', '#374D84', '#BED5CB', '#62ADC6', '#8EE5DE', '#304E7B' ], },}123456789101112131415161718192021223.8.3 页面背景开启:

window.cnblogsConfig = { bgAnimationRendered: true,}123设置:

window.cnblogsConfig = { backgroundAnimation: { colorSaturation: "60%",//颜色饱和度 colorBrightness: "50%",//颜色亮度 colorAlpha: 0.5,//颜色透明度 colorCycleSpeed: 5,//颜色循环速度,慢的话会趋近同一种颜色,快的话有类似彩虹的效果(针对每条丝带) verticalPosition: "random",//随机垂直位置 horizontalSpeed: 200,//水平移动速度 ribbonCount: 3,//"折"的数量 strokeSize: 0,//笔触大小,建议调小,调大的话会有比较明显的直线痕迹 parallaxAmount: -0.2,//这个不清楚 animateSections: true//是否断开,true为断开 },}12345678910111213143.9 主页3.9.1 图片图片:

window.cnblogsConfig = { homeTopImg: [ "https://xxx.png", "https://xxx.png" ],}123456多张的话每次随机刷新一张.

3.9.2 标语window.cnblogsConfig = { homeBannerText: "text",}123默认为空,每次自动获取,设置了之后会固定显示.标语获取源可以选择每日一句或每次一句古诗词:

window.cnblogsConfig = { homeBannerTextType: "one",//每日一句,另一个取值为jinrishici,每次一句古诗词}1233.10 文章页3.10.1 bannerwindow.cnblogsConfig = { essayTopImg: [ "https://xxx.png", "https://xxx.png" ],}123456多张的话每次随机一张.

3.10.2 文章尾window.cnblogsConfig = { essaySuffix: { codeImgUrl : '', //左侧图片设置，不配置使用 window.cnblogsConfig.blogAvatar aboutHtml : '关于博主', // 关于博主，不配置使用默认 copyrightHtml: '版权声明', // 版权声明，不配置使用默认 supportHtml : '声援博主', // 声援博主，不配置使用默认 },}12345678

3.11 打赏window.cnblogsConfig = { reward: { enable: true,//开启 wechatpay: 'url',//微信收款码url alipay: 'url',//支付宝收款码url },}1234567会在右下角:

3.12 代码3.12.1 限制高度window.cnblogsConfig = { codeMaxHeight: true,}123代码框高度不会超过页面可视区域的70%,隐藏部分通过滚动的方式查看,默认不开启.

3.12.2 样式统一设置window.cnblogsConfig = { essayCode: { fontFamily: "'Ubuntu Mono',monospace"//字体 fontSize: "16px",//大小 },}123456大佬说目前只有这两项设置.

3.12.3 高亮文档提供了三种高亮的方式,一种是默认的博客园的高亮方式,一种通过highlightjs渲染,一种通过prettify渲染,建议使用第二种,第一种的样式…嗯…第三种目前只有五个样式可以选择:

使用highlighjs的话,加上:

window.cnblogsConfig = { essayCodeHighlightingType: "highlightjs", essayCodeHighlighting: "从下面列表选择喜欢的主题",}1234default、a11y-dark、a11y-light、agate、an-old-hope、androidstudio、arduino-light、arta、ascetic、atelier-cave-dark、atelier-cave-light、atelier-dune-dark、atelier-dune-light、atelier-estuary-dark、atelier-estuary-light、atelier-forest-dark、atelier-forest-light、atelier-heath-dark、atelier-heath-light、atelier-lakeside-dark、atelier-lakeside-light、atelier-plateau-dark、atelier-plateau-light、atelier-savanna-dark、atelier-savanna-light、atelier-seaside-dark、atelier-seaside-light、atelier-sulphurpool-dark、atelier-sulphurpool-light、atom-one-dark-reasonable、atom-one-dark、atom-one-light、brown-paper、codepen-embed、color-brewer、darcula、dark、darkula、docco、dracula、far、foundation、github-gist、github、gml、googlecode、grayscale、gruvbox-dark、gruvbox-light、hopscotch、hybrid、idea、ir-black、isbl-editor-dark、isbl-editor-light、kimbie.dark、kimbie.light、lightfair、magula、mono-blue、monokai-sublime、monokai、nord、obsidian、ocean、paraiso-dark、paraiso-light、pojoaque、purebasic、qtcreator_dark、qtcreator_light、railscasts、rainbow、routeros、school-book、shades-of-purple、solarized-dark、solarized-light、sunburst、tomorrow-night-blue、tomorrow-night-bright、tomorrow-night-eighties、tomorrow-night、tomorrow、vs、vs2015、xcode、xt256、zenburn12345678910111213可以在这里在线查看效果.

以下是笔者的代码配置:

codeMaxHeight: true,essayCode: { fontFamily: "Fira Code", fontSize: "14px",},essayCodeHighlightingType: "highlightjs",essayCodeHighlighting:"monokai-sublime",1234567主题用的是monokai(不得不吹一下这个主题真的漂亮),大小14px应该足够了,字体选用的是Fira Code,不贪图什么,就贪图一个不等于号(看起来真的太爽了):

3.13 页脚3.13.1 样式window.cnblogsConfig = { footerStyle: 1,//1或2,默认2}123提供了两种样式,1或2选择即可,效果就不截图了.

3.13.2 友链window.cnblogsConfig = { bottomBlogroll: ["name1", 'url1'], ["name2", 'url2'], ],}1234563.13.3 标语window.cnblogsConfig = { bottomText: { icon: "❤️", left : "冲冲冲", right: "继续冲", },}1234567

默认会在一对方括号中间.

3.14 控制台输出window.cnblogsConfig = { consoleList: [ ['name1', 'url1'], ['name2', 'url2'], ],}123456

3.15 播放器在页脚加入:

12345678910111213把其中的id换成自己网易云音乐的id.获取id:点击自己的歌单,生成外链播放器,

0后面就是自己的id.

4 这里的才叫自定义修改好吧,上面的那些都是原作者提供的简单修改配置选项,这里的才叫真正的自定义修改,主要修改两个:侧栏,播放器.

4.1 去除一些默认配置笔者直接把页脚与一些其他不需要的直接删除或者隐藏:

getById("rightMenu").style.display = "none";getById("footer").style.display = "none";getById("sideBar").style = "height:0;width:0;";var loginTips = getByClass("login_tips");if (loginTips.length != 0) loginTips[0].style.display = "none";123456其中getById就是document.getElementById,getByClass就是document.getElementsByClassName,你可能会问为什么不直接jQuery:

$("#rightMenu").remove();$("#footer").remove();12默认自带了2.2版本的jQuery,用了之后的效果很奇怪,chrome不一定每次都能删除成功,edge与手机测试完全不行,所以,没办法了,直接用原生的js.(顺便好好怀念一下很久没用的document.getElementById而不是$).

4.2 侧栏感觉原来的侧栏不怎么好看:

修改后:

笔者喜欢比较简洁的风格,只留下了一个头像与四个外链,其他什么日历,随笔,归档之类的全部去掉了,点击头像会跳转到首页.首先把原来的侧栏效果与日历什么的去掉,同时换背景

然后加入外链:

最后修改一下按钮事件,因为原来的设计话背景图片刚好把按钮给遮挡住了,设成半透明侧栏后,可以看到按钮:

因此需要把这个按钮给隐藏掉:

css:

4.3 播放器4.3.1 修改效果一开始的修改很简单,直接把fixed改成false就行,让播放器充满页脚:

原效果:

修改后:

但是想了一下感觉这个播放器还是太太太太大了(即使是原来的左下角的播放器,没办法笔者喜欢极简风格),原本想着用三个按钮代替就好了.然后笔者就去Iconfont找了一些按钮的图片:

然后…直接上图吧:

页脚只有一个播放图片,悬浮有平滑缩放效果,点击播放后会自动出现下一首与上一首,同时播放改成暂停,点击暂停后隐藏下一首与上一首按钮,并改暂停为播放.

4.3.2 准备图片这个不难,准备四个按钮的图片就好了:播放,暂停,下一首,上一首.笔者这里用的大小是32px*32px.

4.3.3 APlayer这个想法还是挺好的,但是一开始的时候并不知道怎么实现,加几个按钮倒是不难,css这些也不难加,问题是,找不到api.因为做出这个主题的大佬提供的是meting-js实现的播放器(官方github这里,目前319stars).

Quick Start这里很简单,引入js与css后,加一个meting-js的标签,然后改id就可以看到自己的歌单了.问题是…接口在哪?笔者需要的是播放/暂停的接口啊…(然后又胡乱找了一通资料,终于功夫不负什么人…)搜了一下资料得知Meting-js用的是APlayer(官方github这里,目前4.7k),看了一下APlayer的文档(可以戳这里),结合原来的提供的meeting-js,就直接添加了一个播放器了:

为了方便直接新建了一个html测试:

效果:

4.3.4 添加音乐因为什么音乐都没有添加,所以只有上面这种效果,看一下文档继续完善:

window.ap = new APlayer({ container: document.getElementById('aplayer'), loop: 'all',//列表循环 order: 'random',//播放顺序 listFolded: false,//播放列表折叠 audio: [ { name: '你的酒馆对我打了烊',//歌曲名 artist: '陈雪凝',//歌手 url: 'http://music.163.com/song/media/outer/url?id=1341964346.mp3',//音乐url cover: 'http://p1.music.126.net/LiRR__0pJHSivqBHZzbMUw==/109951163816225567.jpg?param=130y130',//封面 }, ]});1234567891011121314这里说一下封面与url如何获取,url很简单,首先拿到音乐的id:

然后url就是:

http://music.163.com/song/media/outer/url?id=xxxx.mp31封面的话,直接看源码,F12搜索

u-cover u-cover-6 f-fl1就可以看到img的src了.

回到测试的页面,就可以看到这首歌了:

由于笔者这个不需要把播放器显示出来,所以没必要加cover,name与artist,只需要url,而url只与id有关,所以准备一个音乐id列表,然后使用文档自带的list.add方法添加:

ap.list.switch是为了每次随机播放开始音乐,而不是每次固定某一首歌开始.

4.3.5 添加按钮这一步就是加上四个按钮了(实质是三个,播放/暂停只是图片更换),首先需要把新添加的播放器隐藏:

然后插入三张图片:

4.3.6 添加单击事件单击事件需要三个函数:

切换播放状态:toggle()上一首:skipBack()下一首:skipForward()还需要一个属性判断播放状态,用于显示播放/暂停图片以及上一首/下一首的显隐:

ap.audio.paused1返回是否暂停.

下一首与上一首的单击事件:

4.3.7 平滑旋转缩放用到了两个简单的css属性:transform与transition:

这样就大功告成了!

5 源码github码云

6 博客地址快来点我!!!————————————————版权声明：本文为CSDN博主「氷泠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_27525611/java/article/details/105568721