【分享】 一款自用的Anki卡片模板：黃子涵單詞卡片 v1

【分享】 一款自用的Anki卡片模板：黃子涵單詞卡片 v1

說明

第一代的功能

• 主要有兩部分組成：英文和含義，目前主要是為自己記憶Web前端一些常用的單詞而服務
• 有美美噠背景圖，本來想修改為隨機背景圖的，一開始PC端已經實現好，但是同步到Android客戶端卻不行，所以只能放棄了，可能未來會支援哦！
• Android客戶端也可以用呢
• 英文部分和中文部分都使用了自定義的字型

未來的功能

• PC端和Android端都會顯示垂直水平的佈局

• . . . . . .

程式碼

下面的程式碼部分可以直接貼上到Anki客戶端的程式碼部分

正面程式碼

<div id="wrap">
     <div class="word_wrap">
          <div class="word">
          {{英文}} 
          </div>
     </div>
      
     <div class="meaning_wrap">      
          <div class="meaning">
          
          </div>      
     </div>
 </div>

反面程式碼

<div id="wrap">
     <div class="word_wrap">
          <div class="word">
          {{英文}} 
          </div>
     </div>
      
     <div class="meaning_wrap">      
          <div class="meaning">
          {{含義}}
          </div>      
     </div>
 </div>

樣式程式碼

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <style>
            @font-face {             
                font-style: normal;
                font-weight: normal;
                font-family: 'Didot';
                src: url('_Didot-Bold-1.ttf');
              }
            
            @font-face {             
                font-style: normal;
                font-weight: normal;
                font-family: '江西拙楷';
                src: url('_JiangXiZhuoKai2.0.ttf');
              }

            .card {
                text-align: center;
                overflow: hidden;
                color: black;
                background-color: white;
            }

            #wrap {
                position: absolute;
                padding: 0;
                border: 0;
                margin-top: 20px;
                margin-left: 20px;
                width: 300px;
                height: 400px;
                overflow: hidden;
                border-radius: 30px;
                background: #e0e0e0;
                box-shadow:  35px 35px 47px #9d9d9d,
                             -35px -35px 47px #ffffff;
                background-image: url("_01.jpeg");
                background-repeat: no-repeat;
                background-size: 100%;
                color: #FFFAFA;
            }
            
            .word_wrap {
                position: relative;
                overflow: hidden;
                padding: 0;
                border: 0;
                margin: 0;
                width: 300px;
                height: 200px;
                z-index: 2;
            }
            
            .meaning_wrap {
                position: relative;
                overflow: hidden;
                font-size: 40px;
                padding: 0;
                border: 0;
                margin: 0;
                width: 300px;
                height: 200px;
                z-index: 2;
            }
            
            .word {
                position: relative;
                font-family: Didot;
                overflow: hidden;
                font-size: 40px;
                padding: 0;
                border: 0;
                text-align: center;
                margin-top: 50px;
                font-size: 50px;
                width: 300px;
                height: 100px;
            }
            
            .meaning {
                position: relative;
                font-family: '江西拙楷';
                overflow: hidden;
                font-size: 30px;
                padding: 0;
                border: 0;
                text-align: center;
                margin-top: 50px;
                width: 300px;
                height: 100px;
                word-break: break-all;
            }
        </style>

效果

PC端效果

正面

反面

Android端效果

正面

反面

支援

這只是黃子涵出品的第一代單詞卡片，以後還會持續改版，以便適用於更多的學習場景。希望您能持續關注黃子涵這個專案，您的支援就是他最大的動力。您也可以把你需要的樣式和在下方的留言區給黃子涵留言，黃子涵收到留言後會儘快新增的模板中。如果您願意為知識付費，可以通過下方的連結轉到黃子涵部落格園首頁為黃子涵這個專案加油。

部落格園首頁