Repository: lemonchann/lemonchann.github.io Branch: master Commit: 6e58f1d68424 Files: 34 Total size: 106.8 KB Directory structure: gitextract_c_4jo15q/ ├── .gitignore ├── 404.md ├── CNAME ├── LICENSE ├── README.md ├── _config.yml ├── _includes/ │ ├── analytics.html │ ├── disqus.html │ ├── fonts.html │ ├── footer.html │ ├── gitalk.html │ ├── head.html │ ├── meta.html │ ├── nav.html │ ├── svg-icons.html │ └── toc.html ├── _layouts/ │ ├── default.html │ ├── page.html │ └── post.html ├── _posts/ │ └── 2019-11-22-create_blog_with_github_pages.md ├── _sass/ │ ├── _gitalk.scss │ ├── _highlights.scss │ ├── _open-color.scss │ ├── _reset.scss │ └── _variables.scss ├── about.md ├── archive/ │ └── index.html ├── googledb06e025310e016e.html ├── images/ │ └── template.psd ├── index.html ├── js/ │ └── simple-jekyll-search.js ├── search.json ├── style.scss └── tags/ └── index.html ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ # jekyll local file .jekyll* _site ================================================ FILE: 404.md ================================================ --- layout: page title: 404 - Page not found --- Sorry, we can't find that page that you're looking for. You can try again by going [back to the homepage]({{ site.baseurl }}/). [ Constructocat by https://github.com/jasoncostello

Constructocat by https://github.com/jasoncostello

{: .center-image}]({{ site.baseurl }}/) ================================================ FILE: CNAME ================================================ #填上自己的域名（如果有申请） ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2019 FromEndWorld Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ 这是一个可 fork 的博客模板仓库，帮助你快速搭建自己的博客，可以参考我博客的[这篇文章]( https://lemonchann.github.io/create_blog_with_github_pages/ )详细指导搭建步骤。 ### 文章版权 `_posts` 文件夹内所有文章版权归我所有，转载需联系我获得授权。 ### 致谢感谢Jekyll主题[LOFFER](https://fromendworld.github.io/LOFFER/)模提供了原始主题模板，我在其上进行的二次开发。如果搭建过程中有什么问题，也可以扫码添加我的个人技术公众号讨论交流。 **这是一个专注编程知识和资源分享的公众号，包含各类编程学习路线，让你在编程路上少走弯路** ![公众号二维码](https://github.com/lemonchann/images/raw/master/gzh/%E6%96%87%E6%9C%AB%E6%8E%A8%E5%B9%BF%E6%96%87%E6%A1%88.png) ================================================ FILE: _config.yml ================================================ # # This file contains configuration flags to customize your site # # Name of your site (displayed in the header) name: "lemon's blog" # Short bio or description (displayed in the header) description: "个人技术公众号：程序员柠檬分享编程资源 | 学习路线" # # Flags below are optional # # URL of your avatar or profile pic (you could use your GitHub profile pic) avatar: https://github.com/lemonchann/images/raw/master/gzh/%E6%96%87%E6%9C%AB%E6%8E%A8%E5%B9%BF%E6%96%87%E6%A1%88.png # 你的favicon（出现在浏览器tab上）图片URL，建议使用较小(64px × 64px)的图片 favicon: https://github.com/lemonchann/lemonchann.github.io/raw/master/images/favicon.ico # Tabs in header. There are 'Blog', 'About', 'Archive', 'Tags' # and URL Link(e.g. 'Theme' tab below) tabs. If you don't need one, just delete # it from the list(Delete '- name: ' and 'url: ', too!) navigation: - name: 首页 url: / - name: 关于 url: /about - name: 归档 url: /archive - name: 标签 url: /tags # Pagination paginate: 8 excerpt_separator: # Includes an icon in the footer for each username you enter footer-links: #weibo: frommidworld #请输入你的微博个性域名 https://www.weibo.com/ behance: # https://www.behance.net/ dribbble: zhihu: ning-meng-cheng-31-94 email: llong87@163.com facebook: flickr: github: lemonchann googleplus: # anything in your profile username that comes after plus.google.com/ instagram: linkedin: pinterest: rss: # just type anything here for a working RSS icon stackoverflow: # your stackoverflow profile, e.g. "users/50476/bart-kiers" tumblr: # https://.tumblr.com #twitter: frommidworld youtube: # Text under the icons in footer footer-text: Copyright (c) 2019 lemon # Enter your Disqus shortname (not your username) to enable commenting on posts # You can find your shortname on the Settings page of your Disqus account disqus: # fromendworld # Gitalk gitalk: clientID: bd65d5c0df878155b7fa clientSecret: d0220762c05c2d6b6f6152a0f0e4b6b090de9729 repo: lemonchann.github.io owner: lemonchann # Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking #google_analytics: # Your website URL (e.g. http://barryclark.github.io or http://www.barryclark.co) # Used for Sitemap.xml and your RSS feed url: https://lemonchann.github.io # If you're hosting your site at a Project repository on GitHub pages # (http://yourusername.github.io/repository-name) # and NOT your User repository (http://yourusername.github.io) # then add in the baseurl here, like this: "/repository-name" # baseurl: # # !! You don't need to change any of the configuration flags below !! # permalink: /:title/ paginate_path: /page:num/ # The release of Jekyll Now that you're using version: v1.2.0 # Jekyll 3 now only supports Kramdown for Markdown kramdown: # Use GitHub flavored markdown, including triple backtick fenced code blocks input: GFM # Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting syntax_highlighter: rouge syntax_highlighter_opts: # Use existing pygments syntax highlighting css css_class: 'highlight' # Set the Sass partials directory, as we're using @imports sass: style: :expanded # You might prefer to minify using :compressed # Use the following plug-ins plugins: - jekyll-sitemap # Create a sitemap using the official Jekyll sitemap gem - jekyll-feed # Create an Atom feed using the official Jekyll feed gem - jekyll-paginate # Exclude these files from your production _site exclude: - Gemfile - Gemfile.lock - LICENSE - README.md - CNAME ================================================ FILE: _includes/analytics.html ================================================ {% if site.google_analytics %} {% endif %} ================================================ FILE: _includes/disqus.html ================================================ {% if site.disqus %}

{% endif %} ================================================ FILE: _includes/fonts.html ================================================ ================================================ FILE: _includes/footer.html ================================================ {% include svg-icons.html %} {% if site.footer-text %}

{% endif %} ================================================ FILE: _includes/gitalk.html ================================================ {% if site.gitalk %}

{% endif %} ================================================ FILE: _includes/head.html ================================================ {% if page.title %}{{ page.title }} – {% endif %}{{ site.name }} – {{ site.description }} {% include meta.html %} {% include fonts.html %} ================================================ FILE: _includes/meta.html ================================================ {% if page.excerpt %} {% else %} {% endif %} {% if page.title %} {% endif %} ================================================ FILE: _includes/nav.html ================================================ ================================================ FILE: _includes/svg-icons.html ================================================

================================================ FILE: _includes/toc.html ================================================ {% capture tocWorkspace %} {% comment %} Version 1.0.8 https://github.com/allejo/jekyll-toc "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe Usage: {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %} Parameters: * html (string) - the HTML of compiled markdown generated by kramdown in Jekyll Optional Parameters: * sanitize (bool) : false - when set to true, the headers will be stripped of any HTML in the TOC * class (string) : '' - a CSS class assigned to the TOC * id (string) : '' - an ID to assigned to the TOC * h_min (int) : 1 - the minimum TOC header level to use; any header lower than this value will be ignored * h_max (int) : 6 - the maximum TOC header level to use; any header greater than this value will be ignored * ordered (bool) : false - when set to true, an ordered list will be outputted instead of an unordered list * item_class (string) : '' - add custom class(es) for each list item; has support for '%level%' placeholder, which is the current heading level * baseurl (string) : '' - add a base url to the TOC links for when your TOC is on another page than the actual content * anchor_class (string) : '' - add custom class(es) for each anchor element Output: An ordered or unordered list representing the table of contents of a markdown block. This snippet will only generate the table of contents and will NOT output the markdown given to it {% endcomment %} {% capture my_toc %}{% endcapture %} {% assign orderedList = include.ordered | default: false %} {% assign minHeader = include.h_min | default: 1 %} {% assign maxHeader = include.h_max | default: 6 %} {% assign nodes = include.html | split: ' maxHeader %} {% continue %} {% endif %} {% if firstHeader %} {% assign firstHeader = false %} {% assign minHeader = headerLevel %} {% endif %} {% assign lastIndent = indentAmount %} {% assign indentAmount = headerLevel | minus: minHeader | add: 1 %} {% if lastHeaderLevel and lastHeaderLevel == headerLevel %} {% assign indentAmount = lastIndent %} {% elsif lastIndent and lastIndent < indentAmount %} {% assign indentAmount = lastIndent | plus: 1 %} {% endif %} {% assign _workspace = node | split: '' | first }}>{% endcapture %} {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %} {% assign space = '' %} {% for i in (1..indentAmount) %} {% assign space = space | prepend: ' ' %} {% endfor %} {% unless include.item_class == blank %} {% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %} {% endunless %} {% capture heading_body %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %} {% capture my_toc %}{{ my_toc }} {{ space }}{{ listModifier }} {{ listItemClass }} [{{ heading_body | replace: "|", "\|" }}]({% if include.baseurl %}{{ include.baseurl }}{% endif %}#{{ html_id }}){% if include.anchor_class %}{:.{{ include.anchor_class }}}{% endif %}{% endcapture %} {% endfor %} {% if include.class %} {% capture my_toc %}{:.{{ include.class }}} {{ my_toc | lstrip }}{% endcapture %} {% endif %} {% if include.id %} {% capture my_toc %}{: #{{ include.id }}} {{ my_toc | lstrip }}{% endcapture %} {% endif %} {% endcapture %}{% assign tocWorkspace = '' %}{{ my_toc | markdownify | strip }} ================================================ FILE: _layouts/default.html ================================================ {% include head.html %} {% include nav.html %} {% if page.toc==true %} {% endif %}

{% include analytics.html %} {% if page.toc==true %} {% endif %}

================================================ FILE: _layouts/page.html ================================================ --- layout: default ---

================================================ FILE: _layouts/post.html ================================================ --- layout: default ---

{{ tag }}

{% include disqus.html %} {% include gitalk.html %}

{% if page.previous.url %} ← 上一篇 {% endif %} {% if page.next.url %} 下一篇 → {% endif %}

================================================ FILE: _posts/2019-11-22-create_blog_with_github_pages.md ================================================ --- layout: post title: "可能是最全面的github pages搭建个人博客教程" date: 2019-11-22 tags: [geek] comments: true author: lemonchann --- 作为一个程序员怎么能没有自己的个人博客呢，这里详细记录和分享我的博客搭建经验，让你轻轻松松拥有自己的博客网站。傻瓜式一站式教你用 github pages 来搭建博客，详细记录全过程，保证你能学会。如果你是非程序员或者不关系技术细节，只需花 3 分钟阅读前面 5 个章节内容，就能轻松拥有自己的博客。 ## 开始话不多说，直接上图先来看下我的博客整体效果。[**点击在线预览我的博客**]( https://lemonchann.github.io/blog/)，个人比较喜欢这种简约的博客风格，不要花里胡哨但该有的功也都有。 ![blogPage](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/blogPage.png) 下面列举这个博客具有的功能特性，其中我比较看重归档和搜索能力。 ### 支持特性 - 简约风格博客 - Powered By Jekyll - 博客文章搜索 - 自定义社交链接 - 网站访客统计 - Google Analytics 网站分析 - Gitalk评论功能 - 自定义关于about页面 - 支持中文布局 - 支持归档与标签 - 支持改变主题颜色 - 支持添加文章目录 ## 建立博客Git仓库首先你要在[github](https://github.com/)上有自己博客仓库，用来生成和存放博客文章。你可以直接fork我的博客仓库。这样你马上有了自己的博客仓库。 [点这里我的博客地址](https://github.com/lemonchann/lemonchann.github.io)进去点击 fork，之后在你自己的仓库下会看到刚复制的仓库，以后的操作都在你自己的仓库进行，当然想感谢我写这个教程就帮我点个 start 吧！ ![fork博客](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/fork%E5%8D%9A%E5%AE%A2.png) **版权声明： fork之后_posts文件夹内容是我的博客文章，版权归我所有。你可以选择删除里面的文章替换上自己的博客文章，如需转载需要与我联系授权 **。 ## 修改博客仓库名称进到你自己的博客仓库，**修改博客仓库名称成你自己的用户名**。因为 github page 解析的时候找的是这个 username.github.io的仓库名，**这一步非常重要**。 ![修改仓库名称](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E4%BF%AE%E6%94%B9%E4%BB%93%E5%BA%93%E5%90%8D%E7%A7%B0.png) 此时，不出意外的话，打开域名 https://username.github.io 就能看到你刚搭建的博客了。*注意替换 username成你自己的github 用户名*。 ## 博客配置上面点开域名看到的还是我的博客配置，显示的博客名字也是我的。还需要更改配置才是你的博客。博客的配置文件是仓库根目录下的_config.yml文件，直接点开它编辑。 ![config文件](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/config%E6%96%87%E4%BB%B6.png) 你还需要更改以下配置： ### 博客名称和描述 ![更改名称](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E6%9B%B4%E6%94%B9%E5%90%8D%E7%A7%B0.png) 分别是博客名称和描述，自己任意写点啥。 ### 博客社交链接 ![更改社交链接](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E6%9B%B4%E6%94%B9%E7%A4%BE%E4%BA%A4%E9%93%BE%E6%8E%A5.png) 这里配置社交链接按钮，没配的不显示，我现在配了知乎、邮箱、github账号三个。其他你想加自己加上就可以。 ### 配置gitalk 这个是评论功能的配置。评论功能基于gitalk，在配置文件中找到gitalk配置项目：修改规则如下： ```yml gitalk: clientID: <你的clientID> clientSecret: <你的clientSecret> repo: <你的repository名称> owner: <你的GitHub用户名> ``` 原理是利用github的issues评论文章。其中clientID和clientSecret需要[点击这里创建](https://github.com/settings/applications/new) ![创建gitalk鉴权app](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E5%88%9B%E5%BB%BAgitalk%E9%89%B4%E6%9D%83app.png) 点绿色按钮创建，成功之后会得到以上两个id，修改配置即可。 ### Google站长统计首先你要去注册一个[Google Analytics]( https://analytics.google.com/analytics/ )账号，它可以统计你博客网站的访问人数，访问来源等非常丰富的网站数据。如果你不在乎可以不用跳过这节。不过要把配置中我的`google_analytics: UA-XXXXXXX-X`删除，**否则统计到我的去了**。 ``` # Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking google_analytics: UA-XXXXXXX-X ``` 下面是我的网站实时分析页面展示： ![google分析页面](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/google%E5%88%86%E6%9E%90%E9%A1%B5%E9%9D%A2.png) 由于不可描述的原因，国内注册账号可能会遇到问题，所有不配置也没关系。 ### 博客网址配置 ``` # Your website URL (e.g. http://barryclark.github.io or http://www.barryclark.co) # Used for Sitemap.xml and your RSS feed url: https://yourname.github.io ``` 这里配置你自己的博客地址。 ### 配置提交对_config.ymld的修改需要提交才能生效，点下图中绿色按钮提交。 ![配置提交](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E9%85%8D%E7%BD%AE%E6%8F%90%E4%BA%A4.png) **done! 现在输入上面提到的博客地址，回车，你拥有了自己的博客。** ## 如何写博客好了，博客有了。如何更新文章呢？文章用markdown语法，写好统一放在_post文件夹下上传，git page会自动从你的git仓库拉去解析成网页，立刻就能在你的博客网页浏览。关于文章的**命名格式**：博客文章必须按照统一的命名格式 `yyyy-mm-dd-blogName.md` 比如我这篇博客的名字是`2019-11-22-create_blog_with_github_pages.md` **看到这里，如果只是简单的想写博客，后面的不看也可以了，你已经拥有了自己的博客！后面章节是记录一些DIY的过程。** 另外，发现最近用我这个模板的同学越来越多，如果搭建过程中有什么问题，可以在我的公众号「后端技术学堂」讨论交流。 ![公众号二维码](https://upload-images.jianshu.io/upload_images/7842464-15f939ec039690f6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 本地博客预览到目前为止，我们提交的文章都是必须上传到github仓库才能预览。如果你想写完在本地浏览器看一下效果在上传也是可以的，因为不是所有人都有这样的需求。 ### 安装 Ruby 和 DevKit 在官网下载，[点这里]( https://rubyinstaller.org/downloads/ )下载适合系统版本的 [Ruby+Devkit](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.6.5-1/rubyinstaller-devkit-2.6.5-1-x64.exe) 包。安装，弹出的窗口选3 ![安装ruby](https://github.com/lemonchann/lemonchann.github.io/raw/master/images/2019-11-22-create_blog_with_github_pages/%E5%AE%89%E8%A3%85ruby.PNG) `gem -v` `ruby -v` 查看得到版本号就说明成功了。如果是在墙内，需要切换安装源到https://gems.ruby-china.com/。墙外请忽略。 `gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/` 切换安装源 `gem sources -l` 查看版本 ### bundler安装 `gem install bundler` 安装bundler `bundle -v 查看版本 bundle config mirror.https://rubygems.org https://gems.ruby-china.com` 切换安装源 ### 安装jekyll ` gem install jekyll` ![jekyll安装](https://github.com/lemonchann/lemonchann.github.io/raw/master/images/2019-11-22-create_blog_with_github_pages/jekyll%E5%AE%89%E8%A3%85.PNG) ### 预览博客 ` jekyll server` 输入之后打开浏览器，不出意外输入localhost:4000即可看到博客内容。 ![jekyll_server成功](https://github.com/lemonchann/lemonchann.github.io/raw/master/images/2019-11-22-create_blog_with_github_pages/jekyll_server%E6%88%90%E5%8A%9F.PNG) 如果你没这么顺利，那以下的错误解决供参考 #### 常见错误 - 缺少某个包 ![jekyll_error](https://github.com/lemonchann/lemonchann.github.io/raw/master/images/2019-11-22-create_blog_with_github_pages/jekyll_error.PNG) 如图，缺少jekyll-paginate，安装即可`gem install jekyll-paginate`若还提示缺少就装啥。 ![jekyll_server_erro错误2](https://github.com/lemonchann/lemonchann.github.io/raw/master/images/2019-11-22-create_blog_with_github_pages/jekyll_server_erro%E9%94%99%E8%AF%AF2.PNG) - 权限拒绝 socket.rb:201:in `bind` :Permission denied - bind(2) for 127.0.0.1:4000 (Error:EACCES) ![jekyll_error_EASSE](https://github.com/lemonchann/lemonchann.github.io/raw/master/images/2019-11-22-create_blog_with_github_pages/jekyll_error_EASSE.png) 出现这个错误一般是4000端口被占用了，解决方法： 1. netstat -ano|findstr "4000" 找到占用4000端口的进程ID 2. 查看最后一列数字就是PID=312964 ![查看netstat](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E6%9F%A5%E7%9C%8Bnetstat.png) 3. 打开windows资源管理器，结束该进程. ![任务管理器](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86%E5%99%A8.png) 4. `$ tasklist|findstr 312964`也能查看进程名，查到结束掉他同步骤3. ## 搜索功能集成博客模板本来是没有搜索功能的，搜索功能依赖[Simple-Jekyll-Search](https://github.com/christian-fei/Simple-Jekyll-Search)提供支持。 ### 配置search.json [复制这份代码到你博客的根目录](https://github.com/christian-fei/Simple-Jekyll-Search/blob/master/example/search.json) 这个配置文件代表可以按博客的标题、标签、时间、分类搜索。 ### 下载simple-jekyll-searchj文件 [下载这整个文件夹](https://github.com/christian-fei/Simple-Jekyll-Search/tree/master/example/js)，里面包含simple-jekyll-search.min.js和simple-jekyll-search.js两个文件，连同js文件夹放在你的根目录下面。 ### 配置搜索框标签在你想展示搜索框的页面我的是index.html，这个页面和每个人的博客模板有关，可能需要一点前端知识，添加如下的html标签。 ```html

``` 其中，以下两个是二选一的，一个是用云端的js一个是用本地的js如果本地有的话。 `` 配置完成，打开博客，你得到这样一个搜索框。 ![search_block](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/search_block.png) ## 搜索框样式搜索框的样式是可以改变的，这里有修改HTML中CSS样式的方法，我搞后端的，前端现学现卖。 [html插入标签样式方法](https://blog.csdn.net/u014103733/article/details/72961366) ## 社交链接模板提供的链接没有知乎链接，或者你想增加自定义的链接，都可以通过以下方法添加。以增加zhihu链接为例链接的图片是svg格式的(我也刚知道)，大概了解一下什么是svg和viewBox [viewBox](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox) > viewBox属性的值是一个包含4个参数的列表 `min-x`, `min-y`, `width` and `height`，以空格或者逗号分隔开，在用户空间中指定一个矩形区域映射到给定的元素,查看属性 [深入简出 SVG 教程](https://zhuanlan.zhihu.com/p/36138381) ### 配置_config.yml ```yml footer-links: weibo: yourname #请输入你的微博个性域名 https://www.weibo.com/ zhihu: yourname #输入你知乎主页链接上的名字 https://https://www.zhihu.com/people/ ``` ### 修改svg-icons.html 因为footer.html中调用了svg-icons.html来生成社交链接。可见是先调用了svg-icon.html显示社交链接，所以修改_include/svg-icons.html增加zhihu链接 ```html {% if site.footer-links.zhihu %}

{% endif %} ``` 上面配置内容应该都能理解，`viewBox` 指定图片大小。主要是`path d=` 内容的获取，这里其实是指定svg图片的内容，我们可以从 [这里](https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/brands/)获取到大部分svg素材，比如知乎的svg[在这](https://github.com/FortAwesome/Font-Awesome/blob/master/svgs/brands/zhihu.svg)，点`raw` 按钮查看源文件，复制`path d=`后面的内容到上面的配置即可。 ![zhihuSvg](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/zhihuSvg.png) ## 添加网站计数网站统计[由不蒜子](http://busuanzi.ibruce.info/)提供支持，就是可以统计网站当前访问次数和人数。配置也非常简单，[官方指引](http://ibruce.info/2015/04/04/busuanzi/#more)在这里。 ### 修改页面html 想让统计显示在哪个页面，需要修改那个页面的html，增加如下内容： ```html

View: User:

``` ### style标签说明可以通过style标签改变字体颜色与大小。具体参考:[html颜色表](http://xh.5156edu.com/page/z1015m9220j18754.html)和[html style属性](https://www.geeksforgeeks.org/html-style-attribute/) eg. `style="font-family:arial;color:Gainsboro;font-size:10px; text-align:right;width:200px;background-color:gray;` ## 修改博客主题颜色博客使用开源的颜色表[Open Color](https://yeun.github.io/open-color/)，博客主题的可选颜色有： `red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow` 修改文件`_sass/_variables.scss`，将文件中当前颜色，比如当前是 `grape` 全部替换成你想要的颜色即可。 ## 显示文章目录在文章开头信息中心增加 `toc: true` 描述即可打开文章目录显示。效果如下： ![文章带目录](https://i.loli.net/2020/07/12/TFlRj3kBdpocY9K.png) ## 如何传图片写markdown最头疼的就是图片的插入了，推荐用[PicGo](https://picgo.github.io/PicGo-Doc/zh/guide/)一键上传得到链接，直接可以插入markdown。 PicGo支持图片上传github、SM.MS图床、阿里云、腾讯云等主流图床或云端。直接拖图片，上传云端、得到链接一步搞定，方便快捷。 ![PicGo](https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/PicGo.png) ## 其他功能 [小功能](https://blog.csdn.net/ds19991999/article/details/81293467) [好用的github插件](https://blog.csdn.net/u012702547/article/details/100533763) ## 网站结构根目录的index.html生成blog首页 _include/footer.html生成侧边栏 _include/svg-icons.html生成社交头像的链接 ## 致谢感谢 [Jekyll](https://www.jekyll.com.cn/) 提供的技术支持才能有这个博客。感谢 [LOFFER ](https://fromendworld.github.io/LOFFER/document/)提供的原始模板，我在其上进行的二次开发。 **我的个人技术公众号「后端技术学堂」分享、记录、成长，扫码添加，一起学习，共同成长。** ![公众号二维码](https://upload-images.jianshu.io/upload_images/7842464-15f939ec039690f6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ================================================ FILE: _sass/_gitalk.scss ================================================ @font-face { font-family: octicons-link; src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff'); } .markdown-body { color: $base-color; font-family: $base-font; font-size: $small-font-size; line-height: 1.5; word-wrap: break-word; .octicon { display: inline-block; vertical-align: text-top; fill: currentColor; vertical-align: text-bottom; } } // code highlight .markdown-body{ .pl-c{ color: #6a737d; } .pl-c1, .pl-s .pl-v { color: $link-color; } .pl-e, .pl-en { color: #6f42c1; } .pl-smi, .pl-s .pl-s1 { color: #24292e; } .pl-ent { color: #22863a; } .pl-k { color: #d73a49; } .pl-s, .pl-pds, .pl-s .pl-pse .pl-s1, .pl-sr, .pl-sr .pl-cce, .pl-sr .pl-sre, .pl-sr .pl-sra { color: #032f62; } .pl-v, .pl-smw { color: #e36209; } .pl-bu { color: #b31d28; } .pl-ii { color: #fafbfc; background-color: #b31d28; } .pl-c2 { color: #fafbfc; background-color: #d73a49; } .pl-c2::before { content: "^M"; } .pl-sr .pl-cce { font-weight: bold; color: #22863a; } .pl-ml { color: #735c0f; } .pl-mh, .pl-mh .pl-en, .pl-ms { font-weight: bold; color: $link-color; } .pl-mi { font-style: italic; color: #24292e; } .pl-mb { font-weight: bold; color: #24292e; } .pl-md { color: #b31d28; background-color: #ffeef0; } .pl-mi1 { color: #22863a; background-color: #f0fff4; } .pl-mc { color: #e36209; background-color: #ffebda; } .pl-mi2 { color: #f6f8fa; background-color: $link-color; } .pl-mdr { font-weight: bold; color: #6f42c1; } .pl-ba { color: #586069; } .pl-sg { color: #959da5; } .pl-corl { text-decoration: underline; color: #032f62; } .pl-0 { padding-left: 0 !important; } .pl-1 { padding-left: 4px !important; } .pl-2 { padding-left: 8px !important; } .pl-3 { padding-left: 16px !important; } .pl-4 { padding-left: 24px !important; } .pl-5 { padding-left: 32px !important; } .pl-6 { padding-left: 40px !important; } } .markdown-body kbd { display: inline-block; padding: 3px 5px; font-size: 11px; line-height: 10px; color: #444d56; vertical-align: middle; background-color: #fafbfc; border: solid 1px #c6cbd1; border-bottom-color: #959da5; border-radius: 3px; -webkit-box-shadow: inset 0 -1px 0 #959da5; box-shadow: inset 0 -1px 0 #959da5; } .markdown-body code { padding: 0; padding-top: 0.2em; padding-bottom: 0.2em; margin: 0; font-size: 85%; background-color: rgba(27,31,35,0.05); border-radius: 3px; } .markdown-body code::before, .markdown-body code::after { letter-spacing: -0.2em; content: "\A0"; } .markdown-body pre { word-wrap: normal; } .markdown-body pre>code { padding: 0; margin: 0; font-size: 100%; word-break: normal; white-space: pre; background: transparent; border: 0; } .markdown-body .highlight { margin-bottom: 16px; } .markdown-body .highlight pre { margin-bottom: 0; word-break: normal; } .markdown-body .highlight pre, .markdown-body pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: #f6f8fa; border-radius: 3px; } .markdown-body pre code { display: inline; max-width: auto; padding: 0; margin: 0; overflow: visible; line-height: inherit; word-wrap: normal; background-color: transparent; border: 0; } .markdown-body pre code::before, .markdown-body pre code::after { content: normal; } .markdown-body .full-commit .btn-outline:not(:disabled):hover { color: $link-color; border-color: $link-color; } .markdown-body kbd { display: inline-block; padding: 3px 5px; font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; line-height: 10px; color: #444d56; vertical-align: middle; background-color: #fafbfc; border: solid 1px #d1d5da; border-bottom-color: #c6cbd1; border-radius: 3px; -webkit-box-shadow: inset 0 -1px 0 #c6cbd1; box-shadow: inset 0 -1px 0 #c6cbd1; } .markdown-body :checked+.radio-label { position: relative; z-index: 1; border-color: $link-color; } .markdown-body .task-list-item { list-style-type: none; } .markdown-body .task-list-item+.task-list-item { margin-top: 3px; } .markdown-body .task-list-item input { margin: 0 0.2em 0.25em -1.6em; vertical-align: middle; } /* .markdown-body hr { border-bottom-color: #eee; } */ /* variables */ /* functions & mixins */ /* variables - calculated */ /* styles */ .gt-container { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: $base-font-size; /* loader */ /* error */ /* initing */ /* no int */ /* link */ /* meta */ /* popup */ /* header */ /* comments */ /* comment */ } .gt-container * { -webkit-box-sizing: border-box; box-sizing: border-box; } .gt-container a { color: $link-color; } .gt-container a:hover { color: $link-lighten-color; } /* .gt-container a.is--active { color: #333; cursor: default !important; } .gt-container a.is--active:hover { color: #333; } */ .gt-container .hide { display: none !important; } .gt-container .gt-svg { display: inline-block; width: 1em; height: 1em; vertical-align: sub; } .gt-container .gt-svg svg { width: 100%; height: 100%; fill: $link-color; } .gt-container .gt-ico { display: inline-block; } .gt-container .gt-ico-text { margin-left: 0.3125em; } .gt-container .gt-ico-github { width: 100%; height: 100%; } .gt-container .gt-ico-github .gt-svg { width: 100%; height: 100%; } .gt-container .gt-ico-github svg { fill: inherit; } .gt-container .gt-spinner { position: relative; } .gt-container .gt-spinner::before { content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 3px; width: 0.75em; height: 0.75em; margin-top: -0.1875em; margin-left: -0.375em; border-radius: 50%; border: 1px solid $oc-white; border-top-color: $link-color; -webkit-animation: gt-kf-rotate 0.6s linear infinite; animation: gt-kf-rotate 0.6s linear infinite; } .gt-container .gt-loader { position: relative; border: 1px solid $gray; -webkit-animation: ease gt-kf-rotate 1.5s infinite; animation: ease gt-kf-rotate 1.5s infinite; display: inline-block; font-style: normal; width: 1.75em; height: 1.75em; line-height: 1.75em; border-radius: 50%; } .gt-container .gt-loader:before { content: ''; position: absolute; display: block; top: 0; left: 50%; margin-top: -0.1875em; margin-left: -0.1875em; width: 0.375em; height: 0.375em; background-color: $gray; border-radius: 50%; } .gt-container .gt-avatar { display: inline-block; width: 3.125em; height: 3.125em; } @media (max-width: 479px) { .gt-container .gt-avatar { width: 2em; height: 2em; } } .gt-container .gt-avatar img { width: 100%; height: auto; border-radius: 3px; } .gt-container .gt-avatar-github { width: 3em; height: 3em; } @media (max-width: 479px) { .gt-container .gt-avatar-github { width: 1.875em; height: 1.875em; } } .gt-container .gt-btn { padding: 0.75em 1.25em; display: inline-block; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid $link-color; border-radius: 5px; background-color: $link-color; color:$white; outline: none; font-size: 0.75em; } .gt-container .gt-btn-text { font-weight: 400; } .gt-container .gt-btn-loading { position: relative; margin-left: 0.5em; display: inline-block; width: 0.75em; height: 1em; vertical-align: top; } .gt-container .gt-btn.is--disable { cursor: not-allowed; opacity: 0.5; } .gt-container .gt-btn-login { margin-right: 0; } .gt-container .gt-btn-preview { background-color: $oc-white; color: $link-color; } .gt-container .gt-btn-preview:hover { background-color: $background-lighten-color; border-color: $link-lighten-color; } .gt-container .gt-btn-public:hover { background-color: $link-lighten-color; border-color: $link-lighten-color; } .gt-container .gt-error { text-align: center; margin: 0.625em; color: $error-color; } .gt-container .gt-initing { padding: 1.25em 0; text-align: center; } .gt-container .gt-initing-text { margin: 0.625em auto; font-size: 92%; } .gt-container .gt-no-init { padding: 1.25em 0; text-align: center; } /* .gt-container .gt-link { border-bottom: 1px dotted $link-color; }*/ .gt-container .gt-link-counts, .gt-container .gt-link-project { text-decoration: none; } .gt-container .gt-meta { margin: 1.25em 0; padding: 1em 0; position: relative; border-bottom: 1px solid $divider-color; font-size: 1em; position: relative; z-index: 10; } .gt-container .gt-meta:before, .gt-container .gt-meta:after { content: " "; display: table; } .gt-container .gt-meta:after { clear: both; } .gt-container .gt-counts { margin: 0 0.625em 0 0; } .gt-container .gt-user { float: right; margin: 0; font-size: 92%; } .gt-container .gt-user-pic { width: 16px; height: 16px; vertical-align: top; margin-right: 0.5em; } .gt-container .gt-user-inner { display: inline-block; cursor: pointer; } .gt-container .gt-user .gt-ico { margin: 0 0 0 0.3125em; } .gt-container .gt-user .gt-ico svg { fill: inherit; } .gt-container .gt-user .is--poping .gt-ico svg { fill: $link-color; } .gt-container .gt-version { color: $base-lightener-color; margin-left: 0.375em; } .gt-container .gt-copyright { margin: 0 0.9375em 0.5em; border-top: 1px solid $divider-color; padding-top: 0.5em; } .gt-container .gt-popup { position: absolute; right: 0; top: 2.375em; background: $oc-white; display: inline-block; border: 1px solid $divider-color; padding: 0.625em 0; font-size: 0.875em; letter-spacing: 0.5px; } .gt-container .gt-popup .gt-action { cursor: pointer; display: block; margin: 0.5em 0; padding: 0 1.125em; position: relative; text-decoration: none; } .gt-container .gt-popup .gt-action.is--active:before { content: ''; width: 0.25em; height: 0.25em; background: $link-color; position: absolute; left: 0.5em; top: 0.4375em; } .gt-container .gt-header { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .gt-container .gt-header-comment { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 1.25em; } @media (max-width: 479px) { .gt-container .gt-header-comment { margin-left: 0.875em; } } .gt-container .gt-header-textarea { padding: 0.75em; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; min-height: 5.125em; max-height: 15em; border-radius: 5px; border: 1px solid $divider-color; font-size: 0.875em; word-wrap: break-word; resize: vertical; background-color: $background-color; outline: none; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; } .gt-container .gt-header-textarea:hover { background-color: $background-lighten-color; } .gt-container .gt-header-preview { padding: 0.75em; border-radius: 5px; border: 1px solid $divider-color; background-color: $background-color; } .gt-container .gt-header-controls { position: relative; margin: 0.75em 0 0; } .gt-container .gt-header-controls:before, .gt-container .gt-header-controls:after { content: " "; display: table; } .gt-container .gt-header-controls:after { clear: both; } @media (max-width: 479px) { .gt-container .gt-header-controls { margin: 0; } } .gt-container .gt-header-controls-tip { font-size: 0.875em; color: $link-color; text-decoration: none; vertical-align: sub; } @media (max-width: 479px) { .gt-container .gt-header-controls-tip { display: none; } } .gt-container .gt-header-controls .gt-btn { float: right; margin-left: 1.25em; } @media (max-width: 479px) { .gt-container .gt-header-controls .gt-btn { float: none; width: 100%; margin: 0.75em 0 0; } } .gt-container:after { content: ''; position: fixed; bottom: 100%; left: 0; right: 0; top: 0; opacity: 0; } .gt-container.gt-input-focused { position: relative; } .gt-container.gt-input-focused:after { content: ''; position: fixed; bottom: 0%; left: 0; right: 0; top: 0; background: $black; opacity: 0.6; -webkit-transition: opacity 0.3s, bottom 0s; transition: opacity 0.3s, bottom 0s; z-index: 9999; } .gt-container.gt-input-focused .gt-header-comment { z-index: 10000; } .gt-container .gt-comments { padding-top: 1.25em; } .gt-container .gt-comments-null { text-align: center; } .gt-container .gt-comments-controls { margin: 1.25em 0; text-align: center; } .gt-container .gt-comment { position: relative; padding: 0.625em 0; display: -webkit-box; display: -ms-flexbox; display: flex; } .gt-container .gt-comment-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 1.25em; padding: 0.75em 1em; background-color: $background-lighten-color; border-radius: 5px; border: 1px solid $divider-color; overflow: auto; -webkit-transition: all ease 0.25s; transition: all ease 0.25s; &:hover { background-color: $white; } } @media (max-width: 479px) { .gt-container .gt-comment-content { margin-left: 0.875em; padding: 0.625em 0.75em; } } .gt-container .gt-comment-header { margin-bottom: 0.5em; font-size: 0.875em; position: relative; } .gt-container .gt-comment-username { font-weight: 500; color: $link-color; text-decoration: none; } /* .gt-container .gt-comment-username:hover { text-decoration: underline; }*/ .gt-container .gt-comment-text { margin-left: 0.5em; color: $base-lightener-color; } .gt-container .gt-comment-date { margin-left: 0.5em; color: $base-lightener-color; } .gt-container .gt-comment-like, .gt-container .gt-comment-edit, .gt-container .gt-comment-reply { position: absolute; height: 1.375em; } .gt-container .gt-comment-like:hover, .gt-container .gt-comment-edit:hover, .gt-container .gt-comment-reply:hover { cursor: pointer; } .gt-container .gt-comment-like { top: 0; right: 2em; } .gt-container .gt-comment-edit, .gt-container .gt-comment-reply { top: 0; right: 0; } /* .gt-container .gt-comment-admin .gt-comment-content { background-color: $background-lighten-color; & :hover{ background-color:$background-lightener-color; } } */ @-webkit-keyframes gt-kf-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes gt-kf-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } ================================================ FILE: _sass/_highlights.scss ================================================ pre, code { font-family: $code-font; } code.highlighter-rouge { font-size: 90%; color: $oc-indigo-9; background-color: $oc-gray-1; padding: .1em .2em; border-radius: 3px; } pre.highlight { font-size: $small-font-size; padding: .45em .45em .45em .625em; border: 1px solid $oc-gray-3; border-radius: 3px; margin: 1em 0; overflow: scroll; } .highlight { background: $oc-gray-0; } .highlight .c { color: #999988; font-style: italic } /* Comment */ .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ .highlight .k { font-weight: bold } /* Keyword */ .highlight .o { font-weight: bold } /* Operator */ .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ .highlight .ge { font-style: italic } /* Generic.Emph */ .highlight .gr { color: #aa0000 } /* Generic.Error */ .highlight .gh { color: #999999 } /* Generic.Heading */ .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ .highlight .go { color: #888888 } /* Generic.Output */ .highlight .gp { color: #555555 } /* Generic.Prompt */ .highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gu { color: #aaaaaa } /* Generic.Subheading */ .highlight .gt { color: #aa0000 } /* Generic.Traceback */ .highlight .kc { font-weight: bold } /* Keyword.Constant */ .highlight .kd { font-weight: bold } /* Keyword.Declaration */ .highlight .kp { font-weight: bold } /* Keyword.Pseudo */ .highlight .kr { font-weight: bold } /* Keyword.Reserved */ .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ .highlight .m { color: #009999 } /* Literal.Number */ .highlight .s { color: #d14 } /* Literal.String */ .highlight .na { color: #008080 } /* Name.Attribute */ .highlight .nb { color: #0086B3 } /* Name.Builtin */ .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ .highlight .no { color: #008080 } /* Name.Constant */ .highlight .ni { color: #800080 } /* Name.Entity */ .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ .highlight .nn { color: #555555 } /* Name.Namespace */ .highlight .nt { color: #000080 } /* Name.Tag */ .highlight .nv { color: #008080 } /* Name.Variable */ .highlight .ow { font-weight: bold } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mf { color: #009999 } /* Literal.Number.Float */ .highlight .mh { color: #009999 } /* Literal.Number.Hex */ .highlight .mi { color: #009999 } /* Literal.Number.Integer */ .highlight .mo { color: #009999 } /* Literal.Number.Oct */ .highlight .sb { color: #d14 } /* Literal.String.Backtick */ .highlight .sc { color: #d14 } /* Literal.String.Char */ .highlight .sd { color: #d14 } /* Literal.String.Doc */ .highlight .s2 { color: #d14 } /* Literal.String.Double */ .highlight .se { color: #d14 } /* Literal.String.Escape */ .highlight .sh { color: #d14 } /* Literal.String.Heredoc */ .highlight .si { color: #d14 } /* Literal.String.Interpol */ .highlight .sx { color: #d14 } /* Literal.String.Other */ .highlight .sr { color: #009926 } /* Literal.String.Regex */ .highlight .s1 { color: #d14 } /* Literal.String.Single */ .highlight .ss { color: #990073 } /* Literal.String.Symbol */ .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ .highlight .vc { color: #008080 } /* Name.Variable.Class */ .highlight .vg { color: #008080 } /* Name.Variable.Global */ .highlight .vi { color: #008080 } /* Name.Variable.Instance */ .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ ================================================ FILE: _sass/_open-color.scss ================================================ // // 𝗖 𝗢 𝗟 𝗢 𝗥 // v 1.5.1 // https://github.com/yeun/open-color/blob/master/open-color.scss // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ // General // ─────────────────────────────────── $oc-white: #ffffff; $oc-black: #000000; // Gray // ─────────────────────────────────── $oc-gray-list: ( "0": #f8f9fa, "1": #f1f3f5, "2": #e9ecef, "3": #dee2e6, "4": #ced4da, "5": #adb5bd, "6": #868e96, "7": #495057, "8": #343a40, "9": #212529 ); $oc-gray-0: map-get($oc-gray-list, "0"); $oc-gray-1: map-get($oc-gray-list, "1"); $oc-gray-2: map-get($oc-gray-list, "2"); $oc-gray-3: map-get($oc-gray-list, "3"); $oc-gray-4: map-get($oc-gray-list, "4"); $oc-gray-5: map-get($oc-gray-list, "5"); $oc-gray-6: map-get($oc-gray-list, "6"); $oc-gray-7: map-get($oc-gray-list, "7"); $oc-gray-8: map-get($oc-gray-list, "8"); $oc-gray-9: map-get($oc-gray-list, "9"); // Red // ─────────────────────────────────── $oc-red-list: ( "0": #fff5f5, "1": #ffe3e3, "2": #ffc9c9, "3": #ffa8a8, "4": #ff8787, "5": #ff6b6b, "6": #fa5252, "7": #f03e3e, "8": #e03131, "9": #c92a2a ); $oc-red-0: map-get($oc-red-list, "0"); $oc-red-1: map-get($oc-red-list, "1"); $oc-red-2: map-get($oc-red-list, "2"); $oc-red-3: map-get($oc-red-list, "3"); $oc-red-4: map-get($oc-red-list, "4"); $oc-red-5: map-get($oc-red-list, "5"); $oc-red-6: map-get($oc-red-list, "6"); $oc-red-7: map-get($oc-red-list, "7"); $oc-red-8: map-get($oc-red-list, "8"); $oc-red-9: map-get($oc-red-list, "9"); // Pink // ─────────────────────────────────── $oc-pink-list: ( "0": #fff0f6, "1": #ffdeeb, "2": #fcc2d7, "3": #faa2c1, "4": #f783ac, "5": #f06595, "6": #e64980, "7": #d6336c, "8": #c2255c, "9": #a61e4d ); $oc-pink-0: map-get($oc-pink-list, "0"); $oc-pink-1: map-get($oc-pink-list, "1"); $oc-pink-2: map-get($oc-pink-list, "2"); $oc-pink-3: map-get($oc-pink-list, "3"); $oc-pink-4: map-get($oc-pink-list, "4"); $oc-pink-5: map-get($oc-pink-list, "5"); $oc-pink-6: map-get($oc-pink-list, "6"); $oc-pink-7: map-get($oc-pink-list, "7"); $oc-pink-8: map-get($oc-pink-list, "8"); $oc-pink-9: map-get($oc-pink-list, "9"); // Grape // ─────────────────────────────────── $oc-grape-list: ( "0": #f8f0fc, "1": #f3d9fa, "2": #eebefa, "3": #e599f7, "4": #da77f2, "5": #cc5de8, "6": #be4bdb, "7": #ae3ec9, "8": #9c36b5, "9": #862e9c ); $oc-grape-0: map-get($oc-grape-list, "0"); $oc-grape-1: map-get($oc-grape-list, "1"); $oc-grape-2: map-get($oc-grape-list, "2"); $oc-grape-3: map-get($oc-grape-list, "3"); $oc-grape-4: map-get($oc-grape-list, "4"); $oc-grape-5: map-get($oc-grape-list, "5"); $oc-grape-6: map-get($oc-grape-list, "6"); $oc-grape-7: map-get($oc-grape-list, "7"); $oc-grape-8: map-get($oc-grape-list, "8"); $oc-grape-9: map-get($oc-grape-list, "9"); // Violet // ─────────────────────────────────── $oc-violet-list: ( "0": #f3f0ff, "1": #e5dbff, "2": #d0bfff, "3": #b197fc, "4": #9775fa, "5": #845ef7, "6": #7950f2, "7": #7048e8, "8": #6741d9, "9": #5f3dc4 ); $oc-violet-0: map-get($oc-violet-list, "0"); $oc-violet-1: map-get($oc-violet-list, "1"); $oc-violet-2: map-get($oc-violet-list, "2"); $oc-violet-3: map-get($oc-violet-list, "3"); $oc-violet-4: map-get($oc-violet-list, "4"); $oc-violet-5: map-get($oc-violet-list, "5"); $oc-violet-6: map-get($oc-violet-list, "6"); $oc-violet-7: map-get($oc-violet-list, "7"); $oc-violet-8: map-get($oc-violet-list, "8"); $oc-violet-9: map-get($oc-violet-list, "9"); // Indigo // ─────────────────────────────────── $oc-indigo-list: ( "0": #edf2ff, "1": #dbe4ff, "2": #bac8ff, "3": #91a7ff, "4": #748ffc, "5": #5c7cfa, "6": #4c6ef5, "7": #4263eb, "8": #3b5bdb, "9": #364fc7 ); $oc-indigo-0: map-get($oc-indigo-list, "0"); $oc-indigo-1: map-get($oc-indigo-list, "1"); $oc-indigo-2: map-get($oc-indigo-list, "2"); $oc-indigo-3: map-get($oc-indigo-list, "3"); $oc-indigo-4: map-get($oc-indigo-list, "4"); $oc-indigo-5: map-get($oc-indigo-list, "5"); $oc-indigo-6: map-get($oc-indigo-list, "6"); $oc-indigo-7: map-get($oc-indigo-list, "7"); $oc-indigo-8: map-get($oc-indigo-list, "8"); $oc-indigo-9: map-get($oc-indigo-list, "9"); // Blue // ─────────────────────────────────── $oc-blue-list: ( "0": #e8f7ff, "1": #ccedff, "2": #a3daff, "3": #72c3fc, "4": #4dadf7, "5": #329af0, "6": #228ae6, "7": #1c7cd6, "8": #1b6ec2, "9": #1862ab ); $oc-blue-0: map-get($oc-blue-list, "0"); $oc-blue-1: map-get($oc-blue-list, "1"); $oc-blue-2: map-get($oc-blue-list, "2"); $oc-blue-3: map-get($oc-blue-list, "3"); $oc-blue-4: map-get($oc-blue-list, "4"); $oc-blue-5: map-get($oc-blue-list, "5"); $oc-blue-6: map-get($oc-blue-list, "6"); $oc-blue-7: map-get($oc-blue-list, "7"); $oc-blue-8: map-get($oc-blue-list, "8"); $oc-blue-9: map-get($oc-blue-list, "9"); // Cyan // ─────────────────────────────────── $oc-cyan-list: ( "0": #e3fafc, "1": #c5f6fa, "2": #99e9f2, "3": #66d9e8, "4": #3bc9db, "5": #22b8cf, "6": #15aabf, "7": #1098ad, "8": #0c8599, "9": #0b7285 ); $oc-cyan-0: map-get($oc-cyan-list, "0"); $oc-cyan-1: map-get($oc-cyan-list, "1"); $oc-cyan-2: map-get($oc-cyan-list, "2"); $oc-cyan-3: map-get($oc-cyan-list, "3"); $oc-cyan-4: map-get($oc-cyan-list, "4"); $oc-cyan-5: map-get($oc-cyan-list, "5"); $oc-cyan-6: map-get($oc-cyan-list, "6"); $oc-cyan-7: map-get($oc-cyan-list, "7"); $oc-cyan-8: map-get($oc-cyan-list, "8"); $oc-cyan-9: map-get($oc-cyan-list, "9"); // Teal // ─────────────────────────────────── $oc-teal-list: ( "0": #e6fcf5, "1": #c3fae8, "2": #96f2d7, "3": #63e6be, "4": #38d9a9, "5": #20c997, "6": #12b886, "7": #0ca678, "8": #099268, "9": #087f5b ); $oc-teal-0: map-get($oc-teal-list, "0"); $oc-teal-1: map-get($oc-teal-list, "1"); $oc-teal-2: map-get($oc-teal-list, "2"); $oc-teal-3: map-get($oc-teal-list, "3"); $oc-teal-4: map-get($oc-teal-list, "4"); $oc-teal-5: map-get($oc-teal-list, "5"); $oc-teal-6: map-get($oc-teal-list, "6"); $oc-teal-7: map-get($oc-teal-list, "7"); $oc-teal-8: map-get($oc-teal-list, "8"); $oc-teal-9: map-get($oc-teal-list, "9"); // Green // ─────────────────────────────────── $oc-green-list: ( "0": #ebfbee, "1": #d3f9d8, "2": #b2f2bb, "3": #8ce99a, "4": #69db7c, "5": #51cf66, "6": #40c057, "7": #37b24d, "8": #2f9e44, "9": #2b8a3e ); $oc-green-0: map-get($oc-green-list, "0"); $oc-green-1: map-get($oc-green-list, "1"); $oc-green-2: map-get($oc-green-list, "2"); $oc-green-3: map-get($oc-green-list, "3"); $oc-green-4: map-get($oc-green-list, "4"); $oc-green-5: map-get($oc-green-list, "5"); $oc-green-6: map-get($oc-green-list, "6"); $oc-green-7: map-get($oc-green-list, "7"); $oc-green-8: map-get($oc-green-list, "8"); $oc-green-9: map-get($oc-green-list, "9"); // Lime // ─────────────────────────────────── $oc-lime-list: ( "0": #f4fce3, "1": #e9fac8, "2": #d8f5a2, "3": #c0eb75, "4": #a9e34b, "5": #94d82d, "6": #82c91e, "7": #74b816, "8": #66a80f, "9": #5c940d ); $oc-lime-0: map-get($oc-lime-list, "0"); $oc-lime-1: map-get($oc-lime-list, "1"); $oc-lime-2: map-get($oc-lime-list, "2"); $oc-lime-3: map-get($oc-lime-list, "3"); $oc-lime-4: map-get($oc-lime-list, "4"); $oc-lime-5: map-get($oc-lime-list, "5"); $oc-lime-6: map-get($oc-lime-list, "6"); $oc-lime-7: map-get($oc-lime-list, "7"); $oc-lime-8: map-get($oc-lime-list, "8"); $oc-lime-9: map-get($oc-lime-list, "9"); // Yellow // ─────────────────────────────────── $oc-yellow-list: ( "0": #fff9db, "1": #fff3bf, "2": #ffec99, "3": #ffe066, "4": #ffd43b, "5": #fcc419, "6": #fab005, "7": #f59f00, "8": #f08c00, "9": #e67700 ); $oc-yellow-0: map-get($oc-yellow-list, "0"); $oc-yellow-1: map-get($oc-yellow-list, "1"); $oc-yellow-2: map-get($oc-yellow-list, "2"); $oc-yellow-3: map-get($oc-yellow-list, "3"); $oc-yellow-4: map-get($oc-yellow-list, "4"); $oc-yellow-5: map-get($oc-yellow-list, "5"); $oc-yellow-6: map-get($oc-yellow-list, "6"); $oc-yellow-7: map-get($oc-yellow-list, "7"); $oc-yellow-8: map-get($oc-yellow-list, "8"); $oc-yellow-9: map-get($oc-yellow-list, "9"); // Orange // ─────────────────────────────────── $oc-orange-list: ( "0": #fff4e6, "1": #ffe8cc, "2": #ffd8a8, "3": #ffc078, "4": #ffa94d, "5": #ff922b, "6": #fd7e14, "7": #f76707, "8": #e8590c, "9": #d9480f ); $oc-orange-0: map-get($oc-orange-list, "0"); $oc-orange-1: map-get($oc-orange-list, "1"); $oc-orange-2: map-get($oc-orange-list, "2"); $oc-orange-3: map-get($oc-orange-list, "3"); $oc-orange-4: map-get($oc-orange-list, "4"); $oc-orange-5: map-get($oc-orange-list, "5"); $oc-orange-6: map-get($oc-orange-list, "6"); $oc-orange-7: map-get($oc-orange-list, "7"); $oc-orange-8: map-get($oc-orange-list, "8"); $oc-orange-9: map-get($oc-orange-list, "9"); // Color list // ─────────────────────────────────── $oc-color-spectrum: 9; $oc-color-list: ( $oc-gray-list: "gray", $oc-red-list: "red", $oc-pink-list: "pink", $oc-grape-list: "grape", $oc-violet-list: "violet", $oc-indigo-list: "indigo", $oc-blue-list: "blue", $oc-cyan-list: "cyan", $oc-teal-list: "teal", $oc-green-list: "green", $oc-lime-list: "lime", $oc-yellow-list: "yellow", $oc-orange-list: "orange" ); ================================================ FILE: _sass/_reset.scss ================================================ /***************/ /* MEYER RESET */ /***************/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } // HTML5 display-role reset for older browsers article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul, dl { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } // Apply a natural box layout model to all elements // from: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } ================================================ FILE: _sass/_variables.scss ================================================ // // VARIABLES // // Colors $blue: $oc-blue-8; // Grays $black: #000; $darkerGray: #222; $darkGray: #333; $gray: #666; $lightGray: #eee; $white: #fff; // Font stacks $helvetica: Helvetica, Arial, sans-serif; $helveticaNeue: "Helvetica Neue", Helvetica, Arial, sans-serif; $georgia: Georgia, serif; // Fonts $base-font: "Noto Serif","PT Serif",source-han-serif-sc, "Source Han Serif SC", "Source Han Serif CN", "Source Han Serif TC", "Source Han Serif TW", "Source Han Serif","Songti SC", SimSon, serif; $code-font: 'Menlo', 'Courier New', 'Monaco', 'Spoqa Han Sans', monospace; // Font sizes $base-font-size: 16px; $small-font-size: 14px; // Colors $base-color: $oc-gray-8; $base-lighten-color: $oc-gray-6; $base-lightener-color: $oc-gray-4; $background-color: $oc-gray-0; $background-lighten-color: #f8f9fa6b; $text-color: $base-color; $link-color: $oc-blue-8; $link-lighten-color: $oc-blue-6; $link-bghv-color: $oc-blue-0; $divider-color: $oc-gray-1; $error-color:$oc-blue-8; $table-border-color: $oc-gray-2; $table-background-color: $oc-gray-1; $blockquote-color: $base-lighten-color; $blockquote-border-color: $oc-gray-3; $footnote-link-border-color: $oc-gray-1; $footnote-link-background-over-color: $oc-gray-1; // $selection-color: $oc-black; $selection-background-color: $oc-gray-3; $tag-index-label-background-color: $oc-gray-2; $tag-index-count-background-color: #868e961a; $footer-border-color: $oc-gray-2; $footer-background-color: $oc-gray-0; // List $li-bottom-space: 0.4em; $li-bullets-width: 1.4em; $li-line-height: 1.55; $ul-bullets-font: inherit; $ul-bullets-font-size: 1.4em; $ul-bullets-font-line-height: 1.2; $ul-bullets-right-space: .3em; $ol-bullets-font: inherit; $ol-bullets-font-size: 1em; $ol-bullets-font-line-height: inherit; $ol-bullets-right-space: .3em; $li-child-size-ratio: 0.95; $dt-width: 180px; $dt-dd-space: 20px; $dd-position: $dt-width+$dt-dd-space; // Mobile breakpoints @mixin mobile { @media screen and (max-width: 1200px) { @content; } } ================================================ FILE: about.md ================================================ --- layout: page title: About permalink: /about/ --- ## 关于我你好，我是程序员柠檬。国内一线互联网大厂计算机软件工程师、[知乎](https://www.zhihu.com/people/ning-meng-cheng-31-94)编程领域万赞答主。 [个人技术公众号](https://mp.weixin.qq.com/mp/homepage?__biz=MzkwOTE2OTY1Nw==&hid=1&sn=6395e40d884ce4dd3900a68a0f5a6b87&scene=18#wechat_redirect)分享编程学习路线、编程学习资源，记录技术成长，欢迎扫码添加： ![公众号二维码](https://github.com/lemonchann/images/raw/master/gzh/%E6%96%87%E6%9C%AB%E6%8E%A8%E5%B9%BF%E6%96%87%E6%A1%88.png) ## 版权声明博客文章是我原创文章，存档于_posts 文件夹下，版权归我所有，转载请与我联系获得授权许可。 ================================================ FILE: archive/index.html ================================================ --- layout: page title: 归档 permalink: /archive/ --- {% if site.posts.size == 0 %}

No post found

{% endif %}

{% if post.link %} {% else %} {% endif %} {{ post.title }} {{ post.date | date: "%Y-%m-%d" }}

================================================ FILE: googledb06e025310e016e.html ================================================ google-site-verification: googledb06e025310e016e.html ================================================ FILE: index.html ================================================ --- layout: default ---

{% if site.posts.size == 0 %}

No post found

{% endif %}

{% for post in paginator.posts %} {% unless post.draft %}

{{ tag }}

{% endunless %} {% endfor %}

{% if paginator.previous_page %} ← 上一页 {% endif %} {% if paginator.next_page %} 下一页 → {% endif %}

View: User:

================================================ FILE: js/simple-jekyll-search.js ================================================ /*! * Simple-Jekyll-Search v1.7.2 (https://github.com/christian-fei/Simple-Jekyll-Search) * Copyright 2015-2018, Christian Fei * Licensed under the MIT License. */ (function(){ /* globals ActiveXObject:false */ 'use strict' var _$JSONLoader_2 = { load: load } function load (location, callback) { var xhr = getXHR() xhr.open('GET', location, true) xhr.onreadystatechange = createStateChangeListener(xhr, callback) xhr.send() } function createStateChangeListener (xhr, callback) { return function () { if (xhr.readyState === 4 && xhr.status === 200) { try { callback(null, JSON.parse(xhr.responseText)) } catch (err) { callback(err, null) } } } } function getXHR () { return window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP') } 'use strict' var _$OptionsValidator_3 = function OptionsValidator (params) { if (!validateParams(params)) { throw new Error('-- OptionsValidator: required options missing') } if (!(this instanceof OptionsValidator)) { return new OptionsValidator(params) } var requiredOptions = params.required this.getRequiredOptions = function () { return requiredOptions } this.validate = function (parameters) { var errors = [] requiredOptions.forEach(function (requiredOptionName) { if (typeof parameters[requiredOptionName] === 'undefined') { errors.push(requiredOptionName) } }) return errors } function validateParams (params) { if (!params) { return false } return typeof params.required !== 'undefined' && params.required instanceof Array } } 'use strict'; function fuzzysearch (needle, haystack) { var tlen = haystack.length; var qlen = needle.length; if (qlen > tlen) { return false; } if (qlen === tlen) { return needle === haystack; } outer: for (var i = 0, j = 0; i < qlen; i++) { var nch = needle.charCodeAt(i); while (j < tlen) { if (haystack.charCodeAt(j++) === nch) { continue outer; } } return false; } return true; } var _$fuzzysearch_1 = fuzzysearch; 'use strict' /* removed: var _$fuzzysearch_1 = require('fuzzysearch') */; var _$FuzzySearchStrategy_5 = new FuzzySearchStrategy() function FuzzySearchStrategy () { this.matches = function (string, crit) { return _$fuzzysearch_1(crit.toLowerCase(), string.toLowerCase()) } } 'use strict' var _$LiteralSearchStrategy_6 = new LiteralSearchStrategy() function LiteralSearchStrategy () { this.matches = function (str, crit) { if (!str) return false str = str.trim().toLowerCase() crit = crit.trim().toLowerCase() return crit.split(' ').filter(function (word) { return str.indexOf(word) >= 0 }).length === crit.split(' ').length } } 'use strict' var _$Repository_4 = { put: put, clear: clear, search: search, setOptions: setOptions } /* removed: var _$FuzzySearchStrategy_5 = require('./SearchStrategies/FuzzySearchStrategy') */; /* removed: var _$LiteralSearchStrategy_6 = require('./SearchStrategies/LiteralSearchStrategy') */; function NoSort () { return 0 } var data = [] var opt = {} opt.fuzzy = false opt.limit = 10 opt.searchStrategy = opt.fuzzy ? _$FuzzySearchStrategy_5 : _$LiteralSearchStrategy_6 opt.sort = NoSort function put (data) { if (isObject(data)) { return addObject(data) } if (isArray(data)) { return addArray(data) } return undefined } function clear () { data.length = 0 return data } function isObject (obj) { return Boolean(obj) && Object.prototype.toString.call(obj) === '[object Object]' } function isArray (obj) { return Boolean(obj) && Object.prototype.toString.call(obj) === '[object Array]' } function addObject (_data) { data.push(_data) return data } function addArray (_data) { var added = [] clear() for (var i = 0, len = _data.length; i < len; i++) { if (isObject(_data[i])) { added.push(addObject(_data[i])) } } return added } function search (crit) { if (!crit) { return [] } return findMatches(data, crit, opt.searchStrategy, opt).sort(opt.sort) } function setOptions (_opt) { opt = _opt || {} opt.fuzzy = _opt.fuzzy || false opt.limit = _opt.limit || 10 opt.searchStrategy = _opt.fuzzy ? _$FuzzySearchStrategy_5 : _$LiteralSearchStrategy_6 opt.sort = _opt.sort || NoSort } function findMatches (data, crit, strategy, opt) { var matches = [] for (var i = 0; i < data.length && matches.length < opt.limit; i++) { var match = findMatchesInObject(data[i], crit, strategy, opt) if (match) { matches.push(match) } } return matches } function findMatchesInObject (obj, crit, strategy, opt) { for (var key in obj) { if (!isExcluded(obj[key], opt.exclude) && strategy.matches(obj[key], crit)) { return obj } } } function isExcluded (term, excludedTerms) { var excluded = false excludedTerms = excludedTerms || [] for (var i = 0, len = excludedTerms.length; i < len; i++) { var excludedTerm = excludedTerms[i] if (!excluded && new RegExp(term).test(excludedTerm)) { excluded = true } } return excluded } 'use strict' var _$Templater_7 = { compile: compile, setOptions: __setOptions_7 } var options = {} options.pattern = /\{(.*?)\}/g options.template = '' options.middleware = function () {} function __setOptions_7 (_options) { options.pattern = _options.pattern || options.pattern options.template = _options.template || options.template if (typeof _options.middleware === 'function') { options.middleware = _options.middleware } } function compile (data) { return options.template.replace(options.pattern, function (match, prop) { var value = options.middleware(prop, data[prop], options.template) if (typeof value !== 'undefined') { return value } return data[prop] || match }) } 'use strict' var _$utils_9 = { merge: merge, isJSON: isJSON } function merge (defaultParams, mergeParams) { var mergedOptions = {} for (var option in defaultParams) { mergedOptions[option] = defaultParams[option] if (typeof mergeParams[option] !== 'undefined') { mergedOptions[option] = mergeParams[option] } } return mergedOptions } function isJSON (json) { try { if (json instanceof Object && JSON.parse(JSON.stringify(json))) { return true } return false } catch (err) { return false } } var _$src_8 = {}; (function (window) { 'use strict' var options = { searchInput: null, resultsContainer: null, json: [], success: Function.prototype, searchResultTemplate: '

{title}

', templateMiddleware: Function.prototype, sortMiddleware: function () { return 0 }, noResultsText: 'No results found', limit: 10, fuzzy: false, exclude: [] } var requiredOptions = ['searchInput', 'resultsContainer', 'json'] /* removed: var _$Templater_7 = require('./Templater') */; /* removed: var _$Repository_4 = require('./Repository') */; /* removed: var _$JSONLoader_2 = require('./JSONLoader') */; var optionsValidator = _$OptionsValidator_3({ required: requiredOptions }) /* removed: var _$utils_9 = require('./utils') */; window.SimpleJekyllSearch = function (_options) { var errors = optionsValidator.validate(_options) if (errors.length > 0) { throwError('You must specify the following required options: ' + requiredOptions) } options = _$utils_9.merge(options, _options) _$Templater_7.setOptions({ template: options.searchResultTemplate, middleware: options.templateMiddleware }) _$Repository_4.setOptions({ fuzzy: options.fuzzy, limit: options.limit, sort: options.sortMiddleware }) if (_$utils_9.isJSON(options.json)) { initWithJSON(options.json) } else { initWithURL(options.json) } return { search: search } } function initWithJSON (json) { options.success(json) _$Repository_4.put(json) registerInput() } function initWithURL (url) { _$JSONLoader_2.load(url, function (err, json) { if (err) { throwError('failed to get JSON (' + url + ')') } initWithJSON(json) }) } function emptyResultsContainer () { options.resultsContainer.innerHTML = '' } function appendToResultsContainer (text) { options.resultsContainer.innerHTML += text } function registerInput () { options.searchInput.addEventListener('keyup', function (e) { if (isWhitelistedKey(e.which)) { emptyResultsContainer() search(e.target.value) } }) } function search (query) { if (isValidQuery(query)) { emptyResultsContainer() render(_$Repository_4.search(query), query) } } function render (results, query) { var len = results.length if (len === 0) { return appendToResultsContainer(options.noResultsText) } for (var i = 0; i < len; i++) { results[i].query = query appendToResultsContainer(_$Templater_7.compile(results[i])) } } function isValidQuery (query) { return query && query.length > 0 } function isWhitelistedKey (key) { return [13, 16, 20, 37, 38, 39, 40, 91].indexOf(key) === -1 } function throwError (message) { throw new Error('SimpleJekyllSearch --- ' + message) } })(window) }()); ================================================ FILE: search.json ================================================ --- layout: null --- [ {% for post in site.posts %} { "title" : "{{ post.title | escape }}", "category" : "{{ post.category }}", "tags" : "{{ post.tags | join: ', ' }}", "url" : "{{ site.baseurl }}{{ post.url }}", "date" : "{{ post.date }}" } {% unless forloop.last %},{% endunless %} {% endfor %} ] ================================================ FILE: style.scss ================================================ --- --- // // IMPORTS // @import "reset"; @import "open-color"; @import "variables"; // Syntax highlighting @import is at the bottom of this file /**************/ /* BASE RULES */ /**************/ html { font-size: $base-font-size; } body { font-family: $base-font; color: $base-color; line-height: 1.7em; } .container { margin: 0 auto; max-width: 1000px; padding: 0 20px; width: 100%; } h1, h2, h3, h4, h5, h6 { line-height: 2em; margin: 1em 0 16px; padding: 0; @include mobile { line-height: 1.6em; } } h1, h2, h3, h5 { font-weight: bold; } h1 { font-size: 30px; a { color: inherit; } } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 20px; color: $base-lighten-color; } h6 { color: $base-lighten-color; } p { color: $text-color; margin: 1em 0; } a { color: $link-color; text-decoration: none; cursor: pointer; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; &:hover, &:active { color: $link-lighten-color; } } em, i { font-style: italic; } strong, b { font-weight: bold; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } hr { border: 0; border-top: 1px solid $divider-color; margin: 1.5em auto; } // Yeun's list style // https://gist.github.com/yeun/d824fc7b04b756508f4b0143535cec30 ol, ul { > li { &:before { position: absolute; width: $li-bullets-width; margin-left: -$li-bullets-width; display: inline-block; box-sizing: border-box; text-align: right; } } } ul { > li:before { content: "\2022"; padding-right: $ul-bullets-right-space; font-family: $ul-bullets-font; font-size: $ul-bullets-font-size; line-height: $ul-bullets-font-line-height; } } ol { counter-reset: section; > li:before { counter-increment: section; content: counter(section) "."; padding-right: $ol-bullets-right-space; font-family: $ol-bullets-font; font-size: $ol-bullets-font-size; line-height: $ol-bullets-font-line-height; } } ol, ul { > li { margin: 0 auto $li-bottom-space $li-bullets-width; line-height: $li-line-height; > ol, > ul { margin-top: $li-bottom-space; } } } li { > ol, > ul { > li { font-size: ($li-child-size-ratio * 1em); margin: 0 auto ($li-bottom-space * $li-child-size-ratio) ($li-bullets-width * $li-child-size-ratio); } } } // Definition list dt { float: left; width: $dt-width; overflow: auto; clear: left; text-align: right; white-space: nowrap; font-weight: bold; margin-bottom: $li-bottom-space; @include mobile { width: 120px; } } dd { margin-left: $dd-position; margin-bottom: $li-bottom-space; @include mobile { margin-left: 140px; } } // Table table { margin-bottom: 1rem; width: 100%; border: 1px solid $table-border-color; border-collapse: collapse; } td, th { padding: .25rem .5rem; border: 1px solid $table-border-color; } tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th { background-color: $table-background-color; } // Blockquote blockquote { font-weight: 300; padding: 0 0 0 1.4rem; margin: 0 2rem 1rem 0; border-left: .2em solid $blockquote-border-color; p { color: $blockquote-color; } p:last-child { margin-bottom: 0; } } // Footnote a.footnote { &, .post p &, .post ol &, .post ul & { margin: 0 3px; padding: 0 2px; font-size: $small-font-size; text-align: center; border: 1px solid $footnote-link-border-color; border-radius: 2px; -webkit-text-stroke: 0.25px; -webkit-transition: 0.2s ease-out all; text-decoration: none; &:hover { background: $footnote-link-background-over-color; } } } .footnotes { border-top: 1px solid $divider-color; font-size: $small-font-size; } // Image img { display: block; max-width: 100%; margin: 0 0 1em; border-radius: 5px; } // Fixes images in popup boxes from Google Translate .gmnoprint img { max-width: none; } // Specify the color of the selection ::-moz-selection { // color: $selection-color; background: $selection-background-color; } ::selection { // color: $selection-color; background: $selection-background-color; } // Nicolas Gallagher's micro clearfix hack // http://nicolasgallagher.com/micro-clearfix-hack/ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } // Alignment .center { text-align: center; &-image { margin: 0 auto; display: block; } } .right { text-align: right } /*********************/ /* LAYOUT / SECTIONS */ /*********************/ // // .sidebar // .wrapper-sidebar { width: 30%; -webkit-background-size: cover; background-size: cover; background-color: $background-color; height: 100%; top: 0; left:0; position: fixed; z-index: 4; border-right: 1px solid $divider-color; @include mobile { width: 100%; height: auto; padding-bottom: 24px; position: relative; border-bottom: 1px solid $divider-color; border-right: 0; } } .sidebar { padding: 20px 0; @include mobile { text-align: center; } } .site-info { text-align:center; margin: 100px auto 0; @include mobile { float: none; display: block; margin: 0 auto; } .site-avatar { margin:0 auto; display: block; max-width: 200px; max-height: 200px; @include mobile { max-width: 120px; max-height: 120px; } img { display: inline-block; border-radius: 2px; } } } .site-name { margin: 0 auto; color: $base-color; cursor: pointer; font-family: $base-font; font-weight: 700; font-size: 28px; letter-spacing: 1px; } .site-description { margin: 15px auto; color: $base-lighten-color; font-size: 16px; @include mobile { margin: 10px auto; } } .navlist{ text-align:center; } nav { display: block; margin-top: 23px; // @TODO: Vertically middle align font-family: $base-font; font-weight: 500; font-size: 18px; @include mobile { margin-top: 9px; font-size: 16px; } a { margin: 0 10px; text-align: right; font-weight: 300; letter-spacing: 1px; @include mobile { margin: 0 10px; color: $link-color; } } } // content .wrapper-content { float: right; width: 70%; @include mobile { float: none; width: 100%; } } // Posts .posts{ .tag { display: inline; font-weight: 300; font-size: $small-font-size; li:before { content: ''; } li { display: inline; margin: 0; > a { margin: 3px 3px 3px 0; padding: .5px 4px; color: $base-color; background-color: $tag-index-label-background-color; border-radius: 3px; &:hover { color: $link-color; background-color:$link-bghv-color; } } } } } .posts > .post { padding-bottom: 2em; border-bottom: 1px solid $divider-color; } .posts > .post:last-child { padding-bottom: 1em; border-bottom: none; } .date { font-weight: 300; font-size: $small-font-size; color: $base-lighten-color; margin-right: 4px; } .post { h1 { margin-bottom: .1em; } .comments { margin-top: 10px; } .read-more { font-size: 15px; } } .page { // margin: 40px; @include mobile { // margin: 24px; } } // TOC .toc { width: 240px; height: 100%; left: 30%; position: fixed; z-index: 4; padding: 60px 20px 0 20px; &:before{ content:"目录"; margin: 0 0 1em 1em; font-weight: 700; font-size: 1.2em; display: block; padding-bottom: 0.6em; border-bottom: 3px double $divider-color; } li:before{ content:""; } @include mobile{ display:none; } } @media screen and (max-width:2200px) and (min-width:1200px){ .withtoc{ padding-left: 260px; } } .pagination { border-top: 1px solid $divider-color; font-weight: 300; padding: 40px 0; width: 100%; display: inline-block; @include mobile { font-size: $small-font-size; padding: 24px 0; } > .prev { float: left; width: 50%; a { color: $base-lighten-color; border: 1px solid $divider-color; padding: 10px 20px; background: $background-color; &:hover, &:focus { color: $link-lighten-color; border: 1px solid $link-lighten-color; background-color: $link-bghv-color; } } } > .next { float: right; text-align: right; width: 50%; a { color: $base-lighten-color; border: 1px solid $divider-color; padding: 10px 20px; background: $background-color; &:hover, &:focus { color: $link-lighten-color; border: 1px solid $link-lighten-color; background-color: $link-bghv-color; } } } } // Archive .archive { a { color: $base-color; } time { color: $base-lighten-color; font-size: $small-font-size; font-weight: 300; margin-left: 3px; } } // Tags .tags > .label { > li:before { content: ""; } > li { margin: 0; font-size: $small-font-size; font-weight: 300; display: inline; > a { display: inline-block; margin: 1px; color: $base-color; background-color: $tag-index-label-background-color; border-radius: 3px; &:hover { background-color: $link-bghv-color; } span { float: left; padding: .5px 5px; &.count { background-color: $tag-index-count-background-color; border-radius: 0 3px 3px 0; } } } } } .tags > .tag { a { color: $base-color; } time { color: $base-lighten-color; font-size: $small-font-size; font-weight: 300; margin-left: 3px; } } // Footer .wrapper-footer-desktop { margin-top: 50px; border-top: 1px solid $footer-border-color; background-color: $footer-background-color; position: absolute; clear:both; width:100%; bottom:0; @include mobile { display: none; } } .wrapper-footer-mobile { display: none; @include mobile { display: block; width: 100%; border-top: 1px solid $footer-border-color; background-color: $footer-background-color; } } footer { padding: 20px 0; text-align: center; p { font-size: $small-font-size; color: $base-lighten-color; } .svg-icon { display: block; font-size: 0; list-style: none; margin: 0; text-align: center; li { display: inline-block; margin: 10px; } svg { height: 20px; width: 20px; fill: $base-lighten-color; &:hover { fill: $link-lighten-color; } } em { font-size: 18px; line-height: 1.5; margin-top: -.75em; position: absolute; text-align: center; top: 50%; right: 0; bottom: 0; left: 0; } } } // Settled on moving the import of syntax highlighting to the bottom of the CSS // ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start @import "highlights"; @import "gitalk"; ================================================ FILE: tags/index.html ================================================ --- layout: page title: 标签 permalink: /tags/ --- {% if site.posts.size == 0 %}

No post found

{% endif %}

{{ tag[0] }} {{ tag[1] | size }}

{% for tag in site.tags %}

{% if post.link %} {% else %} {% endif %} {{ post.title }} {{ post.date | date: "%Y-%m-%d" }}

{% endfor %}

{{ site.name }}

{{ page.title }}

{{ page.title }}

No post found

{{ post.date | date: '%Y' }}

{{ post.date | date: '%Y' }}

No post found

{{ post.title }}

No post found

{{ tag[0] }}