svelteで、無料ブログ公開の例

2 min read

概要:

前のsvelteの関係で、ブログ等のCMS表示系機能の作成 vercelデプロイとなります。

  • jsonファイル(public/cms.json) を読込表示する構成です

  • jsonファイル編集機能は、前のReact版

  • sapper/SSG版と比較して。コンテンツ編集時に git pushする手間が増えた点が。欠点になりそうでした


環境

  • svelte: 3.17.3
  • svelte-spa-router

参考のデモページ

https://cms-kuc-svelte1-3cms.vercel.app/


参考のコード

https://github.com/kuc-arc-f/svelte1_3cms

実装など

  • index

posts/index.svelte

index.svelte
<script>
import {link} from 'svelte-spa-router'
import LibCommon from '../../lib/LibCommon';
export let posts = [];

async function get_items(){
  var dt = LibCommon.formatDate( new Date(), "YYYY-MM-DD_hhmmss");
  const res = await fetch(`/cms.json?` + dt  );
	const data = await res.json();
  var items =  LibCommon.get_reverse_items(data.items)
  posts =items
}
get_items() 
</script>

<!-- -->
<div class="container">
	<h3>Posts - index</h3>
  <hr />
  {#each posts as item}
  <h3><a href={`/posts/show/${item.save_id}`} use:link>{item.title}</a>
  </h3>
  <p>ID : {item.id}
  </p>  
  {/each}   
</div>



  • show/詳細

posts/show.svelte

show.svelte
<script>
import {link} from 'svelte-spa-router'
import marked from 'marked'
import LibCommon from '../../lib/LibCommon';
import LibCms from '../../lib/LibCms'

export let post = {};
export let params = Params
console.log(post)
//
async function get_items(){
  var dt = LibCommon.formatDate( new Date(), "YYYY-MM-DD_hhmmss");
  const res = await fetch(`/cms.json?` + dt  );
	const data = await res.json();
  var item  = LibCms.get_show_item( data.items, String(params.id) )
  item.content = marked(item.content)
  console.log(item)
  post =item
}
get_items() 
</script>

<!-- -->
<div class="container">
	<h1>{post.title}</h1>
  ID : {params.id}<br />
  Date : {post.created_at}
  <hr />
  <div id="post_item" >{@html post.content}
  </div>

</div>


....