nanodm.net

nanodm hugo site

1. 如何本地浏览

没有安装hugo的可参考此文档https://www.gohugo.org/doc/overview/installing/ 安装好hugo.

Windows用户需要特别注意,把hugo.exe所在的目录加入PATH环境变量以便在任何地方都可以直接执行hugo命令。

git clone https://github.com/ttys3/nanodm.net.git
cd nanodm.net
# Linux/Mac
./dev
# 如果是Windows请执行
dev

# 然后打开 <http://localhost:1313/> 即可查看
# Linux
xdg-open http://localhost:1313/
# Mac
open http://localhost:1313/
# Windows
start http://localhost:1313/

也可以直接在浏览器输入地址打开 http://localhost:1313/

2. 我有文章想分享要怎么做

  1. fork此仓库
  2. clone你fork后的仓库到你本地
  3. 添加页面并push到你的仓库
  4. 提交一个PR(pull request)到这个仓库
  5. 如果文章OK,这边merge了你的PR后,文章就会出现在网站

3. 如何添加页面

为方便管理文章和图片之间的关联,我们采用Hugo的page bundle方式来写文章。

  1. 所有文章都在content/post目录下,采用markdown编写。 Front Matter 全部采用YAML格式。
  2. 每个文章都有自己的子目录,如/post/nanodm/beikeyun-remove-the-magic-resistor 这个文章, 其markdown文件位于content/post/nanodm/beikeyun-remove-the-magic-resistor/index.md
  3. 文章自己的资源文件(比如图片等)放在文章自己的目录下面, 具体可参考 /post/nanodm/beikeyun-remove-the-magic-resistor 这个文章的 markdown源码
  4. 推荐使用编辑器 vscode

4. vscode建议安装插件

打开 VS Code Quick Open (Ctrl+P), 粘贴以下命令并按Enter即可安装插件。 一些插件有一些注意事项,注意查看vscode插件页面的说明。

必备插件

Markdown Paste

写markdown必备神器,直接Ctrl+Alt+V (Cmd+Alt+V on Mac)粘贴图片文件到当前markdown的目录并自动填写此图片的markdown代码。

支持Mac/Windows/Linux,为了使这个插件正常工作,要求:

  1. Linux需要xclip
  2. Windows需要powershell
  3. Mac需要pbpaste
ext install telesoho.vscode-markdown-paste-image

Hugo Language and Syntax Support

ext install budparr.language-hugo-vscode

Hugo Shortcode Syntax Highlighting

ext install kaellarkin.hugo-shortcode-syntax

Hugo Snippets

ext install fivethree.vscode-hugo-snippets

hugofy with page bundle support

ext install ttys3.hugofy

Markdown All in One

ext install yzhang.markdown-all-in-one

Better TOML

ext install bungcip.better-toml

toml-formatter

ext install Iceyer.toml-formatter

Table Formatter

ext install shuworks.vscode-table-formatter

markdownlint

ext install DavidAnson.vscode-markdownlint

Markdown Shortcuts

ext install mdickin.markdown-shortcuts

Markdown Preview Enhanced

ext install shd101wyy.markdown-preview-enhanced

Color Highlight

ext install naumovs.color-highlight

Front Matter

ext install eliostruyf.vscode-front-matter

可选插件

Gruvbox Themes

ext install tomphilbin.gruvbox-themes

Markdown Checkbox

ext install PKief.markdown-checkbox

Settings Sync

ext install Shan.code-settings-sync

PostCSS syntax

ext install ricard.PostCSS

Modelines

ext install chrislajoie.vscode-modelines

change-case

ext install wmaurer.change-case