hexo高階教程：next主題優化之加入網易雲音樂、網易雲跟帖、炫酷動態背景、自定義樣式，打造屬於你自己的定製化部落格

Cherry發表於2017-04-10

前言

本篇文章是在已經搭建好gitpage+hexo的部落格的前提下（不懂怎麼搭建的可以參考我的另一篇博文：瞭解githubPages+hexo搭建部落格的原理或者利用Gitpage+hexo開發自己的部落格，這兩篇博文都比較詳細的教大家最基礎的怎麼將部落格搭建起來。本篇博文是使用next主題的進擊版本，主要是有以下內容

域名繫結，將github部落格和你的獨有域名繫結
新增更多的menu內容
新增頭像
定義網站個性logo
自定義樣式，重寫預設樣式，個性化定製你的部落格
炫酷動態背景製作
新增網易雲音樂
新增網易雲跟帖
新增leancloud閱讀次數統計功能
新增wordcount頁面字數統計
新增fork me on github功能

要想最快的知道這些功能的效果，請移步我的個人部落格：http://cherryblog.site/ ，順便求個fork，大爺們看過可以評論一下，試一下新加上的網易雲跟帖效果怎麼樣ヽ(●´ε｀●)ノ
首先要說一下我使用的版本，這個是很重要的，我的部落格最先建立於2016年的9月份，距離現在已經有大半年了，所以好多版本都已經進行了更新，特別是next主題整合了更多的外掛，簡直不要太爽＼（＠￣∇￣＠）／

hexo v3.2.2
next v5.1.0
node v4.5.0

在改成自己想要的效果之後，對整體的hexo的next主題我有了一個大概的瞭解，其實next主題的最新版（5.1）已經整合了大部分我們需要的外掛，只需要在主題配置檔案中將預設的false改為true即可，但是我們也仍然需要知道都有哪些新的功能，最有效的方法是直接去檢視官網的api：next官網這裡寫圖片描述

授之於魚不如授之於漁

希望我們都能夠理解其原始碼，製作出屬於自己專屬的個性化部落格(•̀ᴗ•́)

我們需要改的檔案其實也就那麼幾個，大部分是不需要更改，next都已經幫我們配置好了~
預設目錄結構：

.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json

deploy：執行hexo deploy命令部署到GitHub上的內容目錄
public：執行hexo generate命令，輸出的靜態網頁內容目錄
scaffolds：layout模板檔案目錄，其中的md檔案可以新增編輯
scripts：擴充套件指令碼目錄，這裡可以自定義一些javascript指令碼
source：文章原始碼目錄，該目錄下的markdown和html檔案均會被hexo處理。該頁面對應repo的根目錄，404檔案、favicon.ico檔案，CNAME檔案等都應該放這裡，該目錄下可新建頁面目錄。
- drafts：草稿文章
- posts：釋出文章
themes：主題檔案目錄
_config.yml：全域性配置檔案，大多數的設定都在這裡
package.json：應用程式資料，指明hexo的版本等資訊，類似於一般軟體中的關於按鈕

我們最先修改的應該是在hexo根目錄下的配置檔案_config.yml檔案，這裡是配置整個站點的配置資訊，在文章的最後貼出我的配置檔案，有興趣的朋友可以參考一下~
其次就是我們的主題配置檔案
在對應的主題下的_config.yml 因為我使用的是next主題，所以目錄的路徑為C:Hexo hemes ext\_config.yml 這裡配置的是使用主題的配置檔案，這個配置檔案的東西就有點多了，我們大部分的修改也是在這個檔案下完成的。比如說使用整合的第三方外掛，預設為false，我們需要將其改為true並且配置相應的app_key就可以使用該外掛了~有木有很方便(^ ◕ᴥ◕ ^)
然後我們需要修改樣式的話是需要設定css和甚至是修改模板，
頁面展現的全部邏輯都在每個主題中控制，原始碼在hexothemes你使用的主題中，以next主題為例：

├── .github            #git資訊
├── languages          #多語言
|   ├── default.yml    #預設語言
|   └── zh-Hans.yml      #簡體中文
|   └── zh-tw.yml      #繁體中文
├── layout             #佈局，根目錄下的*.ejs檔案是對主頁，分頁，存檔等的控制
|   ├── _custom        #可以自己修改的模板，覆蓋原有模板
|   |   ├── _header.swig    #頭部樣式
|   |   ├── _sidebar.swig   #側邊欄樣式
|   ├── _macro        #可以自己修改的模板，覆蓋原有模板
|   |   ├── post.swig    #文章模板
|   |   ├── reward.swig    #打賞模板
|   |   ├── sidebar.swig   #側邊欄模板
|   ├── _partial       #區域性的佈局
|   |   ├── head       #頭部模板
|   |   ├── search     #搜尋模板
|   |   ├── share      #分享模板
|   ├── _script        #區域性的佈局
|   ├── _third-party   #第三方模板
|   ├── _layout.swig   #主頁面模板
|   ├── index.swig     #主頁面模板
|   ├── page           #頁面模板
|   └── tag.swig       #tag模板
├── scripts            #script原始碼
|   ├── tags           #tags的script原始碼
|   ├── marge.js       #頁面模板
├── source             #原始碼
|   ├── css            #css原始碼
|   |   ├── _common    #*.styl基礎css
|   |   ├── _custom    #*.styl區域性css
|   |   └── _mixins    #mixins的css
|   ├── fonts          #字型
|   ├── images         #圖片
|   ├── uploads        #新增的檔案
|   └── js             #javascript原始碼
├── _config.yml        #主題配置檔案
└── README.md          #用GitHub的都知道

繫結域名

繫結域名的思路如下：

在萬網購買自己喜歡的域名（.com的會貴一點，.site和.xyz的相對便宜一些，有的只需要幾塊錢一年就可以）
解析DNS
在hexo中新增CNAME檔案

購買域名

之前沒有買域名的時候我想使用網易雲跟帖，發現在註冊網易雲跟帖的時候使用原來的域名提示“url已被使用”，這是因為網易雲跟帖不認可二級域名，所以要自己買域名。
我選擇的是萬網，阿里下面的。我選擇了一個.site的域名，原價8元，使用阿里雲app支付還優惠5元，等於3元到手一個域名（一年）~
按照官網的步驟一步一來就可以了~

解析DNS

購買完域名之後我們需要解析DNS地址，在管理控制檯中的左側有域名選項，然後找到你的域名，點選後面的“解析”
這裡寫圖片描述

點選新增解析，記錄型別選A或CNAME，

A記錄的記錄值就是ip地址，github(官方文件)提供了兩個IP地址，192.30.252.153和192.30.252.154，這兩個IP地址為github的伺服器地址，兩個都要填上，
解析記錄設定兩個www和@，線路就預設就行了，CNAME記錄值填你的github部落格網址。如我的是sunshine940326.github.io。

在hexo中新增CNAME檔案

接下來在你的hexo資料夾下source資料夾下新建一個CANME檔案,裡面加上你剛剛購買的域名比如我的cherryblog.site

如果直接填寫cherryblog.site的話直接訪問www.cherryblog.site 和 cherryblog.site 都可以訪問到我們的網站，但是如果填寫www.cherryblog.site 的話只能通過www.cherryblog.site 訪問，不能通過cherryblog.site 訪問

這裡寫圖片描述
然後你就可以hexo clean,hexo g，hexo d 釋出你的部落格看看效果啦~

新增選單頁

新增選單頁的思路（新增選單頁就是新增一個頁面，有兩種方式）：第一種是使用git命令hexo new page "photo" 就直接建立了 C:Hexosourcephotoindex.md檔案，然後編輯index.md 檔案就可以了~
這裡寫圖片描述
第二種：手動建立上面的檔案= =

在主題的配置檔案新增menu索引路徑（根路徑是hexosource,所以你如果想要更改頁面的內容就去hexosource下找到對應的資料夾，預設內容是在其index.md檔案下)
在hexo的source檔案下新增對應的資料夾
在主題的配置檔案新增menu_icon欄位設定對應的icon
修改language檔案下zh-hans語言包
在發表文章的時候新增對應的menu欄位就可以看到

剛開始的時候不理解怎麼新增分類頁和新增文章的區別，公司有一個專案用到了wordpress，然後發現兩者有相似的地方，不同的就是wordpress是有視覺化的操作後臺，而hexo是需要git bash自己建立
首先我們要分清什麼是頁面，什麼是文章，
在hexo中menu下的內容都是新的頁面我們可以通過hexo new page "pagename" 建立，hexo預設的頁面只有home,archives,tags 三個，之後我們寫的博文就是文章，通過hexo new "name" 建立的name.md 檔案在根目錄的source\_posts 下，在每一個文章的頭部，我們可以配置其tags或者categories內容，相當於文章是頁面的下一級

在配置檔案中新增menu索引路徑

我們可以在主題配置的_config檔案下找到相應的欄位，欄位前加# 表示被註釋掉，我們也可以自己新增menu的內容，比如我又新增了兩個menulife 和photo
這裡寫圖片描述

這裡新增的欄位其實是加上檔案索引的路徑，這裡hexo設定的根路徑是hexo/source 接下來我們在這個根路徑下建立相應的資料夾就可以實現點選mune跳轉到相應的頁面上了

這裡寫圖片描述 ,
沒有明白什麼意思的同學看下圖

在source檔案新增menu資料夾

我們需要在這個路徑下自己建立對應的頁面，比如說我新建了menulife 和photos，然後再source資料夾下面新建兩個名字為life 和photo 的資料夾，裡面新增一個index.md markdown檔案，內容是類似這樣的

---
title: photo
date: 2017-04-04 22:14:07
type: "photo"
comments: false
---
啦啦啦~

這裡寫圖片描述
這是一個markdown檔案，你可以自己編寫，但是我還不知道怎麼把新增html檔案= =，回來研究一下

給menu新增icon

如果只是上面的步驟，那麼你可能會建立出一個新的頁面，但是顯示的效果會是這樣：這裡寫圖片描述

怎麼icon沒有換？？？其實hexo中換icon是一個很簡單的事情，因為hexo整合了FontAwsome 所以我們只需要在主題的配置檔案中加入相應的icon名字即可
這裡寫圖片描述

查詢`FontAwsome` icon

這時候你想要換一個自己喜歡的icon怎麼辦，這就需要自己動手，豐衣足食了，你需要自己到FontAwsome官網，然後滑鼠往下拉，在圖示集中選擇自己喜歡的icon，然後記住名字，儲存在上面的menu_icon欄位中就可以啦~
這裡寫圖片描述 tips ：在欄位中只需要填寫icon-name後面跟的name即可，不需要加上前面的”icon-“

在language新增zh-hans翻譯欄位

上面的步驟完成之後你會發現，在你的部落格首頁顯示的仍然是英文名，而我們想要有一箇中文的名字，並且想要個性化定製我們的頁面，我們可以在主題的language檔案下的zh-hans（中文）語言包下增加相應的欄位（做過翻譯的童鞋應該都知道什麼意思~）還可以修改其他的欄位，這樣就可以定製我們的部落格了呢~
這裡寫圖片描述

在發表文章的時候新增對應的menu欄位

在我們寫文章的時候只要在頭部資訊新增相應的欄位就在tags頁面和categories中顯示相應的分類，例如:

---
title: Git使用中的報錯情況
date: 2017-03-11 23:54:11
tags: [git,實戰經驗] 
categories: git
---

tags、categories都是支援陣列的形式的，可以新增多個tags、categories。這樣我們在tags、categories頁面就可以看見相應的分類了
這裡寫圖片描述

新增頭像

我使用的主題頭像是位於側邊欄，顯示的效果如下，
這裡寫圖片描述要新增一個這個的頭像要怎麼操作呢，其實思路就是將你要上傳的頭像放在你的資料夾中，然後再配置檔案中引用正確的路徑即可，當然也可以上傳絕對路徑。在你的主題配置檔案找到avatar欄位，然後將你得圖片路徑寫在後面，我是新建了一個uploads資料夾，將圖片放在下面

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: /uploads/avatar.png

這裡寫圖片描述

設定網站logo

跟設定頭像其實是一個思路，都是在配置檔案中引入正確的地址就可以了，不過網站的logo是對圖片有要求的，我們需要在Favicon線上製作工具中製作32*32的.ico圖片，然後放在source/images下面。然後在主題配置檔案下新增主題配置檔案中新增：favicon: images/favicon.ico

自定義樣式

不得不說next還是很人性化的，你可以個性化定製你的網站，你所有的改動（css）需要放在主題檔案的source/css/_costum/costum.styl檔案中，會覆蓋原來的css，所以只要你不想要你修改的樣式，只需要刪除這個資料夾就可以了，再也不用擔心還原不回去了~
這裡寫圖片描述

炫酷動態背景

之前做過一個類似的canvas-nest的效果。新版本的next已經支援canvas-nest了，但是效果不怎麼樣，就不用了，但是也介紹一下，畢竟簡單，只有兩步就可以了。
新增修改程式碼nextlayout\_layout.swig在</body>之前加上

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

開啟next\_config.yml，新增以下程式碼就可以了：

 # Canvas-nest
canvas_nest: true

這種雖然簡單，但是我認為效果不夠好，於是我決定新增原生的js來仿知乎的登入介面做背景，這就需要修改模板來實現了。只要我們知道了next檔案的結構，我們想改什麼只需要找到對應的位置就好（在前言中有next的目錄結構）~
這裡寫圖片描述
所以我們需要在layout下面的_layout.swig 新增一個canvas

<div class="bg_content">
    <canvas id="canvas"></canvas>
</div>

然後使用原生js寫一個仿知乎頁面

  <script>
class Circle {
    //建立物件
    //以一個圓為物件
    //設定隨機的 x，y座標，r半徑，_mx，_my移動的距離
    //this.r是建立圓的半徑，引數越大半徑越大
    //this._mx,this._my是移動的距離，引數越大移動
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.r = Math.random() * 10 ;
        this._mx = Math.random() ;
        this._my = Math.random() ;

    }

    //canvas 畫圓和畫直線
    //畫圓就是正常的用canvas畫一個圓
    //畫直線是兩個圓連線，為了避免直線過多，給圓圈距離設定了一個值，距離很遠的圓圈，就不做連線處理
    drawCircle(ctx) {
        ctx.beginPath();
        //arc() 方法使用一箇中心點和半徑，為一個畫布的當前子路徑新增一條弧。
        ctx.arc(this.x, this.y, this.r, 0, 360)
        ctx.closePath();
        ctx.fillStyle = `rgba(204, 204, 204, 0.3)`;
        ctx.fill();
    }

    drawLine(ctx, _circle) {
        let dx = this.x - _circle.x;
        let dy = this.y - _circle.y;
        let d = Math.sqrt(dx * dx + dy * dy)
        if (d < 150) {
            ctx.beginPath();
            //開始一條路徑，移動到位置 this.x,this.y。建立到達位置 _circle.x,_circle.y 的一條線：
            ctx.moveTo(this.x, this.y);   //起始點
            ctx.lineTo(_circle.x, _circle.y);   //終點
            ctx.closePath();
            ctx.strokeStyle = `rgba(204, 204, 204, 0.3)`;
            ctx.stroke();
        }
    }

    // 圓圈移動
    // 圓圈移動的距離必須在螢幕範圍內
    move(w, h) {
        this._mx = (this.x < w && this.x > 0) ? this._mx : (-this._mx);
        this._my = (this.y < h && this.y > 0) ? this._my : (-this._my);
        this.x += this._mx / 2;
        this.y += this._my / 2;
    }
}
//滑鼠點畫圓閃爍變動
class currentCirle extends Circle {
    constructor(x, y) {
        super(x, y)
    }

    drawCircle(ctx) {
        ctx.beginPath();
        //註釋內容為滑鼠焦點的地方圓圈半徑變化
        //this.r = (this.r < 14 && this.r > 1) ? this.r + (Math.random() * 2 - 1) : 2;
        this.r = 8;
        ctx.arc(this.x, this.y, this.r, 0, 360);
        ctx.closePath();
        //ctx.fillStyle = `rgba(0,0,0,` + (parseInt(Math.random() * 100) / 100) + `)`
        ctx.fillStyle = `rgba(255, 77, 54, 0.3)`
        ctx.fill();

    }
}
//更新頁面用requestAnimationFrame替代setTimeout
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

let canvas = document.getElementById(`canvas`);
let ctx = canvas.getContext(`2d`);
let w = canvas.width = canvas.offsetWidth;
let h = canvas.height = canvas.offsetHeight;
let circles = [];
let current_circle = new currentCirle(0, 0)

let draw = function () {
    ctx.clearRect(0, 0, w, h);
    for (let i = 0; i < circles.length; i++) {
        circles[i].move(w, h);
        circles[i].drawCircle(ctx);
        for (j = i + 1; j < circles.length; j++) {
            circles[i].drawLine(ctx, circles[j])
        }
    }
    if (current_circle.x) {
        current_circle.drawCircle(ctx);
        for (var k = 1; k < circles.length; k++) {
            current_circle.drawLine(ctx, circles[k])
        }
    }
    requestAnimationFrame(draw)
}

let init = function (num) {
    for (var i = 0; i < num; i++) {
        circles.push(new Circle(Math.random() * w, Math.random() * h));
    }
    draw();
}
window.addEventListener(`load`, init(60));
window.onmousemove = function (e) {
    e = e || window.event;
    current_circle.x = e.clientX;
    current_circle.y = e.clientY;
}
window.onmouseout = function () {
    current_circle.x = null;
    current_circle.y = null;

};
</script>

新增網易雲音樂

在知道了頁面的結構之後，你就可以將你的播放器新增在頁面的任意位置，開始我是放在了首頁，然後發現一上來就自動播放太吵了，於是就放在了側邊欄，想要聽得朋友可以手動點選播放，
我們可以直接在網易雲音樂中搜尋我們想要插入的音樂，然後點選生成外鏈播放器
這裡寫圖片描述
然後可以根據你得設定生成相應的html程式碼，將獲得的html程式碼插入到你想要插入的位置即可

我放在了側邊欄，所以對應的修改layout\_macrosidebar.swig 檔案

<div id="music163player">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
    </iframe>
</div>

然後就可以在側邊欄看見我的播放器了~
這裡寫圖片描述

網易雲跟帖

之前用的是多說，但是多說在2017年6月1日就關閉評論服務了= =，很憂傷，於是轉到了網易雲跟帖。由於最新版（5.1）版本的next已經整合了網易雲跟帖，所以只需要在主題的設定檔案中配置你的productKey就可以了。獲取productKey也很簡單，在官網網易雲跟帖中註冊，然後在獲取程式碼>通用程式碼中拿到productKey，之後在你的主題配置檔案中的gentie_productKey欄位後新增即可~

新增Fork me on GitHub

去網址https://github.com/blog/273-g… 挑選自己喜歡的樣式，並複製程式碼，新增到themesnextlayout_layout.swig的body標籤之內即可
記得把裡面的url換成自己的!

hexo-wordcount實現統計功能

這裡寫圖片描述
wordcount可以實現字數統計，閱讀時常還有總字數的統計功能
只需要npm install hexo-wordcount --save 就可以安裝wordcount外掛，
主要功能
字數統計:WordCount
閱讀時長預計:Min2Read
總字數統計: TotalCount
安裝完外掛之後在主題的配置檔案中開啟該功能就可以~

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

leancloud閱讀次數統計

next也整合了leancloud，在leancloud官網
中註冊賬號等一步一步的操作就不說了哈~，我們主要是為了拿到app_key和app_id,然後在主題配置檔案做一下配置

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: yourapp_id
  app_key: yourapp_key

然後再leancloud的控制檯中的儲存新增一個counter的class就可以檢測到我們的瀏覽量了，同時在你文章的副標題也可以看到有閱讀次數的顯示
這裡寫圖片描述

個人網站地址：http://cherryblog.site/，順便求個fork

附錄1：站點配置檔案

 # Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site   站點資訊
title: Cherry`s Blog    #站點名字
subtitle: To Be a Batter Me  #副標題
description: 做更好的自己   #站點描述，在側邊欄顯示
author: Cherry   #博主名字
email: 991939332@qq.com #聯絡郵箱
language: zh-Hans   #使用的語言包，語言包在主題檔案的language資料夾下，可以更改網站顯示出的文案
timezone:

# URL
## If your site is put in a subdirectory, set url as `http://yoursite.com/child` and root as `/child/`
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true  #新建一個頁面後自動生成一個同名資料夾（預設為false）
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/sunshine940326/sunshine940326.github.io.git
  #repository: ssh://git@github.com/sunshine940326/sunshine940326.github.io

hexo的next主題個性化教程打造炫酷網站
2017-12-20
Hexo網站
使用jQuery仿製網易雲音樂移動端
2019-03-02
jQuery
基於 React + TypeScript 的網易雲音樂
2018-08-17
ReactTypeScript
網易雲音樂解鎖灰色歌曲教程
2022-03-09
iOS仿網易雲音樂
2017-10-16
iOS
基於網易雲音樂的 SPA 應用
2017-03-02
高仿網易雲音樂 Vue前端專案
2019-04-17
Vue前端
GitHub + Hexo搭建自己部落格(二) Next主題配置
2019-02-20
GithubHexo
仿網易雲音樂webApp
2019-12-22
WebAPP
微信小程式-網易雲音樂
2019-03-18
微信小程式
仿網易雲音樂播放介面
2019-01-10
AI音樂，騰訊音樂、網易雲音樂的新版圖？
2022-02-16
AI
網易雲音樂質量視覺化實踐 - 張文
2020-06-08
視覺化
Python資料視覺化：網易雲音樂歌單
2019-01-16
Python視覺化
網易雲音樂網路庫跨平臺化實踐
2021-11-18
RocketMQ 在網易雲音樂的實踐
2022-12-12
MQ
網易雲音樂的一個評論
2024-06-05
Taro小程式仿網易雲音樂
2019-02-25
Flutter仿網易雲音樂：播放介面
2019-01-08
Flutter
hexo部落格的背景設定
2017-07-25
Hexo
在自己網站中插入網易雲音樂的外鏈，播放音樂
2016-03-13
網站
Hexo Next主題進階教程
2018-07-31
Hexo
（Ⅱ）NexT主題的優化定製修改指南
2018-01-31
優化
Python從網易雲音樂、QQ 音樂、酷狗音樂等搜尋和下載歌曲
2019-07-19
Python
網易雲音樂財報：2022年網易雲音樂營收90億元同比增長28.5%
2023-02-24
營收
Vue 實現網易雲音樂 WebApp
2019-02-16
VueWebAPP
網易雲音樂機器學習平臺實踐
2022-07-07
機器學習
Vue之網易雲音樂橫向選單的實現
2019-02-20
Vue
Hexo系列3：部落格優化
2016-04-16
Hexo優化
從探索到突破：網易雲音樂Android自動化效能測試實踐
2019-03-28
Android
優質資料平臺如何打造？從網易雲音樂看內容生態的運營法則
2018-06-30
用Hexo主題next做了一個部落格！
2020-12-15
Hexo
網易雲音樂基於使用者的推薦系統
2019-03-04
網易雲音樂的訊息佇列改造之路
2019-08-05
佇列
手擼網易雲進階課程-效能優化之NDK高效載入GIF
2019-12-01
優化
Vue之網易雲音樂PC版輪播圖的實現
2018-06-25
Vue
Python爬蟲實踐-網易雲音樂
2018-09-09
Python爬蟲
用Python爬取網易雲音樂歌曲
2018-01-10
Python