<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Daily on Coding and Life</title>
    <link>https://zihuanling.github.io/categories/daily/</link>
    <description>Recent content in Daily on Coding and Life</description>
    <image>
      <url>https://zihuanling.github.io/avatar.jpeg</url>
      <link>https://zihuanling.github.io/avatar.jpeg</link>
    </image>
    <generator>Hugo -- gohugo.io</generator>
    <language>zh-cn</language>
    <lastBuildDate>Tue, 24 May 2022 14:16:18 +0800</lastBuildDate><atom:link href="https://zihuanling.github.io/categories/daily/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>使用Pip Tools生成好看的依赖文件</title>
      <link>https://zihuanling.github.io/posts/pip-tools-generate-dependencies/</link>
      <pubDate>Tue, 24 May 2022 14:16:18 +0800</pubDate>
      
      <guid>https://zihuanling.github.io/posts/pip-tools-generate-dependencies/</guid>
      <description>&lt;p&gt;项目地址： &lt;a href=&#34;https://pypi.org/project/pip-tools/&#34;&gt;https://pypi.org/project/pip-tools/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;pip-tools 是一个命令行工具集合，主要有两个命令： &lt;code&gt;pip-compile&lt;/code&gt;，&lt;code&gt;pip-sync&lt;/code&gt;，现在主要用的是 &lt;code&gt;pip-compile&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;在写python项目的时候，我们通常会依赖到其他的包，比如写一个后端的服务，我们可能会依赖到&lt;code&gt;flask/pymysql&lt;/code&gt;这些基础的包，随着开发的进行，我们还可能会引入更多的依赖。&lt;/p&gt;
&lt;p&gt;这些python依赖包构成了一个完整的服务，开发完成后，我们将这些服务部署到服务器上时，只需要安装好对应的依赖，便可以直接运行服务。&lt;/p&gt;
&lt;p&gt;但是，如果我们不将生产环境的依赖固定下来的话，整个服务可能会因为某一次服务更新，其中某个的更新带来的不兼容导致整个服务崩溃。比如pyjwt，在1.7.1版本之前生成的jwt-token是一个bytes类型，我们将其转换成为字符串需要使用到&lt;code&gt;decode()&lt;/code&gt;方法。但是在更新到2.0之后，生成的jwt-token是一个字符串类型，如果我们对其再调用&lt;code&gt;decode&lt;/code&gt;方法的话，就会发生错误。&lt;/p&gt;
&lt;p&gt;这就显现出了&lt;strong&gt;固定依赖&lt;/strong&gt;的重要性了。&lt;/p&gt;
&lt;p&gt;通常，固定依赖，我们可以在开发环境使用 &lt;code&gt;pip freeze&lt;/code&gt;命令，直接将开发环境的所有版本固定下来到一个 requirements.txt 文件里面，这是懒人做法，当然也很有效。但是文件里面会带有一些系统的依赖版本，比如urllib 之类的，这些我们是不需要再次安装的，所以，如果这些依赖出现在 requirements.txt 文件里面，就会显得&lt;strong&gt;不那么干净&lt;/strong&gt;。&lt;/p&gt;
&lt;p&gt;这时，我们可以使用 pip-tools里面的 &lt;code&gt;pip-compile&lt;/code&gt; 工具，对依赖进行编译，生成一份漂亮的依赖文件。&lt;/p&gt;
&lt;h2 id=&#34;直接生成最新依赖&#34;&gt;直接生成最新依赖&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;首先，我们将项目中直接依赖的包写到&lt;code&gt;requirements.in&lt;/code&gt;文件里面&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;em&gt;requirements.in&lt;/em&gt;&lt;/p&gt;
&lt;pre tabindex=&#34;0&#34;&gt;&lt;code class=&#34;language-in&#34; data-lang=&#34;in&#34;&gt;pymysql
flask
&lt;/code&gt;&lt;/pre&gt;&lt;ol start=&#34;2&#34;&gt;
&lt;li&gt;使用 &lt;code&gt;pip-compile&lt;/code&gt; 自动使用最新依赖版本生成依赖文件&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;命令： &lt;code&gt;pip-compile&lt;/code&gt;, 输出requirements.txt文件：&lt;/p&gt;
&lt;p&gt;&lt;em&gt;requirements.txt&lt;/em&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-txt&#34; data-lang=&#34;txt&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;#
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;# This file is autogenerated by pip-compile with python 3.8
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;# To update, run:
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;#
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;#    pip-compile
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;#
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;--index-url https://pypi.doubanio.com/simple
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;--trusted-host pypi.doubanio.com
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;click==8.1.3
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    # via flask
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;flask==2.1.2
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    # via -r requirements.in
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;importlib-metadata==4.11.4
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    # via flask
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;itsdangerous==2.1.2
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    # via flask
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;jinja2==3.1.2
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    # via flask
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;markupsafe==2.1.1
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    # via jinja2
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;pymysql==1.0.2
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    # via -r requirements.in
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;werkzeug==2.1.2
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    # via flask
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;zipp==3.8.0
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    # via importlib-metadata
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;这样，我们就得到了一份漂亮的依赖文件，我们还可以清晰的看到某一个依赖包是哪个包的依赖。&lt;/p&gt;</description>
    </item>
    
    <item>
      <title>HTML a标签下载json数据</title>
      <link>https://zihuanling.github.io/posts/html-a-data-download/</link>
      <pubDate>Mon, 09 May 2022 20:52:39 +0800</pubDate>
      
      <guid>https://zihuanling.github.io/posts/html-a-data-download/</guid>
      <description>&lt;p&gt;假如我们有一个json文件：&lt;code&gt;example.json&lt;/code&gt;，我们想要将这个文件的连接放到网站上提供下载。&lt;/p&gt;
&lt;p&gt;在HTML中这样写：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;a&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;href&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;http://lingzihuan.icu/leetcode-submissions.json&amp;#34;&lt;/span&gt;&amp;gt;点击下载&amp;lt;/&lt;span style=&#34;color:#f92672&#34;&gt;a&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;a href=&#34;http://lingzihuan.icu/leetcode-submissions.json&#34;&gt;点击下载&lt;/a&gt;


&lt;p&gt;当我们点击链接的时候，chrome浏览器会自动打开一个页面，然后将json文件的内容加载进来，但是，当我们想要将文件下载到本地的时候，还得自己右键点击，然后选择”另存为“。&lt;/p&gt;
&lt;p&gt;看过 Stack Overflow 上的提示，看到可以给其设定 &lt;code&gt;download&lt;/code&gt;属性：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;a&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;href&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;http://lingzihuan.icu/leetcode-submissions.json&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;download&lt;/span&gt;&amp;gt;点击下载&amp;lt;/&lt;span style=&#34;color:#f92672&#34;&gt;a&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;a href=&#34;http://lingzihuan.icu/leetcode-submissions.json&#34; download&gt;点击下载&lt;/a&gt;

&lt;p&gt;需要注意的是，href里面的内容需要是与当前网页同源的url才可使用。&lt;/p&gt;</description>
    </item>
    
    <item>
      <title>Jinja2: 判断变量是否为空、存在等</title>
      <link>https://zihuanling.github.io/posts/2022-03-09-jinja-templates-variable-judgement/</link>
      <pubDate>Wed, 09 Mar 2022 00:00:00 +0000</pubDate>
      
      <guid>https://zihuanling.github.io/posts/2022-03-09-jinja-templates-variable-judgement/</guid>
      <description>&lt;p&gt;在 Jinja2 模板中，我们经常需要判断一个变量是否存在，里面的值是否为空等等。&lt;/p&gt;
&lt;!-- raw HTML omitted --&gt;
&lt;h3 id=&#34;检查变量是否存在或者是否被定义&#34;&gt;检查变量是否存在，或者是否被定义&lt;/h3&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-jinja&#34; data-lang=&#34;jinja&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;if&lt;/span&gt; variable &lt;span style=&#34;color:#66d9ef&#34;&gt;is&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;defined&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    variable is defined
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;else&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    variable is not defined
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;endif&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;检查数据的长度是否为空&#34;&gt;检查数据的长度是否为空&lt;/h3&gt;
&lt;p&gt;对于列表类型的变量，我们可能需要知道这个列表是否为空的&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-jinja&#34; data-lang=&#34;jinja&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;if&lt;/span&gt; variable &lt;span style=&#34;color:#f92672&#34;&gt;|&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;length&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    variable is not empty
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;else&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    variable is empty
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;endif&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;需要注意的是，如果这个变量为非列表类型，模板渲染的时候会报错&lt;/p&gt;
&lt;h3 id=&#34;检查变量值是否为true&#34;&gt;检查变量值是否为True&lt;/h3&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-jinja&#34; data-lang=&#34;jinja&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;if&lt;/span&gt; variable &lt;span style=&#34;color:#66d9ef&#34;&gt;is&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;sameas&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;true&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    variable is true
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;else&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    variable is not true
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;endif&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;同样我们也可以用关键字and来实现多个判断&#34;&gt;同样，我们也可以用关键字&lt;code&gt;and&lt;/code&gt;来实现多个判断&lt;/h3&gt;
&lt;h4 id=&#34;判断变量存在且不为空列表型变量&#34;&gt;判断变量存在且不为空（列表型变量）&lt;/h4&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-jinja&#34; data-lang=&#34;jinja&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;if&lt;/span&gt; variable &lt;span style=&#34;color:#66d9ef&#34;&gt;is&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;defined&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;and&lt;/span&gt; variable &lt;span style=&#34;color:#f92672&#34;&gt;|&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;length&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    variable is defined and is not empty
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;else&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    variable is not defined or empty
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;endif&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h4 id=&#34;判断变量存在且为true布尔型变量&#34;&gt;判断变量存在且为true（布尔型变量）&lt;/h4&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-jinja&#34; data-lang=&#34;jinja&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;if&lt;/span&gt; variable &lt;span style=&#34;color:#66d9ef&#34;&gt;is&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;defined&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;and&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;is&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;sameas&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;true&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    variable is defined and is true
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;else&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    variable is not defined or not true
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;{%&lt;/span&gt; &lt;span style=&#34;color:#66d9ef&#34;&gt;endif&lt;/span&gt; &lt;span style=&#34;color:#75715e&#34;&gt;%}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
    </item>
    
    <item>
      <title>让github page支持mermaid语法</title>
      <link>https://zihuanling.github.io/posts/2022-03-04-support-mermaid-on-github-page/</link>
      <pubDate>Fri, 04 Mar 2022 00:00:00 +0000</pubDate>
      
      <guid>https://zihuanling.github.io/posts/2022-03-04-support-mermaid-on-github-page/</guid>
      <description>&lt;p&gt;目前，github page 会将 markdown里面的 &lt;code&gt;mermaid&lt;/code&gt; 块渲染成为一个 &lt;code&gt;div.language-mermaid&lt;/code&gt; 的 html 代码块，但是，mermaid-js仅支持渲染 &lt;code&gt;div.mermaid&lt;/code&gt; 的html代码块，因此，我们需要做一点处理。&lt;/p&gt;
&lt;!-- raw HTML omitted --&gt;
&lt;p&gt;我们只需要在文章模板的末尾，添加如下转化代码即可：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;文件：_layouts/post.html
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;{%- if content contains &amp;#39;mermaid&amp;#39; -%}
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;script&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;src&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js&amp;#34;&lt;/span&gt;&amp;gt;&amp;lt;/&lt;span style=&#34;color:#f92672&#34;&gt;script&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;script&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#66d9ef&#34;&gt;const&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;config&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#a6e22e&#34;&gt;startOnLoad&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#66d9ef&#34;&gt;true&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#a6e22e&#34;&gt;theme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;forest&amp;#39;&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;    &lt;span style=&#34;color:#a6e22e&#34;&gt;flowchart&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; {
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        &lt;span style=&#34;color:#a6e22e&#34;&gt;useMaxWidth&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;,
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        &lt;span style=&#34;color:#a6e22e&#34;&gt;htmlLabels&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#66d9ef&#34;&gt;true&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;        }
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;};
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;mermaid&lt;/span&gt;.&lt;span style=&#34;color:#a6e22e&#34;&gt;initialize&lt;/span&gt;(&lt;span style=&#34;color:#a6e22e&#34;&gt;config&lt;/span&gt;);
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;window.&lt;span style=&#34;color:#a6e22e&#34;&gt;mermaid&lt;/span&gt;.&lt;span style=&#34;color:#a6e22e&#34;&gt;init&lt;/span&gt;(&lt;span style=&#34;color:#66d9ef&#34;&gt;undefined&lt;/span&gt;, document.&lt;span style=&#34;color:#a6e22e&#34;&gt;querySelectorAll&lt;/span&gt;(&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#39;.language-mermaid&amp;#39;&lt;/span&gt;));
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;/&lt;span style=&#34;color:#f92672&#34;&gt;script&lt;/span&gt;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;{% endif %}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;上述代码手动将 &lt;code&gt;div.language-mermaid&lt;/code&gt; 添加到 mermaid引擎的渲染中。&lt;/p&gt;
&lt;h4 id=&#34;引用&#34;&gt;引用&lt;/h4&gt;
&lt;p&gt;在文章里面指定文章layout，即可引用，并且渲染mermaid！&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;layout: post
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h4 id=&#34;其他方法&#34;&gt;其他方法&lt;/h4&gt;
&lt;p&gt;当然也可以在 &lt;code&gt;_config.yml&lt;/code&gt; 配置kramdown, 让其可以将 &lt;code&gt;mermaid&lt;/code&gt; 块渲染成 &lt;code&gt;div.mermaid&lt;/code&gt; 这样的html的代码块，但是实现起来有点复杂。&lt;/p&gt;
&lt;p&gt;参考： &lt;a href=&#34;https://github.com/gettalong/kramdown/issues/637&#34;&gt;Issue https://github.com/gettalong/kramdown/issues/637&lt;/a&gt;&lt;/p&gt;</description>
    </item>
    
    <item>
      <title>第一篇GitHub Page博客</title>
      <link>https://zihuanling.github.io/posts/2022-02-23-first-github-page-blog/</link>
      <pubDate>Wed, 23 Feb 2022 00:00:00 +0000</pubDate>
      
      <guid>https://zihuanling.github.io/posts/2022-02-23-first-github-page-blog/</guid>
      <description>&lt;p&gt;从 &lt;a href=&#34;https://github.com/lemonchann/lemonchann.github.io&#34;&gt;lemonchan.github.io&lt;/a&gt; fork了这个博客项目，感觉太棒了，设计很简洁，我需要的功能基本上都有。&lt;/p&gt;
&lt;p&gt;感谢！&lt;/p&gt;
&lt;!-- raw HTML omitted --&gt;</description>
    </item>
    
  </channel>
</rss>
