Nuxt.js從0到1之入門教程

外話：近來想把網(wǎng)站做下更新，從框架到內(nèi)容的更新，但又不想放棄SEO的優(yōu)勢，日常工作用到vue.js在SEO方面劣勢較多，果斷選擇了Nuxt.js，苦于國內(nèi)文章抄襲的非常嚴重如某n 某書，最終在稀土找到一篇像樣的文章，以頭條為平臺記錄網(wǎng)站改版全過程。

此文章建議在PC端查看，涉及到代碼部分，移動端查看確實不方便

Nuxt.js 概要

簡而言之，Nuxt.js是幫助Vue.js輕松完成服務端渲染工作的框架。Nuxt.js預設了服務端渲染所需要的各種配置，如異步數(shù)據(jù)，中間件，路由。它好比是 Angular Universal 之于 Angular， Next.js 之于 React。

如Nuxt.js文檔所說，通過對客戶端/服務端基礎架構(gòu)的抽象，Nuxt.js 讓開發(fā)者專注于頁面的UI渲染。

靜態(tài)文件生成器

Nuxt.js的一個重要功能是，通過 generate 命令，生成靜態(tài)站點。類似于流行的靜態(tài)生成工具Jekyll。

Nuxt.js 內(nèi)部依賴

除了Vue.js 2.0之外，Nuxt.js集成了如下模塊: Vue-Router, Vue-Meta 和 Vuex (僅在使用 Vuex 狀態(tài)樹配置項時引入)。這樣的好處在于，不需要手工配置依賴，不需要同時在客戶端和服務端配置相同的庫。 Nuxt.js在包含如上依賴的情況下，總大小仍然保持在 28kb min+gzip (如果使用了 Vuex 特性的話為 31kb)。

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 來處理代碼的自動化構(gòu)建工作（如打包、代碼分層、壓縮等等）。

工作原理

當你訪問一個基于Nuxt.js構(gòu)建的頁面時，發(fā)生了的事情如下：

當用戶訪問應用程序, 如果store中定義了 nuxtServerInit action，Nuxt.js將調(diào)用它更新store。
接下來，將加載即將訪問頁面所依賴的任何中間件。Nuxt首先從nuxt.config.js這個文件中，加載全局依賴的中間件，之后檢測每個相應頁面對應的布局文件，最后，檢測布局文件下子組件依賴的中間件。以上是中間件的加載順序。
如果要訪問的路由是一個動態(tài)路由, 且有一個相應的 validate() 方法路由的validate 方法，將進行路由校驗。
之后, Nuxt.js 調(diào)用 asyncData() 和 fetch() 方法，在渲染頁面之前加載異步數(shù)據(jù)。asyncData() 方法用于異步獲取數(shù)據(jù)，并將fetch回來的數(shù)據(jù)，在服務端渲染到頁面。用fetch() 方法取回的將數(shù)據(jù)在渲染頁面之前填入store。
最后一步, 將所有數(shù)據(jù)渲染到頁面。

下圖闡述了 Nuxt.js 應用一個完整的服務器請求渲染的流程，摘自官網(wǎng)：

使用 Nuxt.js 創(chuàng)建一個靜態(tài)網(wǎng)站

下面讓我們動手創(chuàng)建一個基于Nuxt.js簡單的靜態(tài)博客。我們的發(fā)送的請求，返回 mock 的JSON數(shù)據(jù)。

完成下面的例子，你需要了解基礎的 vue.js 知識。如果你是個新手，你可以通過Jack Franklin的getting started guide了解 Vue.js 2.0。同時，我將使用ES6語法，你可以參考www.sitepoint.com/tag/es6/ 重溫ES6語法。

我們的 Demo 最終效果如下:

本文中代碼可參照 GitHub, demo 地址如下：https://github.com/sitepoint-editors/nuxt-ssr-blog/

基礎配置

開始使用 Nuxt.js 最簡單的方式就是使用 Nuxt.js 團隊自己開發(fā)的腳手架。我們可以使用 vue-cli 快速創(chuàng)建我們的項目 (ssr-blog)：

`vue init nuxt/starter ssr-blog`
# 提示： 如果你沒有安裝過vue-cli，請先通過npm install -g vue-cli 命令安裝vue-cli。

# 之后，我們將安裝項目的依賴
cd ssr-blog
npm install

# 現(xiàn)在我們啟動程序:
`npm run dev`

# 如果正確啟動, 你能訪問 http://localhost:3000 
# 展示的頁面是 Nuxt.js 模板的初始頁面
# 你也可以通過查看頁面源代碼，驗證頁面所展示的一切內(nèi)容，都是服務端渲染好的。

下面，我們簡單配置下 nuxt.config.js，包含以下選項：

// ./nuxt.config.js

module.exports={
  /*
   * Headers of the page
   */
  head: {
    titleTemplate: '%s | Awesome JS SSR Blog',
    // ...
    link: [
      // ...
      { 
        rel: 'stylesheet', 
        href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css' 
      }
    ]
  },
  // ...
}

在如上配置文件下，我們使用 titleTemplate 字段 title 變量指定文章題目，在渲染之前用title變量值替換掉%s這個占位，填充到titleTemplate 。

同時，我也使用了 CSS 框架, Bulma, 預設一些樣式。通過 link 配置項。

提示： Nuxt.js使用 vue-meta 更新我們的 html headers 信息。所以，我們可以看看 meta 具體的配置項，優(yōu)化頁面 html 信息。

現(xiàn)在，我們可以通過幾個步驟，完成博客的頁面和功能。

使用 Layouts

首先，我們將為我們所有的頁面定義一個通用的基本布局。我們通過修改 layouts/default.vue 文件，更新 main Nuxt.js layout：

<!-- ./layouts/default.vue -->

<template>
  <div>
    <!-- navigation -->
    <nav class="nav has-shadow">
      <div class="container">
        <div class="nav-left">
          <nuxt-link to="/" class="nav-item">
            Awesome JS SSR Blog!
          </nuxt-link>
          <nuxt-link active-class="is-active" to="/" class="nav-item is-tab" exact>Home</nuxt-link>
          <nuxt-link active-class="is-active" to="/about" class="nav-item is-tab" exact>About</nuxt-link>
        </div>
      </div>
    </nav>
    <!-- /navigation -->

    <!-- displays the page component -->
    <nuxt/>

  </div>
</template>

在我們通用的布局里，我們僅僅對頁面添加導航欄，我們通過 component進一步完成具體頁面模塊的定制。你可以查看components-nuxt-link 進一步了解。

在創(chuàng)建布局時component非常重要，它決定具體頁面展示的元素。

當然，component也可以做更多事情，比如定義通用組件和錯誤頁面，但是我們的博客很簡單，不需要這些功能。強烈建議閱讀 Nuxt.js documentation on views ，你可以通過這篇文章了解更多 Nuxt.js 特性。

簡單的頁面和路由

Nuxt.js 頁面是以單文件組件形式組織目錄結(jié)構(gòu)。 Nuxt.js 自動找到目錄下每個 .vue 文件，并添加到頁面中。

創(chuàng)建博客主頁

我們可以通過修改 index.vue 文件修改主頁，通過 Nuxt.js 創(chuàng)建的文件如下：

<!-- ./pages/index.vue -->
<template>
  <div>
    <section class="hero is-medium is-primary is-bold">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            Welcome to the JavaScript SSR Blog.
          </h1>
          <h2 class="subtitle">
            Hope you find something you like.
          </h2>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    head: {
      title: 'Home'
    }
  }
</script>

如前所述，在渲染之前，題目將自動填充至文件。

我們現(xiàn)在可以刷新頁面，看看主頁的變化。

創(chuàng)建 About 頁面

Nuxt.js 還有一個優(yōu)秀的特性，監(jiān)聽文件夾下文件的更改，所以，在文件更改時，不需要重啟應用更新。

來，我們添加一個簡單的 about.vue 頁面：

<!-- ./pages/about.vue -->
<template>
  <div class="main-content">
    <div class="container">
      <h2 class="title is-2">About this website.</h2>
      <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
      <br>
      <h4 class="title is-4">What we hope to achieve:</h4>
      <ul>
        <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
        <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
        <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
        <li>Ut non enim metus.</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  head: {
    title: 'About'
  }
}
</script>

現(xiàn)在我們訪問 http://localhost:3000/about 看看about頁面，無需重啟，非常方便。

在主頁展示文章列表

我們的首頁在沒有內(nèi)容的時候展示如上, 所以下一步，我們要在 index.vue 上添加博客列表這個組件。

首先，我們需要把 JSON 格式的文章保存在服務根目錄下。文件可以從這里下載，或者你可以復制下面的 JSON 到根目錄文件夾 posts.json 下:

[
    {
        "id": 4,
        "title": "Building universal JS apps with Nuxt.js",
        "summary": "Get introduced to Nuxt.js, and build great SSR Apps with Vue.js.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "Jane Doe",
        "published": "08:00 - 07/06/2017"
    },
    {
        "id": 3,
        "title": "Great SSR Use cases",
        "summary": "See simple and rich server rendered JavaScript apps.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "Jane Doe",
        "published": "17:00 - 06/06/2017"
    },
    {
        "id": 2,
        "title": "SSR in Vue.js",
        "summary": "Learn about SSR in Vue.js, and where Nuxt.js can make it all faster.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "Jane Doe",
        "published": "13:00 - 06/06/2017"
    },
    {
        "id": 1,
        "title": "Introduction to SSR",
        "summary": "Learn about SSR in JavaScript and how it can be super cool.",
        "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
        "author": "John Doe",
        "published": "11:00 - 06/06/2017"
    }
]

提示：理想情況下，我們應該從通過 API 獲取文章數(shù)據(jù)。

components 存放在 components 文件夾下，我們可以創(chuàng)建如下組件：

<!-- ./components/Posts.vue -->
<template>
  <section class="main-content">
    <div class="container">
      <h1 class="title has-text-centered">
        Recent Posts.
      </h1>
      <div class="columns is-multiline">
        <div class="column is-half" v-for="post in posts">
          <div class="card">
           <header class="card-header">
            <p class="card-header-title">
              {{ post.title }}
            </p>
          </header>
          <div class="card-content">
            <div class="content">
              {{ post.summary }}
              <br>
              <small>
                by <strong>{{ post.author}}</strong> 
                \\ {{ post.published }}
              </small>
            </div>
          </div>
          <footer class="card-footer">
            <nuxt-link :to="`/post/${post.id}`" 
              class="card-footer-item">
              Read More
            </nuxt-link>
          </footer>
        </div>
      </div>
    </div>
  </div>
</section>
</template>

<script>
  import posts from '~/posts.json'

  export default {
    name: 'posts',
    data () {
      return { posts }
    }
  }
</script>

我們引入 JSON 文件充當異步數(shù)據(jù)，通過 v-for 指令循環(huán)列表，取出我們需要的屬性填充進組件模板展示。

提示： ~ 符號是 / 的別名。你可以查看這篇文檔了解更具體的用法。

下面，我們添加 component 到主頁：

<!-- ./pages/index.vue -->
<template>
<div>
    <!-- ... -->
    <posts />
</div>
</template>

<script>
import Posts from '~components/Posts.vue'

export default {
  components: {
    Posts
  },
  // ...
}
</script>

添加動態(tài)路由

現(xiàn)在，我們?yōu)槲恼马撆渲脛討B(tài)路由，我們以 /post/1 為例：

為此，我們添加 post 文件夾到 pages 目錄下，如下：

pages
└── post
    └── _id
        └── index.vue

我們的程序生成相應的動態(tài)路由：

router: {
  routes: [
    // ...
    {
      name: 'post-id',
      path: '/post/:id',
      component: 'pages/post/_id/index.vue'
    }
  ]
}

更新單一發(fā)布文件：

<!-- ./pages/post/_id/index.vue -->
<template>
  <div class="main-content">
    <div class="container">
      <h2 class="title is-2">{{ post.title }}</h2>
      <div v-html="post.content"></div>
      <br>
      <h4 class="title is-5 is-marginless">by <strong>{{ post.author }}</strong> at <strong>{{ post.published }}</strong></h4>
    </div>
  </div>
</template>

<script>
  // import posts saved JSON data
  import posts from '~/posts.json'

  export default {
    validate ({ params }) {
      return /^\d+$/.test(params.id)
    },
    asyncData ({ params }, callback) {
      let post=posts.find(post=> post.id===parseInt(params.id))
      if (post) {
        callback(null, { post })
      } else {
        callback({ statusCode: 404, message: 'Post not found' })
      }
    },
    head () {
      return {
        title: this.post.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.post.summary
          }
        ]
      }
    }
  }
</script>

Nuxt.js通過添加通用方法，簡化開發(fā)流程。看看我們應該如何在單文件應用中使用它。

路由校驗可以通過路由校驗方法 validate 校驗路由。如果我們的驗證路由參數(shù)驗證數(shù)字，如果驗證失敗，將自動跳轉(zhuǎn)到404頁面。如果它返回“false”,Nuxt。js將自動加載404錯誤頁面。想看更多，請查看Nuxt官網(wǎng)。
asyncData 方法用于 fetch 數(shù)據(jù)，并在服務端渲染頁面，返回給瀏覽器。它可以通過多種方式返回數(shù)據(jù)。我們可以通過多種方式返回數(shù)據(jù)。在本文中的例子里，我們使用回調(diào)函數(shù)返回頁面。我們使用一個回調(diào)函數(shù)來返回相同的帖子“id”屬性“id”參數(shù)的路線。
正如我們之前看到的,我們使用head 的方法來設置頁面 header 。這時，我們改變頁面你的 title ，添加頁面信息到具體頁面。

現(xiàn)在我們可以再次訪問我們的博客看到所有路線和頁面正常工作，并查看頁面源代碼生成的HTML。我們有一個服務器端JavaScript應用程序呈現(xiàn)功能。

生成靜態(tài)文件

接下來，我們要生成程序的 HTML 靜態(tài)文件。

我們需要對 Nuxt.js 做一個小修改，Nuxt.js 默認忽略動態(tài)路由。為了生成動態(tài)路由文件，我們需要修改 ./nuxt.config.js

我們使用回調(diào)函數(shù)，返回以后包含動態(tài)路由的列表：

// ./nuxt.config.js

module.exports={
  // ...
  generate: {
    routes(callback) {
      const posts=require('./posts.json')
      let routes=posts.map(post=> `/post/${post.id}`)
      callback(null, routes)
    }
  }
}

如果你想查看全部關于 generate 的配置，可以參照這篇文檔。

運行如下命令，生成全部頁面：

`npm run generate`

Nuxt 將所有生成的頁面放到 dist 文件夾下。

使用 Nginx 部署

最后一步，可以使用 Nginx 進行部署，nginx的安裝過程此文不再贅述。

結(jié)論

generate 命令來生成我們頁面的靜態(tài)文件，假如，我們需要回復。

下一期講，改版中的踩坑問題。

氣這么冷，大家都多穿點衣服哦，不用只講風度，不要溫度哦！

前言

小程序如何返回到上一個頁面，并刷新頁面呢？這樣的需求很常見，比如：訂單詳情頁面，訂單狀態(tài)是“已付款”，這時候發(fā)起“退款”，跳轉(zhuǎn)到申請退款頁面，申請成功后，返回到訂單詳情，這時候的訂單狀態(tài) 是不是要變?yōu)椤巴丝钪小钡臓顟B(tài)？

微信小程序如何返回到上一個頁面，并刷新頁面呢？

在普通的html頁面，很簡單，不用操作都可以實現(xiàn)。因為瀏覽器返回會自動刷新。但是小程序返回是不會自動刷新上一個頁面的。所以需要一點點技巧。

下面還是模擬上面的場景。

申請退款頁

發(fā)起申請退款后，我們用wx.navigateBack()返回到訂單詳情頁面，小程序API有詳情說明。

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。參數(shù)說明：

微信小程序如何返回到上一個頁面，并刷新頁面呢？

訂單詳情頁

重點來了，拋開上面的需求，我們就查詢訂單詳情接口

onLoad(options){ 
 let orderId=options.orderId; 
 // 根據(jù)orderId查詢訂單詳情數(shù)據(jù) 
 wx.request({ 
 url: 'xxxxxx', // 接口地址 
 data: { 
 orderId: orderId 
 }, 
 header: { 
 'content-type': 'application/json' // 默認值 
 }, 
 success(res) { 
 console.log(res.data) 
 } 
 }) 
}

如果就這樣，那頁面返回并不執(zhí)行onLoad函數(shù)，所以就不會獲取新的數(shù)據(jù)，來更新狀態(tài)。

我們找到了onShow函數(shù)(生命周期回調(diào) — 用于監(jiān)聽頁面顯示)Page(Object) 構(gòu)造器詳細說明

返回時，onShow是會執(zhí)行的，所以改造上面方法

data: { 
 orderId: '' 
}, 
onShow() { 
 // 獲取data里面存的orderId 
 let orderId=this.data.orderId; 
 wx.request({ 
 url: 'xxxxxx', // 接口地址 
 data: { 
 orderId: orderId 
 }, 
 header: { 
 'content-type': 'application/json' // 默認值 
 }, 
 success(res) { 
 console.log(res.data) 
 } 
 }) 
}, 
onLoad(options){ 
 let orderId=options.orderId; 
 // 向data里面set orderId 
 this.setData({ 
 orderId: orderId 
 }) 
}

onLoad把參數(shù)存起來，這個參數(shù)options是訂單列表，或者其他頁面帶入的。從申請退款頁返回，是不用參數(shù)的，返回onShow 執(zhí)行需要的orderId是原來已經(jīng)緩存的。然后onShow直接用這個參數(shù)，onShow是獲取不到url參數(shù)的。

小提示

小程序開發(fā)中，如果用到倒計時，當退出小程序，或者，按手機home鍵，倒計時不會繼續(xù)執(zhí)行。比如，到時間是30s，你按了home鍵，過了10s，再進入小程序，倒計時不是是20s，依舊會從30s倒計時。所以，也需要用到onShow，來刷新這個倒計時。這也是小程序退出，重新進入不會執(zhí)行onLoad函數(shù)的問題。

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址請點擊下方“了解更多”

人人都是產(chǎn)品經(jīng)理【起點學院】，BAT實戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學產(chǎn)品、學運營。

產(chǎn)品設計時細節(jié)是產(chǎn)品經(jīng)理最頭疼的問題，一個button，一個鏈接都要考慮太多的細節(jié)問題。作者整理了常見的一些功能設計問題，一篇文章看懂這些功能設計。來學習吧。

定義

鏈接也稱為超鏈接，所謂的超鏈接是指從一個網(wǎng)頁指向一個目標的連接關系，這個目標可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網(wǎng)頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經(jīng)鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據(jù)目標的類型來打開或運行。

樣式

鏈接可以是一個字或是一段字這樣的文本，也可以是一個按鈕，一張圖片，當你點擊后跳轉(zhuǎn)到另一個目標，當你把鼠標指針移到某個鏈接時會變成一個小手，當然在手機上沒有這一特點。

1. 文本樣式的鏈接

文本樣式的鏈接一般在搜索引擎的網(wǎng)站呈現(xiàn)藍色字樣，大多會在下面加上下劃線以便識別，不過現(xiàn)如今考慮到不影響文本的可讀性與用戶體驗，逐漸取消了下劃線。而在一些別的網(wǎng)站考慮到界面設計風格各方面的因素而不用藍色。

谷歌的文本鏈接是藍色，沒有下劃線

百度的文本鏈接也是藍色，關鍵詞是紅色，有下劃線

而京東的文本鏈接有灰色，有白色，有黑色

2. 按鈕樣式的鏈接

按鈕樣式的鏈接比文本樣式的更容易識別，每一個按鈕都是一樣鏈接。

按鈕樣式鏈接

3. 圖片樣式的鏈接

圖片樣式的鏈接可以是單獨的一張圖片，也可以是文字與按鈕一起組成一張圖片，只是鼠標指針掃過圖片的任何一個部位都會變成小手。

如桌面彈出這種游戲小窗口的圖片式鏈接

由文字/圖/按鈕樣式一起構(gòu)成的一張圖片式按鈕，鼠標可以點擊圖中任何一部位

打開方式

鏈接打開的方式有三種：第一種是在當前頁面刷新跳轉(zhuǎn)，國外的網(wǎng)站大多是這樣的打開式；第二種是在新標簽頁面打開鏈接，國內(nèi)大多采用這種；第三種是提示用APP打開。當然現(xiàn)在出現(xiàn)了一種新的打開方式，那就是二維碼掃描。

提示用美拍APP打開

類型

按照連接路徑的不同，網(wǎng)頁中超鏈接一般分為以下3種類型：內(nèi)部鏈接，錨點鏈接和外部鏈接。

鏈接還可以分為動態(tài)鏈接和靜態(tài)鏈接。動態(tài)超鏈接指的是可以通過改變HTML代碼來實現(xiàn)動態(tài)變化的鏈接，例如我們可以實現(xiàn)將鼠標移動到某個文字鏈接上，文字就會象動畫一樣動起來或改變顏色的效果，也可以實現(xiàn)鼠標移到圖片上圖片就產(chǎn)生反色或朦朧等等的效果。而靜態(tài)鏈接，顧名思義，就是沒有動態(tài)效果的鏈接。

1. 內(nèi)部鏈接

與外部鏈接（即反向鏈接）相反，內(nèi)部鏈接是指同一網(wǎng)站域名下的內(nèi)容頁面之間互相鏈接。如頻道、欄目、終極內(nèi)容頁之間的鏈接，乃至站內(nèi)關鍵詞之間的Tag鏈接都可以歸類為內(nèi)部鏈接，因此內(nèi)部鏈接我們也可以稱之為站內(nèi)鏈接，對內(nèi)部鏈接的優(yōu)化其實就是對網(wǎng)站的站內(nèi)鏈接的優(yōu)化。

2. 錨點鏈接

HTML中的鏈接，正確的說法應該稱作"錨點"，它命名錨點鏈接（也叫書簽鏈接）常常用于那些內(nèi)容龐大繁瑣的網(wǎng)頁，通過點擊命名錨點，不僅讓我們能指向文檔，還能指向頁面里的特定段落，更能當作"精準鏈接"的便利工具，讓鏈接對象接近焦點。便于瀏覽者查看網(wǎng)頁內(nèi)容。類似于我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時，標記錨點是最佳的方法。

3. 外部鏈接

外部鏈接，又常被稱為：“反向鏈接”或“導入鏈接”，是指通過其他網(wǎng)站鏈接到你的網(wǎng)站的鏈接。

外部鏈接指的是針對搜索引擎，與其它站點所做的友情鏈接。高質(zhì)量的外部鏈接指：和你的網(wǎng)站建立鏈接的網(wǎng)站知名度高，訪問量大，同時相對的外部鏈接較少，有助于快速提升你的網(wǎng)站知名度和排名的其他網(wǎng)站的友情鏈接。

如果按照使用對象的不同，網(wǎng)頁中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點鏈接，多媒體文件鏈接，空鏈接等。

鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實現(xiàn)鏈接，如果單擊該鏈接，則相當于指示瀏覽器移至同一網(wǎng)頁內(nèi)的某個位置，或打開一個新的網(wǎng)頁，或打開某一個新的WWW網(wǎng)站中的網(wǎng)頁。

鏈接狀態(tài)

鏈接在交互上一般會呈現(xiàn)4種狀態(tài)，即默認狀態(tài)/懸停時狀態(tài)/點擊時狀態(tài)/點擊后狀態(tài)。比如谷哥網(wǎng)站的交互體驗。如下圖：

點擊前

懸停時，下面浮現(xiàn)半透明線條

點擊時，有波紋暈開的動態(tài)效果

點擊后，下面線條粗

有時候是3種狀態(tài)，比如百度網(wǎng)和知乎應用：

默認狀態(tài)

點擊時鏈接變紅

點擊后鏈接變成紫色

IOS系統(tǒng)知乎應用的3種狀態(tài)，而在Android系統(tǒng)沒有用力點擊這一狀態(tài)。

默認狀態(tài)

點擊狀態(tài)

用力點擊會彈出預覽小窗口

有些時候只有2種狀態(tài)，如下圖谷歌網(wǎng)：

默認和點擊后狀態(tài)一樣

鼠標懸停時出現(xiàn)下劃線

默認狀態(tài)

點擊時

而有時候比如在APP里有時候就一直只有一種狀態(tài)，也可以稱靜態(tài)鏈接，之前的可以稱之為動態(tài)鏈接。在不同的使用場景會因為當時的情況選擇最合適的交互體驗設計。有的情況下還會加上點擊的音效，使用戶體驗更暢快，這在移動端用的使用情況多一些。

總之鏈接是網(wǎng)頁不可缺少的構(gòu)成部分，每一個鏈接的呈現(xiàn)都是經(jīng)過深思熟慮的。

作者：潘瑤瓊（簡書作者）

本文由 @潘瑤瓊授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

在線咨詢

上一篇：一周互聯(lián)網(wǎng)參會指南（8.11-8.16）
下一篇：HTML5新技術(shù)給網(wǎng)站帶來了哪些改變

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

Nuxt.js從0到1之入門教程

Nuxt.js 概要

靜態(tài)文件生成器

Nuxt.js 內(nèi)部依賴

工作原理

使用 Nuxt.js 創(chuàng)建一個靜態(tài)網(wǎng)站

基礎配置

使用 Layouts

簡單的頁面和路由

創(chuàng)建博客主頁

創(chuàng)建 About 頁面

在主頁展示文章列表

添加動態(tài)路由

生成靜態(tài)文件

使用 Nginx 部署

結(jié)論

前言

申請退款頁

訂單詳情頁

小提示

公告

定義

樣式

1. 文本樣式的鏈接

2. 按鈕樣式的鏈接

3. 圖片樣式的鏈接

打開方式

類型

1. 內(nèi)部鏈接

2. 錨點鏈接

3. 外部鏈接

鏈接狀態(tài)

您的項目需求