名字是easy和beautiful的结合，意味着这个主题是一个简单且美观的博客主题，EasyBe基于本人博客园目前所使用的皮肤和typecho的默认主题开发。
博客园的皮肤来源于BNDong
EasyBe以阅读为核心，尽可能的美化博客的显示效果，提高用户体验。- 支持响应，尺寸分别为：(1200px,∞px)，(960px,1200px]，(720px,960px]，(0px,720px]
- 页面效果
EasyBe
│
├─ 404.php
├─ README.md
├─ archive.php
├─ comments.php
├─ footer.php
├─ functions.php
├─ header.php
├─ index.php
├─ page.php
├─ post.php
├─ screenshot.png
├─ sidebar.php
└─ static
├─ css
│ ├─ baguetteBox.min.css
│ ├─ base.css
│ ├─ base.min.css
│ ├─ codeDesert.css
│ ├─ codeDoxy.css
│ ├─ codeObsidian.css
│ ├─ codePrettify.css
│ ├─ codeSunburst.css
│ ├─ gallery-clean.css
│ ├─ jquery.mCustomScrollbar.css
│ ├─ marvin.nav2.css
│ ├─ menu_bubble.css
│ └─ optiscroll.css
├─ imgs
│ ├─ comment_bg.jpg
│ └─ home_top_bg.jpg
└─ js
├─ MyTween.js
├─ RibbonsEffect.js
├─ ToProgress.min.js
├─ TweenMax.min.js
├─ articleStatement.js
├─ articleTitle.js
├─ baguetteBox.min.js
├─ base.js
├─ bootstrap.min.js
├─ circleMagic.js
├─ classie.js
├─ config.js
├─ css.min.js
├─ highlight.min.js
├─ jquery-2.2.0.min.js
├─ jquery.mCustomScrollbar.min.js
├─ jquery.optiscroll.js
├─ jquery.rotate.min.js
├─ loading.min.js
├─ main4.js
├─ marvin.nav2.js
├─ mouse-click.js
├─ require.min.js
├─ run_prettify.js
├─ snap.svg-min.js
└─ tools.js
首先您可以直接克隆或者fork该仓库
- 头像
- 昵称
- 职业
- 居住地
在设置外观中直接设置即可
设置外观全局配置中设置
<!-- global var -->
<script type="text/javascript">
//博客全局配置
window.cnblogsConfig = {
// ---- GitHub文件源配置 ----
GhUserName: 'wangyang0210',
GhRepositories: 'EasyBe',
GhVersions : '28232d480923b7543ab6dc84c14f0c5ee39815c3',
// ---- 基础信息配置 ----custom
blogUser : "。思索",
blogAvatar : "http://cache.wangyangyang.vip/12222222222222.jpg",
blogStartDate : "2019-8-1",
// ---- 菜单配置 ----
menuCustomList: {
},
// ---- 网站配置 ----
webpageTitleOnblur : "(◍´꒳`◍) Hi, MyFriend",
webpageTitleOnblurTimeOut : 500,
webpageTitleFocus : "(*´∇｀*) 欢迎回来！",
webpageTitleFocusTimeOut : 1000,
webpageIcon : "https://files.cnblogs.com/files/wangyang0210/blog_logo.gif",
// ---- 进度条配置 ----
progressBar: {
id : 'top-progress-bar',
color : '#77b6ff',
height : '2px',
duration: 0.2
},
// ---- Loading配置 ----
loading: {
rebound: {
tension: 16,
friction: 5
},
spinner: {
id: 'spinner',
radius: 90,
sides: 3,
depth: 4,
colors: {
background: '#f0f0f0',
stroke: '#272633',
base: null,
child: '#272633'
},
alwaysForward: true, // When false the spring will reverse normally.
restAt: 0.5, // A number from 0.1 to 0.9 || null for full rotation
renderBase: false
}
},
// ---- 页面动效配置 ----
homeTopAnimationRendered: true, // true || false ,是否渲染主页头图动效
homeTopAnimation: { // 主页头图动效设置
radius: 15,
density: 0.2,
color: 'rgba(255,255,255, .2)', // 颜色设置，“random” 为随机颜色
clearOffset: 0.3
},
essayTopAnimationRendered: true, // true || false ,是否渲染随笔页头图动效
essayTopAnimation: { // 随笔页头图动效设置
triW : 14,
triH : 20,
neighbours : ["side", "top", "bottom"],
speedTrailAppear : .1,
speedTrailDisappear : .1,
speedTriOpen : 1,
trailMaxLength : 30,
trailIntervalCreation : 100,
delayBeforeDisappear : 2,
colors: [
'#96EDA6', '#5BC6A9',
'#38668C', '#374D84',
'#BED5CB', '#62ADC6',
'#8EE5DE', '#304E7B'
]
},
bgAnimationRendered: true, // true || false ,是否渲染背景动效
backgroundAnimation : { // 背景动效设置
colorSaturation: "60%",
colorBrightness: "50%",
colorAlpha: 0.5,
colorCycleSpeed: 5,
verticalPosition: "random",
horizontalSpeed: 200,
ribbonCount: 3,
strokeSize: 0,
parallaxAmount: -0.2,
animateSections: true
},
// ---- 主页配置 ----
homeTopImg : [
"http://cache.wangyangyang.vip/wallhaven-vgykv8.png",
"http://cache.wangyangyang.vip/wallhaven-694674.jpg",
"http://cache.wangyangyang.vip/wallhaven-x1991d.jpg"
],
homeBannerText: "",
// ---- 随笔页配置 ----
essayTopImg: [
"http://cache.wangyangyang.vip/wall-bky.png"
],
essayCodeHighlightingType: 'highlightjs', // 代码主题插件类型：cnblogs || highlightjs || prettify
essayCodeHighlighting: 'monokai-sublime', // 代码高亮主题，具体主题参考文档
essaySuffix:{ // 随笔后缀处配置
aboutHtml : '', // 关于博主，不配置使用默认
copyrightHtml: '', // 版权声明，不配置使用默认
},
// ---- 页脚配置 ----
bottomBlogroll: [ // 友情链接，[[链接名,链接]....]
["王洋", 'http://www.wangyangyang.vip'],
["申请坑位", 'https://msg.cnblogs.com/send/wangyang0210'],
["申请坑位", 'https://msg.cnblogs.com/send/wangyang0210'],
["申请坑位", 'https://msg.cnblogs.com/send/wangyang0210'],
["申请坑位", 'https://msg.cnblogs.com/send/wangyang0210'],
],
bottomText: { // 页脚标语
icon: "❤️",
left: "学无止境",
right: "谦卑而行"
},
// ---- 控制台输出 ----
consoleList: [
['wangyang0210 CNBlogs', 'https://www.cnblogs.com/wangyang0210'],
['wangyang0210 GitHub', 'https://github.com/wangyang0210'],
['wangyang0210 Email', '[email protected]']
],
};
// start cache
$.ajaxSetup({cache: true});
// load loadingJs
$.getScript(getJsDelivrUrl('loading.js'), function () {
// Loading start
pageLoading.initRebound();
pageLoading.initSpinner();
pageLoading.spinner.init(pageLoading.spring, true);
$.getScript(getJsDelivrUrl('jquery.mCustomScrollbar.min.js'), function () {
$.getScript(getJsDelivrUrl('require.min.js'), function () {
$.getScript(getJsDelivrUrl('config.js'), function () {
var staticResource = [
'optiscroll', 'ToProgress', 'rotate',
'snapSvg', 'classie', 'main4', 'tools'];
require(staticResource, function() {
require(['base'], function() {
(new Base).init();
});
});
});
});
});
});
// get file url
function getJsDelivrUrl(file, directory) {
file = setFileNameMin(file, directory);
return 'https://cdn.jsdelivr.net/gh/'+(window.cnblogsConfig.GhUserName)+'/'+(window.cnblogsConfig.GhRepositories)+'@'+(window.cnblogsConfig.GhVersions)+'/static/' + (file ? file : '');
}
// optimization file name
function setFileNameMin(file, directory) {
if (typeof file == 'undefined') return '';
var suffix = null,fileArr = file.split('.');
if (fileArr.length > 0 && $.inArray(fileArr[(fileArr.length -1)], ['js', 'css']) != -1)
{suffix = fileArr.pop(); directory = suffix;}
file.search('.min') == -1 && fileArr.push('min');
suffix != null && fileArr.push(suffix);
return (typeof directory !== 'undefined' ? (directory + '/' + fileArr.join('.')) : (fileArr.join('.')));
}
</script>
本主题整合了两个代码高亮插件分别是：
使用第三方代码高亮插件，对页面加载速度有一定影响，大家自己权衡！
代码高亮主题的类型配置：essayCodeHighlightingType
| value | description |
|---|---|
| highlightjs | 使用 highlightjs 对代码进行渲染。 |
| prettify | 使用 code-prettify 对代码进行渲染。 |
配置代码高亮主题的配置为：essayCodeHighlighting
essayCodeHighlighting 可配置范围：
任意，此配置不会对渲染产生影响。
- essayCodeHighlightingType: 'highlightjs'
支持官方所有主题，样式参考：GoTo
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
- essayCodeHighlightingType: 'prettify'
支持官方所有主题，样式参考：GoTo
essayCodeHighlighting 可配置范围：
prettify
desert
sunburst
obsidian
doxy
本主题整合 CNZZ 网站统计，并对样式进行了优化。如果需要本功能，请首先去 CNZZ 配置网站的统计，然后修改下面的代码，添加至CNZZ统计配置中。
<span class="id_cnzz_stat_icon" id='cnzz_stat_icon_你的统计ID'></span>
<script src='https://s19.cnzz.com/z_stat.php?id=你的统计ID&online=1&show=line' type='text/javascript'></script>本主题整合 备案信息,如果需要本功能,请首先去全国互联网管理平台备案, 然后修改西面代码, 添加至备案信息配置中
<div style="width:300px;margin:0 auto; padding:20px 0;">
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=你的备案号" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
<img src="http://cache.wangyangyang.vip/beian_icon.png" style="float:left;">
<p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">你的备案信息</p>
</a>
</div>1. fix - 评论回复
2. 评论回复增加@
3. 更新文档
1. 增加设置备案信息
2. fix-出处链接自适应
1. fix-代码高亮
1. 主题制作完成
2. 修复小BUG
内容页完成
1. 评论区域
2. 文章区域
首页内容基本完成
1. 样式
2. 特效
3. 展示
1.首页内容
2.侧边导航内容
1. 项目重构
1. 项目建立
2. 修改目录结构
使用该主题,请注明来源