mirror of
https://github.com/wahyd4/wahyd4.github.com.git
synced 2026-08-09 05:15:56 +10:00
2306 lines
102 KiB
HTML
2306 lines
102 KiB
HTML
<!DOCTYPE html>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<html class="theme-next gemini use-motion" lang="zh-Hans">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
|
||
<meta name="theme-color" content="#222">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<meta http-equiv="Cache-Control" content="no-transform" />
|
||
<meta http-equiv="Cache-Control" content="no-siteapp" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
|
||
|
||
<link href="/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />
|
||
|
||
|
||
<meta name="keywords" content="Go, JavaScript, Ruby on Rails, Java,Docker, CI, CD, Photography" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.2" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<meta name="description" content="Go, JavaScript, Ruby on Rails, Java,Docker, CI, CD, Photography">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="大染志">
|
||
<meta property="og:url" content="http://toozhao.com/index.html">
|
||
<meta property="og:site_name" content="大染志">
|
||
<meta property="og:description" content="Go, JavaScript, Ruby on Rails, Java,Docker, CI, CD, Photography">
|
||
<meta property="og:locale" content="zh-Hans">
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:title" content="大染志">
|
||
<meta name="twitter:description" content="Go, JavaScript, Ruby on Rails, Java,Docker, CI, CD, Photography">
|
||
|
||
|
||
|
||
<script type="text/javascript" id="hexo.configurations">
|
||
var NexT = window.NexT || {};
|
||
var CONFIG = {
|
||
root: '/',
|
||
scheme: 'Gemini',
|
||
version: '5.1.2',
|
||
sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
|
||
fancybox: true,
|
||
tabs: true,
|
||
motion: true,
|
||
duoshuo: {
|
||
userId: '0',
|
||
author: '博主'
|
||
},
|
||
algolia: {
|
||
applicationID: '',
|
||
apiKey: '',
|
||
indexName: '',
|
||
hits: {"per_page":10},
|
||
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
|
||
|
||
<link rel="canonical" href="http://toozhao.com/"/>
|
||
|
||
|
||
|
||
|
||
|
||
<title>大染志</title>
|
||
|
||
|
||
|
||
|
||
|
||
<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','https://www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-5243064-16', 'auto');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
</head>
|
||
|
||
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="container sidebar-position-left
|
||
page-home
|
||
">
|
||
<div class="headband"></div>
|
||
|
||
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
|
||
<div class="header-inner"><div class="site-brand-wrapper">
|
||
<div class="site-meta ">
|
||
|
||
|
||
<div class="custom-logo-site-title">
|
||
<a href="/" class="brand" rel="start">
|
||
<span class="logo-line-before"><i></i></span>
|
||
<span class="site-title">大染志</span>
|
||
<span class="logo-line-after"><i></i></span>
|
||
</a>
|
||
</div>
|
||
|
||
<p class="site-subtitle">想要玩得很 High 的程序员</p>
|
||
|
||
</div>
|
||
|
||
<div class="site-nav-toggle">
|
||
<button>
|
||
<span class="btn-bar"></span>
|
||
<span class="btn-bar"></span>
|
||
<span class="btn-bar"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="site-nav">
|
||
|
||
|
||
|
||
<ul id="menu" class="menu">
|
||
|
||
|
||
<li class="menu-item menu-item-home">
|
||
<a href="/" rel="section">
|
||
|
||
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
|
||
|
||
首页
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class="menu-item menu-item-archives">
|
||
<a href="/archives/" rel="section">
|
||
|
||
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
|
||
|
||
归档
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class="menu-item menu-item-tags">
|
||
<a href="/tags" rel="section">
|
||
|
||
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
|
||
|
||
标签
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class="menu-item menu-item-about">
|
||
<a href="/about" rel="section">
|
||
|
||
<i class="menu-item-icon fa fa-fw fa-user"></i> <br />
|
||
|
||
关于
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class="menu-item menu-item-知识图谱">
|
||
<a href="https://toozhao.com/knowledge-mind-mapping" rel="section">
|
||
|
||
<i class="menu-item-icon fa fa-fw fa-question-circle"></i> <br />
|
||
|
||
知识图谱
|
||
</a>
|
||
</li>
|
||
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
</nav>
|
||
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main" class="main">
|
||
<div class="main-inner">
|
||
<div class="content-wrap">
|
||
<div id="content" class="content">
|
||
|
||
<section id="posts" class="posts-expand">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
<link itemprop="mainEntityOfPage" href="http://toozhao.com/2017/10/12/caddy-markdown/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="name" content="Junv">
|
||
<meta itemprop="description" content="">
|
||
<meta itemprop="image" content="http://blog.tuxue.xyz/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
</span>
|
||
|
||
|
||
<header class="post-header">
|
||
|
||
|
||
|
||
<h1 class="post-title" itemprop="name headline">
|
||
|
||
<a class="post-title-link" href="/2017/10/12/caddy-markdown/" itemprop="url">使用 Caddy Web服务器显示 Markdown 文件</a></h1>
|
||
|
||
|
||
<div class="post-meta">
|
||
<span class="post-time">
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-10-12T16:15:20+11:00">
|
||
2017-10-12
|
||
</time>
|
||
|
||
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-check-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">更新于:</span>
|
||
|
||
<time title="更新于" itemprop="dateModified" datetime="2018-09-29T10:12:21+10:00">
|
||
2018-09-29
|
||
</time>
|
||
|
||
</span>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<p>建议阅读此篇文章前，先阅读本博客的前篇 Caddy上手文章 ——【<a href="http://toozhao.com/2017/09/19/caddy/">快速上手更简单的 Web 服务器 —— Caddy</a>】</p>
|
||
<p>本篇文章我们将利用 Caddy Web 服务器的Markdown 插件和它强大的网页模板功能，在直接托管，渲染显示Markdown文件。</p>
|
||
<p>现在得益于 Markdown 的简单易用，越来越多的文档都在使用使用 Markdown来编写。像我们常用的 Github、GitBook 等流行服务也都在使用 Markdown。那么为什么越来越多的相关技术文档和资料都是使用 Markdown 编写的呢？我觉得所有原因都归于『简单』二字。我们通过一些常用的符号标记，就可以写出格式整齐、漂亮的文档。而不用写繁琐的 HTML。而通过简单的工具转化，我们就可以将 Markdown 文档转成 HTML 的格式。</p>
|
||
<h2 id="安装-Caddy"><a href="#安装-Caddy" class="headerlink" title="安装 Caddy"></a>安装 Caddy</h2><p>那现在就让我们来实现这个功能吧，首先你得在你的电脑或者服务器上安装 Caddy，如何安装？请查看之前的文章进行回顾或直接运行如下脚本：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">curl https://getcaddy.com | bash -s personal</div></pre></td></tr></table></figure></p>
|
||
<h2 id="初步渲染-Markdown"><a href="#初步渲染-Markdown" class="headerlink" title="初步渲染 Markdown"></a>初步渲染 Markdown</h2><p>Markdown 作为 Caddy Web 服务器的标准指令，使得我们可以直接在 Caddyfile 配置文件中使用该指令，托管，渲染Markdown 文件。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">0.0.0.0:8080 {</div><div class="line"> markdown {</div><div class="line"> ext .md .markdown</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure></p>
|
||
<p>这里的配置是说：在我们希望托管 Markdown 文件的服务器地址块中，让服务器对当前目录启用渲染 Markdown 文件的功能，即当我们访问 Markdown 文件时，Caddy 自动将其转化为 HTML 进行展示。下面我将以为我本地的文件作为示例给大家展示效果和截图。</p>
|
||
<p><img src="http://blog.tuxue.xyz/files.png" alt="files"></p>
|
||
<p>如图所示为 Caddyfile 所在目录。可以看到这里有若干子目录，和子目录下面的.md 文件。现在让我们运行 caddy。 在浏览器中访问 <code>http://localhost:8080/0.general/0.general.md</code>文件。可以看到效果如下：</p>
|
||
<p><img src="http://blog.tuxue.xyz/raw.png" alt="raw"></p>
|
||
<p>Caddy 成功的将 Markdown文件以网页的形式进行展示，并且正确显示此了相应的格式和层次结构。但是这里有个美中不足之处，Caddy 渲染出的效果，不够美观。简单一点说，没有 CSS 修饰。</p>
|
||
<h3 id="美化-Markdown-文件"><a href="#美化-Markdown-文件" class="headerlink" title="美化 Markdown 文件"></a>美化 Markdown 文件</h3><p>那我们如何将Markdown 文件更加美观的展示呢？由于 Caddy 本身是使用 Golang 进行开发的，因此 Caddy 也将 Go 强大的模板功能提供给了用户。这里我们可以利用 Caddy 模板功能来美化 Markdown 文件。我们将在模板网页中加入特定 CSS 来美化页面。CSS 库来自： <a href="https://github.com/sindresorhus/github-markdown-css" target="_blank" rel="external">https://github.com/sindresorhus/github-markdown-css</a></p>
|
||
<p>在 Caddyfile 目录下创建一个叫 <code>template.html</code> 的网页文件，添加如下内容:</p>
|
||
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="meta"><!DOCTYPE html></span></div><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">title</span>></span>{{.Doc.title}}<span class="tag"></<span class="name">title</span>></span></div><div class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.8.0/github-markdown.css"</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> .markdown-body {</span></div><div class="line"><span class="undefined"> box-sizing: border-box;</span></div><div class="line"><span class="undefined"> min-width: 200px;</span></div><div class="line"><span class="undefined"> max-width: 980px;</span></div><div class="line"><span class="undefined"> margin: 0 auto;</span></div><div class="line"><span class="undefined"> padding: 45px;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"><span class="tag"></<span class="name">head</span>></span></div><div class="line"></div><div class="line"><span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"markdown-body"</span>></span></div><div class="line"> {{.Doc.body}}</div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">body</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure>
|
||
<p>我们的 Markdown 文本内容会在 <code><div class="markdown-body"></code> 中显示。<code>github-markdown-css</code> 库会对类名为 <code>markdown-body</code> 中的内容进行美化。<br><code>.Doc.title</code> 和 <code>.Doc.body</code> 则是网页模板中的动态内容，前者为文档的文件名，而后者为文档中的全部内容。与此同时，我们需要在 Caddyfile 配置文件中添加模板特性。<br>HTML 中而外的 <code><style></code>标签是为了，限制页面内容的宽度，和将内容居中显示。</p>
|
||
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">0.0.0.0:8080 {</div><div class="line"> markdown {</div><div class="line"> ext .md .markdown</div><div class="line"> template template.html <span class="comment">#后面的值即为模板文件的文件地址</span></div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
|
||
<p>重启 Caddy 服务器，刷新页面。有没有觉得页面变得更加美观，漂亮了。</p>
|
||
<p><img src="http://blog.tuxue.xyz/css.png" alt="css"></p>
|
||
<h3 id="添加文档目录索引（TOC）"><a href="#添加文档目录索引（TOC）" class="headerlink" title="添加文档目录索引（TOC）"></a>添加文档目录索引（TOC）</h3><p>现在我们的 Markdown 文档已经可以很美观的进行展示了，但是我们还可以做得更好，让用户在第一屏就可以查看当前文档的目录索引，而且可以点击链接进行快速访问和跳转。 这就是我们常见的 TOC 功能。（Table of contents）</p>
|
||
<p>为了实现 TOC功能，我们需要引入两个 JS 库：</p>
|
||
<ul>
|
||
<li>jQuery， 由于 Caddy 在对 Markdown文档进行转化时，没有为h1,h2,h3 这样的标题添加 id属性，而我们的<code><a></code>链接跳转，正需要 id 属性。因此，我们需要手动为各级标题添加 id 属性。</li>
|
||
<li>tocbot，该 JS 库可以自动生成 TOC 内容。</li>
|
||
</ul>
|
||
<p>因此修改我们的网页模板成类似以下内容：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div></pre></td><td class="code"><pre><div class="line"><span class="meta"><!DOCTYPE html></span></div><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"><span class="tag"><<span class="name">head</span>></span></div><div class="line"> <span class="tag"><<span class="name">title</span>></span>{{.Doc.title}}<span class="tag"></<span class="name">title</span>></span></div><div class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></div><div class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdnjs.cloudflare.com/ajax/libs/tocbot/3.0.4/tocbot.min.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></div><div class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.8.0/github-markdown.css"</span>></span></div><div class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://cdnjs.cloudflare.com/ajax/libs/tocbot/3.0.4/tocbot.css"</span> /></span></div><div class="line"> <span class="tag"><<span class="name">style</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> .markdown-body {</span></div><div class="line"><span class="undefined"> box-sizing: border-box;</span></div><div class="line"><span class="undefined"> min-width: 200px;</span></div><div class="line"><span class="undefined"> max-width: 980px;</span></div><div class="line"><span class="undefined"> margin: 0 auto;</span></div><div class="line"><span class="undefined"> padding: 45px;</span></div><div class="line"><span class="undefined"> }</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"> <span class="tag"><<span class="name">script</span>></span><span class="undefined"></span></div><div class="line"><span class="undefined"> $(document).ready(function () {</span></div><div class="line"><span class="undefined"> //为各级标题自动生成id属性</span></div><div class="line"><span class="undefined"> $("h1,h2,h3").each(function () {</span></div><div class="line"><span class="undefined"> var hyphenated = $(this).text().replace(/\s/g, '-');</span></div><div class="line"><span class="undefined"> $(this).attr('id', hyphenated);</span></div><div class="line"><span class="undefined"> });</span></div><div class="line"><span class="undefined"> // 初始化 toc 内容</span></div><div class="line"><span class="undefined"> tocbot.init({</span></div><div class="line"><span class="undefined"> tocSelector: '.toc', // 放置 toc 内容的容器</span></div><div class="line"><span class="undefined"> contentSelector: '.markdown-body', // markdown 文档内容所在</span></div><div class="line"><span class="undefined"> headingSelector: 'h1, h2, h3', // 需要索引的标题级别</span></div><div class="line"><span class="undefined"> positionFixedSelector: ".toc" //将 toc 内容块位置固定。</span></div><div class="line"><span class="undefined"> });</span></div><div class="line"><span class="undefined"> });</span></div><div class="line"><span class="undefined"> </span><span class="tag"></<span class="name">script</span>></span></div><div class="line"><span class="tag"></<span class="name">head</span>></span></div><div class="line"><span class="tag"><<span class="name">body</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"toc"</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"markdown-body"</span>></span></div><div class="line"> {{.Doc.body}}</div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">body</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure></p>
|
||
<p>保存后，直接刷新页面。我们就可以看到带有 TOC 的 Markdown 文档了。</p>
|
||
<p><img src="http://blog.tuxue.xyz/final.png" alt="toc"></p>
|
||
<p>我们还可以试着访问下另外目录下的 Markdown 文件，可以看到所有 Markdown 文件都带有 TOC 和美观的样式了。</p>
|
||
<p><img src="http://blog.tuxue.xyz/another.png" alt="monitor"></p>
|
||
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>所以，如果你不想把 Markdown文档放到 Github 或者使用 GitBook 来托管，可以试试这种方法，快速搭建一个基于 Caddy 服务器的 Markdown 文档的网站。</p>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
<link itemprop="mainEntityOfPage" href="http://toozhao.com/2017/09/19/caddy/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="name" content="Junv">
|
||
<meta itemprop="description" content="">
|
||
<meta itemprop="image" content="http://blog.tuxue.xyz/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
</span>
|
||
|
||
|
||
<header class="post-header">
|
||
|
||
|
||
|
||
<h1 class="post-title" itemprop="name headline">
|
||
|
||
<a class="post-title-link" href="/2017/09/19/caddy/" itemprop="url">快速上手更简单的 Web 服务器 —— Caddy</a></h1>
|
||
|
||
|
||
<div class="post-meta">
|
||
<span class="post-time">
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-09-19T16:23:53+10:00">
|
||
2017-09-19
|
||
</time>
|
||
|
||
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-check-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">更新于:</span>
|
||
|
||
<time title="更新于" itemprop="dateModified" datetime="2017-10-13T12:47:58+11:00">
|
||
2017-10-13
|
||
</time>
|
||
|
||
</span>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<p><img src="https://wx2.sinaimg.cn/mw1024/49fcaea6gy1fjp0hua3q1j20yp0l7dzc.jpg" alt="Caddy"></p>
|
||
<p>说到Web 服务器，我们大多想到的是 Apache 这个老前辈和如日中天的Nginx，但是这里今天我将要分享的是 Web 服务器和反向代理服务器的新秀 Caddy。在我们拥有了这么强大的 Nginx 以后我们为什么还需要 Caddy？<br>我认为 Caddy 之所以可以占有一席之地是因为它的两大法宝：<code>配置简单</code> 和 <code>自动启用 HTTPS</code>。下面带下面快速上手这个软件。</p>
|
||
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>Caddy 提醒定制化的下载，可以自由选择各种插件和平台。请前往: <a href="https://caddyserver.com/download" target="_blank" rel="external">https://caddyserver.com/download</a> 下载。 也可以使用这个一键安装脚本：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">curl https://getcaddy.com | bash</div></pre></td></tr></table></figure></p>
|
||
<p>完成之后，我们可以尝试执行下<code>caddy -version</code>。 当你看到有有类似：<code>Caddy 0.10.9</code>，即表示安装成功。</p>
|
||
<h2 id="Hello-World"><a href="#Hello-World" class="headerlink" title="Hello World"></a>Hello World</h2><p>在命令行里面直接输入<code>caddy</code>，然后打开浏览器输入： <code>http://ip:2015</code>。 看到什么了吗？ 你得到了一个404页面。Caddy 已经成功运行了。相比与其他浏览器需要各种配置文件才能运行相比，这就是 Caddy 的简单之处，不需要任何配置文件即可运行。当然当我们需要各种高级功能的时候，配置文件还是必不可少的。</p>
|
||
<p>默认情况下，Caddy 运行在<code>2015</code> 端口。我们可以可以 Caddy 强大的命令行工具来自定义运行端口。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">caddy -p 80</div></pre></td></tr></table></figure></p>
|
||
<p>在无配置文件的情况下，Caddy 默认是映射当前程序执行的目录所有文件。因此我们可以快速创建一个文件：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">echo</span> <span class="string">"<h1>Hello Caddy</h1>"</span> >> index.html</div></pre></td></tr></table></figure></p>
|
||
<p>再次刷新浏览器，刚才我们写的 <code>Hello Caddy</code> 已经出现在页面上了</p>
|
||
<h2 id="强大的配置文件"><a href="#强大的配置文件" class="headerlink" title="强大的配置文件"></a>强大的配置文件</h2><p>Caddy 各种强大的功能还得需要 Caddyfile 体现。我们可以在任意目录放置我们的配置文件,通过命令行<code>caddy -conf</code> 即可指定</p>
|
||
<h3 id="Host-目录下的网页"><a href="#Host-目录下的网页" class="headerlink" title="Host 目录下的网页"></a>Host 目录下的网页</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">0.0.0.0:8080 {</div><div class="line"> root /usr/local/www/</div><div class="line">}</div></pre></td></tr></table></figure>
|
||
<p>这里简单解释下，<code>0.0.0.0</code> 表示我们将网站绑定至可以访问到本机的任意一个 IP；<code>8080</code>表示我们将网站暴露在8080端口； <code>root</code> 参数则表示网站的根节点。这就是最简单的一个Host 网站的配置。</p>
|
||
<p>当前我们可以对网站添加更多的配置。比如设置响应过期时间，启用 gzip, 指定各种日志的输出端。</p>
|
||
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">0.0.0.0:8080 {</div><div class="line"> root /usr/<span class="built_in">local</span>/www/</div><div class="line"> timeouts 30s</div><div class="line"> gzip</div><div class="line"> <span class="built_in">log</span> /var/<span class="built_in">log</span>/caddy/access.log</div><div class="line"> errors /var/<span class="built_in">log</span>/caddy/error.log</div><div class="line">}</div></pre></td></tr></table></figure>
|
||
<h3 id="配置反向代理"><a href="#配置反向代理" class="headerlink" title="配置反向代理"></a>配置反向代理</h3><p>什么时候你会需要反向代理呢？想象你有一个前后端分离的程序。前端是通过 JS 发送 Ajax 请求后端 API。默认情况下前端程序占用一个端口，后端占用一个另外端口。我们会遇到两个问题： CORS（跨域请求）和额外的 Options 请求。 这个时候我们就可以使用反向代理让前端和后端共享一个端口。</p>
|
||
<p>那怎么做呢，在 Caddy 里面也特别简单，假设我们的前端就是上面的那样，而我们的后面之前都运行在：<code>http://ip:4000</code> 下面。而且我们的 后端 API URL 里面都有 <code>/api</code></p>
|
||
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">0.0.0.0:8080/api {</div><div class="line"> proxy / 127.0.0.0:4000/api {</div><div class="line"> transparent</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
|
||
<p>这里的配置的意思是说，当浏览器收到所有包含<code>:8080/api</code> 的请求都会自动转发到<code>127.0.0.1:4000/api</code> 这个地址，而<code>:8080/api</code> 后面的地址会自动转发下去，而<code>transparent</code> 这个设置保证了我们的转发不会在浏览器生成任何额外的<code>301</code> 或者<code>302</code>请求。</p>
|
||
<h2 id="自动-HTTPS"><a href="#自动-HTTPS" class="headerlink" title="自动 HTTPS"></a>自动 HTTPS</h2><p>Caddy 另外一个亮点就是，可以为已经<code>绑定域名</code>的在<code>公网</code>运行的服务器自动从 Let’s Encrypt生成和下载 HTTPS 证书，让你的网站支持 HTTPS 协议访问，保证网站数据传输的安全。很简单，你所需的仅仅是将绑定的 IP 改成域名。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">xxx.com {</div><div class="line"> root /usr/<span class="built_in">local</span>/www/</div><div class="line">}</div></pre></td></tr></table></figure></p>
|
||
<p>再次运行Caddy，按照提示输入你的 Email 之后。Caddy 会自动帮你获取并启用 HTTPS 证书。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">root@ss2:~<span class="comment"># caddy -conf Caddyfile</span></div><div class="line">Activating privacy features...</div><div class="line">Your sites will be served over HTTPS automatically using Let<span class="string">'s Encrypt.</span></div><div class="line"><span class="string">By continuing, you agree to the Let'</span>s Encrypt Subscriber Agreement at:</div><div class="line"> https://acme-v01.api.letsencrypt.org/terms</div><div class="line">Please enter your email address so you can recover your account <span class="keyword">if</span> needed.</div><div class="line">You can leave it blank, but you<span class="string">'ll lose the ability to recover your account.</span></div><div class="line"><span class="string">Email address: xxxx@gmail.com</span></div><div class="line"><span class="string"> done.</span></div><div class="line"><span class="string">https://xxx.com</span></div><div class="line"><span class="string">http://xxx.com</span></div></pre></td></tr></table></figure></p>
|
||
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>通过上面的例子，我们可以看出 Caddy的快速上手能力和超级实用的 HTTPS 功能。除此之前 Caddy 还提供一大堆的插件供我们使用。比如直接访问 Markdown 文件、Host Git 仓库的文件、将自身 Metric 数据传到 Prometheus 等等。快去试试吧！</p>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
<link itemprop="mainEntityOfPage" href="http://toozhao.com/2017/08/23/vscode-golang/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="name" content="Junv">
|
||
<meta itemprop="description" content="">
|
||
<meta itemprop="image" content="http://blog.tuxue.xyz/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
</span>
|
||
|
||
|
||
<header class="post-header">
|
||
|
||
|
||
|
||
<h1 class="post-title" itemprop="name headline">
|
||
|
||
<a class="post-title-link" href="/2017/08/23/vscode-golang/" itemprop="url">使用 VS Code 快速搭建你的 Golang 开发 IDE</a></h1>
|
||
|
||
|
||
<div class="post-meta">
|
||
<span class="post-time">
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-23T17:26:31+10:00">
|
||
2017-08-23
|
||
</time>
|
||
|
||
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-check-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">更新于:</span>
|
||
|
||
<time title="更新于" itemprop="dateModified" datetime="2018-09-29T10:12:21+10:00">
|
||
2018-09-29
|
||
</time>
|
||
|
||
</span>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<p>说到 IDE 我们想到的都是 Intellij 和 Eclipse系列这样的几百兆的桌面应用程序，它让我们编程效率得以很大提升，在日常工作中变得离不开这些软件。我们最喜欢用的 IDE 功能主要有：</p>
|
||
<ul>
|
||
<li>代码自动补全</li>
|
||
<li>代码重构</li>
|
||
<li>代码格式化</li>
|
||
<li>代码调试</li>
|
||
<li>代码高亮</li>
|
||
<li>代码错误检查</li>
|
||
<li>代码引用查询与跳转</li>
|
||
</ul>
|
||
<p>但往往 IDE 也有占用内存多，时不时反应卡顿等问题。因此很多程序员在开发一些动态语言、脚本语言的时候更倾向于选择轻量级的文本编辑器软件。如：Sublime Text、Atom 、vscode（Visual Studio Code 简称 vscode）。其实不仅仅是动态语言或者脚本语言，现在的文本编辑器已经基本包含了上述 IDE 配置的功能了，除开在<strong>代码重构</strong>方面还落后甚远之外，其他功能点已经差别不大了。<br>纵观前两年最流行文本编辑器的还是 Sublime Text，而当下最新，最火热，最好用的我认为还得属于 vscode。为什么 vscode 能够在Sublime Text 和 Atom 两位前辈面前打下一片天地？如果用一个最大的优势来描述的话：</p>
|
||
<ul>
|
||
<li>对于 Sublime Text， vscode 最大的优势是 UI 美观、功能全面，比如集成了代码调试、Git 代码变更查和更友好的插件安装功能</li>
|
||
<li>而相较于 Atom 而言，vscode 比它的同门师兄最大的优势则是快。</li>
|
||
</ul>
|
||
<p>就我自己日常开发而言，除开 Java 以外，平时编写 Ruby、JavaScript、HTML、Vue.js、Golang、Markdown、Dockerfile 等语言都在使用 vscode。</p>
|
||
<p>在这篇文章中我不会再对为什么要用 VS Code 做过多解释。而是将介绍使用 vscode 快速搭建一个优秀的 Go (Golang) 的开发环境。</p>
|
||
<h3 id="安装-vscode"><a href="#安装-vscode" class="headerlink" title="安装 vscode"></a>安装 vscode</h3><p>说了 vscode 这么多好，如果你还不知道 vscode 是何物的话，这里简单介绍下。vscode 是微软基于 Electron 框架开发的跨平台的开源的文本编辑器。也许你曾用过它的兄弟 Visual Studio，被它的庞大和臃肿吓到，在这里却不用担心。vscode 是一个全新的项目，旨在打造一个轻量级、面向 Web 开发、稳定高效的开发平台。</p>
|
||
<p>你可以通过 <a href="https://code.visualstudio.com" target="_blank" rel="external">https://code.visualstudio.com</a> 官网下载安装 vscode软件</p>
|
||
<h3 id="安装-Go-插件"><a href="#安装-Go-插件" class="headerlink" title="安装 Go 插件"></a>安装 Go 插件</h3><h4 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h4><p>vscode 之所以强大，其中很大一点便是因为它拥有庞大的插件对各个语言提供相关的功能。而对于 Go,官方提供了强大的插件 <a href="https://marketplace.visualstudio.com/items?itemName=lukehoban.Go" target="_blank" rel="external">Go</a>。你可以直接通过在插件页面，输入搜索 Go 进行安装相关插件，安装之后对 vscode 进行重启。该插件对 Golang 支持非常丰富的功能：</p>
|
||
<ul>
|
||
<li>代码格式化</li>
|
||
<li>保存时代码自动格式化</li>
|
||
<li>自动添加 Imports</li>
|
||
<li>代码错误提示</li>
|
||
<li>引用查询与跳转到定义位置</li>
|
||
<li>Go 代码元素搜索</li>
|
||
<li>文档查看</li>
|
||
<li>支持代码调试等等功能。</li>
|
||
</ul>
|
||
<p>这些可以功能可以很好的满足我们日常开发所需。</p>
|
||
<h4 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h4><p>Go 插件提供丰富的配置项，让我们对插件的默认行为进行调整，以便最大限度的适合每个人。<br>依次键入<code>F1</code> -> <code>Open User Settings</code> 即可打开vscode 用户配置文件，在文件末尾可以添加类似如下属性。<br><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">"go.buildOnSave": true, //在保存代码时自动编译代码</div><div class="line">"go.lintOnSave": true, //在保存代码时自动检查代码可以优化的地方，并给出建议</div><div class="line">"go.vetOnSave": true, //在保存代码时自动检查潜在的错误</div><div class="line">"go.buildTags": "",</div><div class="line">"go.buildFlags": [],</div><div class="line">"go.lintTool": "golint", //使用 golint 库来执行 lint操作，你也可以选择使用gometalinter</div><div class="line">"go.lintFlags": [],</div><div class="line">"go.vetFlags": [],</div><div class="line">"go.coverOnSave": false, //在保存代码时执行测试，并显示测试覆盖率</div><div class="line">"go.useCodeSnippetsOnFunctionSuggest": true, //使用代码片段作为提示</div><div class="line">"go.formatOnSave": true, //在保存代码时自动格式化代码</div><div class="line">"go.formatTool": "goimports", //使用 goimports 工具进行代码格式化，或者使用 goreturns和gofmt</div><div class="line">"go.formatFlags": [],</div><div class="line">"go.gocodeAutoBuild": true, //代码自动编译构建</div><div class="line">"go.goroot": "/usr/local/Cellar/go/1.8.3/libexec", //设置 goroot，正常编译 go 代码。</div><div class="line">"go.gopath": "/Users/junv/gocode:/Users/junv/mygocode", // 设置 gopath，有利于自动导入库</div></pre></td></tr></table></figure></p>
|
||
<h4 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h4><p><img src="http://blog.tuxue.xyz/vscode.gif" alt="使用"></p>
|
||
<h4 id="调试-Go程序"><a href="#调试-Go程序" class="headerlink" title="调试 Go程序"></a>调试 Go程序</h4><p>打开 go 源码，在你期望调试的行号左侧，点击即可添加断点。<br>当你第一次进行调试时，vscode 则要求你添加调试程序的相关配置。可以输入类似下图的配置即可。<br><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> <span class="attr">"version"</span>: <span class="string">"0.2.0"</span>,</div><div class="line"> <span class="attr">"configurations"</span>: [</div><div class="line"> {</div><div class="line"> "name": "monitor-api", //程序名字</div><div class="line"> "type": "go",</div><div class="line"> "request": "launch",</div><div class="line"> "mode": "debug",</div><div class="line"> "remotePath": "",</div><div class="line"> "port": 1234,</div><div class="line"> "host": "127.0.0.1",</div><div class="line"> "program": "${workspaceRoot}",</div><div class="line"> "env": {</div><div class="line"> "QUICKPAY_ENV": "testing" //注入你需要的环境变量</div><div class="line"> },</div><div class="line"> "args": []</div><div class="line"> }</div><div class="line"> ]</div><div class="line">}</div></pre></td></tr></table></figure></p>
|
||
<p>点击开始按钮，即可进行Go 程序调试了。</p>
|
||
<p><img src="http://blog.tuxue.xyz/debug.png" alt="debug"></p>
|
||
<h4 id="快速的搜索"><a href="#快速的搜索" class="headerlink" title="快速的搜索"></a>快速的搜索</h4><p>当项目源代码越来越多，依赖的第三方库也越来越多的时候，你会发现 vscode的搜索功能 变慢了，而且很多时候我们并不希望搜索结果中包含 vendor （第三方依赖源代码）目录下的代码。<br>那么你可以尝试在<code>User Settings</code> 中添加如下的配置：<br><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">"search.exclude": {</div><div class="line"> "**/node_modules": true,</div><div class="line"> "**/bower_components": true,</div><div class="line"> "**/vendor": true //排除 vendor 目录</div><div class="line">},</div></pre></td></tr></table></figure></p>
|
||
<p>这样 vscode 在执行搜索的时候就会跳过 vendor 目录下的文件，让搜索保持高效。</p>
|
||
<h3 id="如虎添翼的其他插件"><a href="#如虎添翼的其他插件" class="headerlink" title="如虎添翼的其他插件"></a>如虎添翼的其他插件</h3><h4 id="IntelliJ-IDEA-Keybindings"><a href="#IntelliJ-IDEA-Keybindings" class="headerlink" title="IntelliJ IDEA Keybindings"></a>IntelliJ IDEA Keybindings</h4><p>如果你和我一样也是从 Intellij 系列 IDE 迁移过来，想必你也遇到快捷键不习惯的问题。推荐你安装<a href="https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings" target="_blank" rel="external">IntelliJ IDEA Keybindings</a> 插件。来映射快捷键，让你在 vscode 可以使用使用 Intellij 的快捷键。<br>如：</p>
|
||
<ul>
|
||
<li><code>alt</code> + <code>F7</code> 查看方法引用</li>
|
||
<li><code>ctrl</code> + <code>shift</code> + <code>↑</code> 或者 <code>ctrl</code> + <code>shift</code> + <code>↓</code> 移动行</li>
|
||
<li><code>cmd</code> + <code>F4</code> 关闭当前窗口</li>
|
||
<li><code>alt</code> + <code>cmd</code>+ <code>→</code> 或者 <code>alt</code> + <code>cmd</code>+ <code>←</code> 切换到前/后一次操作的鼠标位置了</li>
|
||
</ul>
|
||
<p>更多的快捷键映射，可以查看该插件主页。</p>
|
||
<h4 id="Code-Runner"><a href="#Code-Runner" class="headerlink" title="Code Runner"></a>Code Runner</h4><p><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner" target="_blank" rel="external">Code Runner</a> 插件，让你可以快速你运行各种语言的代码片段。</p>
|
||
<p>在可运行的 go 文件页面，点击界面右上角的<code>➤</code> 即可快速运行该文件。</p>
|
||
<p><img src="http://blog.tuxue.xyz/code-runner.png" alt="code runner"></p>
|
||
<h3 id="概括"><a href="#概括" class="headerlink" title="概括"></a>概括</h3><p>通过本篇文章可以看出，依赖于vscode 强大的插件我们可以快速搭建完善的 Go 语言开发环境。而它相较于 IDE 的最大优势则是性能良好、扩展性强、免费和轻量级。</p>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
<link itemprop="mainEntityOfPage" href="http://toozhao.com/2016/10/17/easiest-way-to-use-go/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="name" content="Junv">
|
||
<meta itemprop="description" content="">
|
||
<meta itemprop="image" content="http://blog.tuxue.xyz/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
</span>
|
||
|
||
|
||
<header class="post-header">
|
||
|
||
|
||
|
||
<h1 class="post-title" itemprop="name headline">
|
||
|
||
<a class="post-title-link" href="/2016/10/17/easiest-way-to-use-go/" itemprop="url">开发Go项目最简单的方式 — 一个基于Docker的go 工具</a></h1>
|
||
|
||
|
||
<div class="post-meta">
|
||
<span class="post-time">
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建于" itemprop="dateCreated datePublished" datetime="2016-10-17T11:30:00+11:00">
|
||
2016-10-17
|
||
</time>
|
||
|
||
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-check-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">更新于:</span>
|
||
|
||
<time title="更新于" itemprop="dateModified" datetime="2016-10-17T14:15:21+11:00">
|
||
2016-10-17
|
||
</time>
|
||
|
||
</span>
|
||
|
||
|
||
<span class="post-category" >
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-folder-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">分类于</span>
|
||
|
||
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/docker/" itemprop="url" rel="index">
|
||
<span itemprop="name">docker</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
|
||
，
|
||
|
||
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/docker/go/" itemprop="url" rel="index">
|
||
<span itemprop="name">go</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
|
||
，
|
||
|
||
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/docker/go/翻译/" itemprop="url" rel="index">
|
||
<span itemprop="name">翻译</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
|
||
|
||
</span>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<p>当我尝试开发一个在 <a href="[http://www.iron.io/worker]">IronWorkerr</a> 上运行的非常简单的程序的时候，我发现目前为止没有一个工具可以让人在几分钟之内运行一段 Go 的示例代码。但在其他语言里面这是可以很容易做到的， 因为他们不像 Go 一样需要设置 GOPATH环境变量，遵守一个特定的代码目录结构，而且他们通常还有更简单的依赖管理工具。</p>
|
||
<h3 id="有什么更好的方式吗？"><a href="#有什么更好的方式吗？" class="headerlink" title="有什么更好的方式吗？"></a>有什么更好的方式吗？</h3><p>我最近想了很多，也写了很过关于 Docker 的文章， 并尝试在所有能使用 Docker 的情境下都坚持使用 Docker（是的，我是 Docker 的超级粉丝）。大部分原因是因为在 <a href="[http://www.iron.io/]">Iron.io</a> ，我们从事 Docker 的相关工作。我们运行了很多 Docker 容器，<a href="http://www.iron.io/blog/2014/10/docker-in-production-what-weve-learned.html" target="_blank" rel="external">真的很多</a>。在这期间，我已经意识到 Docker 的强大与疯狂之处。相信我，这不只是炒作。</p>
|
||
<p>我们向用户展示如何使用 Docker 容器构建和测试他们的 Go 语言程序已经有一段时间了，但始终有一个痛点，让我们如鲠在喉。那便是用户需要将代码放到特定的目录， 配置 GOPATH 环境变量，使用一个第三方工具如 godep 来 加载和代理依赖（注意通常这些依赖和你的代码一样，也需要被版本控制管理），有序的加载相关目录等等。这些当然可以完成，但是总是让人觉得不够爽。</p>
|
||
<p>现在，这个流程变得更好些了。</p>
|
||
<h3 id="介绍下这个基于-Docker-的-Go-工具"><a href="#介绍下这个基于-Docker-的-Go-工具" class="headerlink" title="介绍下这个基于 Docker 的 Go 工具"></a>介绍下这个基于 Docker 的 Go 工具</h3><p>我创建了一个基于 Docker 的 go 工具—— <a href="[https://hub.docker.com/r/treeder/go/]">“treeder/go”</a> ，他让 Go 语言开发变得超级简单。 你唯一需要安装的只有 Docker。 下面是一些它的一些功能和好处： </p>
|
||
<ul>
|
||
<li>你不需要安装 Go</li>
|
||
<li>你不需要安装这些相关的工具</li>
|
||
<li>你不需要配置 GOPATH 环境变量</li>
|
||
<li>你不需要将你的代码放到特定的目录（如： /src/github.com/user/hello）或者 Go 的安装目录， 你可以任意放置你的代码。</li>
|
||
<li>不需要重写代码里面依赖导入目录就可以加载相应依赖</li>
|
||
<li>代码交叉编译</li>
|
||
<li>代码静态编译</li>
|
||
<li>将代码打包成 Docker 镜像（一个命令即可搞定，然后你将得到一个包含你的代码的镜像）</li>
|
||
<li>构建远端 git 仓库的代码</li>
|
||
</ul>
|
||
<h3 id="演示"><a href="#演示" class="headerlink" title="演示"></a>演示</h3><h5 id="基础部分"><a href="#基础部分" class="headerlink" title="基础部分"></a>基础部分</h5><p>让我们先来写个简单的例子，首先复制粘贴下面的代码到一个叫 app.go 的文件，放到任意目录。<br><figure class="highlight go"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">package</span> main</div><div class="line"></div><div class="line"><span class="keyword">import</span> (</div><div class="line"> <span class="string">"fmt"</span></div><div class="line"> <span class="string">"log"</span></div><div class="line"> <span class="string">"net/http"</span></div><div class="line"></div><div class="line"> <span class="string">"github.com/gorilla/mux"</span></div><div class="line">)</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">func</span> <span class="title">main</span><span class="params">()</span></span> {</div><div class="line"> r := mux.NewRouter()</div><div class="line"> r.HandleFunc(<span class="string">"/"</span>, Hello)</div><div class="line"> http.Handle(<span class="string">"/"</span>, r)</div><div class="line"> fmt.Println(<span class="string">"Starting up on 8080"</span>)</div><div class="line"> log.Fatal(http.ListenAndServe(<span class="string">":8080"</span>, <span class="literal">nil</span>))</div><div class="line">}</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">func</span> <span class="title">Hello</span><span class="params">(w http.ResponseWriter, req *http.Request)</span></span> {</div><div class="line"> fmt.Fprintln(w, <span class="string">"Hello world!"</span>)</div><div class="line">}</div></pre></td></tr></table></figure></p>
|
||
<p>注意到这段代码有第三方依赖了吗？ 让我们来代理（vendor） 依赖：</p>
|
||
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">docker run --rm -v <span class="variable">$PWD</span>:/app -w /app treeder/go vendor</div></pre></td></tr></table></figure>
|
||
<p>上述命令会把抵赖都放 /vendor 目录下<br>然后我们对代码进行构建：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">docker run --rm -v <span class="variable">$PWD</span>:/app -w /app treeder/go build</div></pre></td></tr></table></figure></p>
|
||
<p>接着，我们来运行代码：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">docker run --rm -v <span class="variable">$PWD</span>:/app -w /app -p 8080:8080 iron/base ./app</div></pre></td></tr></table></figure></p>
|
||
<p>打开浏览器，输入 <a href="[http://localhost:8080]">http://localhost:8080</a>. 哈哈，我们成功的通过 <code>iron/base</code> 这个基础镜像运行了我们的代码。它是一个包含了运行 GO 程序所需的所有东西的很小的镜像。</p>
|
||
<p>#####更酷炫的东西</p>
|
||
<p>构建一个包含你的代码的可以运行的 Docker 镜像怎么样？<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">docker run --rm -v <span class="variable">$PWD</span>:/app -w /app -v /var/run/docker.sock:/var/run/docker.sock treeder/go image username/myapp:latest</div></pre></td></tr></table></figure></p>
|
||
<p>现在通过你的新镜像来运行代码吧：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">docker run --rm -p 8080:8080 username/myapp</div></pre></td></tr></table></figure></p>
|
||
<p>再次打开 <a href="[http://localhost:8080]">http://localhost:8080</a>，哈哈，现在流程是不是更好了。 这个镜像非常小。你可以通过输入 <code>docker images</code> 来查看这个镜像到底有好大，大概在12M左右吧。</p>
|
||
<p>或者你也可以下载和构建一个远程的代码仓库：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">docker run --rm -v <span class="variable">$PWD</span>:/app -w /app treeder/go remote https://github.com/treeder/hello-app.go.git</div></pre></td></tr></table></figure></p>
|
||
<p>最后你将得到一个包含这个远程代码仓库的代码的镜像。</p>
|
||
<p>###结论</p>
|
||
<p><a href="[https://medium.com/iron-io-blog/why-and-how-to-use-docker-for-development-a156c1de3b24]">将 Docker 运用于开发</a>再次胜利了，如果你之前开发过 Go 项目，你应该会感谢这个工具带来的简单和简洁。不过它还仅仅是个实验阶段的工具，没有包含太多的其他工具链。不过，就我知道的而言，这应该是最简单的 Go 上手方式了。通过这个工具，仅仅告诉其他人一个代码仓库链接，他们就可以克隆，构建，运行代码而不需要任何初始化流程仅仅只需要 Docker。</p>
|
||
<p>完整的文档和项目源代码请浏览： <a href="https://github.com/treeder/go" target="_blank" rel="external">https://github.com/treeder/go</a></p>
|
||
<p>请不要吝啬你的任何反馈，创建一个 <a href="[https://github.com/treeder/go/issues]">Github issue</a> 或者评论吧。</p>
|
||
<p><code>更新: 我做了一个更大更好的工具：https://github.com/treeder/devo</code></p>
|
||
<p>翻译自：<a href="https://medium.com/iron-io-blog/the-easiest-way-to-develop-with-go-introducing-a-docker-based-go-tool-c456238507d6" target="_blank" rel="external">https://medium.com/iron-io-blog/the-easiest-way-to-develop-with-go-introducing-a-docker-based-go-tool-c456238507d6</a></p>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
<link itemprop="mainEntityOfPage" href="http://toozhao.com/2015/03/21/active-model-serializers/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="name" content="Junv">
|
||
<meta itemprop="description" content="">
|
||
<meta itemprop="image" content="http://blog.tuxue.xyz/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
</span>
|
||
|
||
|
||
<header class="post-header">
|
||
|
||
|
||
|
||
<h1 class="post-title" itemprop="name headline">
|
||
|
||
<a class="post-title-link" href="/2015/03/21/active-model-serializers/" itemprop="url">在Rails中使用 active_model_serializers 构建json response</a></h1>
|
||
|
||
|
||
<div class="post-meta">
|
||
<span class="post-time">
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建于" itemprop="dateCreated datePublished" datetime="2015-03-21T10:35:43+11:00">
|
||
2015-03-21
|
||
</time>
|
||
|
||
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-check-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">更新于:</span>
|
||
|
||
<time title="更新于" itemprop="dateModified" datetime="2015-03-21T15:00:16+11:00">
|
||
2015-03-21
|
||
</time>
|
||
|
||
</span>
|
||
|
||
|
||
<span class="post-category" >
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-folder-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">分类于</span>
|
||
|
||
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/ruby/" itemprop="url" rel="index">
|
||
<span itemprop="name">ruby</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
|
||
|
||
</span>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<p>Rails 本身提供很不错的json response功能，可以很方便的将model对象自动转换为json数据。如果我们期望返回的结果很简单也可以构建一个简单的hash,自行编辑你希望的key和value,由Rails 来帮你生成json。那如果是介于两者之间的情况呢？</p>
|
||
<ul>
|
||
<li>我希望将我的model以json的形式返回，但是我并不希望将所有的字段返回。</li>
|
||
<li>我希望将我的model中部分属性进行稍微的处理和计算后返回，这样客户端可以直接使用某些字段，而不需要将应用自身的逻辑暴露给客户端，如我有个model记录微信支付属性，有个字段是关于微信支付（”trade_status”），它的值有trade_success, “wait_for_payment”，显然我们可以返回给客户端 “支付成功”，”等待支付”更好。传统的做法，我们为了达到这个目的，我们不仅需要将trade_stauts进行构建，还需要将其他参数也重复写出来。</li>
|
||
</ul>
|
||
<p>ActiveModel::Serializers这个gem 包就可以更好的帮助我们解决上面的痛点，我们只需要对需要返回的属性列举出来，只对需要更改的属性进行计算，其他都不需要了。下面就介绍下它的一些常见用法。</p>
|
||
<p>首先安装Gem<br><figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">gem <span class="string">'active_model_serializers'</span></div></pre></td></tr></table></figure></p>
|
||
<p>为了可以在我们的rails 项目中使用它，我们还需要在application controller中添加：<br><figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">include</span> ActionController::Serialization</div></pre></td></tr></table></figure></p>
|
||
<p>active_model_serializers的使用就是在你是需要返回json的地方，为你的数据创建serializer,你的对象就能通过serializer变成希望的结果。这里假设我有一个User用户对象，User的的大致结构：<br><figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">User</span></span></div><div class="line"> field <span class="symbol">:nick_name</span>, <span class="symbol">type:</span> String</div><div class="line"> field <span class="symbol">:email</span>, <span class="symbol">type:</span> String</div><div class="line"> field <span class="symbol">:age</span>, <span class="symbol">type:</span> Integer</div><div class="line"> field <span class="symbol">:password</span>, <span class="symbol">type:</span>String</div><div class="line"> <span class="comment"># 等等更多属性。。。</span></div><div class="line"><span class="keyword">end</span></div></pre></td></tr></table></figure></p>
|
||
<p>我现在有个UserController,需要以JSON的形式返回用户的基本信息： 昵称，邮箱，是否成年（大于等于18岁算成年），接下来在app 目录下创建serializers 目录，并创建class UserSerializer对象，继承自 ActiveModel::Serializer, 然后我们的serializer就应该是这样：<br><figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">UserSerializer</span> < ActiveModel::Serializer</span></div><div class="line"> attributes <span class="symbol">:nick_name</span>, <span class="symbol">:email</span>, <span class="symbol">:if_adult</span></div><div class="line"></div><div class="line"> <span class="function"><span class="keyword">def</span> <span class="title">if_adult</span></span></div><div class="line"> object.age > <span class="number">18</span> <span class="comment">#object 就是需要被序列化的对象</span></div><div class="line"> <span class="keyword">end</span></div><div class="line"><span class="keyword">end</span></div></pre></td></tr></table></figure></p>
|
||
<p>在serializer中，我们只需要将我们需要的属性通过attributes 的形式列出来，如果model没有的属性，我们需要自行实现该方法。<br>我们也可以覆盖属性，如上的例子，我们也可以将if_adult 改成age,同样我们需要有：<br><figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">def</span> <span class="title">age</span></span></div><div class="line"> object.age > <span class="number">18</span></div><div class="line"><span class="keyword">end</span></div></pre></td></tr></table></figure></p>
|
||
<p>接下来完成我们的最后一步，在controller中使用serializer</p>
|
||
<figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">UserController</span> < ApplicationController</span></div><div class="line"> <span class="function"><span class="keyword">def</span> <span class="title">show</span></span></div><div class="line"> <span class="comment">#假设 <span class="doctag">@user</span> 是我们经过查询后得到的对象</span></div><div class="line"> render <span class="symbol">json:</span> @user, <span class="symbol">serializer:</span> UserSerializer</div><div class="line"> <span class="keyword">end</span></div><div class="line"></div><div class="line"> <span class="function"><span class="keyword">def</span> <span class="title">index</span></span></div><div class="line"> <span class="comment">#假设 <span class="doctag">@users</span> 是我们经过查询后得到的对象</span></div><div class="line"> render <span class="symbol">json:</span> @user, <span class="symbol">each_serializer:</span> UserSerializer</div><div class="line"> <span class="keyword">end</span></div><div class="line"><span class="keyword">end</span></div></pre></td></tr></table></figure>
|
||
<p>我们我们希望对一个数组对象进行序列化，我们则需要使用each_serializer，使用该属性后，你的返回结果将变成对象，数组则包裹下对象之下。本例则类似于<br><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">users: [</div><div class="line"> {},</div><div class="line"> {}</div><div class="line">]</div></pre></td></tr></table></figure></p>
|
||
<p>这里的”users”这是json的根属性， serializer支持用户自定义根属性，<br><figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">render <span class="symbol">json:</span> @user, <span class="symbol">serializer:</span> UserSerializer, <span class="symbol">root:</span> <span class="string">'customer'</span></div></pre></td></tr></table></figure></p>
|
||
<p>我非常喜欢active model serializers 的一个属性是，支持在serializer中访问你希望的属性，在rails 中，很多时候我们希望访问current_user对象，获取当前登录用户的相关信息。那serializer 则可以很好的做的这一点，在active model serializers 中有 serialization_scope 这样一个方法，在application controller 中声明此方法，传入你希望的参数，便可以在serializer class 中自由访问该对象。解决了serializer 与其他对象交互的问题。<br><figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">serialization_scope <span class="symbol">:current_user</span></div></pre></td></tr></table></figure></p>
|
||
<p>在serializer中, scope 对象便是注入的 current_user对象<br><figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">scope.email</div></pre></td></tr></table></figure></p>
|
||
<p>此外，active model serializers 支持在返回的json中额外注入meta属性，这样既保留了serializer的简单，模板化，也增添了自由度，使得用户可以自行添加一些额外的属性。</p>
|
||
<p>更详细的使用还请参考：<a href="https://github.com/rails-api/active_model_serializers" target="_blank" rel="external">Github</a></p>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
<link itemprop="mainEntityOfPage" href="http://toozhao.com/2014/10/25/some-photos-from-Daocheng-and-Yading/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="name" content="Junv">
|
||
<meta itemprop="description" content="">
|
||
<meta itemprop="image" content="http://blog.tuxue.xyz/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
</span>
|
||
|
||
|
||
<header class="post-header">
|
||
|
||
|
||
|
||
<h1 class="post-title" itemprop="name headline">
|
||
|
||
<a class="post-title-link" href="/2014/10/25/some-photos-from-Daocheng-and-Yading/" itemprop="url">稻城、亚丁自驾游之行的一些照片</a></h1>
|
||
|
||
|
||
<div class="post-meta">
|
||
<span class="post-time">
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建于" itemprop="dateCreated datePublished" datetime="2014-10-25T20:36:26+11:00">
|
||
2014-10-25
|
||
</time>
|
||
|
||
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-check-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">更新于:</span>
|
||
|
||
<time title="更新于" itemprop="dateModified" datetime="2014-10-26T00:13:14+11:00">
|
||
2014-10-26
|
||
</time>
|
||
|
||
</span>
|
||
|
||
|
||
<span class="post-category" >
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-folder-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">分类于</span>
|
||
|
||
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/photos/" itemprop="url" rel="index">
|
||
<span itemprop="name">photos</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
|
||
|
||
</span>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<p>上周星期天，我和她开启了我们一周的稻城亚丁自驾游之旅，虽然途中经历过长达5，6个小时大堵车，因二郎山修路弄得烂泥一样的路面，下雪等诸多不太好的情况，但是我们在途中所看到的景美翻了，呼吸到的空气不能再清新，不得不说稻城、亚丁让我们醉了。总得来说非常值得一去，相比九寨沟最美的是水，亚丁则最美的是蓝天、白云、黄叶、雪山。<br>此行我们大致的行程是： </p>
|
||
<pre><code>第一天：成都——新都桥（二郎山烂路，因修路堵车5个小时左右）
|
||
第二天：新都桥——稻城 （因318国道修路，有30公里土石路）
|
||
第三天：稻城——亚丁 （仅100公里，可先在亚丁景区附近或者景区内游玩，或游览俄初山，仅30公里左右）
|
||
第四天：亚丁旅游，晚上返回稻城
|
||
第五天：稻城——康定
|
||
第六天：康定——成都（绕道石棉县，上雅西高速回成都）
|
||
</code></pre><p>最后附上我拍的照片几张。</p>
|
||
<p><img src="http://junv-photos.qiniudn.com/_MG_0328.jpg" alt="草原"></p>
|
||
<p><img src="http://junv-photos.qiniudn.com/_MG_0342.jpg" alt="晚霞"></p>
|
||
<p><img src="http://junv-photos.qiniudn.com/_MG_0355.jpg" alt="稻城河"></p>
|
||
<p><img src="http://junv-photos.qiniudn.com/_MG_0370.jpg" alt="白桦树林"></p>
|
||
<p><img src="http://junv-photos.qiniudn.com/_MG_0374.jpg" alt="白桦树"></p>
|
||
<p><img src="http://junv-photos.qiniudn.com/_MG_0382.jpg" alt="半山上的寺庙"></p>
|
||
<p><img src="http://junv-photos.qiniudn.com/_MG_0394.jpg" alt="结冰的湖泊"></p>
|
||
<p><img src="http://junv-photos.qiniudn.com/_MG_0419.jpg" alt="亚丁的星空"></p>
|
||
<p><img src="http://junv-photos.qiniudn.com/_MG_0462.jpg" alt="亚丁的一座神山"></p>
|
||
<p><img src="http://junv-photos.qiniudn.com/_MG_0588.jpg" alt="通往远方的栈道"></p>
|
||
<p><img src="http://junv-photos.qiniudn.com/_MG_0589.jpg" alt="与Mac OSX 某张桌面壁纸类似"></p>
|
||
<p><img src="http://junv-photos.qiniudn.com/_MG_0645.jpg" alt="不知是野鹿还是羊"></p>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
<link itemprop="mainEntityOfPage" href="http://toozhao.com/2014/10/03/photos-in-Beijing/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="name" content="Junv">
|
||
<meta itemprop="description" content="">
|
||
<meta itemprop="image" content="http://blog.tuxue.xyz/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
</span>
|
||
|
||
|
||
<header class="post-header">
|
||
|
||
|
||
|
||
<h1 class="post-title" itemprop="name headline">
|
||
|
||
<a class="post-title-link" href="/2014/10/03/photos-in-Beijing/" itemprop="url">5，6月在北京的几张照片</a></h1>
|
||
|
||
|
||
<div class="post-meta">
|
||
<span class="post-time">
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建于" itemprop="dateCreated datePublished" datetime="2014-10-03T09:27:44+10:00">
|
||
2014-10-03
|
||
</time>
|
||
|
||
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-check-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">更新于:</span>
|
||
|
||
<time title="更新于" itemprop="dateModified" datetime="2014-10-03T11:37:57+10:00">
|
||
2014-10-03
|
||
</time>
|
||
|
||
</span>
|
||
|
||
|
||
<span class="post-category" >
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-folder-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">分类于</span>
|
||
|
||
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/photos/" itemprop="url" rel="index">
|
||
<span itemprop="name">photos</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
|
||
|
||
</span>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<p><img src="http://junv-photos.qiniudn.com/DSC00041.jpg" alt="朝阳医院外"><br><img src="http://junv-photos.qiniudn.com/DSC00045.jpg" alt="不知名的花"><br><img src="http://junv-photos.qiniudn.com/DSC00051.jpg" alt="复兴国际"><br><img src="http://junv-photos.qiniudn.com/DSC00066.jpg" alt="HDR云"><br><img src="http://junv-photos.qiniudn.com/DSC00074.jpg" alt="复兴国际门前"></p>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
<link itemprop="mainEntityOfPage" href="http://toozhao.com/2014/08/31/improve-the-load-speed-of-blog/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="name" content="Junv">
|
||
<meta itemprop="description" content="">
|
||
<meta itemprop="image" content="http://blog.tuxue.xyz/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
</span>
|
||
|
||
|
||
<header class="post-header">
|
||
|
||
|
||
|
||
<h1 class="post-title" itemprop="name headline">
|
||
|
||
<a class="post-title-link" href="/2014/08/31/improve-the-load-speed-of-blog/" itemprop="url">使用七牛云提升博客加载速度</a></h1>
|
||
|
||
|
||
<div class="post-meta">
|
||
<span class="post-time">
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建于" itemprop="dateCreated datePublished" datetime="2014-08-31T20:26:40+10:00">
|
||
2014-08-31
|
||
</time>
|
||
|
||
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-check-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">更新于:</span>
|
||
|
||
<time title="更新于" itemprop="dateModified" datetime="2015-08-04T13:33:17+10:00">
|
||
2015-08-04
|
||
</time>
|
||
|
||
</span>
|
||
|
||
|
||
<span class="post-category" >
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-folder-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">分类于</span>
|
||
|
||
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/我说/" itemprop="url" rel="index">
|
||
<span itemprop="name">我说</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
|
||
|
||
</span>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<p>由于大家都懂的原因，谷歌被彻底封锁了，连供程序员使用的在线托管的第三方库google apis，和 google web fonts 也不能使用了。<br>这使得本来放在国外的博客变得更慢，关键是如果用了那些库的话，基本上是几分钟都加载不了的节奏。<br>我的博客放在github page上，最近也发现访问也越来越慢，比如JS、css、图片等加载都很慢。然后就有了优化的想法，恰好之前有同事提到他使用过七牛云还不错，速度在国内挺快，而且注册后还有免费的套餐用，而且基本够用。<br>现在使用了之后发现，的确够用，对于我这样一个每天只有几十个人访问的博客而言。简单讲讲我是怎么优化的。</p>
|
||
<ul>
|
||
<li>去掉不必要的JS、CSS等资源文件，我现在使用的是Hexo，最终的博客都是以预生成的静态HTML文件。在详细观察HTML的结构后发现其实有一些js是不需要的，<br>如fancybox-一款图片插件插件，提供画廊的形式查看当然博客的图片，对我而言嵌在网页里足以；mathx?,一款用于在网页上显示数学公式的js插件，对我是在没必要。</li>
|
||
<li>在Chrome 的控制台中发现网页加载图片、和JS奇慢，很多都需要2，3秒才能加载成功。因此我想到了那那些稍大的图片和JS均放到七牛云里面。</li>
|
||
<li>替换引用的google 相关资源文件，我的博客里面主要用来google web font的一款字体，因为google 上的字体本身也是开源的，我便把我需要使用的字体存一份在七牛云上，<br>自己在CSS 里面声明一个@fontface即可。（这样做应该没有侵犯版权吧）</li>
|
||
<li>使用GZIP 对生成的HTML进行压缩，也可以减小传输时间。 </li>
|
||
</ul>
|
||
<p>在进行了以上的步骤之后，网页的记载速度有很大提升。之前是ping 通网页以后，通常还需要10秒以上的时间才能及在完，现在大概只需要3秒左右的时间。<br>偶尔依然比较慢，经过查看后发现依然是剩下放在在github 的js,css加载很慢。Anyway, 已经是可以接受的范围了。 </p>
|
||
<p>这里不得不赞一下七牛云，在国内的访问速度的确是很话说，因为也曾用过360的一个公共CDN的JS库，加载速度还是会比七牛云慢一截，关键是现在免费的每月10G流量已经够我使用了。<br>最后放一张优化后的加载时间图.<br><img src="http://7narz1.com1.z0.glb.clouddn.com/web-assets.png?imageView2/2/w/1024" alt="加载时间"></p>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
<link itemprop="mainEntityOfPage" href="http://toozhao.com/2014/06/21/my-experience-about-publish-app-to-apple-store/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="name" content="Junv">
|
||
<meta itemprop="description" content="">
|
||
<meta itemprop="image" content="http://blog.tuxue.xyz/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
</span>
|
||
|
||
|
||
<header class="post-header">
|
||
|
||
|
||
|
||
<h1 class="post-title" itemprop="name headline">
|
||
|
||
<a class="post-title-link" href="/2014/06/21/my-experience-about-publish-app-to-apple-store/" itemprop="url">发布iPhone应用到Apple Store的经历</a></h1>
|
||
|
||
|
||
<div class="post-meta">
|
||
<span class="post-time">
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建于" itemprop="dateCreated datePublished" datetime="2014-06-21T22:26:40+10:00">
|
||
2014-06-21
|
||
</time>
|
||
|
||
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-check-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">更新于:</span>
|
||
|
||
<time title="更新于" itemprop="dateModified" datetime="2014-07-21T01:58:32+10:00">
|
||
2014-07-21
|
||
</time>
|
||
|
||
</span>
|
||
|
||
|
||
<span class="post-category" >
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-folder-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">分类于</span>
|
||
|
||
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/apple/" itemprop="url" rel="index">
|
||
<span itemprop="name">apple</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
|
||
，
|
||
|
||
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/apple/我说/" itemprop="url" rel="index">
|
||
<span itemprop="name">我说</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
|
||
|
||
</span>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<p>理想是丰满的，现实是骨干的。<br>成功在于高效强有力的执行力。</p>
|
||
<p>在尝试发布iPhone应用之前就在网上看过一些资料，也在论坛里面看到其他人发的帖子，都提及发布应用时间比较漫长，可能会被苹果打回进行相关修改后才能继续发布。但是没有想到我的这次发布，期间总共进行了大大小小的4次修改，共花了50天左右的时间。下面就聊聊这次发布过程中的故事吧。</p>
|
||
<p>— 需要补充 —</p>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
|
||
|
||
|
||
|
||
<div class="post-block">
|
||
<link itemprop="mainEntityOfPage" href="http://toozhao.com/2014/04/09/develop-web-based-cross-platform-mobile-app/">
|
||
|
||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<meta itemprop="name" content="Junv">
|
||
<meta itemprop="description" content="">
|
||
<meta itemprop="image" content="http://blog.tuxue.xyz/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim">
|
||
</span>
|
||
|
||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
<meta itemprop="name" content="大染志">
|
||
</span>
|
||
|
||
|
||
<header class="post-header">
|
||
|
||
|
||
|
||
<h1 class="post-title" itemprop="name headline">
|
||
|
||
<a class="post-title-link" href="/2014/04/09/develop-web-based-cross-platform-mobile-app/" itemprop="url">Develop web based cross platform mobile app（开发基于Web的跨平台移动应用）</a></h1>
|
||
|
||
|
||
<div class="post-meta">
|
||
<span class="post-time">
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">发表于</span>
|
||
|
||
<time title="创建于" itemprop="dateCreated datePublished" datetime="2014-04-09T16:48:45+10:00">
|
||
2014-04-09
|
||
</time>
|
||
|
||
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-calendar-check-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">更新于:</span>
|
||
|
||
<time title="更新于" itemprop="dateModified" datetime="2014-04-09T18:55:42+10:00">
|
||
2014-04-09
|
||
</time>
|
||
|
||
</span>
|
||
|
||
|
||
<span class="post-category" >
|
||
|
||
<span class="post-meta-divider">|</span>
|
||
|
||
<span class="post-meta-item-icon">
|
||
<i class="fa fa-folder-o"></i>
|
||
</span>
|
||
|
||
<span class="post-meta-item-text">分类于</span>
|
||
|
||
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/web/" itemprop="url" rel="index">
|
||
<span itemprop="name">web</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
|
||
，
|
||
|
||
|
||
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
|
||
<a href="/categories/web/mobile/" itemprop="url" rel="index">
|
||
<span itemprop="name">mobile</span>
|
||
</a>
|
||
</span>
|
||
|
||
|
||
|
||
|
||
</span>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-body" itemprop="articleBody">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<p>这是我在公司做的一个内部分享的PPT，主要分享的是利用WEB 相关的开发技术开发跨平台的移动应用。</p>
|
||
<p>demo 应用可以从 <a href="http://librme.com" target="_blank" rel="external">http://librme.com</a> 找到，此外PPT 中提到的技术有： </p>
|
||
<ul>
|
||
<li>Angular.js</li>
|
||
<li>Node.js</li>
|
||
<li>Gulp.js</li>
|
||
<li>bower.js</li>
|
||
<li>Ionic framework</li>
|
||
<li>Cordova / Phonegap</li>
|
||
<li>CoffeeScript</li>
|
||
</ul>
|
||
<p>下面是PPT 资料：</p>
|
||
<script async class="speakerdeck-embed" data-id="1c36cc30a1f00131d5c20ec531db4d7f" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="post-footer">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-eof"></div>
|
||
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
|
||
|
||
|
||
</section>
|
||
|
||
|
||
<nav class="pagination">
|
||
<span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">…</span><a class="page-number" href="/page/31/">31</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right"></i></a>
|
||
</nav>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div class="sidebar-toggle">
|
||
<div class="sidebar-toggle-line-wrap">
|
||
<span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
|
||
<span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
|
||
<span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<aside id="sidebar" class="sidebar">
|
||
|
||
<div class="sidebar-inner">
|
||
|
||
|
||
|
||
|
||
|
||
<section class="site-overview sidebar-panel sidebar-panel-active">
|
||
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||
<img class="site-author-image" itemprop="image"
|
||
src="http://blog.tuxue.xyz/libr.jpg?imageView2/1/w/200/h/200/q/90|imageslim"
|
||
alt="Junv" />
|
||
<p class="site-author-name" itemprop="name">Junv</p>
|
||
|
||
<p class="site-description motion-element" itemprop="description">Go, JavaScript, Ruby on Rails, Java,Docker, CI, CD, Photography</p>
|
||
|
||
</div>
|
||
<nav class="site-state motion-element">
|
||
|
||
|
||
<div class="site-state-item site-state-posts">
|
||
|
||
<a href="/archives/">
|
||
|
||
<span class="site-state-item-count">307</span>
|
||
<span class="site-state-item-name">日志</span>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="site-state-item site-state-categories">
|
||
<a href="/categories/index.html">
|
||
<span class="site-state-item-count">69</span>
|
||
<span class="site-state-item-name">分类</span>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="site-state-item site-state-tags">
|
||
<a href="/tags/index.html">
|
||
<span class="site-state-item-count">247</span>
|
||
<span class="site-state-item-name">标签</span>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
</nav>
|
||
|
||
|
||
|
||
<div class="links-of-author motion-element">
|
||
|
||
|
||
<span class="links-of-author-item">
|
||
<a href="https://github.com/wahyd4" target="_blank" title="GitHub">
|
||
|
||
<i class="fa fa-fw fa-github"></i>
|
||
|
||
|
||
GitHub
|
||
|
||
</a>
|
||
</span>
|
||
|
||
<span class="links-of-author-item">
|
||
<a href="https://www.linkedin.com/in/junwei-zhao-46944557" target="_blank" title="LinkedIn">
|
||
|
||
<i class="fa fa-fw fa-linkedin"></i>
|
||
|
||
|
||
LinkedIn
|
||
|
||
</a>
|
||
</span>
|
||
|
||
<span class="links-of-author-item">
|
||
<a href="https://stackoverflow.com/users/1140611/junv" target="_blank" title="StackOverflow">
|
||
|
||
<i class="fa fa-fw fa-stack-overflow"></i>
|
||
|
||
|
||
StackOverflow
|
||
|
||
</a>
|
||
</span>
|
||
|
||
<span class="links-of-author-item">
|
||
<a href="http://weibo.com/wahyd4" target="_blank" title="Weibo">
|
||
|
||
<i class="fa fa-fw fa-weibo"></i>
|
||
|
||
|
||
Weibo
|
||
|
||
</a>
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</aside>
|
||
|
||
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<footer id="footer" class="footer">
|
||
<div class="footer-inner">
|
||
<div class="copyright" >
|
||
|
||
©
|
||
<span itemprop="copyrightYear">2018</span>
|
||
<span class="with-love">
|
||
<i class="fa fa-heart"></i>
|
||
</span>
|
||
<span class="author" itemprop="copyrightHolder">Junv</span>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
<div class="back-to-top">
|
||
<i class="fa fa-arrow-up"></i>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<script type="text/javascript">
|
||
if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
|
||
window.Promise = null;
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
|
||
|
||
|
||
<script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
|
||
|
||
|
||
<script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
|
||
|
||
|
||
<script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
|
||
|
||
|
||
<script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
|
||
|
||
|
||
<script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
|
||
|
||
|
||
|
||
|
||
|
||
<script type="text/javascript" src="/js/src/utils.js?v=5.1.2"></script>
|
||
|
||
<script type="text/javascript" src="/js/src/motion.js?v=5.1.2"></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script type="text/javascript" src="/js/src/affix.js?v=5.1.2"></script>
|
||
|
||
<script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.2"></script>
|
||
|
||
|
||
|
||
|
||
<script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.2"></script>
|
||
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.2"></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.2"></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|