1 overview
Blogging is something that, I don’t know, can do some good. There are many similar blogging platforms in China, such as CSDN, Blog Park, Nuggets, Open Source China,SegmentFault,51CTO, Jianshu and so on. There are also personal blogging clients such as Leanote(cross-platform, open source,Github currently 9.3K, free for one month, lots of themes) and using Github Pages builds a blog client, such as Gridea(free, a static blog writing client, currently 5.3K on Github, not a lot of topics, see this article for a tutorial on how to build a blog).
Of course, you can also start from WordPress. WordPress is a blog platform developed by PHP. It is very powerful, but you need to buy your own server, domain name and certificate.
- Quick: Take advantage of frameworks that others have already built
- Free: you don’t need to buy a server, a domain name, etc., and of course you can’t do without Github
- Good-looking: use others to do the theme, of course you can magic change,emmmm….
This is the blog with the custom theme function provided by blogpark. Above, this is the blog of the original blogger:
2 implementation
Since this big guy has put the theme of the code open source,Github here, so directly according to the document to use the line.
2.1 Blog Park Settings
First go to blog park to register an account, and then open js permission in blog Settings:
2.2 copy
Go to Github and copy the code and switch to the latest TAB, which is currently 1.2.9:
<script type="text/javascript">
window.cnblogsConfig = {
GhVersions : 'v1.2.9'./ / version
blogUser : "userName"./ / user name
blogAvatar : "https://xxxx.png".// User profile picture
blogStartDate : "2016-11-17".// Time of admission, year - month - day. Method of viewing the Entering time: Hover the mouse over the entering time, and the entering time is displayed
}
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js"></script>
Copy the code
2.3 test
You can open up your own website to see, for example, if you haven’t changed anything:
3 the personalized
Well, that’s the point of the article.
3.1 Basic Information
In the window. The cnblogsConfig:
- User name: blogUser
- User avatar :blogAvatar
- Entry time :blogStartDate
3.2 the label
- Lost focus tag text :webpageTitleOnBlur
- Loses focus changes delay: webpageTitleOnBlurTimeOut
- Get the focus tag text :webpageTitleFocus
- Get focus changes delay: webpageTitleFocusTimeOut
- Label icon :webpageIcon
Add this to cnblogsConfig:
window.cnblogsConfig={
webpageTitleOnblur: '(o゚v゚) Blue Hi'.webpageTitleOnblurTimeOut: 500.webpageTitleFocus: '(*´∇ '*) Welcome back! '.webpageTitleFocusTimeOut: 1000.webpageIcon: "https://xxxxx.xxxx"
};
Copy the code3.3 Day and Night Mode
window.cnblogsConfig={
switchDayNight:
{
enable:true.// Enable the toggle button
auto:
{
enable:true// Enable automatic switchover
dayHour:5// Day mode start time, integer,24 hours
nightHout:19// Similar to above, night}}};Copy the code3.4 the icon
This theme uses the icon on Iconfont, you can use your own custom extension icon, enter Iconfont first, select your favorite icon for collection, and then create a new project if there is no project, add to the project if there is:
window.cnblogsConfig={
fontIconExtend:"//at.alicdn.com/t/xxxx.css"};Copy the code3.5 the menu
Using menuCustomList contains:
window.cnblogsConfig={
menuCustomList:
{
"Title":
{
"data": [["name1"."url1"],
["name2"."url2"]],},"icon":"Icon name in Fonticon, need to be introduced in previous step"}};Copy the codeLike the author’s:
menuCustomList:
{
"Zhihu":
{
"data": [["Cold wine"."https://www.zhihu.com/people/blue-69-47"]],"icon":"icon-zhihu"
},
"Github":
{
"data": [["bingling"."https://github.com/2293736867"]],"icon":"icon-Github1"}},Copy the codeMenu navigation with menuNavList:
window.cnblogsConfig = {
menuNavList: [['name1'.'url1'],
['name2'.'url2']],}Copy the codeDefault is under “manage” :
window.cnblogsConfig = {
menuUserInfoBgImg: 'https://xxx,jpg',}Copy the codeBut it seems a little…..
3.6 the progress bar
window.cnblogsConfig = {
progressBar: {
color : '#77b6ff'.height : '2px'.duration: 0.2.// The unit is s, which is the time for the progress bar to move to the corresponding position after the page slides. For example, when the page slides from 0 to 50%, the progress bar takes 0.2s to move from 0 to 50%}},Copy the code3.7 Loading
Here is the configuration of the graphic rotation that the page just entered.
loading:
{
rebound: {// The following two controls control the rotation speed
tension: 16.friction: 5,},spinner: {
id: 'spinner'.radius: 90.// Graph radius controls graph size
sides: 3.// Number of sides,3 is a triangle,4 is a square
depth: 4.// Depth is how many shapes are stacked and rotated
colors: {
background: '#f0f0f0'.// The background of the entire page
stroke: '# 272633'.// Rotate the color of the graphics edge
base: null.// The color of the original position, for example if set to red, the position before rotation will have a red shape (depending on the sides,n shape), but it looks like...
child: '# 272633'.// Rotate the color of the graph
},
alwaysForward: true.// False will add a little bit of a roundabout effect, since the speed is too fast it will not make much difference if set to true/false
restAt: 0.5.//0.1-0.9,null indicates full rotation
renderBase: false.// Set this to true if base is set above}}Copy the codeThe default loading:
window.cnblogsConfig = {
loading: {
rebound: {
tension: 16,},spinner: {
id: 'spinner'.radius: 90,}}}Copy the code3.8 dynamic effect
3.8.1 Home Page (Bubble Effect)
Open:
window.cnblogsConfig = {
homeTopAnimationRendered: true./ / true by default
}
Copy the codeSettings:
window.cnblogsConfig = {
homeTopAnimation: {
radius: 15./ / radius
density: 0.2.// The greater the density, the more dense
color: 'rgba (255255255, 2)'.// Color Settings. "random" indicates a random color
clearOffset: 0.3.// Move the percentage to the bottom of the page}},Copy the code3.8.2 article page
Open:
window.cnblogsConfig = {
essayTopAnimationRendered: true,}Copy the codeSettings:
window.cnblogsConfig = {
essayTopAnimation: {
triW : 14.// Triangle width
triH : 20./ / high
neighbours: ["side"."top"."bottom"].// Random neighbor triangle position, triangle placed vertically
speedTrailAppear : 1..// Path occurrence speed
speedTrailDisappear : 1..// Path vanishing speed
speedTriOpen : 1.// If the time is fast, the path will be opened quickly; if the time is slow, the path will disappear before it is fully opened
trailMaxLength : 30.// Maximum path length
trailIntervalCreation : 100.// Interval between path creation, in ms
delayBeforeDisappear : 2.// Delay for 2s before vanishing
colorsRandom: false.// Whether to enable random color, in fact, I think it is not very good to enable random color.
colors: [
// The triangle color is randomly selected from the eight colors. If there are less than eight customized colors, the default value will be used to fill the eight colors
// You can also directly add your own color on the basis of eight, it is recommended to match the background setting
'#96EDA6'.'#5BC6A9'.'#38668C'.'#374D84'.'#BED5CB'.'#62ADC6'.'#8EE5DE'.'#304E7B',}}Copy the code3.8.3 Page Background
Open:
window.cnblogsConfig = {
bgAnimationRendered: true,}Copy the codeSettings:
window.cnblogsConfig = {
backgroundAnimation: {
colorSaturation: "60%".// Color saturation
colorBrightness: "50%".// Color brightness
colorAlpha: 0.5.// Color transparency
colorCycleSpeed: 5.// Color cycle speed, slow will be the same color, fast will be similar to rainbow effect (for each ribbon)
verticalPosition: "random".// Random vertical position
horizontalSpeed: 200.// Horizontal movement speed
ribbonCount: 3.// Number of "folds"
strokeSize: 0.// It is recommended to adjust the size of the stroke to a smaller size. If you increase the size, there will be a more obvious straight line trace
parallaxAmount: 0.2.// This is not clear
animateSections: true// Whether to disconnect. True: Disconnect}},Copy the code3.9 the home page
3.9.1 pictures
Image:
window.cnblogsConfig = {
homeTopImg: [
"https://xxx.png"."https://xxx.png"],}Copy the codeIf there are more than one, refresh one at a time randomly.
3.9.2 slogan
window.cnblogsConfig = {
homeBannerText: "text",}Copy the codeDefault is empty, each time automatically obtain, after setting will be fixed display. Slogan source can choose one sentence per day or one sentence per time:
window.cnblogsConfig = {
homeBannerTextType: "one".// One sentence per day, another value is jinrishici, one sentence per time
}
Copy the code3.10 the article page
3.10.1 banner
window.cnblogsConfig = {
essayTopImg: [
"https://xxx.png"."https://xxx.png"],}Copy the codeIf you have more than one, one at a time.
3.10.2 article tail
window.cnblogsConfig = {
essaySuffix: {
codeImgUrl : ' './ / on the left side of the picture Settings, configuration not use Windows. CnblogsConfig. BlogAvatar
aboutHtml : 'About the blogger'.// Use default if not configured
copyrightHtml: 'Copyright Notice'.// Copyright notice, use default if not configured
supportHtml : 'Solidarity with bloggers'.// Support bloggers, do not configure the default use}},Copy the code
3.11 exceptional
window.cnblogsConfig = {
reward: {
enable: true./ / open
wechatpay: 'url'.// wechat payment code url
alipay: 'url'.// Alipay payment code URL}},Copy the codeWill be in the lower right corner:
3.12 code
3.12.1 Limit height
window.cnblogsConfig = {
codeMaxHeight: true,}Copy the codeThe height of the code box should not exceed 70% of the page viewable area. The hidden part can be viewed by scrolling, which is disabled by default.
3.12.2 Unified Style Setting
window.cnblogsConfig = {
essayCode: {
fontFamily: "'Ubuntu Mono',monospace"/ / font
fontSize: "16px"./ / size}},Copy the codeThe big guy says these are the only two Settings available.
3.12.3 highlight
The document provides three ways of highlighting: the default blogosphere highlighting, highlightJS and Prettify. The second, first style…. is recommended B: well… The third option is currently available in only five styles:
window.cnblogsConfig = {
essayCodeHighlightingType: "highlightjs".essayCodeHighlighting: "Choose a favorite topic from the list below.",}Copy the codeDefault, 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-littoral -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-Plateau-Light , atelier-Savanna -dark, atelier-Savanna -light, atelier-seaside-dark, atelier-Savanna -light , Atelier-Sulfururpool-dark, Atelier-Sulfururpool-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, Kimbi. dark, Kimbi. light, Lightfair , Magula, Mono-Blue, Monokai-sublime, Monokai, Nord, Obsidian, Ocean, Paraiso-Dark, Paraiso-Light, Pojoaque , PureBasic, QtCreator_dark, QtCreator_Light, Railscasts, Rainbow, Routeros, Schoolbook, and sands-of-Purple , Solarized -dark, Solarized -light, Sunburst, Tomorrow -night-blue, tomorrow-night-bright Tomorrow-night-eighties, tomorrow-night, Tomorrow, VS, VS2015, Xcode, XT256, ZenburnCopy the codeYou can view the results online here.
Here is the author’s code configuration:
codeMaxHeight: true.essayCode: {
fontFamily: "Fira Code".fontSize: "14px",},essayCodeHighlightingType: "highlightjs".essayCodeHighlighting:"monokai-sublime".Copy the codeThe theme is Monokai (I have to say it’s a beautiful theme), 14px should be enough, the font is Fira Code, just a non-equal sign (it looks really cool):
3.13 the footer
3.13.1 style
window.cnblogsConfig = {
footerStyle: 1.//1 or 2, default 2
}
Copy the codeProvide two styles,1 or 2 can be selected, the effect is not screenshots.
3.13.2 friend chain
window.cnblogsConfig = {
bottomBlogroll:
["name1".'url1'],
["name2".'url2']],}Copy the code3.13.3 slogan
window.cnblogsConfig = {
bottomText: {
icon: "❤ ️".left : "Flush and flush.".right: "Keep going.",}}Copy the code
3.14 Console output
window.cnblogsConfig = {
consoleList: [['name1'.'url1'],
['name2'.'url2']],}Copy the code
The 3.15 player
Add to 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>
Copy the codeChange the ID into the ID of NetEase Cloud Music. To obtain THE ID, click your playlist to generate an external link player.
4 this is called custom modification
Well, those are the simple configuration options provided by the original author. Here are the real custom modifications, mainly two changes: sidebar and player.
4.1 Remove some default configurations
I directly put the footer and some other unnecessary directly delete or hide:
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";
Copy the codeOne of getById is the document. The getElementById getByClass is the document. The getElementsByClassName, you may ask why not direct jQuery:
$("#rightMenu").remove();
$("#footer").remove();
Copy the codeChrome is not always able to delete it successfully. Edge and mobile testing are completely useless, so I have no choice but to use native JS. .
4.2 the sidebar
The original sidebar didn’t look so good:
The author prefers a simple style, leaving only one profile picture and four external links. Other calendars, essays and archives are all removed, and clicking the profile picture will jump to the home page. First of all, remove the original sidebar effects and calendar, and change the background
The 4.3 player
4.3.1 Modification Effect
The initial change is simple, just change fixed to false and fill the player footer:
4.3.2 Preparing pictures
It’s not hard. Just have a picture of four buttons: Play, pause, next, previous. The size I used is 32px by 32px.
4.3.3 APlayer
It was a good idea, but at first I didn’t know how to implement it. It was easy to add a few buttons, CSS, etc. The problem was, I couldn’t find the API. Because the guy who made this theme is providing the meting-js implementation player (official here on github, currently 319stars).
here
here
4.3.4 Adding music
Since no music has been added, only the above effect is available. Check the documentation for further refinement:
window.ap = new APlayer({
container: document.getElementById('aplayer'),
loop: 'all'.// List loop
order: 'random'.// Play order
listFolded: false.// Playlist collapse
audio: [
{
name: 'Your tavern is closed for me.'./ / song name
artist: 'Chen Xue ning'./ / singer
url: 'http://music.163.com/song/media/outer/url?id=1341964346.mp3'./ / music url
cover: 'http://p1.music.126.net/LiRR__0pJHSivqBHZzbMUw==/109951163816225567.jpg?param=130y130'./ / cover}]});Copy the codeHere is how to obtain the cover and URL,url is very simple, first get the id of the music:
http://music.163.com/song/media/outer/url?id=xxxx.mp3
Copy the codeCover words, directly look at the source code,F12 search
u-cover u-cover-6 f-fl
Copy the codeYou can see the img SRC.
4.3.5 Adding a Button
This step is to add four buttons (actually three, play/pause is just the image change). First, we need to hide the new player:
4.3.6 Adding a Click event
Clicking an event requires three functions:
- Toggle ()
- A: on skipBack ()
- A: under skipForward ()
You also need an attribute to determine the play state, which shows the play/pause image and the last/next track:
ap.audio.paused
Copy the codeReturns whether to pause.
4.3.7 Smooth rotation scaling
Two simple CSS properties are used :transform and transition:
5 source
Making code cloud
6 Blog Address
Get me quick!!