美文网首页
搭建个人博客的各种坑

搭建个人博客的各种坑

作者: 辣么大大大大 | 来源:发表于2018-10-19 14:46 被阅读0次

里程碑

今天是一个里程碑,断断续续一年多,自己搭建博客遇到的各种问题基本得到解决。

现在整理一下解决问题的思路:

博客用到的东西:Github(托管静态网页)、Hugo、Sublime、Markdown、MathJax、免费图床(gitee)、留言(需要翻墙)

遇到的问题主要有:

图床问题:

使用免费图床是个大问题:目前的解决方案是将图片上床到gitee上,这样国内访问图片速度较快。

图片链接插入问题:

之前我写了自动生成链接的脚本,但是结果输出到了文本文件中,对于图片预览实时性的要求就无法满足。

平台不通用问题:

通用性的问题一直没有解决:对于Latex公式的支持,图床的支持

以前由于各个平台不通用的问题,导致我们一直只能在一个平台上写作。而各大平台又各有优缺点,总有令人不满意的地方。

这样下来在本地写的Markdown,不需要做修改可以支持CSDN博客(或者简书)了,直接复制过去就可以。

在未来不久印象笔记windows版本也会支持Markdown,真是个令人振奋的消息。

甚至我还使用过马克飞象,但是它只能配合印象笔记使用,对于跨平台的需求无法满足。

我的github

页面托管到了github上,有兴趣的话可以试着自己搭建一个静态博客。

https://gdhucoder.github.io/

图片本地预览、链接

大家都知道Markdown使用图片需要插入图片链接。

我们使用python写了个脚本,生成文件的缩略图,自动上传gitee,点击图片缩略图,获取链接到剪切板。

2018-10-19-001

接下来我又添加的每次打开Helper时,自动提交git,得到最新的图片

然后点击图片缩略图,图片的git地址(可供外网访问的地址)就被拷贝到了剪切板中,在使用的时候我们直接Ctrl+V就可以复制地址到Markdown文档中。

2018-10-19-002

这个脚本还支持子目录的打开预览。

因为如果我们只用一个文件夹管理所有的博客图片势必会没有层级结构,导致最后图片混乱。

我们可以建立子文件夹,存放各个主题的图片文件。

2018-10-19-003

Picture Helper使用方法:

  1. upload your pictures to github or gitee
  2. this script can generate latest 100 picture links
  3. click the thumb picture, then the link is clipped into you clipboard
  4. then use Ctrl+V in your own Markdown
  5. Enjoy!

另附代码

主要参考了PP4E的pyphoto的代码。

各位改改可以用到的地方:
1、自动提交git脚本
2、生成缩略图(PIL的使用)

"""
############################################################################
Introduction:

please upload your local picture folder as a repo in github or gitee(China).
then we can use the image link in our own markdown file
It's really helpful when you regularly write a blog use Markdown.

1. upload your pictures to github or gitee
2. this script can generate latest 100 picture links
3. click the thumb picture, then the link is clipped into you clipboard
4. then use Ctrl+V in your own Markdown
5. Enjoy!

Modify from PP4E: PyPhoto 1.1: thumbnail image viewer with resizing and saves.
Features:
1. support subdir in your local git folder
2. Please modify some constance in the script

huguodong
gdong.hu[at]gmail
2018-10-19
############################################################################
"""


import sys, math, os
from tkinter import *
from tkinter.filedialog import SaveAs, Directory

from PIL import Image                         # PIL Image: also in tkinter
from PIL.ImageTk import PhotoImage            # PIL photo widget replacement

# remember last dirs across all windows
saveDialog = SaveAs(title='Save As (filename gives image type)')
openDialog = Directory(title='Select Image Directory To Open')
git_master = "https://gitee.com/gdhu/prvpic/raw/master/"
local_git_root_folder = 'E:/gitpic/'
thumb_dir='thumbs'

trace = print  # or lambda *x: None
appname = 'MarkDown Picture Helper: '

class ScrolledCanvas(Canvas):
    """
    a canvas in a container that automatically makes
    vertical and horizontal scroll bars for itself
    """
    def __init__(self, container):
        Canvas.__init__(self, container)
        self.config(borderwidth=0)
        vbar = Scrollbar(container)
        hbar = Scrollbar(container, orient='horizontal')

        vbar.pack(side=RIGHT,  fill=Y)                 # pack canvas after bars
        hbar.pack(side=BOTTOM, fill=X)                 # so clipped first
        self.pack(side=TOP, fill=BOTH, expand=YES)

        vbar.config(command=self.yview)                # call on scroll move
        hbar.config(command=self.xview)
        self.config(yscrollcommand=vbar.set)           # call on canvas move
        self.config(xscrollcommand=hbar.set)


def onDirectoryOpen(event):
    """
    open a new image directory in new pop up
    available in both thumb and img windows
    """
    dirname = openDialog.show()
    if dirname:
        if dirname != local_git_root_folder:
            link = dirname
            link = link.replace(local_git_root_folder, '')
            link = link.replace(thumb_dir,'')
            master = git_master+link
            print(git_master+link)
            viewThumbs(dirname, kind=Toplevel,numcols=5, git=master)
        else:
            viewThumbs(dirname, kind=Toplevel, numcols=5, git=git_master)


def viewThumbs(imgdir, kind=Toplevel, numcols=None, height=400, width=500, git=None):
    """
    make main or pop-up thumbnail buttons window;
    uses fixed-size buttons, scrollable canvas;
    sets scrollable (full) size, and places
    thumbs at abs x,y coordinates in canvas;
    no longer assumes all thumbs are same size:
    gets max of all (x,y), some may be smaller;
    """
    win = kind()
    helptxt = '(press D to open other)'
    win.title(appname + imgdir + '  ' + helptxt)
    quit = Button(win, text='Quit', command=win.quit, bg='beige')
    quit.pack(side=BOTTOM, fill=X)
    linkLabel = Label(win, text='click thumb to copy gitlink to clipboard')
    linkLabel.pack(side=BOTTOM, fill=X)
    canvas = ScrolledCanvas(win)
    canvas.config(height=height, width=width)       # init viewable window size
                                                    # changes if user resizes
    thumbs = makeThumbs(imgdir)                     # [(imgfile, imgobj)]
    numthumbs = len(thumbs)
    if not numcols:
        numcols = int(math.ceil(math.sqrt(numthumbs)))  # fixed or N x N
    numrows = int(math.ceil(numthumbs / numcols))       # 3.x true div

    # max w|h: thumb=(name, obj), thumb.size=(width, height)
    linksize = max(max(thumb[1].size) for thumb in thumbs)
    trace(linksize)
    fullsize = (0, 0,                                   # upper left  X,Y
        (linksize * numcols), (linksize * numrows) )    # lower right X,Y
    canvas.config(scrollregion=fullsize)                # scrollable area size

    rowpos = 0
    savephotos = []
    if not git:
        git = git_master
    while thumbs:
        thumbsrow, thumbs = thumbs[:numcols], thumbs[numcols:]
        colpos = 0
        for (imgfile, imgobj) in thumbsrow:
            photo   = PhotoImage(imgobj)
            link    = Button(canvas, image=photo)
            text = Text()
            def handler(f=imgfile, txt=text,label=linkLabel):
                imglink = "![" + f.split('.')[0] + "](" + git + f + ")";
                txt.clipboard_clear()
                txt.clipboard_append(imglink)
                label.config(text=imglink)
                print(imglink)
            link.config(command=handler, width=linksize, height=linksize)
            link.pack(side=LEFT, expand=YES)
            canvas.create_window(colpos, rowpos, anchor=NW,
                    window=link, width=linksize, height=linksize)
            colpos += linksize
            savephotos.append(photo)
        rowpos += linksize
    win.bind('<KeyPress-d>', onDirectoryOpen)
    win.savephotos = savephotos
    return win

def makeThumbs(imgdir, size=(100, 100), subdir='thumbs', latest=None):
    """
    get thumbnail images for all images in a directory; for each image, create
    and save a new thumb, or load and return an existing thumb;  makes thumb
    dir if needed;  returns a list of (image filename, thumb image object);
    caller can also run listdir on thumb dir to load;  on bad file types may
    raise IOError, or other;  caveat: could also check file timestamps;
    """
    thumbdir = os.path.join(imgdir, subdir)
    if not os.path.exists(thumbdir):
        os.mkdir(thumbdir)

    thumbs = []
    file_list = os.listdir(imgdir)
    file_list.sort(key=lambda x: os.stat(imgdir + "/" + x).st_mtime, reverse=True)
    if not latest:
        limit_num = 50
    for imgfile in file_list[:limit_num]:
        print(imgfile)
        thumbpath = os.path.join(thumbdir, imgfile)
        if os.path.exists(thumbpath):
            thumbobj = Image.open(thumbpath)            # use already created
            thumbs.append((imgfile, thumbobj))
        else:
            print('making', thumbpath)
            imgpath = os.path.join(imgdir, imgfile)
            try:
                imgobj = Image.open(imgpath)            # make new thumb
                imgobj.thumbnail(size, Image.ANTIALIAS) # best downsize filter
                imgobj.save(thumbpath)                  # type via ext or passed
                thumbs.append((imgfile, imgobj))
            except:                                     # not always IOError
                print("Skipping: ", imgpath)
    return thumbs

def commitToGit():

    # 执行提交代码到git操作
    cmd = 'E:&cd E:\gitpic&git add --all&git commit -m "update"&git push -f origin master'
    # cmd = 'ipconfig'
    result = os.popen(cmd)
    print(result.read())



if __name__ == '__main__':

    commitToGit()

    """
    open dir = default or cmdline arg
    else show simple window to select
    """
    imgdir = 'E:\gitpic'
    if len(sys.argv) > 1:
        imgdir = sys.argv[1]
    if os.path.exists(imgdir):
        mainwin = viewThumbs(imgdir, kind=Tk,numcols=5)
    else:
        mainwin = Tk()
        mainwin.title(appname + 'Open')
        handler = lambda: onDirectoryOpen(None)
        Button(mainwin, text='Open Image Directory', command=handler).pack()
    mainwin.mainloop()

相关文章

  • 搭建个人博客的各种坑

    里程碑 今天是一个里程碑,断断续续一年多,自己搭建博客遇到的各种问题基本得到解决。 现在整理一下解决问题的思路: ...

  • 快速搭建个人博客

    # 前言: 这篇基于github的个人博客的搭建是查阅了网上各种资料,结合自己实际操作中遇到的各种坑而成。 参考链...

  • NexT主题配置优化-出土指南

    前段时间, 辛辛苦苦花了一周的时间搭建了属于自己的个人技术博客, 当然也是各种采坑各种跳, 大家如果在搭建过程中遇...

  • hexo5分钟免费搭建个人博客教程

    原文:hexo5分钟免费搭建个人博客教程 (第一次搭建个人博客,记录一下搭建方法还有那些踩过的坑) 环境:wind...

  • 使用Hexo & Github,搭建属于自己的博客

    经过在网上各种找资料,踩过各种坑,终于搭建好了hexo,直接与gitbub一起使用,搭建起自己的免费的博客。 关于...

  • GitHub+Hexo+NexT 搭建博客

    前言:本文基于GitHub搭建Hexo个人博客,使用的是NexT主题,由于我在博客搭建过程中踩了不少坑,用了快两天...

  • Hexo搭建流程简单攻略【Windows平台】

    使用Hexo搭建个人博客已经很常见了,但是在Windows平台下还是很多坑,繁繁琐琐,所以把我搭建的过程及遇到的坑...

  • Hexo博客搭建详细笔记(Win10+Gitee)

    目录 1、为什么要搭建个人博客 2、搭建个人博客的多种选择 (1)动态博客搭建 (2)静态博客搭建 3、先简要介绍...

  • vuepress搭建个人博客填坑

    我的博客 1.侧边栏 官网上讲了两种方式: 你可以使用对象将侧边栏链接分成多个组: 如果你希望为不同的页面组显示不...

  • 基于Github Pages 使用Hexo搭建个人博客

    从一个小白开始搭建个人博客,期间参考了不少博客,踩了无数坑才搭起来的,现在总结下,希望能帮助大家少踩点坑。 一、整...

网友评论

      本文标题:搭建个人博客的各种坑

      本文链接:https://www.haomeiwen.com/subject/dqwyzftx.html