實現自己的“單頁”博客，只需要一個指令 (Moka)

JeOam 發布于2019-08-22 12:46 / 2000人閱讀

摘要：如今單頁應用橫行霸道而且新時代知識信息海量我們更需要自己的來沉淀知識。綜上走入了我們的實現。還有默認主題是用開發的但不幸的是本人誤操作把源碼都刪了但萬幸的是留下了生產環境的代碼

如今,單頁應用"橫行霸道", 而且新時代知識信息海量,我們更需要自己的Blog來沉淀知識。
綜上,Moka走入了我們的實現。

github.com/moyuyc/moka

Usage

為了第一眼能看到效果, 我先把如何安裝使用說一下。

一切從npm開始

    $ npm i -g moka-cli

安裝完成后

$ moka -h # 幫助
$ moka -v # 版本

$ mkdir myBlog
$ cd myBlog
$ moka i  # 開啟自己的spa Blog
$ moka g  # generate static pages
$ moka s  # 開啟本地服務,可以在本地看到效果了！
$ moka n abc # 新建一個article

$ moka d  # 根據 moka.config.json deploy 發布 
$ moka b  # 根據 moka.config.json bak 備份所有文件

線上效果
moyuyc.github.io

Moka主題配置

默認主題是用react/webpack開發的,
但...不幸的是, 本人誤操作把源碼都刪了..., 但萬幸的是...留下了build, 生產環境的代碼...

{ "avatar": "/head.jpg", // 頭像 "title": " Moyu Dev Blog ", // 網站title "description": " Web, Node C/C++ Dev ", "mainInfoColor": "", // 首頁信息的文字顏色, 默認白色 "canvasColor": "", // 首頁飄散的雪花顏色 "leftPercentage": 50,// 左側百分比, 右側將會自動為100-leftPercentage, <=0 將會在非首頁頁面隱藏left "pageSize": 6, // 每頁文章數目, <=0 一頁展示所有 "summaryNum": 50, // 摘要的文字截斷字數 "postTarget": "_blank", // 文章中link的跳轉方式 "iconTarget": "_blank", // 左側icon的link的跳轉方式 "projectTarget": "_blank", // project中link的跳轉方式 "home": { // 首頁中右側文字內容 "title": "About Me", "contentHtml": "

I’m a Javascript enthusiast. I organise Baidu BEFE Meetup and try my best to help out with the team. I’m also a member of the core dev team.

" }, // projects "projects": [ { "title": "Moyu Theme", "state": "Doing", //可無 "image": "https://raw.githubusercontent.com/TaylanTatli/Ramme/master/assets/img/screenshot-post.png" "link": "" // 點擊跳轉地址 }, { "title": "Moyu Theme", "state": "Doing", "image": "https://raw.githubusercontent.com/TaylanTatli/Ramme/master/assets/img/screenshot-post.png" }, { "title": "Moyu Theme", "state": "Doing", "image": "https://raw.githubusercontent.com/TaylanTatli/Ramme/master/assets/img/screenshot-post.png" }, { "title": "Moyu Theme", "state": "Doing", "image": "https://raw.githubusercontent.com/TaylanTatli/Ramme/master/assets/img/screenshot-post.png" }, { "title": "Moyu Theme", "state": "Doing", "image": "https://raw.githubusercontent.com/TaylanTatli/Ramme/master/assets/img/screenshot-post.png" } ], "icon": [ // 左側icons key命名參看font-awesome.css { "github": "https://github.com/moyuyc" } ], "coverImage": { // 左側封面 "images": { "tags": "http://taylantatli.me/Halve/images/unsplash-gallery-image-3.jpg", "home": "http://taylantatli.me/Halve/images/unsplash-image-10.jpg", "article": "http://taylantatli.me/Halve/images/unsplash-gallery-image-3.jpg", "serach": "http://taylantatli.me/Halve/images/unsplash-image-10.jpg", "notExist": "http://taylantatli.me/Halve/images/unsplash-gallery-image-3.jpg", "posts": [ // posts可為數組(對于每一頁), 可為字符串 "http://taylantatli.me/Halve/images/unsplash-image-10.jpg", "http://taylantatli.me/Halve/images/home.png", "http://taylantatli.me/Halve/images/unsplash-gallery-image-3.jpg" ] }, "articleCover": true // 是否開啟文章封面, 在文章頭部配置 `cover: ...` 效果請看默認文章`Linux C學習一周` } }

Document

Moka, 認為前端UI與數據應該完全分離開來, 而不是像hexo那樣傳統的blog。
這樣做的好處不言而喻, 可能第一次加載數據較多, 但是后續操作更加暢快, 網站體驗更加優化了。

既然如此, 那么Moka產生的數據是什么樣子的呢?

數據格式

Moka 采用主流的json字符串

$ moka generate 后產生的json如下

{
    "main": {
        "filename": {
            "content": "...",
            "head": {
                "date": "",
                "title": "",
                "tags": [tagnames...] or "tagname"
            }
        }
    },
    "index": {
        "sorted": [filenames...],
        "tagMap": {
            "tagname": [filenames...]
        }
    }
}

說明

"content"可以通過配置控制, 返回markdown或者html(請看下文配置returnRaw說明)

"head"表示在文章中頭部---...---中解析出來的數據, tags 可以是Array(多個)或String(單個)

"sorted"為按照時間倒序的filenames數組

"tagMap"為所有tag的映射, 即哪些文章包含"tagname"

配置說明

主要包含 default config, moka.config.json, theme.config.json, theme.config.js

default config 為Moka初始配置, 不推薦修改

{
 theme: "moka", // 當前主題
 apiRoot: "moka_api", // moka generate 數據和配置 所存放的文件夾
 
 skipRegExp: "/[^.(md|markdown)]$/", // 在 _articles 中渲染忽略的文件名正則表達式
 
 timeFormat: "YYYY/MM/DD HH:mm:ss", // 默認產生的時間格式 (參看moment.js)

 // marked 配置參看(marked.js: https://github.com/chjj/marked)
 marked: {
     options: {
         gfm: true,
         tables: true,
         breaks: false,
         pedantic: false,
         sanitize: false,
         smartLists: true,
         smartypants: false,
         highlight: function (code) {
return require("highlight.js").highlightAuto(code).value;
         }
     },
     setup: function (renderer) {
         renderer.heading = function (text, level) {
var escapedText = text.toLowerCase().replace(/[^w]+/g, "-");

return "" +
text + "";
         }
     }
 },

 returnRaw: false,  // * 是否返回markdown字符串, 那么需要主題自己轉換markdown
 title: "Blog",
 favicon: "favicon.ico", // 網站圖標
 injectScript: true,  // 是否注入`moka.inject.js`
 themeBuild: "build" // 將會取 themes/moka/build 中文件放到 static 中, 認為build為生產環境代碼
}

moka.config.json 為全局站點配置, 在apiRoot中可以得到

{
    "theme": "moka",
    "title": "Moyu Blog",
    "favicon": "favicon.ico",
    "author": "moyu",
    "description": "moyu Blog",
    "siteName": "site",
    
    // moka generate 配置
    "deploy": {
        "type": "git",
        "url": "https://github.com/moyuyc/moyuyc.github.io.git",
        "branch": "master"
    }
}

theme.config.json 為主題配置, 在apiRoot中可以得到, 完全為主題開發者自定義

關于默認主題配置說明, 請看[theme readme](THEME_README.md)

theme.config.js 為了主題開放者也能夠控制Moka產生數據, 可以修改該文件, 從而覆蓋默認配置

module.exports = {
    apiRoot: "moka_api",
    skipRegExp: "/[^.(md|markdown)]$/",
    //http://momentjs.com/
    timeFormat: "YYYY-MM-DD HH:mm", // 返回的時間格式

    marked: {
        options: {
            gfm: true,
            tables: true,
            breaks: false,
            pedantic: false,
            sanitize: false,
            smartLists: true,
            smartypants: false
        },
        setup: function (renderer) {
            // 在這里控制renderer規則, 詳細請看 marked
        }
    },
    
    returnRaw: false,
    themeBuild: "build",
}

閑話

開發者可以通過ajax/fetch/...異步獲取 apiRoot配置下的db.json/moka.config.json/theme.config.json

然后盡情用react/vue/webpack/...開發自己喜歡的主題吧。

還有默認主題是用react/webpack開發的,
但...不幸的是, 本人誤操作把源碼都刪了..., 但萬幸的是...留下了build, 生產環境的代碼...

star it!

云服務器 GPU云服務器如何宣傳自己的博客搭建自己的博客網站只需要連接云服務器的顯示屏不需要數據庫的博客程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92361.html

一句命令！搞定高逼格單頁博客

摘要：需要環境與環境下請在中執行效果見更多信息搭建單頁桌面版，專為設計需要node環境與git環境 curl -s https://raw.githubusercontent.com/moyuyc/my-shell-code/master/moka-start.sh | bash windows下請在git bash中執行效果見moyuyc.github.io 更多信息 moka =...

keithyau 2019-08-20 13:44 評論0 收藏0
使用Vue快速開發單頁應用－vue-router

摘要：當前路由對象調用此函數處理切換過程的下一步終止切換重定向到另一個路由由于是路由切換后，只有上面的兩個屬性。原文地址其他使用快速開發單頁應用主體結構使用快速開發單頁應用使用快速開發單頁應用登錄頁面使用快速開發單頁應用功能組件與路由組件通信本文所涉及代碼全在vue-cnode vue-router主要作用是將路由控制，轉移到前端。我們將會在vue-router里面保存一個路由表，在vue...

mingde 2019-08-20 10:29 評論0 收藏0
采用vue+webpack構建的單頁應用——私人博客MintloG誕生記

摘要：我采用原生編寫后臺，因為感覺增刪改查的功能很簡單，就懶得用框架了其實是不會。瀏覽模式它也有一個，用來切換文章列表和文章詳情，也就是和編輯模式它加載了作為工具欄，然后可以進行文章的撰寫與修改。介紹項目地址：https://github.com/jrainlau/MintloG （特別亂，參考就好-_-|||）showImg(https://segmentfault.com/img/b...

Terry_Tai 2019-06-27 12:09 評論0 收藏0