我們如何標記Google字體並創建Goofonts.com

Goofontsis是由開發人員和設計師丈夫簽署的附帶項目，它們都是版式的忠實擁護者。我們一直在標記Google Fontsand構建了一個網站，該網站使搜索並更容易找到正確的字體。

goofontsuses wordpress在後端和前端的後端和nuxtjs（Avue.js框架）中。我很想告訴您Goofonts.com背後的故事，並分享有關我們選擇的技術以及我們如何適應和將其用於該項目的一些技術細節。

為什麼我們建造Goofonts

在撰寫本文時，Google字體提供了977個字體。您可以隨時使用TheGoogle字體開發人員API檢查確切的編號。您可以檢索所有字體的動態列表，包括每個家庭的可用樣式和腳本列表。

Google字體網站提供了一個漂亮的界面，您可以在其中預覽所有字體，通過趨勢，受歡迎程度，日期或名稱對其進行排序。

但是搜索功能呢？

您可以按五個類別包括和排除字體：襯線，sans-serif，顯示，手寫和單音範圍。

您可以在腳本中搜索（Likelatin擴展，西里爾或Devanagari（它們在Google字體中稱為子集）。但是您無法一次在多個子集中搜索。

您可以通過四個屬性進行搜索：厚度，傾斜，寬度和“數字樣式”。一種名為“變體”樣式，既指風格（斜體常規）和權重（100,200，最多900）。通常，身體字體需要三個變體：常規，大膽和斜體。 “數字樣式”屬性與許多變體分類字體，但它不允許在“常規，大膽，斜體”組合中選擇字體。

還有一個自定義搜索字段，您可以在其中輸入查詢。不幸的是，搜索是專門針對字體的名稱執行的。因此，結果通常包括字體家庭來自Google字體以外的其他服務。

讓我們以“卡通”查詢為例。它從外部Foundry Linotype導致“ Cartoonscript”。

我記得在一個項目上工作，該項目要求兩個高度風格化的字體 - 一個喚起舊的野外西部，另一個模仿了劇本。那是我決定標記Google字體的時刻。 :)

Goofonts在行動中

讓我向您展示Goofonts的工作原理。右側的黑暗側邊欄是您的“搜索”區域。您可以在搜索字段中鍵入關鍵字，這將執行“和”搜索。例如，您可以查找同時是卡通和平板的字體。

我們親自挑選了一堆關鍵字 - 關注其中的任何一個！如果您的項目需要一些特定的子集，請在子集部分中檢查它們。您還可以檢查字體所需的所有變體。

如果您喜歡字體，請單擊其心臟圖標，並將其存儲在您瀏覽器的LocalStorage中。您可以在thegoofonts.com/bookmarkspage.together上找到書籤字體，並使用代碼，您可能需要嵌入它們。

我們如何構建它：WordPress部分

首先，我們需要一個以某種方式來預覽和標記每種字體。我們還需要一個數據庫來存儲thosetags。

我在WordPress方面有一些經驗。此外，WordPress帶有其REST API，這為處理前端的數據打開了多種可能性。茅草很快就開始了。

我去了最直接的初始設置。每種字體都是帖子，我們將帖子標籤用於關鍵字。 Acustom Post類型也可以使用，但是由於我們僅將WordPress用於數據，因此默認內容類型非常有效。

顯然，我們需要以編程方式添加所有字體。我們還需要能夠編程更新字體，包括添加新字體或添加新的可用變體和子集。

下面描述的方法與通過外部API可用的任何其他數據都很有用。在自定義的WordPress插件中，我們註冊一個菜單頁面，可以從中檢查API的更新。為簡單起見，該頁面將顯示一個標題，一個按鈕激活更新的按鈕，以及一個視覺反饋的進度條。

 /**
 *註冊自定義菜單頁。 
 */
函數register_custom_menu_page（）{
  add_menu_page（ 
    “ Google字體到WordPress”， 
    “ WP Goofonts”， 
    “ manage_options'， 
    'WP-GOOFONTS-MENU'， 
  function（）{？ >        
    <h1 id="Google字體API"> Google字體API </h1>
    <button type="“" button>運行</button>
    <p> </p>        
    <progress max="“" value="“"> </progress>
  <p><br>讓我們從編寫JavaScriptPart開始。雖然大多數與WordPress一起使用Ajax實現了JQuery和thejquery.ajaxmethod的示例，但可以在沒有jQuery的情況下獲得相同的示例，而是使用haxios和axoxiosand andaxiosand a helperqs.jss.jsfor數據序列化。</p><p>我們希望在加載後Quave toload我們的自定義腳本<em>。</em></p><pre rel="PHP" data-line=""> add_action（'admin_enqueue_scripts'function（）{
  wp__script（'axios'，'https://unpkg.com/axios/dist/axios.min.js'）;
  wp_enqueue_script（'qs'，'https://unpkg.com/qs/dist/qs.js'）;
  wp_enqueue_script（'wp-goofonts-admin-script'，plugin_dir_url（__file__）。'js/wp-goofonts.js'，array（'axios'qs'，'qs'），'1.0.0'，true）;
}）;

讓我們看看Javascript的外觀：

 const button = document.getElementById（'wp-goofonts button'）
const info = document.getElementById（'info'）
const progress = document.getElementById（'progress'）
const updater = {
  總計：0，
  總體檢查：0，
  更新：[]，
  init：async函數（）{
    嘗試 {
      const allfonts =等待axios.get（'https://www.googleapis.com/webfonts/v1/webfonts?key = api_keykey＆sort = date'）
      this.totalCount = allfonts.data.items.length
      info.textContent =`獲取$ {this.totalCount} fonts。
      this.updatepost（allfonts.data.items，0）
    }捕獲（e）{
      控制台（E）
    }
  }，，
  update post：async函數（els，index）{
    if（index === this.totalCount）{
      返回
    }                
    const data = {
      動作：'goofonts_update_post'，
      字體：els [index]，
    }
    嘗試 {
       const apirequest =等待axios.post（ajaxurl，qs.stringify（data））
       此  
       progress.setAttribute（'value'，math.Round（100*this.totalchecked/this.totalCount））
       this.updatepost（Els，索引1）
    }捕獲（e）{
       控制台（E）
      }
   }
}

button.addeventlistener（'click'，（）=> {
  updater.init（）
}））

Initmethod向TheGoogleFonts API提出了請求。一旦獲得API的數據，我們將調用遞歸遞歸asynchronousupdatepostmethod，該數據將郵政請求中的sanividual字體發送到WordPress服務器。

現在，重要的是要記住，WordPress以其特定的方式實現了Ajax。首先，必須向每個請求發送towp-admin/admin-ajax.php 。該URL可以在管理區域作為全球JavascriptVariableajaxurl提供。

其次，所有WordPress AJAX請求必須在數據中包括AnactionArgument。操作的值確定將在服務器端上使用哪個掛鉤標籤。

在我們的情況下，動作值isgoofonts_update_post。這意味著服務器端上發生的事情由thewp_ajax_goofonts_update_posthook確定。

 add_action（'wp_ajax_goofonts_update_post'，function（）{
  if（isset（$ _post ['font']））{
    / *帖子瓷磚是字體的名稱 */
    $ title = wp_strip_all_tags（$ _post ['font'] ['family']）;
    $ variants = $ _post ['font'] ['variants'];
    $ subsets = $ _post ['font'] ['subsets'];
    $ category = $ _post ['font'] ['category'];
    / *檢查帖子是否已經存在 */
    $ object = get_page_by_title（$ title，'object'，'post'）;
    如果（null === $ object）{
      / *創建一個新帖子和集類別，變體和子集作為標籤 */
      goofonts_new_post（$ title，$類別，$ variants，$ subset）;
    } 別的 {
      / *檢查$ variants或$子集更改 */
      goofonts_update_post（$ object，$ variants，$ subset）;
    }
  }
}）;

函數goofonts_new_post（$ title，$類別，$ variants，$ subset）{
  $ post_id = wp_insert_post（array（array）（
    'post_author'=> 1，
    'post_name'=> sanitize_title（$ title），
    'post_title'=> $ title，
    'post_type'=>'post'，
    'post_status'=>'草稿'，
    ）
  ）；
  如果（$ post_id> 0）{
    / *標記的簡單部分;）附加字體類別，變體和子集（這三個來自Google字體API）作為標籤 */
    wp_set_object_terms（$ post_id，$ category，'post_tag'，true）;
    wp_set_object_terms（$ post_id，$ variants，'post_tag'，true）;
    wp_set_object_terms（$ post_id，$ subset，'post_tag'，true）;
  }
}

這樣，在不到一分鐘的時間內，我們最終在儀表板上得到了近一千個郵政草稿，其中所有標籤已經到位。我們需要啟動為每種字體一個一個字體添加標籤。
在這種情況下，默認的WordPress編輯器沒有多大意義。我們需要的是該字體的預覽。 fonts.google.com上指向字體頁面的鏈接也派上用場。

Acustom Metaboxdo很好。在大多數情況下，您將使用元框來定製表單元素來保存與帖子相關的一些自定義數據。實際上，Metabox的內容實際上可以是任何HTML。

函數display_font_preview（$ post）{
  / *字體名稱，例如Abril Fatface */
  $ font = $ post-> post_title;
  / *字體如URL，例如Abril Fatface */
  $ font_url_part = umpode（''，Explode（''，$ font））;
  ？ >
  <div> 
    <link href="%E2%80%9C" echo font_url_part swap>
      <h2>  </h2>
      <a href="%E2%80%9C" echo font_url_part>“ target =” target =“ _ black” rel =“ noopener”>在Google Fonts上的標本</a>
    
    <div contentedialtial="“" true style="“" font-family echo font>”>
      <p>快速的棕色狐狸跳過一隻懶狗。 </p>
      <p style="“" text-transform>快速的棕色狐狸跳過懶狗。 </p>
      <p> 1 2 3 4 5 6 7 8 9 0 </p>
      <p>＆！ ; ？ {} [] </p>
    </div>
  </div>
<p>標記字體是一項長期的任務，重複了很多。它還需要大量的一致性。這就是為什麼我們開始定義一組標籤“預設”的原因。</p><pre rel="JavaScript" data-line=""> {
  / * ... */
  漫畫：{
    標籤：“漫畫，休閒，非正式，卡通”
  }，，
  草書：{
    標籤：“草書，書法，腳本，手稿，簽名”
  }，，
  / * ... */
}

接下來，使用一些自定義CSS和JavaScript，我們通過使用一組預設按鈕來“砍” WordPress編輯器和標籤形成。

我們如何構建它：前端部分（使用nuxtjs）

thegoofonts.cominterface是由法國Graphicandweb設計師BySylvain Guizard設計的（WhoalSo恰好是我的丈夫）。我們想要一些簡單的東西區分“搜索”區域。 Sylvain故意購買了離Google字體身份不遠的顏色。我們正在尋找建立獨特的和原始的用戶混亂之間的平衡。

雖然IDID毫不猶豫地將WordPress用於The Back-End，但IDID不想在前端使用它。我們的目標是一種類似應用程序的體驗，我個人想在JavaScript中進行編碼，尤其是使用vue.js。

我遇到了使用nuxtjswith wordpress的網站的示例，並決定嘗試一下。選擇立即做出。 NUXTJS是一個非常流行的vue.js框架，我真的很喜歡它的簡單性和靈活性。
我一直在使用不同的NUXTJS設置來使用100％的靜態網站。完全靜態的解決方案感覺到性能最高；整體體驗似乎是最流暢的。這也意味著我的WordPress站點僅在構建過程中使用。因此，它可以在我的本地主機上運行。這不是可以忽略的，因為它消除了託管成本，最重要的是，我可以跳過與安全性相關的安全性壓力的安全性和安全性。 ）

如果您熟悉NUXTJ，您可能會知道，全部靜態一代尚未（尚未）NUXTJ的一部分。預訂頁面試圖在導航時嘗試再次獲取數據。

這就是為什麼我們必須以某種方式將100％的靜態生成“入侵”。在這種情況下，我們將獲取的數據的有用部分保存到每個構建過程之前。這是可能的，尤其是Tonuxt鉤子，特別是它的構建器掛鉤。

鉤子通常在NUXT模塊中使用：

 / *模塊/fore build.js */

const fs = require（'fs'）
const axios = require（'axios'）

const sourcePath ='http：//wpgoofonts.local/wp-json/wp/v2/'
const路徑='static/allfonts.json'

Module.exports =（）=> {
  / *將數據寫入文件，如果文件已經存在 */替換文件 */
  const stordata =（data，path）=> {
    嘗試 {
      fs.writeFilesync（路徑，json.stringify（data））
    } catch（err）{
      console.Error（err）
    }
  }
  異步函數getData（）{    
    const fetchedTags =等待axios.get（`$ {sourcepath} tags？per_page = 500`）
      .catch（e => {console.log（e）; return false}）
    
  / *構建tag_id的對象：tag_slug */
    const tags = fetchedTags.data.data.data（（ACC，CUR）=> {
      acc [cur.id] = cur.slug
      返回ACC
    }，{}）
    
  / *我們想知道總數或頁面 */
    const mhead =等待axios.head（`$ {sourcepath} posts？per_page = 100`）
      .catch（e => {console.log（e）; return false}）
    const totalpages = mhead.headers ['x-wp-totalpages']

  / *讓我們獲取所有字體 */
    令字體= []
    讓i = 0
    而（i <totalpages const ports fonts.push.apply clean carter enterporary fonts="（fonts）.Reduce（（ACC，EL）="> {
      acc [el.slug] = {
        姓名：el.title.rendered，
        標籤：el.tags.map（i => tags [i]），
      }
      返回ACC
    }，{}）

  / *將字體對象保存到.json文件 */
    Stordata（字體，路徑）
  }

  / *確保在每個構建之前都會發生這種情況 */
  this.nuxt.hook（'構建：之前'，getData）
}</totalpages>

 / * nuxt.config.js */
Module.exports = {
  // ...
  buildModules：[
    ['〜模塊/之前的建築']
  ]，，
// ...
}

如您所見，我們僅請求標籤列表和列表帖子。

最後的想法

在Goofonts上工作是一項長期冒險。也需要積極維護這種項目。我們定期繼續檢查Google字體中的新字體，子集或變體。我們標記新項目並更新我們的數據庫。最近，我真的很興奮地發現了家族的野牛Neuehas聯合。我們在鮮為人知的標本中也擁有個人最愛。

作為一個定期研討會的培訓師，我可以觀察到真正的用戶使用Goofonts。在項目的這個階段，我們希望獲得盡可能多的反饋。我們希望Goofonts成為Web Designers的有用，方便和直觀的工具。待辦事項功能之一是以其名稱搜索字體。我們還希望增加分享書籤集並創建多個字體“集合”的可能性。

作為開發人員，我真的很喜歡這個項目的多學科方面。這是我第一次與WordPress Rest API合作，這是我在Vue.js中的第一個大項目，我對排版學到了很多東西。

如果可以的話，我們會做不同的事情嗎？絕對地。這是一個學習過程。另一方面，我認為我們不會更改主要工具。 WordPress和Nuxt.js的靈活性被證明是正確的選擇。從今天開始，我肯定會花一些時間來探索GraphQL，將來我可能會實施它。

我希望您發現一些討論的方法有用。正如我之前所說，您的反饋非常寶貴。如果您有任何疑問或言論，請在評論中告訴我！

以上是我們如何標記Google字體並創建Goofonts.com的詳細內容。更多資訊請關注PHP中文網其他相關文章！