1 Overview
Such things as blogs, how to say, write more, there will always be benefits. There are many similar blog platforms in China, such as CSDN, blog park, Nuggets, open source China, SegmentFault, 51CTO, Jianshu, etc. There are also some personal blog clients, such as Leanote (cross-platform, open source, Github is currently 9.3k, personal free for a month, there are many themes), and there are clients that use Github Pages to build blogs, such as Gridea (free, (A static blog writing client, Github is currently 5.3k, and the theme is not much, you can see this author's article for the construction tutorial ).
Of course, you can also start building from WordPress yourself. WordPress is a blog platform developed by PHP. It is very powerful, but you need to buy the server yourself, buy the domain name, and buy the certificate. The steps are relatively cumbersome
. This article is mainly to teach you how to get a "free" + "good-looking" personal blog site "quickly".
- Fast: use frameworks that others have built
- Free: No need to buy a server, domain name, etc., of course, it is inseparable from the universal Github
- Good-looking: Use the themes made by others, of course you can change it yourself, emmmm ...
Here is a blog with a custom theme function provided by the blog garden.The first picture is above. This is the original blogger's blog: 
maybe the static picture looks a bit monotonous, then come a few gifs:
2 Implementation
Since this big guy has open sourced the theme code, Github here , so just use it directly according to the documentation.
2.1 Blog Park Settings
First go to the blog park to register an account, and then open the js permission in the blog settings:
change the skin to SimpleMemory:
disable the template's default CSS:
then open the announcement in the options:
2.2 Copy
Go to github to copy the code and switch to the latest
tag.It is currently 1.2.9: copy base.min.css under src / style to your own page custom CSS:
copy the following code to the blog sidebar announcement:
<script type="text/javascript">
window.cnblogsConfig = {
GhVersions : 'v1.2.9', // 版本
blogUser : "userName", // 用户名
blogAvatar : "https://xxxx.png", // 用户头像
blogStartDate : "2016-11-17", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
}
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js"></script>
2.3 Test
You can open your own website to see, for example, have not modified anything:
3 Personalization
Well, this is the focus of the article. (The following is a tutorial of the document, the official document can be poke here )
3.1 Basic information
In window.cnblogsConfig:
- User name: blogUser
- User avatar: blogAvatar
- Entrance time: blogStartDate
3.2 Label
- Lost focus label text: webpageTitleOnBlur
- Lost focus change delay: webpageTitleOnBlurTimeOut
- Get focus label text: webpageTitleFocus
- Get focus change delay: webpageTitleFocusTimeOut
- Label icon: webpageIcon
Just add it to the cnblogsConfig above:
window.cnblogsConfig={
webpageTitleOnblur: '(oﾟvﾟ)ノ Hi',
webpageTitleOnblurTimeOut: 500,
webpageTitleFocus: '(*´∇｀*) 欢迎回来！',
webpageTitleFocusTimeOut: 1000,
webpageIcon: "https://xxxxx.xxxx"
};
3.3 Day and night mode
window.cnblogsConfig={
switchDayNight:
{
enable:true,//开启切换按钮
auto:
{
enable:true//开启自动切换
dayHour:5//日间模式开始时间,整数,24小时制
nightHout:19//类似上面,夜间
}
}
};
3.4 Icon
This theme uses icons on Iconfont. You can use your own custom extended icons. Enter Iconfont first , select your favorite icon for collection, then create a new project if there is no project, and add to the project if there is an item:
Then click on your own collection :
New / Add to project:
Select Font class, view and generate link:
Add to fontIconExtend:
window.cnblogsConfig={
fontIconExtend:"//at.alicdn.com/t/xxxx.css",
};
3.5 Menu
Use menuCustomList to contain:
window.cnblogsConfig={
menuCustomList:
{
"标题":
{
"data":
[
["name1","url1"],
["name2","url2"]
],
},
"icon":"Fonticon中的icon名字,需要前一步引入"
},
};
For example, the author's:
menuCustomList:
{
"知乎":
{
"data":
[
["氷泠酒","https://www.zhihu.com/people/blue-69-47"],
],
"icon":"icon-zhihu"
},
"Github":
{
"data":
[
["bingling","https://github.com/2293736867"]
],
"icon":"icon-Github1"
}
},
MenuNavList for menu navigation:
window.cnblogsConfig = {
menuNavList: [
['name1', 'url1'],
['name2', 'url2'],
],
}
The default is under "Administration":
Background:
window.cnblogsConfig = {
menuUserInfoBgImg: 'https://xxx,jpg',
}
But it seems a bit ...
3.6 Progress bar
window.cnblogsConfig = {
progressBar: {
color : '#77b6ff',
height : '2px',
duration: 0.2,//单位s,是页面滑动后进度条移动到相应位置的时间,比如页面从0滑动到50%,进度条花0.2s从0到达50%
},
}
3.7 Loading
Here is the configuration of the graphic rotation that the page just entered.
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
}
}
Default loading:
window.cnblogsConfig = {
loading: {
rebound: {
tension: 16,
},
spinner: {
id: 'spinner',
radius: 90,
}
},
}
3.8 Animation
3.8.1 Homepage (Bubble Effect)
Open:
window.cnblogsConfig = {
homeTopAnimationRendered: true,//默认true
}
Set up:
window.cnblogsConfig = {
homeTopAnimation: {
radius: 15,//半径
density: 0.2,//密度,越大越密
color: 'rgba(255,255,255, .2)', // 颜色设置，“random” 为随机颜色
clearOffset: 0.3,//移动到距离页面底部百分比多少就消除
},
}
3.8.2 Article page
Open:
window.cnblogsConfig = {
essayTopAnimationRendered: true,
}
Set up:
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'
],
},
}
3.8.3 Page background
Open:
window.cnblogsConfig = {
bgAnimationRendered: true,
}
Set up:
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为断开
},
}
3.9 Home
3.9.1 Picture
image:
window.cnblogsConfig = {
homeTopImg: [
"https://xxx.png",
"https://xxx.png"
],
}
If more than one, refresh one randomly at a time.
3.9.2 Slogan
window.cnblogsConfig = {
homeBannerText: "text",
}
The default is empty, and it will be automatically obtained every time, and will be displayed after it is set. The
source of the slogan can be selected one sentence per day or one sentence at a time:
window.cnblogsConfig = {
homeBannerTextType: "one",//每日一句,另一个取值为jinrishici,每次一句古诗词
}
3.10 Article page
3.10.1 banner
window.cnblogsConfig = {
essayTopImg: [
"https://xxx.png",
"https://xxx.png"
],
}
If you have more than one, you can choose one at a time.
3.10.2 End of article
window.cnblogsConfig = {
essaySuffix: {
codeImgUrl : '', //左侧图片设置，不配置使用 window.cnblogsConfig.blogAvatar
aboutHtml : '关于博主', // 关于博主，不配置使用默认
copyrightHtml: '版权声明', // 版权声明，不配置使用默认
supportHtml : '声援博主', // 声援博主，不配置使用默认
},
}
3.11 Reward
window.cnblogsConfig = {
reward: {
enable: true,//开启
wechatpay: 'url',//微信收款码url
alipay: 'url',//支付宝收款码url
},
}
Will be in the lower right corner:
3.12 Code
3.12.1 Restricted height
window.cnblogsConfig = {
codeMaxHeight: true,
}
The height of the code box will not exceed 70% of the visible area of the page.The hidden part is viewed by scrolling, and it is not turned on by default.
3.12.2 Unified style setting
window.cnblogsConfig = {
essayCode: {
fontFamily: "'Ubuntu Mono',monospace"//字体
fontSize: "16px",//大小
},
}
Gangster said that currently there are only these two settings.
3.12.3 Highlight
The document provides three highlighting methods, one is the default highlighting method of the blog garden, one is rendering through highlightjs, and one is rendering through prettify.It is recommended to use the second, first style ... .... The third type currently has only five styles to choose from:
with highlighjs, add:
window.cnblogsConfig = {
essayCodeHighlightingType: "highlightjs",
essayCodeHighlighting: "从下面列表选择喜欢的主题",
}
default、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、zenburn
The effect can be viewed online here .
The following is the author's code configuration:
codeMaxHeight: true,
essayCode: {
fontFamily: "Fira Code",
fontSize: "14px",
},
essayCodeHighlightingType: "highlightjs",
essayCodeHighlighting:"monokai-sublime",
The theme uses monokai (have to blow this theme is really beautiful), the size of 14px should be enough, the font is Fira Code, if you don't want anything, just want an inequality sign (it looks really cool):
3.13 footer
3.13.1 Style
window.cnblogsConfig = {
footerStyle: 1,//1或2,默认2
}
Two styles are provided, 1 or 2 can be selected, and the effect will not be screenshot.
3.13.2 Friendship
window.cnblogsConfig = {
bottomBlogroll:
["name1", 'url1'],
["name2", 'url2'],
],
}
3.13.3 Slogan
window.cnblogsConfig = {
bottomText: {
icon: "❤️",
left : "冲冲冲",
right: "继续冲",
},
}
By default, it will be between square brackets.
3.14 Console output
window.cnblogsConfig = {
consoleList: [
['name1', 'url1'],
['name2', 'url2'],
],
}
3.15 Player
Add in footer:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js
id="594243151"
lrc-type="0"
server="netease"
order="random"
type="playlist"
fixed="true"
list-olded="true">
</meting-js>
Replace the id with the ID of your own NetEase Cloud Music.
Get the id: Click on your own playlist to generate an external link player,
followed by 0 is your own id.
4 This is called custom modification
Well, those above are the simple modification configuration options provided by the original author.These are called real custom modifications.There are two main modifications: the sidebar and the player.
4.1 Remove some default configurations
The author directly deletes or hides the footer and some other unwanted ones directly:
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";
Where getById is document.getElementById and getByClass is document.getElementsByClassName, you may ask why not directly jQuery:
$("#rightMenu").remove();
$("#footer").remove();
The default version comes with 2.2 version of jQuery. After using it, the effect is very strange. Chrome may not be able to delete successfully every time. Edge and mobile phone testing are completely impossible. Therefore, there is no way to use native js directly. Look at document.getElementById instead of $ for a long time.
4.2 Sidebar
I feel that the original sidebar is not very beautiful:
after modification:
The author likes a more concise style, leaving only an avatar and four external links, all other calendars, essays, archives and the like are all removed, click on the avatar will jump to the home page.
First of all, the original sidebar effect and calendar Remove it, change the background at the same time, and
then add the external link:
Finally, modify the button event, because the original design just happened to block the button, after setting it to a translucent sidebar, you can see the button:
so you need to change The button is hidden:
css:
4.3 Player
4.3.1 Modification effect
The initial modification is very simple, just change the fixed to false to fill the footer of the player: the
original effect:
modified:
but after thinking about it, the player is still too big (even the original bottom left corner of the playback) There is no way for the author to like the minimalist style), I originally thought of replacing it with three buttons. Then I went to Iconfont and found some pictures of the buttons:
Then ... directly on the picture:
there is only one playback picture in the footer, The suspension has a smooth zoom effect. After clicking play, the next and previous songs will automatically appear.At the same time, the playback is changed to pause.After clicking the pause, the next and previous buttons are hidden, and the pause is changed to play.
4.3.2 Prepare pictures
This is not difficult, just prepare the pictures of the four buttons: play, pause, next song, previous song. The size I used here is 32px * 32px.
4.3.3 APlayer
The idea is quite good, but the beginning of time did not know how to achieve, plus a few buttons has not been difficult, css is not difficult to add these, the question is, can not find the api.
Because the chiefs made the subject provided It is a player implemented by meeting-js (official github here , currently 319stars).
Quick Start is very simple here. After introducing js and css, add a label of meeting-js, and then change the id to see your own playlist .
the problem is that the interface .... where?
I need is to play / pause interface ah ....
(then casually looking for a pass information, and finally work pays what people ...)
found a bit of information that Meting-js uses APlayer (official github here , currently 4.7k), took a look at APlayer's documentation (you can poke here ), combined with the original provided meeting-js, a player is directly added:
for convenience and direct A new html test has been created:
effect:
4.3.4 Add music
Because no music is added, only the above effect is seen.Look at the documentation to continue to improve:
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',//封面
},
]
});
Here is how to get the cover and url. The url is very simple. First get the id of the music:
then the url is:
http://music.163.com/song/media/outer/url?id=xxxx.mp3
For the cover, look directly at the source code, F12 search
u-cover u-cover-6 f-fl
You can see the img src.
Back to the test page, you can see this song:
Since the author does not need to display the player, there is no need to add cover, name and artist, only url, and url is only related to id, so prepare one Music id list, and then add it using the list.add method that comes with the document:
ap.list.switch is to start the music every random play, not to start a fixed song every time.
4.3.5 Add button
This step is to add four buttons (essentially three, play / pause is just a picture replacement), first need to hide the newly added player:
Then insert three pictures:
4.3.6 Add Click Event
Three functions are required for click events:
- Switch playback state: toggle ()
- Previous: skipBack ()
- Next song: skipForward ()
An attribute is also needed to determine the playback status, which is used to display the playback / pause picture and the display / hide of the previous / next song:
ap.audio.paused
Return whether to pause.
Click event of next and previous song:
4.3.7 Smooth rotation zoom
Two simple css attributes are used: transform and transition:
so you're done!
