Hugo academic 设计理念

Reading time: 5 minutes and 27 seconds with 1202 words. 本文总阅读量

下面请看hugo academic的开始页面采用多个md文件组合在一起的设计,遵循widgets的设计理念,可单独 修改并去除。

hugo home design

不修改原则

不要在themes/主题/layout直接修改其中的layout布局,而应该拷贝该主题文件 到你的blog目录下的layout,并建立相似的文件架构,拷贝对应的文件,然后在 该拷贝文件中进行修改,请参考./layout/partials./layout/_default

他是和themes/academic/layout是相同的,但又增加了一些部分

方便后期升级主题 git submodule update --remote --merge

org-hugo

add C-c c A in your org-capture-templates, so you can create an entry with blog ideas


    ("A" "Blog Ideas" entry (file+headline "~/.emacs.d/Dropbox/GTD/orgBoss/blog.org" "Blog Ideas")
    "* TODO [#B] %?\n  %i\n %U"
    :empty-lines 1)

add below lisp with C-c c h in order to create an subtree in “Blog Ideas” with an blog title!

设置文章的tag和category。tag直接使用org的tag就行,而category则是前面加@符号的tag

当该子标题设置为Done的时候,ox-hugo自动帮你导出到对应的blog位置!很方便。

参考ox-hugo

(with-eval-after-load 'org-capture
  (defun org-hugo-new-subtree-post-capture-template ()
    "Returns `org-capture' template string for new Hugo post.
See `org-capture-templates' for more information."
    (let* ((title (read-from-minibuffer "Post Title: ")) ;Prompt to enter the post title

           (fname (org-hugo-slug title)))
      (mapconcat #'identity
                 `(
                   ,(concat "* TODO " title)
                   ":PROPERTIES:"
                   ,(concat ":EXPORT_FILE_NAME: " fname)
                   ":END:"
                   "\n\n")        ;Place the cursor here finally

                 "\n")))

  (add-to-list 'org-capture-templates
               '("x"              ;`org-capture' binding + h

                 "Hugo post"
                 entry
                 ;; It is assumed that below file is present in `org-directory'

                 ;; and that it has a "Blog Ideas" heading. It can even be a

                 ;; symlink pointing to the actual location of all-posts.org!

                 (file+headline "~/.emacs.d/Dropbox/GTD/orgBoss/blog.org" "Blog Ideas")
                 (function org-hugo-new-subtree-post-capture-template))))

C-c c x的templates可以进一步改造

不蒜子计数器

  1. 在partials/page_header添加js
  2. 在_defaults/single.html添加阅读量信息
  3. 在_defaults/list.html添加阅读量信息
  4. 在partials/page_footer.html添加站内统计

按照博文的tag和categories进行相关文章推荐

gohugo论坛提到相关内容的配置信息:

threshold = 1
[[related.indices]]
name = "keywords"
weight = 200
[[related.indices]]
name  = "tags"
weight = 100
[[related.indices]]
name  = "categories"
weight = 100

因为page_footer.html有这样的设置

{{ if ne .Type "page" }}
  {{ $related := site.RegularPages.Related . | first 5 }}
  {{ with $related }}
  <div class="article-widget content-widget-hr">
    <h3>{{ i18n "related" }}</h3>

    <ul>
      {{ range . }}
      <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>

      {{ end }}
    </ul>

{{ end }}

gulp压缩

安装node

自己前往 node官网 安装

安装gulp

npm install --save-dev gulp gulp-cli gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-uglify gulp-imagemin --registry=https://registry.npm.taobao.org

增加淘宝镜像源

1. 命令
npm config set registry https://registry.npm.taobao.org
2. 验证命令
npm config get registry
如果返回https://registry.npm.taobao.org,说明镜像配置成功。

一个 gulp 项目对应一个package.json,该文件可以通过npm init生成,或者自己新建也可以; 然后通过npm install即可更新,之所以放在devDependencies,因为npm install 会编译lib/install.js

{
  "name": "Hugo",
  "version": "1.0.0",
  "descrption": "website common usage",
  "dependencies": {
    "gulp-clean-css": "^4.2.0",
    "gulp-cli": "^2.2.0",
    "gulp-htmlclean": "^2.7.22",
    "gulp-htmlmin": "^5.0.1",
    "gulp-minify-css": "^1.2.4",
    "plugin-error": "^1.0.1"
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-imagemin": "^6.1.1",
    "gulp-htmlmin": "^5.0.1",
    "gifsicle": "^4.0.1",
    "jpegtran-bin": "^4.0.0",
    "optipng-bin": "^6.0.0",
    "svgo": "^0.7.2",
    "gulp-terser": "^1.2.0"
  }
}


因为,有时候gulp 下载下来得再node install一下


node node_modules/jpegoptim-bin/lib/install.js
node node_modules/optipng-bin/lib/install.js

一个gulp项目可以通过gulpfile.js中定义任务,如下为一个minify-images压缩图片命令, 可以通过gulp minify-images来执行图片压缩过程。

// 压缩图片
gulp.task('minify-images', function() {
    return gulp.src('./static/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({interlaced: true}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./static/images'))
});


Avatar
Ye Zhaoliang
Engineer of offshore wind turbine technique research

My research interests include distributed energy, wind turbine power generation technique , Computational fluid dynamic and programmable matter.

Related

本站访问量: