【11】把 GitHub 当 CMS 用

把 GitHub 当 CMS 用

 

你的网站需要显示一些文字，但是你还不想直接放在 HTML 里面，那你可以把 GitHub 作为你储存内容的一个地方。

这样，就可以让任何一个非程序员通过修改 Markdown 来修改 HTML 网页的内容。

 

我的方法是：在你的 GitHub 仓库中使用 markdown 文件来保存文本。在你网站的前端用一个组件来抓取这些文本并呈现在网页上。

 

我是玩 React 的，这里有个组件，用以抓取，解析并呈现到 HTML 上。

class Markdown extends React.Component {
 constructor(props) {
 super(props);class Markdown extends React.Component {
    constructor(props) {
      super(props);

      // replace with your URL, obviously
      this.baseUrl = 'https://raw.githubusercontent.com/davidgilbertson/about-github/master/text-snippets';

      this.state = {
        markdown: '',
      };
    }

    componentDidMount() {
      fetch(`${this.baseUrl}/${this.props.url}`)
        .then(response => response.text())
        .then((markdown) => {
          this.setState({markdown});
        });
    }

    render() {
      return (
        <div dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} />
      );
    }
}

（/text-snippets 这个文件夹是储存我的 markdown）

下面这段代码是上面组件的示例：

const Page = () => (
  <div className="page">
    <div className="about-us">
      <Markdown url="about-us.md" />
    </div>

    <div className="disclaimer">
      <p>A very important disclaimer:</p>

      <Markdown url="disclaimers/home-page-disclaimer.md" />
    </div>
  </div>
);

所以现在 GitHub 也是你的 CMS，无论你想要样大小的文字都可以。

 

 

 

**