<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
MWeb mweb-medium-like 网站主题 - Coder For Art
</title>
<link href="atom.xml" rel="alternate" title="Coder For Art" type="application/atom+xml">
<link rel="stylesheet" href="asset/css/foundation.min.css" />
<link rel="stylesheet" href="asset/css/docs.css" />
<script src="asset/js/vendor/modernizr.js"></script>
<script src="asset/js/vendor/jquery.js"></script>
<script type="text/javascript">
function before_search(){
var searchVal = 'site:coderforart.com ' + document.getElementById('search_input').value;
document.getElementById('search_q').value = searchVal;
return true;
}
</script>
</head>
<body class="antialiased hide-extras">
<div class="marketing off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="top-bar docs-bar hide-for-small" data-topbar>
<section class="top-bar-section">
<div class="row">
<div style="position: relative;width:100%;"><div style="position: absolute; width:100%;">
<ul id="main-menu" class="left">
<li id="menu_item_index"><a target="_self" href="index.html">Home</a></li>
<li id="menu_item_archives"><a target="_self" href="archives.html">Archives</a></li>
<li id="menu_item_about"><a target="_self" href="about.html">About</a></li>
</ul>
<ul class="right" id="search-wrap">
<li>
<form target="_blank" onsubmit="return before_search();" action="https://google.com/search" method="get">
<input type="hidden" id="search_q" name="q" value="" />
<input tabindex="1" type="search" id="search_input" placeholder="Search"/>
</form>
</li>
</ul>
</div></div>
</div>
</section>
</nav>
<nav class="tab-bar show-for-small">
<a href="javascript:void(0)" class="left-off-canvas-toggle menu-icon">
<span> Coder For Art</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><a target="_self" href="index.html">Home</a></li>
<li><a target="_self" href="archives.html">Archives</a></li>
<li><a target="_self" href="about.html">About</a></li>
<li><label>Categories</label></li>
<li><a href="Cocoa.html">Cocoa</a></li>
<li><a href="CG%20Artist.html">CG Artist</a></li>
<li><a href="Game%20Engine.html">Game Engine</a></li>
<li><a href="MWeb-cat.html">MWeb</a></li>
<li><a href="PinPhoto-cat.html">PinPhoto</a></li>
</ul>
</aside>
<a class="exit-off-canvas" href="#"></a>
<section id="main-content" role="main" class="scroll-container">
<script type="text/javascript">
$(function(){
$('#menu_item_index').addClass('is_active');
});
</script>
<div class="row">
<div class="large-8 medium-8 columns">
<div class="markdown-body article-wrap">
<div class="article">
<div class="f-img"><img src="media/14418505549476/tt1.jpg" /></div>
<h1>MWeb mweb-medium-like 网站主题</h1>
<div class="read-more clearfix">
<span class="date">2015/09/10</span>
<span>posted in </span>
<span class="posted-in"><a href='MWeb-cat.html'>MWeb</a></span>
<span class="comments">
<a href="http://coderforart.com/mweb-medium-like-theme.html#disqus_thread">comments</a>
</span>
</div>
</div><!-- article -->
<div class="article-content">
<p>MWeb 1.7 版制作了新的博客/网站主题 mweb-medium-like。这个主题是基于 Foundation 前端框架做的，对移动端非常友好！<br/>
本博客的主题也是使用 mweb-medium-like。</p>
<span id="more"></span><!-- more -->
<h2 id="toc_0">使用方法</h2>
<h3 id="toc_1">设置网站为 mweb-medium-like 主题</h3>
<p>MWeb 1.7 版会自带 mweb-medium-like 主题，所以先设置你的网站的主题为 mweb-medium-like。 mweb-medium-like 主题也上传到 github 了，你也可以去 <a href="https://github.com/oulvhai/mweb-medium-like">https://github.com/oulvhai/mweb-medium-like</a> 看看是否有修正或者提建议。如下图我选择的是 Coder For Art。<br/>
<img src="media/14418505549476/14418512636784.jpg" alt="w688"/></p>
<h3 id="toc_2">导入网站扩展文件和文档扩展文件</h3>
<p><strong>注意：</strong>2.0 版已经不用做这个步骤了！！</p>
<p>下载 <a href="media/14418505549476/Site%20Extension.json">Site Extension</a> 这个网站扩展设置文件，在 github 中这个文档在 <code>extensions/Site Extension.json</code> 里。</p>
<p>再转到 <code>Perfernces</code> - <code>Extensions</code>，Setting Site 中选择刚刚设定了 mweb-medium-like 主题的 Coder For Art 网站，然后切换到 Site Extension 标签，点 <code>Import</code> 导入刚刚下载的 Site Extension.json 设置文档。如下图是导入后的效果。<br/>
<img src="media/14418505549476/14418514048396.png" alt="w629"/><br/>
同样也下载 <a href="media/14418505549476/Document%20Extension.json">Document Extension</a> 这个文档扩展设置文件，切换到 Document Extension 并导入。</p>
<h3 id="toc_3">设置网站扩展</h3>
<p>网站/博客中往往会有一些个人信息要设定，刚刚导入的网站扩展就是为了设定这些信息的。mweb-medium-like 主题目前可以设定的有：个人图片、weibo、github、facebook、email 等等信息，还可以为网站/博客增加 disqus 和 多说的评论支持。其中 <code>logo path</code> 就是设置个人图片的，你可以在任何属于该网站的文档中（通常可以用 about 或 index）拖入图片，然后复制图片的地址到 <code>logo path</code> 这个字段中，如下图是我的博客 Coder For Art 的设置：<br/>
<img src="media/14418505549476/14418526095552.png" alt="w629"/><br/>
设置 disqus 和多说评论支持只需要填入两者的 shortname 即可。在 disqus 或多说注册完成后都可以得到 shortname。如果你想要两者的评论都支持，两者都填入即可，比如说我的 Coder For Art 博客就是两者的评论都支持，如图：<br/>
<img src="media/14418505549476/14418528119858.png" alt="w659"/></p>
<h3 id="toc_4">文档扩展的使用</h3>
<p>mweb-medium-like 主题设计了三个文档扩展：small img 用于文章列表时放在描述的左边，featured image 用于放在标题上面，excerpt 为描述，一般情况下 MWeb 是直接抓取文章内 read more 前的内容，如果有填入 excerpt 则会优先取 excerpt 为描述。<br/>
<img src="media/14418505549476/14418531852840.jpg" alt="w464"/></p>
<p>如下图第一篇演示文章为设置为 small image 的效果，第二篇文章为设置了 featured image 的效果：<br/>
<img src="media/14418505549476/14418537443808.jpg" alt="w724"/></p>
<h3 id="toc_5">设置 About 页面</h3>
<p>mweb-medium-like 主题的主菜单加上了 about 页面，所以请设置一个 about 页面，否则点了主菜单的 about 连接后会出错。</p>
<p><strong>注意：</strong>2.0 版默认已经去掉了 about 页面，如果要增加 about 页面，打开 <code>偏好设置</code> - <code>扩展</code>，然后切换到 <code>网站菜单</code> 这个标签，在里面新增自定义的页面。在这个地方新增，一切都是自定义的，也就是说你还要先增加 Home 和 Archives 页。<br/>
另外 2.0 版这个主题在自定菜单时有一个小 bug，就是我忘记处理移动端的了，解决<br/>
办法是使用 <a href="https://github.com/oulvhai/mweb-medium-like/blob/master/header.html">https://github.com/oulvhai/mweb-medium-like/blob/master/header.html</a> 这个位置的 header.html，或者把最新的 <a href="https://github.com/oulvhai/mweb-medium-like">https://github.com/oulvhai/mweb-medium-like</a> 下载下来换掉原来的也行。</p>
<p>如下图是 Coder For Art 博客的 About 页的设置：<br/>
<img src="media/14418505549476/14418540682024.jpg" alt="w766"/></p>
<h2 id="toc_6">其他有意思的玩法</h2>
<p>mweb-medium-like 主题是基于 Foundation 做的，然后因为 Markdown 支持 HML，所以如果你会 HTML，可以做出很有意思的效果，比如说：</p>
<ul class="example-orbit" data-orbit>
<li>
<img src="media/14418505549476/tt1.jpg" alt="" />
<div class="orbit-caption">女天狗图 1</div>
</li>
<li>
<img src="media/14418505549476/tt2.jpg" alt="" />
<div class="orbit-caption">女天狗图 2</div>
</li>
<li>
<img src="media/14418505549476/tt3.jpg" alt="" />
<div class="orbit-caption">女天狗图 3</div>
</li>
</ul>
<p>上面的效果，把图拖拽进来后，再修改图片地址即可。全部 HTML 如下：</p>
<pre><code class="language-markup"><ul class="example-orbit" data-orbit>
<li>
<img src="media/14418505549476/tt1.jpg" alt="" />
<div class="orbit-caption">女天狗图 1</div>
</li>
<li>
<img src="media/14418505549476/tt2.jpg" alt="" />
<div class="orbit-caption">女天狗图 2</div>
</li>
<li>
<img src="media/14418505549476/tt3.jpg" alt="" />
<div class="orbit-caption">女天狗图 3</div>
</li>
</ul>
</code></pre>
<p>缩略图效果，点小图看大图，如下：</p>
<ul class="clearing-thumbs small-block-grid-2" data-clearing>
<li><a href="media/14418505549476/tt4.jpg"><img data-caption="女天狗 4" src="media/14418505549476/tt4-s.jpg"></a></li>
<li><a href="media/14418505549476/tt5.jpg"><img data-caption="女天狗 5" src="media/14418505549476/tt5-s.jpg"></a></li>
</ul>
<p>上面的效果的全部 HTML 如下：</p>
<pre><code class="language-markup"><ul class="clearing-thumbs small-block-grid-2" data-clearing>
<li><a href="media/14418505549476/tt4.jpg"><img data-caption="女天狗 4" src="media/14418505549476/tt4-s.jpg"></a></li>
<li><a href="media/14418505549476/tt5.jpg"><img data-caption="女天狗 5" src="media/14418505549476/tt5-s.jpg"></a></li>
</ul>
</code></pre>
<p>效果 1 的 Foundation 参考网址：<a href="http://foundation.zurb.com/docs/components/orbit.html">http://foundation.zurb.com/docs/components/orbit.html</a><br/>
效果 2 的 Foundation 参考网址：<a href="http://foundation.zurb.com/docs/components/clearing.html">http://foundation.zurb.com/docs/components/clearing.html</a></p>
</div>
<div class="row">
<div class="large-6 columns">
<p class="text-left" style="padding:15px 0px;">
<a href="mweb-1.7.1-release.html"
title="Previous Post: MWeb 1.7.1 版发布！支持导出为 RTF 和 Docx、发布到 Evernote 带样式、文档库备份和新网站主题等大量改进！">« MWeb 1.7.1 版发布！支持导出为 RTF 和 Docx、发布到 Evernote 带样式、文档库备份和新网站主题等大量改进！</a>
</p>
</div>
<div class="large-6 columns">
<p class="text-right" style="padding:15px 0px;">
<a href="move-lite-data-to-mweb.html"
title="Next Post: 把 MWeb Lite 的文档库文档和数据搬到 MWeb 正式版中">把 MWeb Lite 的文档库文档和数据搬到 MWeb 正式版中 »</a>
</p>
</div>
</div>
<div class="comments-wrap">
<div class="share-comments">
<div id="disqus_thread"></div>
</div>
</div>
</div><!-- article-wrap -->
</div><!-- large 8 -->
<div class="large-4 medium-4 columns">
<div class="hide-for-small">
<div id="sidebar" class="sidebar">
<div id="site-info" class="site-info">
<div class="site-a-logo"><img src="media/14195170907881/icon.jpg" /></div>
<h1>Coder For Art</h1>
<div class="site-des">I'm an indie Mac/iOS developer, also want to be a CG artist</div>
<div class="social">
<a target="_blank" class="weibo" href="http://weibo.com/oulvhai" title="weibo">Weibo</a>
<a target="_blank" class="twitter" target="_blank" href="http://twitter.com/oulvhai" title="Twitter">Twitter</a>
<a target="_blank" class="github" target="_blank" href="https://github.com/oulvhai" title="GitHub">GitHub</a>
<a target="_blank" class="rss" href="atom.xml" title="RSS">RSS</a>
</div>
</div>
<div id="site-categories" class="side-item ">
<div class="side-header">
<h2>Important</h2>
</div>
<div class="side-content">
<div style="color:#ff0000; text-align:center; padding:8px;" class="bg-info site_notice">
<a style="color:#ff0000;" onclick="ga('send','event','global_notice_click');" href="https://zh.mweb.im/mweb3x-release-note.html" >MWeb 3 发布后 2.x 版维护说明及两者之间的功能对比！</a>
</div>
</div>
</div>
<div id="site-categories" class="side-item ">
<div class="side-header">
<h2>Categories</h2>
</div>
<div class="side-content">
<p class="cat-list">
<a href="Cocoa.html"><strong>Cocoa</strong></a>
<a href="CG%20Artist.html"><strong>CG Artist</strong></a>
<a href="Game%20Engine.html"><strong>Game Engine</strong></a>
<a href="MWeb-cat.html"><strong>MWeb</strong></a>
<a href="PinPhoto-cat.html"><strong>PinPhoto</strong></a>
</p>
</div>
</div>
<div id="site-categories" class="side-item">
<div class="side-header">
<h2>Recent Posts</h2>
</div>
<div class="side-content">
<ul class="posts-list">
<li class="post">
<a href="mweb3-release-note.html">MWeb 3.0 测试版更新情况</a>
</li>
<li class="post">
<a href="mweb3.0-on-test.html">MWeb 3.0 测试版终于发布了！欢迎大家试用！</a>
</li>
<li class="post">
<a href="15113184658847.html">MWeb for Mac, iOS 黑五半价促销一周，写个大概介绍。</a>
</li>
<li class="post">
<a href="mweb-ios-2.3.2-release.html">MWeb for iOS 2.3.2 发布！</a>
</li>
<li class="post">
<a href="how_to_use_images_in_mweb.html">MWeb Mac 版和 iOS 版图片及图床使用完全指南</a>
</li>
</ul>
</div>
</div>
</div><!-- sidebar -->
</div><!-- hide for small -->
</div><!-- large 4 -->
</div><!-- row -->
<div class="page-bottom clearfix">
<div class="row">
<p class="copyright">Copyright © 2015
Powered by <a target="_blank" href="http://www.mweb.im">MWeb</a>,
Theme used <a target="_blank" href="http://github.com">GitHub CSS</a>.</p>
</div>
</div>
</section>
</div>
</div>
<script src="asset/prism.js"></script>
<style type="text/css">
figure{margin: 0;padding: 0;}
figcaption{text-align:center;}
/* PrismJS 1.14.0
http://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background:#b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #F7F7F7;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
pre[class*="language-"].line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre[class*="language-"].line-numbers > code {
position: relative;
white-space: inherit;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}
</style>
<script type="text/javascript">
var disqus_shortname = 'coderforart';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<script type="text/javascript">
var disqus_shortname = 'coderforart';
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
<script src="asset/js/foundation.min.js"></script>
<script>
$(document).foundation();
function fixSidebarHeight(){
var w1 = $('.markdown-body').height();
var w2 = $('#sidebar').height();
if (w1 > w2) { $('#sidebar').height(w1); };
}
$(function(){
fixSidebarHeight();
})
$(window).load(function(){
fixSidebarHeight();
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-58735702-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>