Goofontsis是由開發(fā)人員和設(shè)計(jì)師丈夫簽署的附帶項(xiàng)目，它們都是版式的忠實(shí)擁護(hù)者。我們一直在標(biāo)記Google Fontsand構(gòu)建了一個(gè)網(wǎng)站，該網(wǎng)站使搜索並更容易找到正確的字體。

goofontsuses wordpress在後端和前端的後端和nuxtjs（Avue.js框架）中。我很想告訴您Goofonts.com背後的故事，並分享有關(guān)我們選擇的技術(shù)以及我們?nèi)绾芜m應(yīng)和將其用於該項(xiàng)目的一些技術(shù)細(xì)節(jié)。

為什麼我們建造Goofonts

在撰寫本文時(shí)，Google字體提供了977個(gè)字體。您可以隨時(shí)使用TheGoogle字體開發(fā)人員API檢查確切的編號(hào)。您可以檢索所有字體的動(dòng)態(tài)列表，包括每個(gè)家庭的可用樣式和腳本列表。

Google字體網(wǎng)站提供了一個(gè)漂亮的界面，您可以在其中預(yù)覽所有字體，通過趨勢(shì)，受歡迎程度，日期或名稱對(duì)其進(jìn)行排序。

但是搜索功能呢？

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

您可以在腳本中搜索（Likelatin擴(kuò)展，西里爾或Devanagari（它們?cè)贕oogle字體中稱為子集）。但是您無法一次在多個(gè)子集中搜索。

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

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

讓我們以“卡通”查詢?yōu)槔?。它從外部Foundry Linotype導(dǎo)致“ Cartoonscript”。

我記得在一個(gè)項(xiàng)目上工作，該項(xiàng)目要求兩個(gè)高度風(fēng)格化的字體 - 一個(gè)喚起舊的野外西部，另一個(gè)模仿了劇本。那是我決定標(biāo)記Google字體的時(shí)刻。 :)

Goofonts在行動(dòng)中

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

我們親自挑選了一堆關(guān)鍵字 - 關(guān)注其中的任何一個(gè)！如果您的項(xiàng)目需要一些特定的子集，請(qǐng)?jiān)谧蛹糠种袡z查它們。您還可以檢查字體所需的所有變體。

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

我們?nèi)绾螛?gòu)建它：WordPress部分

首先，我們需要一個(gè)以某種方式來預(yù)覽和標(biāo)記每種字體。我們還需要一個(gè)數(shù)據(jù)庫來存儲(chǔ)thosetags。

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

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

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

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

 /**
 *註冊(cè)自定義菜單頁。 
 */
函數(shù)register_custom_menu_page（）{
  add_menu_page（ 
    “ Google字體到WordPress”， 
    “ WP Goofonts”， 
    “ manage_options'， 
    'WP-GOOFONTS-MENU'， 
  function（）{？ >        
    <h1> Google字體API </h1>
    <button type="“" button>運(yùn)行</button>
    <p> </p>        
    <progress max="“" value="“"> </progress>
  <p><br>讓我們從編寫JavaScriptPart開始。雖然大多數(shù)與WordPress一起使用Ajax實(shí)現(xiàn)了JQuery和thejquery.ajaxmethod的示例，但可以在沒有jQuery的情況下獲得相同的示例，而是使用haxios和axoxiosand andaxiosand a helperqs.jss.jsfor數(shù)據(jù)序列化。</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 = {
  總計(jì)：0，
  總體檢查：0，
  更新：[]，
  init：async函數(shù)（）{
    嘗試 {
      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）{
      控制臺(tái)（E）
    }
  }，，
  update post：async函數(shù)（els，index）{
    if（index === this.totalCount）{
      返回
    }                
    const data = {
      動(dòng)作：'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）{
       控制臺(tái)（E）
      }
   }
}

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

Initmethod向TheGoogleFonts API提出了請(qǐng)求。一旦獲得API的數(shù)據(jù)，我們將調(diào)用遞歸遞歸asynchronousupdatepostmethod，該數(shù)據(jù)將郵政請(qǐng)求中的sanividual字體發(fā)送到WordPress服務(wù)器。

現(xiàn)在，重要的是要記住，WordPress以其特定的方式實(shí)現(xiàn)了Ajax。首先，必須向每個(gè)請(qǐng)求發(fā)送towp-admin/admin-ajax.php 。該URL可以在管理區(qū)域作為全球JavascriptVariableajaxurl提供。

其次，所有WordPress AJAX請(qǐng)求必須在數(shù)據(jù)中包括AnactionArgument。操作的值確定將在服務(wù)器端上使用哪個(gè)掛鉤標(biāo)籤。

在我們的情況下，動(dòng)作值isgoofonts_update_post。這意味著服務(wù)器端上發(fā)生的事情由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'];
    / *檢查帖子是否已經(jīng)存在 */
    $ object = get_page_by_title（$ title，'object'，'post'）;
    如果（null === $ object）{
      / *創(chuàng)建一個(gè)新帖子和集類別，變體和子集作為標(biāo)籤 */
      goofonts_new_post（$ title，$類別，$ variants，$ subset）;
    } 別的 {
      / *檢查$ variants或$子集更改 */
      goofonts_update_post（$ object，$ variants，$ subset）;
    }
  }
}）;

函數(shù)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）{
    / *標(biāo)記的簡單部分;）附加字體類別，變體和子集（這三個(gè)來自Google字體API）作為標(biāo)籤 */
    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）;
  }
}

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

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

函數(shù)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上的標(biāo)本</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>標(biāo)記字體是一項(xiàng)長期的任務(wù)，重複了很多。它還需要大量的一致性。這就是為什麼我們開始定義一組標(biāo)籤“預(yù)設(shè)”的原因。</p><pre rel="JavaScript" data-line=""> {
  / * ... */
  漫畫：{
    標(biāo)籤：“漫畫，休閒，非正式，卡通”
  }，，
  草書：{
    標(biāo)籤：“草書，書法，腳本，手稿，簽名”
  }，，
  / * ... */
}

接下來，使用一些自定義CSS和JavaScript，我們通過使用一組預(yù)設(shè)按鈕來“砍” WordPress編輯器和標(biāo)籤形成。

我們?nèi)绾螛?gòu)建它：前端部分（使用nuxtjs）

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

雖然IDID毫不猶豫地將WordPress用於The Back-End，但I(xiàn)DID不想在前端使用它。我們的目標(biāo)是一種類似應(yīng)用程序的體驗(yàn)，我個(gè)人想在JavaScript中進(jìn)行編碼，尤其是使用vue.js。

我遇到了使用nuxtjswith wordpress的網(wǎng)站的示例，並決定嘗試一下。選擇立即做出。 NUXTJS是一個(gè)非常流行的vue.js框架，我真的很喜歡它的簡單性和靈活性。
我一直在使用不同的NUXTJS設(shè)置來使用100％的靜態(tài)網(wǎng)站。完全靜態(tài)的解決方案感覺到性能最高；整體體驗(yàn)似乎是最流暢的。這也意味著我的WordPress站點(diǎn)僅在構(gòu)建過程中使用。因此，它可以在我的本地主機(jī)上運(yùn)行。這不是可以忽略的，因?yàn)樗擞毠艹杀?，最重要的是，我可以跳過與安全性相關(guān)的安全性壓力的安全性和安全性。 ）

如果您熟悉NUXTJ，您可能會(huì)知道，全部靜態(tài)一代尚未（尚未）NUXTJ的一部分。預(yù)訂頁面試圖在導(dǎo)航時(shí)嘗試再次獲取數(shù)據(jù)。

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

鉤子通常在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 =（）=> {
  / *將數(shù)據(jù)寫入文件，如果文件已經(jīng)存在 */替換文件 */
  const stordata =（data，path）=> {
    嘗試 {
      fs.writeFilesync（路徑，json.stringify（data））
    } catch（err）{
      console.Error（err）
    }
  }
  異步函數(shù)getData（）{    
    const fetchedTags =等待axios.get（`$ {sourcepath} tags？per_page = 500`）
      .catch（e => {console.log（e）; return false}）
    
  / *構(gòu)建tag_id的對(duì)象：tag_slug */
    const tags = fetchedTags.data.data.data（（ACC，CUR）=> {
      acc [cur.id] = cur.slug
      返回ACC
    }，{}）
    
  / *我們想知道總數(shù)或頁面 */
    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，
        標(biāo)籤：el.tags.map（i => tags [i]），
      }
      返回ACC
    }，{}）

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

  / *確保在每個(gè)構(gòu)建之前都會(huì)發(fā)生這種情況 */
  this.nuxt.hook（'構(gòu)建：之前'，getData）
}</totalpages>

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

如您所見，我們僅請(qǐng)求標(biāo)籤列表和列表帖子。

最後的想法

在Goofonts上工作是一項(xiàng)長期冒險(xiǎn)。也需要積極維護(hù)這種項(xiàng)目。我們定期繼續(xù)檢查Google字體中的新字體，子集或變體。我們標(biāo)記新項(xiàng)目並更新我們的數(shù)據(jù)庫。最近，我真的很興奮地發(fā)現(xiàn)了家族的野牛Neuehas聯(lián)合。我們?cè)邗r為人知的標(biāo)本中也擁有個(gè)人最愛。

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

作為開發(fā)人員，我真的很喜歡這個(gè)項(xiàng)目的多學(xué)科方面。這是我第一次與WordPress Rest API合作，這是我在Vue.js中的第一個(gè)大項(xiàng)目，我對(duì)排版學(xué)到了很多東西。

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

我希望您發(fā)現(xiàn)一些討論的方法有用。正如我之前所說，您的反饋非常寶貴。如果您有任何疑問或言論，請(qǐng)?jiān)谠u(píng)論中告訴我！

以上是我們?nèi)绾螛?biāo)記Google字體並創(chuàng)建Goofonts.com的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！