博客园整体样式备份(monokai)
Posted mybilibili
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了博客园整体样式备份(monokai)相关的知识，希望对你有一定的参考价值。
monokai
a
color: #2d8cf0;
.day
border: none;
.day:hover
border: none;
body
background: none;
#navigator
display: block;
z-index: 500;
width: 100%;
font-size: 14px;
background: #fff;
color: rgba(0, 0, 0, 0.44);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
box-sizing: border-box;
top: 0;
border: none;
#navigator:after
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.07);
display: block;
position: absolute;
top: 60px;
color: rgba(0, 0, 0, 0.07);
content:"";
width: 100%;
height: 2px;
#navigator li > a
font-size: 18px;
color: #c7c7c7;
cursor: pointer;
text-shadow: none !important;
#navList
width: 1000px;
#main
width: 1000px;
#mainContent
width: 690px;
#navList a:link
color: #2d2d2f !important;
text-shadow: none !important;
#blog-calendar
display: none;
#blogTitle
display: none;
#sidebar_recentcomments
display: none;
#sidebar_scorerank
display: none;
#sidebar_recentposts
display: none;
a:link
color: #2d8cf0;
.catListTitle
background-color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.0785);
font-weight: bold;
font-size: 16px;
color: #2d2d2f;
.sidebar-block h3
background-color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.0785);
font-weight: bold;
font-size: 16px;
color: #2d2d2f;
.sidebar-block ul
border: none;
.sidebar-block ul li
border: none;
#blog-calendar
display: none !important;
#cnblogs_post_body
color: #111;
font-size: 15px;
#cnblogs_post_body img
max-height: 400px;
#under_post_kb
display: none;
#cnblogs_c2
display: none;
#cnblogs_c1
display: none;
#under_post_news
display: none;
#ad_t2
display: none;
#profile_block
border: none;
#profile_block:hover
border: none;
#cnblogs_post_body li
line-height: 30px;
#catalog > h1
font-size: 24px;
font-weight: bold;
line-height: 1.5;
margin: 10px 0;
color:#111;
/* #cnblogs_post_body h2
font-size: 22px;
margin: 15px 0;
padding: 5px 0;
background-color: #169fe6;
border: 1px solid #169fe6;
color: #fff;
border-radius: 4px;
text-indent: 5px;
*/
#cnblogs_post_body h2
font-size: 22px;
color: #111;
#cnblogs_post_body h3
font-size: 20px;
color: #111;
#cnblogs_post_body h4
font-size: 18px;
color:#111;
#cnblogs_post_body h5
font-size: 16px;
color: #111;
#cnblogs_post_body h6
font-size: 16px;
color: #5c5c5c;
img
margin-top: 10px;
#topics
border: none;
#topics .postBody blockquote
padding: 10px 20px !important;
margin-top: 10px;
#topics .postBody blockquote
padding: 20px;
margin-bottom: 25px;
background-color: #f7f7f7;
border-left: 6px solid #b4b4b4;
word-break: break-word !important;
word-break: break-all;
font-size: 16px;
font-weight: 400;
line-height: 30px;
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs
max-height: 480px;
#cnblogs_post_body ol, #cnblogs_post_body ul
margin-top: 1.6em;
margin-bottom: 1.6em;
margin: 0 20px;
line-height: 1.6em;
#catalog > ul li
margin-bottom: 5px;
list-style-type: disc;
#catalog > ul
margin-top: 1.6em;
margin-bottom: 1.6em;
margin: 0 20px;
line-height: 1.6em;
#catalog > ul a
font-size: 14px;
code
margin: 5px 0 !important;
#catalog a
text-decoration: none !important;
font-weight: bold;
color: #555;
white-space: nowrap;
#catalog a:hover
text-decoration: none !important;
#sideBarMain
position: relative;
html::-webkit-scrollbar
/*滚动条整体样式*/
width: 6px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
html::-webkit-scrollbar-thumb
/*滚动条里面小方块*/
border-radius: 4px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #555;
html::-webkit-scrollbar-track
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 1);
border-radius: 4px;
background: #ededed;
code::-webkit-scrollbar
/*滚动条整体样式*/
width: 6px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
code::-webkit-scrollbar-thumb
/*滚动条里面小方块*/
border-radius: 4px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #555;
code::-webkit-scrollbar-track
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 1);
border-radius: 4px;
background: #ededed;
.cnblogs-markdown .hljs
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f !important;
max-height: 1200px;
border-radius: 5px;
font-size: 14px !important;
color: #fff;
/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
.hljs
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f;
.hljs, .hljs-tag, .hljs-subst
color: #f8f8f2;
.hljs-strong, .hljs-emphasis
color: #a8a8a2;
.hljs-bullet, .hljs-quote, .hljs-number, .hljs-regexp, .hljs-literal, .hljs-link
color: #ae81ff;
.hljs-code, .hljs-title, .hljs-section, .hljs-selector-class
color: #a6e22e;
.hljs-strong
font-weight: bold;
.hljs-emphasis
font-style: italic;
.hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-attr
color: #f92672;
.hljs-symbol, .hljs-attribute
color: #66d9ef;
.hljs-params, .hljs-class .hljs-title
color: #f8f8f2;
.hljs-string, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-selector-id, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition, .hljs-variable, .hljs-template-variable
color: #e6db74;
.hljs-comment, .hljs-deletion, .hljs-meta
color: #75715e;
/****思维导图样式*****/
#LiuChengTu
width: 100%;
display: none;
min-height: 1150px;
opacity: 0;
svg#mindmap
width: 100%;
height: 100%;
.markmap-node
cursor: pointer;
.markmap-node-circle
fill: #fff;
stroke-width: 1.5px;
.markmap-node-text
fill: #000;
font: 10px sans-serif;
.markmap-link
fill: none;
侧边栏
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script>
(function($)
addFirstSide($);
addTimeToHead();
addSideToLeft();
)(window.jQuery);
function addFirstSide($)
function Catalog(element, options)
this.$parentEle = $(element);
this.$catalog_container = $("<div>");
this.$catalog_title = $("<h1>");
this.$ul_container = $("<ul>");
this.$control_a = $("<button>");
this.titleReg = /^h[1-6]$/;
this.static = true;
this.init(this);
Catalog.prototype =
init: function(self)
// 组合目录容器和标题等
self.$catalog_title.text("快速目录");
self.$catalog_container
.attr("id", "catalog")
.append(self.$catalog_title);
//.append(self.$control_a.attr("class", "control_btn").text("-"));
// 查找文章中所有的h1、h2、h3标签
// 生成目录列表插入目录容器中
var $childrens = self.$parentEle.children();
if ($childrens && $childrens.length > 0)
self.$parentEle.children().each(function()
if (self.titleReg.test(this.tagName.toLowerCase()))
var num = this.tagName.toLowerCase().split("")[1];
num = Number(num) - 2;
$(this).append("<a href='#catalog' class='title_back'></a>");
self.$ul_container.append(self.list(this, num));
);
// 替换为目录
$("#cnblogs_post_body").prepend(
"<p class='mulu'>我是将要替换的目录</p>"
);
$("#cnblogs_post_body .mulu").replaceWith(
self.$catalog_container.append(self.$ul_container)
);
// 添加目录收缩功能
$("#catalog > button").on("click", function()
$("#catalog ul").toggle();
$(event.target).text(self.static ? "+" : "-");
self.static = !self.static;
);
,
// 生成目录列表函数
list: function(element, num)
var aEle = $("<a></a>"),
hEle = $("<li></li>");
var per = 1 - 0.08 * num;
var style = "margin-left:" + 10 * num + "px";
var style2 = "color:rgba(85,85,85," + per + ")";
aEle
.attr("href", "#" + element.id)
.text(element.childNodes[0].nodeValue);
aEle.attr("style", style2);
hEle
.attr("class", element.nodeName.toLowerCase() + "_list")
.append(aEle);
hEle.attr("style", style);
return hEle;
;
$.fn.catalog = function(options)
return this.each(function()
if (!$.data(this, "catalog"))
$.data(this, "catalog", new Catalog(this, options));
);
;
// 使用插件
$("#cnblogs_post_body").catalog();
function addSideToLeft()
var sideBar = document.getElementById("sideBarMain");
var show = 0;
sideBar && addCatalogToSidebar(sideBar);
$(".cloneMenu").click(function()
if (show === 1)
$("#cateLog").fadeOut();
show = 0;
else if (show === 2)
$("#cateLog2").fadeOut();
$("#cateLog").fadeIn();
show = 1;
else
$("#cateLog").fadeIn();
show = 1;
);
$(".cloneMenu2").click(function()
if (show === 2)
$("#cateLog2").fadeOut();
show = 0;
else if (show === 1)
$("#cateLog").fadeOut();
$("#cateLog2").fadeIn();
show = 2;
else
$("#cateLog2").fadeIn();
show = 2;
);
function addCatalogToSidebar(parentNode)
addCloseBtn(parentNode);
addCloseBtn2(parentNode);
function addCloseBtn2(parentNode)
var sideBar = document.getElementById("sidebar_postcategory");
if (!sideBar)
return 0;
var sideBar_clone = sideBar.cloneNode(true);
var childs = sideBar_clone.childNodes[3];
if (childs.children && childs.children.length > 0)
var cateLog2 = document.createElement("ul");
var closeBtn2 = document.createElement("button");
childs.style.border = "none";
for (var i = 0; i < childs.children.length; i++)
childs.children[i].style.border = "none";
cateLog2.setAttribute("id", "cateLog2");
setStyle2(cateLog2,
display: "none"
);
setStyle(closeBtn2,
left: "180px"
);
closeBtn2.innerText = "随笔分类";
closeBtn2.setAttribute("class", "cloneMenu2");
parentNode.appendChild(closeBtn2);
parentNode.appendChild(cateLog2);
cateLog2.appendChild(sideBar_clone);
function addCloseBtn(parentNode)
var mainCateLog = document.getElementById("catalog");
if (!mainCateLog)
return 0;
var cateLog = document.createElement("ul");
var closeBtn = document.createElement("button");
var mainCateLog_clone = mainCateLog.cloneNode(true);
cateLog.setAttribute("id", "cateLog");
setStyle2(cateLog,
display: "none"
);
setStyle(closeBtn,
left: "90px"
);
closeBtn.innerText = "快速目录";
closeBtn.setAttribute("class", "cloneMenu");
parentNode.appendChild(closeBtn);
parentNode.appendChild(cateLog);
cateLog.appendChild(mainCateLog_clone);
function setStyle2(context, option)
var cateLog = context;
cateLog.style.width = 290 + "px";
cateLog.style.zIndex = "999";
cateLog.style.background = "#fff";
cateLog.style.overflow = "auto";
cateLog.style.position = "fixed";
cateLog.style.top = "400px";
cateLog.style.bottom = "20px";
cateLog.style.left = "20px";
cateLog.style.padding = "10px 10px 35px 10px";
cateLog.style.margin = "0px 0px 45px 0px";
for (var item in option)
cateLog.style[item] = option[item];
function setStyle(context, option)
var closeBtn = context;
closeBtn.style.zIndex = "1000";
closeBtn.style.border = "none";
closeBtn.style.position = "fixed";
closeBtn.style.bottom = "35px";
closeBtn.style.width = "80px";
closeBtn.style.marginLeft = "-40px";
closeBtn.style.height = "30px";
closeBtn.style.lineHeight = "30px";
closeBtn.style.textAlign = "center";
closeBtn.style.color = "#fff";
closeBtn.style.display = "block";
closeBtn.style.fontSize = "14px";
closeBtn.style.background = "#2daebf";
for (var item in option)
closeBtn.style[item] = option[item];
function addTimeToHead()
var body = document.getElementById("navList");
if (!body)
return 0;
var div = document.createElement("div");
var time = new Date("2016-8-15").getTime();
var today = new Date().getTime();
var minus = today - time;
// 1天 = 24 * 60 * 60 * 1000
var days = parseInt(minus / (24 * 60 * 60 * 1000));
div.style.width = "300px";
div.style.height = "30px";
div.style.lineHeight = "30px";
div.style.fontSize = "12px";
div.style.color = "#e9dbdb";
div.style.display = "inline-block";
div.style.margin = "15px 0px 0px 190px";
div.innerHTML = "开始距今已经:" + days + "天";
body.appendChild(div);
</script>页脚
<script src="https://cdn.bootcss.com/d3/3.5.6/d3.min.js"></script>
<script>
//原项目地址
//https://github.com/dundalek/markmap?spm=a2c4e.11153940.blogcont592250.13.50fc4362hEKglY
(function(root, factory)
if (typeof define === "function" && define.amd)
// AMD. Register as an anonymous module.
define(["d3"], factory);
else if (typeof exports === "object")
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require("d3"));
else
// Browser globals (root is window)
root.markmap = factory(root.d3);
)(this, function(d3)
// Node-link tree diagram using the Reingold-Tilford "tidy" algorithm,
// as improved by A.J. van der Ploeg, 2013, "Drawing Non-layered Tidy
// Trees in Linear Time".
d3.layout.flextree = function()
var hierarchy = d3.layout
.hierarchy()
.sort(null)
.value(null);
// The spacing between nodes can be specified in one of two ways:
// - separation - returns center-to-center distance
// in units of root-node-x-size
// - spacing - returns edge-to-edge distance in the same units as
// node sizes
var separation = d3_layout_treeSeparation,
spacing = null,
size = [1, 1], // x_size, y_size
nodeSize = null,
setNodeSizes = false;
// This stores the x_size of the root node, for use with the spacing
// function
var wroot = null;
// The main layout function:
function tree(d, i)
var nodes = hierarchy.call(this, d, i),
t = nodes[0],
wt = wrapTree(t);
wroot = wt;
zerothWalk(wt, 0);
firstWalk(wt);
secondWalk(wt, 0);
renormalize(wt);
return nodes;
// Every node in the tree is wrapped in an object that holds data
// used during the algorithm
function wrapTree(t)
var wt =
t: t,
prelim: 0,
mod: 0,
shift: 0,
change: 0,
msel: 0,
mser: 0
;
t.x = 0;
t.y = 0;
if (size)
wt.x_size = 1;
wt.y_size = 1;
else if (typeof nodeSize == "object")
// fixed array
wt.x_size = nodeSize[0];
wt.y_size = nodeSize[1];
else
// use nodeSize function
var ns = nodeSize(t);
wt.x_size = ns[0];
wt.y_size = ns[1];
if (setNodeSizes)
t.x_size = wt.x_size;
t.y_size = wt.y_size;
var children = [];
var num_children = t.children ? t.children.length : 0;
for (var i = 0; i < num_children; ++i)
children.push(wrapTree(t.children[i]));
wt.children = children;
wt.num_children = num_children;
return wt;
// Recursively set the y coordinate of the children, based on
// the y coordinate of the parent, and its height. Also set parent
// and depth.
function zerothWalk(wt, initial)
wt.t.y = initial;
wt.t.depth = 0;
_zerothWalk(wt);
function _zerothWalk(wt)
var kid_y = wt.t.y + wt.y_size,
kid_depth = wt.t.depth + 1,
i;
for (i = 0; i < wt.children.length; ++i)
var kid = wt.children[i];
kid.t.y = kid_y;
kid.t.parent = wt.t;
kid.t.depth = kid_depth;
_zerothWalk(wt.children[i]);
function firstWalk(wt)
if (wt.num_children == 0)
setExtremes(wt);
return;
firstWalk(wt.children[0]);
var ih = updateIYL(bottom(wt.children[0].el), 0, null);
for (var i = 1; i < wt.num_children; ++i)
firstWalk(wt.children[i]);
// Store lowest vertical coordinate while extreme nodes still point
// in current subtree.
var minY = bottom(wt.children[i].er);
separate(wt, i, ih);
ih = updateIYL(minY, i, ih);
positionRoot(wt);
setExtremes(wt);
function setExtremes(wt)
if (wt.num_children == 0)
wt.el = wt;
wt.er = wt;
wt.msel = wt.mser = 0;
else
wt.el = wt.children[0].el;
wt.msel = wt.children[0].msel;
wt.er = wt.children[wt.num_children - 1].er;
wt.mser = wt.children[wt.num_children - 1].mser;
function separate(wt, i, ih)
// Right contour node of left siblings and its sum of modifiers.
var sr = wt.children[i - 1];
var mssr = sr.mod;
// Left contour node of current subtree and its sum of modifiers.
var cl = wt.children[i];
var mscl = cl.mod;
while (sr != null && cl != null)
if (bottom(sr) > ih.lowY) ih = ih.nxt;
// How far to the left of the right side of sr is the left side
// of cl? First compute the center-to-center distance, then add
// the "gap" (separation or spacing)
var dist = mssr + sr.prelim - (mscl + cl.prelim);
if (separation != null)
dist += separation(sr.t, cl.t) * wroot.x_size;
else if (spacing != null)
dist += sr.x_size / 2 + cl.x_size / 2 + spacing(sr.t, cl.t);
if (dist > 0)
mscl += dist;
moveSubtree(wt, i, ih.index, dist);
// Fix for layout bug, https://github.com/Klortho/d3-flextree/issues/1,
// HT @lianyi
else if (
i === 1 &&
mscl === 0 &&
sr.num_children === 0 &&
cl.num_children > 1 &&
dist < 0
)
mscl += dist;
moveSubtree(wt, i, ih.index, dist);
var sy = bottom(sr),
cy = bottom(cl);
// Advance highest node(s) and sum(s) of modifiers
if (sy <= cy)
sr = nextRightContour(sr);
if (sr != null) mssr += sr.mod;
if (sy >= cy)
cl = nextLeftContour(cl);
if (cl != null) mscl += cl.mod;
// Set threads and update extreme nodes. In the first case, the
// current subtree must be taller than the left siblings.
if (sr == null && cl != null) setLeftThread(wt, i, cl, mscl);
// In this case, the left siblings must be taller than the current
// subtree.
else if (sr != null && cl == null) setRightThread(wt, i, sr, mssr);
function moveSubtree(wt, i, si, dist)
// Move subtree by changing mod.
wt.children[i].mod += dist;
wt.children[i].msel += dist;
wt.children[i].mser += dist;
distributeExtra(wt, i, si, dist);
function nextLeftContour(wt)
return wt.num_children == 0 ? wt.tl : wt.children[0];
function nextRightContour(wt)
return wt.num_children == 0
? wt.tr
: wt.children[wt.num_children - 1];
function bottom(wt)
return wt.t.y + wt.y_size;
function setLeftThread(wt, i, cl, modsumcl)
var li = wt.children[0].el;
li.tl = cl;
// Change mod so that the sum of modifier after following thread
// is correct.
var diff = modsumcl - cl.mod - wt.children[0].msel;
li.mod += diff;
// Change preliminary x coordinate so that the node does not move.
li.prelim -= diff;
// Update extreme node and its sum of modifiers.
wt.children[0].el = wt.children[i].el;
wt.children[0].msel = wt.children[i].msel;
// Symmetrical to setLeftThread.
function setRightThread(wt, i, sr, modsumsr)
var ri = wt.children[i].er;
ri.tr = sr;
var diff = modsumsr - sr.mod - wt.children[i].mser;
ri.mod += diff;
ri.prelim -= diff;
wt.children[i].er = wt.children[i - 1].er;
wt.children[i].mser = wt.children[i - 1].mser;
// Position root between children, taking into account their mod.
function positionRoot(wt)
wt.prelim =
(wt.children[0].prelim +
wt.children[0].mod -
wt.children[0].x_size / 2 +
wt.children[wt.num_children - 1].mod +
wt.children[wt.num_children - 1].prelim +
wt.children[wt.num_children - 1].x_size / 2) /
2;
function secondWalk(wt, modsum)
modsum += wt.mod;
// Set absolute (non-relative) horizontal coordinate.
wt.t.x = wt.prelim + modsum;
addChildSpacing(wt);
for (var i = 0; i < wt.num_children; i++)
secondWalk(wt.children[i], modsum);
function distributeExtra(wt, i, si, dist)
// Are there intermediate children?
if (si != i - 1)
var nr = i - si;
wt.children[si + 1].shift += dist / nr;
wt.children[i].shift -= dist / nr;
wt.children[i].change -= dist - dist / nr;
// Process change and shift to add intermediate spacing to mod.
function addChildSpacing(wt)
var d = 0,
modsumdelta = 0;
for (var i = 0; i < wt.num_children; i++)
d += wt.children[i].shift;
modsumdelta += d + wt.children[i].change;
wt.children[i].mod += modsumdelta;
// Make/maintain a linked list of the indexes of left siblings and their
// lowest vertical coordinate.
function updateIYL(minY, i, ih)
// Remove siblings that are hidden by the new subtree.
while (ih != null && minY >= ih.lowY) ih = ih.nxt;
// Prepend the new subtree.
return
lowY: minY,
index: i,
nxt: ih
;
// Renormalize the coordinates
function renormalize(wt)
// If a fixed tree size is specified, scale x and y based on the extent.
// Compute the left-most, right-most, and depth-most nodes for extents.
if (size != null)
var left = wt,
right = wt,
bottom = wt;
var toVisit = [wt],
node;
while ((node = toVisit.pop()))
var t = node.t;
if (t.x < left.t.x) left = node;
if (t.x > right.t.x) right = node;
if (t.depth > bottom.t.depth) bottom = node;
if (node.children) toVisit = toVisit.concat(node.children);
var sep =
separation == null ? 0.5 : separation(left.t, right.t) / 2;
var tx = sep - left.t.x;
var kx = size[0] / (right.t.x + sep + tx);
var ky = size[1] / (bottom.t.depth > 0 ? bottom.t.depth : 1);
toVisit = [wt];
while ((node = toVisit.pop()))
var t = node.t;
t.x = (t.x + tx) * kx;
t.y = t.depth * ky;
if (setNodeSizes)
t.x_size *= kx;
t.y_size *= ky;
if (node.children) toVisit = toVisit.concat(node.children);
// Else either a fixed node size, or node size function was specified.
// In this case, we translate such that the root node is at x = 0.
else
var rootX = wt.t.x;
moveRight(wt, -rootX);
function moveRight(wt, move)
wt.t.x += move;
for (var i = 0; i < wt.num_children; ++i)
moveRight(wt.children[i], move);
// Setter and getter methods
tree.separation = function(x)
if (!arguments.length) return separation;
separation = x;
spacing = null;
return tree;
;
tree.spacing = function(x)
if (!arguments.length) return spacing;
spacing = x;
separation = null;
return tree;
;
tree.size = function(x)
if (!arguments.length) return size;
size = x;
nodeSize = null;
return tree;
;
tree.nodeSize = function(x)
if (!arguments.length) return nodeSize;
nodeSize = x;
size = null;
return tree;
;
tree.setNodeSizes = function(x)
if (!arguments.length) return setNodeSizes;
setNodeSizes = x;
return tree;
;
tree.rootXSize = function()
return wroot ? wroot.x_size : null;
;
return d3_layout_hierarchyRebind(tree, hierarchy);
;
function d3_layout_treeSeparation(a, b)
return a.parent == b.parent ? 1 : 2;
function d3_layout_hierarchyRebind(object, hierarchy)
d3.rebind(object, hierarchy, "sort", "children", "value");
// Add an alias for nodes and links, for convenience.
object.nodes = object;
object.links = d3_layout_hierarchyLinks;
return object;
function d3_layout_hierarchyLinks(nodes)
return d3.merge(
nodes.map(function(parent)
return (parent.children || []).map(function(child)
return
source: parent,
target: child
;
);
)
);
);
(function(root, factory)
if (typeof define === "function" && define.amd)
// AMD. Register as an anonymous module.
define(["d3"], factory);
else if (typeof exports === "object")
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require("d3"));
else
// Browser globals (root is window)
root.markmap = factory(root.d3);
)(this, function(d3)
var assign =
Object.assign ||
function(dst, src)
// poor man's Object.assign()
for (var k in src)
if (src.hasOwnProperty(k))
dst[k] = src[k];
return dst;
;
function getTextWidth(text, font)
// re-use canvas object for better performance
var canvas =
getTextWidth.canvas ||
(getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
function traverseBranchId(node, branch, state)
if (!("branch" in node))
node.branch = branch;
if (node.children)
node.children.forEach(function(d)
traverseBranchId(d, branch, state);
);
function traverseDummyNodes(node)
if (node.children)
node.children.forEach(traverseDummyNodes);
node.children = [
name: "",
dummy: true,
children: node.children
];
function traverseTruncateLabels(node, length)
if (node.name.length > length)
node.name = node.name.slice(0, length - 1) + "…";
if (node.children)
node.children.forEach(function(n)
traverseTruncateLabels(n, length);
);
function Markmap(svg, data, options)
if (!(this instanceof Markmap)) return new Markmap(svg, data, options);
this.init(svg, data, options);
var defaultPreset =
nodeHeight: 20,
nodeWidth: 180,
nodePadding: 12,
spacingVertical: 5,
spacingHorizontal: 60,
truncateLabels: 0,
duration: 750,
layout: "tree",
color: "gray",
linkShape: "diagonal",
renderer: "boxed"
;
assign(Markmap.prototype,
getInitialState: function()
return
zoomScale: 1,
zoomTranslate: [0, 0],
autoFit: true,
depthMaxSize: ,
yByDepth: ,
nodeFont: "10px sans-serif"
;
,
presets:
default: defaultPreset,
colorful: assign(assign(, defaultPreset),
nodeHeight: 10,
renderer: "basic",
color: "category20",
nodePadding: 6
)
,
helperNames: ["layout", "linkShape", "color"],
layouts:
tree: function(self)
return d3.layout
.flextree()
.setNodeSizes(true)
.nodeSize(function(d)
var width = d.dummy
? self.state.spacingHorizontal
: getTextWidth(d.name, self.state.nodeFont);
if (!d.dummy && width > 0)
// Add padding non-empty nodes
width += 2 * self.state.nodePadding;
return [self.state.nodeHeight, width];
)
.spacing(function(a, b)
return a.parent == b.parent
? self.state.spacingVertical
: self.state.spacingVertical * 2;
);
,
linkShapes:
diagonal: function()
return d3.svg.diagonal().projection(function(d)
return [d.y, d.x];
);
,
bracket: function()
return function(d)
return (
"M" +
d.source.y +
"," +
d.source.x +
"V" +
d.target.x +
"H" +
d.target.y
);
;
,
colors: assign(
gray: function()
return function()
return "#929292";
;
,
d3.scale
),
init: function(svg, data, options)
options = options || ;
svg = svg.datum ? svg : d3.select(svg);
this.helpers = ;
this.i = 0;
var state = (this.state = this.getInitialState());
this.set(this.presets[options.preset || "default"]);
state.height = svg.node().getBoundingClientRect().height;
state.width = svg.node().getBoundingClientRect().width;
this.set(options);
// disable panning using right mouse button
svg.on("mousedown", function()
var ev = d3.event;
if (ev.button === 2)
ev.stopImmediatePropagation();
);
var zoom = (this.zoom = d3.behavior.zoom().on(
"zoom",
function()
this.updateZoom(d3.event.translate, d3.event.scale);
.bind(this)
));
this.svg = svg.call(zoom).append("g");
this.updateZoom(state.zoomTranslate, state.zoomScale);
this.setData(data);
this.update(state.root);
if (options.autoFit === undefined || options.autoFit === null)
state.autoFit = false;
,
updateZoom: function(translate, scale)
var state = this.state;
state.zoomTranslate = translate;
state.zoomScale = scale;
this.zoom.translate(state.zoomTranslate).scale(state.zoomScale);
this.svg.attr(
"transform",
"translate(" +
state.zoomTranslate +
")" +
" scale(" +
state.zoomScale +
")"
);
,
set: function(values)
if (values.preset)
this.set(this.presets[values.preset]);
var state = this.state;
var helpers = this.helpers;
this.helperNames.forEach(
function(h)
if (!helpers[h] || (values[h] && values[h] !== state[h]))
helpers[h] = this[h + "s"][values[h] || state[h]](this);
.bind(this)
);
assign(state, values || );
return this;
,
preprocessData(data, prev)
var state = this.state;
if (state.truncateLabels)
traverseTruncateLabels(data, state.truncateLabels);
if (data.children)
data.children.forEach(function(d, i)
traverseBranchId(d, i, state);
);
if (prev)
this.diffTreeState(data, prev);
,
setData: function(data)
var state = this.state;
this.preprocessData(data, state.root);
state.root = data;
state.root.x0 = state.height / 2;
state.root.y0 = 0;
return this;
,
diffTreeState: function(next, prev)
var childrenNext = next.children;
var childrenPrev = prev.children || prev._children;
if (childrenNext && childrenPrev)
// if number of children is different (nodes we likely added or removed) we create a name based index
// else we use position based comparison as nodes were likely just renamed
var idx;
if (childrenNext.length !== childrenPrev.length)
idx = childrenPrev.reduce(function(res, node)
res[node.name] = res[node.name] || [];
res[node.name].push(node);
return res;
, );
for (var k = 0; k < childrenNext.length; k += 1)
var child;
if (idx)
var nodes = idx[childrenNext[k].name];
if (nodes)
child = nodes[0];
idx[childrenNext[k].name] = nodes.slice(1);
else
child = childrenPrev[k];
if (child)
this.diffTreeState(childrenNext[k], child);
if (prev._children)
next._children = next.children;
delete next.children;
return next;
,
update: function(source)
var state = this.state;
source = source || state.root;
var res = this.layout(state);
if (state.autoFit)
var minX = d3.min(res.nodes, function(d)
return d.x;
);
var minY = d3.min(res.nodes, function(d)
return d.y;
);
var maxX = d3.max(res.nodes, function(d)
return d.x;
);
var maxY = d3.max(res.nodes, function(d)
return d.y + d.y_size;
);
var realHeight = maxX - minX;
var realWidth = maxY - minY;
var scale = Math.min(
state.height / realHeight,
state.width / realWidth,
1
);
var translate = [
(state.width - realWidth * scale) / 2 - minY * scale,
(state.height - realHeight * scale) / 2 - minX * scale
];
this.updateZoom(translate, scale);
this.render(source, res.nodes, res.links);
return this;
,
layout: function(state)
var layout = this.helpers.layout;
if (state.linkShape !== "bracket")
// Fill in with dummy nodes to handle spacing for layout algorithm
traverseDummyNodes(state.root);
// Compute the new tree layout.
var nodes = layout.nodes(state.root).reverse();
// Remove dummy nodes after layout is computed
nodes = nodes.filter(function(n)
return !n.dummy;
);
nodes.forEach(function(n)
if (n.children && n.children.length === 1 && n.children[0].dummy)
n.children = n.children[0].children;
if (n.parent && n.parent.dummy)
n.parent = n.parent.parent;
);
if (state.linkShape === "bracket")
nodes.forEach(function(n)
n.y += n.depth * state.spacingHorizontal;
);
var links = layout.links(nodes);
return
nodes: nodes,
links: links
;
,
render: function(source, nodes, links)
this.renderers[this.state.renderer].call(this, source, nodes, links);
,
renderers:
boxed: function(source, nodes, links)
var svg = this.svg;
var state = this.state;
var color = this.helpers.color;
this.renderers.basic.call(this, source, nodes, links);
var node = svg.selectAll("g.markmap-node");
node
.select("rect")
.attr("y", -state.nodeHeight / 2)
.attr("rx", 10)
.attr("ry", 10)
.attr("height", state.nodeHeight)
.attr("fill", function(d)
return d3.rgb(color(d.branch)).brighter(1.2);
)
.attr("stroke", function(d)
return color(d.branch);
)
.attr("stroke-width", 1);
node.select("text").attr("dy", "3");
svg.selectAll("path.markmap-link").attr("stroke-width", 1);
,
basic: function(source, nodes, links)
var svg = this.svg;
var state = this.state;
var color = this.helpers.color;
var linkShape = this.helpers.linkShape;
function linkWidth(d)
var depth = d.depth;
if (
d.name !== "" &&
d.children &&
d.children.length === 1 &&
d.children[0].name === ""
)
depth += 1;
return Math.max(6 - 2 * depth, 1.5);
// Update the nodes…
var node = svg.selectAll("g.markmap-node").data(
nodes,
function(d)
return d.id || (d.id = ++this.i);
.bind(this)
);
// Enter any new nodes at the parent's previous position.
var nodeEnter = node
.enter()
.append("g")
.attr("class", "markmap-node")
.attr("transform", function(d)
return (
"translate(" +
(source.y0 + source.y_size - d.y_size) +
"," +
source.x0 +
")"
);
)
.on("click", this.click.bind(this));
nodeEnter
.append("rect")
.attr("class", "markmap-node-rect")
.attr("y", function(d)
return -linkWidth(d) / 2;
)
.attr("x", function(d)
return d.y_size;
)
.attr("width", 0)
.attr("height", linkWidth)
.attr("fill", function(d)
return color(d.branch);
);
nodeEnter
.append("circle")
.attr("class", "markmap-node-circle")
.attr("cx", function(d)
return d.y_size;
)
.attr("stroke", function(d)
return color(d.branch);
)
.attr("r", 1e-6)
.style("fill", function(d)
return d._children ? color(d.branch) : "";
);
nodeEnter
.append("text")
.attr("class", "markmap-node-text")
.attr("x", function(d)
return d.y_size;
)
.attr("dy", "-5")
.attr("text-anchor", function(d)
return "start";
)
.text(function(d)
return d.name;
)
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node
.transition()
.duration(state.duration)
.attr("transform", function(d)
return "translate(" + d.y + "," + d.x + ")";
);
nodeUpdate
.select("rect")
.attr("x", -1)
.attr("width", function(d)
return d.y_size + 2;
);
nodeUpdate
.select("circle")
.attr("r", 4.5)
.style("fill", function(d)
return d._children ? color(d.branch) : "";
)
.style("display", function(d)
var hasChildren = d.href || d.children || d._children;
return hasChildren ? "inline" : "none";
);
nodeUpdate
.select("text")
.attr("x", 10)
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node
.exit()
.transition()
.duration(state.duration)
.attr("transform", function(d)
return (
"translate(" +
(source.y + source.y_size - d.y_size) +
"," +
source.x +
")"
);
)
.remove();
nodeExit
.select("rect")
.attr("x", function(d)
return d.y_size;
)
.attr("width", 0);
nodeExit.select("circle").attr("r", 1e-6);
nodeExit
.select("text")
.style("fill-opacity", 1e-6)
.attr("x", function(d)
return d.y_size;
);
// Update the links…
var link = svg
.selectAll("path.markmap-link")
.data(links, function(d)
return d.target.id;
);
// Enter any new links at the parent's previous position.
link
.enter()
.insert("path", "g")
.attr("class", "markmap-link")
.attr("stroke", function(d)
return color(d.target.branch);
)
.attr("stroke-width", function(l)
return linkWidth(l.target);
)
.attr("d", function(d)
var o =
x: source.x0,
y: source.y0 + source.y_size
;
return linkShape(
source: o,
target: o
);
);
// Transition links to their new position.
link
.transition()
.duration(state.duration)
.attr("d", function(d)
var s =
x: d.source.x,
y: d.source.y + d.source.y_size
;
var t =
x: d.target.x,
y: d.target.y
;
return linkShape(
source: s,
target: t
);
);
// Transition exiting nodes to the parent's new position.
link
.exit()
.transition()
.duration(state.duration)
.attr("d", function(d)
var o =
x: source.x,
y: source.y + source.y_size
;
return linkShape(
source: o,
target: o
);
)
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d)
d.x0 = d.x;
d.y0 = d.y;
);
,
// Toggle children on click.
click: function(d)
if (d.children)
d._children = d.children;
d.children = null;
else
d.children = d._children;
d._children = null;
this.update(d);
);
return Markmap;
);
$(function()
console.log("网站加载完毕");
var node = document.getElementById("LiuChengTu");
var chart = document.getElementById("mindmap");
if (chart)
var width = window.getComputedStyle(chart).width;
document.getElementById("mindmap").style.height = width;
if (node)
var text = node.innerText;
var first = JSON.parse(text);
var data = first;
markmap("svg#mindmap", data,
preset: "colorful", // or default
linkShape: "diagonal" // or bracket
);
);
</script>以上是关于博客园整体样式备份(monokai)的主要内容，如果未能解决你的问题，请参考以下文章