-
Notifications
You must be signed in to change notification settings - Fork 1
/
blog_plug.html
1 lines (1 loc) · 18.3 KB
/
blog_plug.html
1
<!doctype html><html lang="zh-CN" class="night"><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1,maximum-scale=4,user-scalable=0" name="viewport"><title>Ede's Blog</title><meta name="description" content="Try to be a qualified programmer"><meta property="og:type" content="website"><meta property="og:description" content="Try to be a qualified programmer"><meta property="og:title" content="Ede's Blog"><meta property="og:site_name" content="Ede's Blog"><meta property="og:url" content="https://ede.ink"><meta property="og:image" content="https://edeity.oss-cn-shenzhen.aliyuncs.com/public/edeity_o.png"><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"><link rel="mainfest" href="/mainfest.json"><link rel="stylesheet" href="/public/css/common.css"><link rel="stylesheet" href="//at.alicdn.com/t/font_707055_4b9og9sc5lx.css"><script>!function(){var e=-1!==window.location.search.indexOf("theme=night")||"night"===window.localStorage.getItem("edeity-theme_theme"),t=-1!==window.location.search.indexOf("theme=light")||"light"===window.localStorage.getItem("edeity-theme_theme");(new Date).getHours();var n=document.querySelector("html");e?n.classList.add("night"):t?n.classList.remove("night"):n.classList.add("night")}(),document.addEventListener("DOMContentLoaded",function(){null!==document.querySelector("ol.toc")&&(document.querySelector("#nav-bar").style.cssText="display: block")})</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-M3J9QSEE2Z"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-M3J9QSEE2Z")</script><meta name="generator" content="Hexo 5.0.0"></head><body><div class="loading"></div><div id="switch" data-switch="{"toc":true,"use_pwa":false}"></div><header class="fullscreen"><div class="toolbar"><i class="iconfont icon-menu"></i></div><h1><a href="/">Ede's Blog</a></h1><div class="head-link"><a class="btn waves" href="/"><span><i class="iconfont icon-home">Home </i></span></a><a class="btn waves" href="/about/index.html"><span><i class="iconfont icon-me">About </i></span></a><a class="btn waves" target="_blank" rel="noopener" href="https://github.com/edeink"><span><i class="iconfont icon-github">Github</i></span></a></div></header><div class="some-link"><a class="btn" id="light-or-not"><i class="iconfont icon-light"></i> </a><a style="display:none" class="btn" id="up-to-top"><i class="iconfont icon-up"></i></a></div><div id="nav-bar" style="display:none"><div class="toc"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E4%BB%B6"><span class="toc-number">1.</span> <span class="toc-text">插件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Gif%E6%92%AD%E6%94%BE%E5%99%A8"><span class="toc-number">1.1.</span> <span class="toc-text">Gif播放器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88"><span class="toc-number">1.2.</span> <span class="toc-text">图片浏览</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8F%90%E7%A4%BA"><span class="toc-number">1.3.</span> <span class="toc-text">提示</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%B7%E5%BC%8F"><span class="toc-number">2.</span> <span class="toc-text">样式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BE%E7%89%87%E5%B1%85%E4%B8%AD%E6%8F%8F%E8%BF%B0"><span class="toc-number">2.1.</span> <span class="toc-text">图片居中描述</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%91%BD%E4%BB%A4%E8%A1%8C"><span class="toc-number">2.2.</span> <span class="toc-text">命令行</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AC%AC%E4%B8%89%E6%96%B9"><span class="toc-number">3.</span> <span class="toc-text">第三方</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%84%E8%AE%BA%E6%8F%92%E4%BB%B6"><span class="toc-number">3.1.</span> <span class="toc-text">评论插件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F"><span class="toc-number">3.2.</span> <span class="toc-text">数学公式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%89%B9%E6%AE%8A%E9%85%8D%E7%BD%AE"><span class="toc-number">4.</span> <span class="toc-text">特殊配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE"><span class="toc-number">4.1.</span> <span class="toc-text">全局配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E9%85%8D%E7%BD%AE"><span class="toc-number">4.2.</span> <span class="toc-text">文章配置</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AF%BC%E8%88%AA%E6%A0%8F"><span class="toc-number">4.2.1.</span> <span class="toc-text">导航栏</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E5%A3%B0%E6%98%8E"><span class="toc-number">4.2.2.</span> <span class="toc-text">文章声明</span></a></li></ol></li></ol></li></ol></div></div><main id="content-main" class="section"><div class="list-item"><h1 class="post-title"><a id="博客小挂件" class="article-link" href="">博客小挂件</a></h1><div class="post-meta"><time class="meta published">Jan 1, 2014</time></div><div class="article"><div class="post-excerpt markdown-body"><h2 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h2><h3 id="Gif播放器"><a href="#Gif播放器" class="headerlink" title="Gif播放器"></a>Gif播放器</h3><p>loading样式 & gif的暂停和播放，推荐声明<code>width</code>、 <code>height</code>，避免布局重排。<code>auto</code>将自适应。</p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">class</span>=<span class="string">"gif"</span> <span class="attr">width</span>=<span class="string">"xxx"</span> <span class="attr">height</span>=<span class="string">"xxx"</span> <span class="attr">data-src</span>=<span class="string">"your-gif-url"</span> <span class="attr">auto</span>/></span></span><br></pre></td></tr></table></figure><img class="gif" width="500" height="213" auto data-src="https://edeity.oss-cn-shenzhen.aliyuncs.com/2019/wow.gif"><h3 id="图片浏览"><a href="#图片浏览" class="headerlink" title="图片浏览"></a>图片浏览</h3><p>图片滚动浏览，并提供缩略样式</p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"img-list"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">data-src</span>=<span class="string">"your-img-01"</span> <span class="attr">class</span>=<span class="string">"vertical"</span> <span class="attr">data-desc</span>=<span class="string">"your-img-describe"</span>/></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">data-src</span>=<span class="string">"your-img-02"</span>/></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">data-src</span>=<span class="string">"your-img-03"</span>/></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><ul><li><code>class="vertical"</code>：对应<code>background: auto 100%</code>，高度100%，宽度自适应，对应手机竖屏拍照的照片，其他对应<code>background: cover</code></li><li><code>data-desc</code>：图片描述</li></ul><h3 id="提示"><a href="#提示" class="headerlink" title="提示"></a>提示</h3><p><a class="pop" data-title="Pop提示" data-direction="right">Hover Me - right</a></p><p><a class="pop" data-title="Pop提示" data-direction="left">Hover Me - left</a></p><p><a class="pop" data-title="Pop提示" data-direction="bottom">Hover Me - bottom</a></p><p><a class="pop" data-title="Pop提示" data-direction="top">Hover Me - top</a></p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">class</span>=<span class="string">"pop"</span> <span class="attr">data-title</span>=<span class="string">"btn-description"</span>></span>btn<span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><h2 id="样式"><a href="#样式" class="headerlink" title="样式"></a>样式</h2><h3 id="图片居中描述"><a href="#图片居中描述" class="headerlink" title="图片居中描述"></a>图片居中描述</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"img-desc"</span>></span>your-img-desc<span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><div class="img-desc">描述测试</div><h3 id="命令行"><a href="#命令行" class="headerlink" title="命令行"></a>命令行</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"shell"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"prefix"</span>></span>edeink@:~<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"command"</span>></span>cd Document<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><div class="shell"><span class="prefix">edeink@:~</span> <span class="command">vim index.html</span></div><h2 id="第三方"><a href="#第三方" class="headerlink" title="第三方"></a>第三方</h2><h3 id="评论插件"><a href="#评论插件" class="headerlink" title="评论插件"></a>评论插件</h3><p>插件出处：<a target="_blank" rel="noopener" href="https://github.com/imsun/gitment">Gitment</a></p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"comment"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p><small>注：鉴于没人评论，特此关闭评论，T__T，需要留言的，可以直接到<a target="_blank" rel="noopener" href="https://github.com/edeity/blog/issues">“issue”</a>留言</small></p><h3 id="数学公式"><a href="#数学公式" class="headerlink" title="数学公式"></a>数学公式</h3><p>插件出处：<a target="_blank" rel="noopener" href="https://github.com/mathjax/MathJax">Mathjax</a></p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcss.com/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><script type="text/javascript" src="https://cdn.bootcss.com/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><p><code>$$γ(M)=\sum_{v,w\in{M}}γ(v→w)+\sum_{v\in{N_1}}γ(v→λ)+\sum_{w\in{N_2}}γ(λ→w) $$</code></p><p>$$ γ(M)=\sum_{v,w\in{M}}γ(v→w)+\sum_{v\in{N_1}}γ(v→λ)+\sum_{w\in{N_2}}γ(λ→w) $$</p><h2 id="特殊配置"><a href="#特殊配置" class="headerlink" title="特殊配置"></a>特殊配置</h2><p>有部分配置，为YAML配置部分</p><h3 id="全局配置"><a href="#全局配置" class="headerlink" title="全局配置"></a>全局配置</h3><p>该主题在配置<code>_config.yml</code>键值一览</p><figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">ede_theme:</span></span><br><span class="line"> <span class="comment"># 开关</span></span><br><span class="line"> <span class="attr">switch:</span></span><br><span class="line"> <span class="comment"># 是否启用左侧目录</span></span><br><span class="line"> <span class="attr">toc:</span> <span class="literal">true</span></span><br><span class="line"> <span class="comment"># 是否用PWA，实践证明，用了PWA访问速度反而变慢</span></span><br><span class="line"> <span class="attr">use_pwa:</span> <span class="literal">false</span></span><br><span class="line"> <span class="comment"># 文字顶部声明</span></span><br><span class="line"> <span class="attr">tip:</span></span><br><span class="line"> <span class="attr">alert:</span> <span class="string">博主很多屁话想说，但一时不知说些什么</span></span><br><span class="line"> <span class="attr">warn:</span> <span class="string">文章未成熟，请绕路</span></span><br><span class="line"> <span class="attr">error:</span> <span class="string">文章关掉有错误，但是博主懒，不想改，Pr</span> <span class="string">pr</span></span><br><span class="line"> <span class="comment"># 顶部功能</span></span><br><span class="line"> <span class="attr">menu:</span></span><br><span class="line"> <span class="bullet">-</span> { <span class="attr">title:</span> <span class="string">Home</span>, <span class="attr">link:</span> <span class="string">/</span>, <span class="attr">ico:</span> <span class="string">home</span> }</span><br><span class="line"> <span class="bullet">-</span> { <span class="attr">title:</span> <span class="string">About</span>, <span class="attr">link:</span> <span class="string">/about/index.html</span>, <span class="attr">ico:</span> <span class="string">me</span> }</span><br><span class="line"> <span class="bullet">-</span> { <span class="attr">title:</span> <span class="string">Github</span>, <span class="attr">link:</span> <span class="string">https://github.com/edeity</span>, <span class="attr">ico:</span> <span class="string">github</span> }</span><br><span class="line"> <span class="comment"># 头部声明请更改title</span></span><br><span class="line"> <span class="comment"># 尾部声明</span></span><br><span class="line"> <span class="attr">foot:</span> <span class="string">Edeink</span> <span class="string">©</span> <span class="number">2015</span><span class="number">-2019</span> <span class="string">·</span> <span class="string">powered</span> <span class="string">by</span> <span class="string">hexo</span></span><br></pre></td></tr></table></figure><h3 id="文章配置"><a href="#文章配置" class="headerlink" title="文章配置"></a>文章配置</h3><h4 id="导航栏"><a href="#导航栏" class="headerlink" title="导航栏"></a>导航栏</h4><p>当某篇文章需要关闭或开启时，可以在文章头部声明。没有声明，则采用<code>_config.yml</code>中配置的默认值：</p><figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">toc:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><h4 id="文章声明"><a href="#文章声明" class="headerlink" title="文章声明"></a>文章声明</h4><p>默认关闭，可在顶部声明开启。</p><figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">alert:</span></span><br><span class="line"><span class="attr">warn:</span> <span class="string">前方高能警告</span></span><br><span class="line"><span class="attr">error:</span></span><br></pre></td></tr></table></figure><p>右侧可以自定义值，eg：<code>warn: 前方高能警告</code>，仅有<code>warn</code>没有值时，将采用<code>_config.yml</code>中的默认值。<code>alert</code>、<code>error</code>同理。</p><p>当然，也可以直接写HTML（但不会填充默认值）</p><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"alert"</span>></span>提示，前方有妹纸<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"warn"</span>></span>小心，前方有水坑<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"error"</span>></span>错误，前方道路坍塌<span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p>效果如下：</p><div class="alert">提示，前方有妹纸</div><div class="warn">小心，前方有水坑</div><div class="error">错误，前方道路坍塌</div></div></div></div><div class="more section"><div class="pre"><a class="article-link" href="/article.html"><i class="iconfont icon-right"></i> <span>前端文章不定期收录</span></a></div><div class="next"><a class="article-link" href="/"><span>回到首页</span> <i class="iconfont icon-right"></i></a></div></div></main></body><footer class="section fullscreen"><div class="footer-desc">Edeink © 2015-2022 · Powered by Hexo</div></footer><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="/public/js/init.js"></script></html>